/* =========================================================================
   King's School — Home page styles
   Ported from the Claude Design prototype (KingsSchools-Home.dc.html +
   SiteHeader / SiteFooter). Design-Concept mechanics (style-hover, DCLogic
   scroll states) are reproduced here as real CSS.
   Brand palette: navy #063A61 / deep navy #04273F, gold #c8993a / #c8993a,
   maroon #8A1A1F, cream #F7F1E6.
   ========================================================================= */

:root{
  --ks-display:'Fraunces',Georgia,serif;
}
*{box-sizing:border-box}
html,body{scroll-behavior:smooth;margin:0}
/* Clip sideways overflow at the ROOT too — body:overflow-x:hidden alone doesn't
   contain viewport-positioned decorative orbs/glows, which was adding ~55px of
   horizontal scroll on mobile (and mis-sizing the fixed header). clip (not
   hidden) avoids creating a scroll container, so it won't disturb pinning. */
html{overflow-x:clip}
body{
  font-family:'Mulish',system-ui,sans-serif;
  background:#F7F1E6;
  color:#16253C;
  overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:inherit}

/* Fraunces display tuning: modern-editorial cut (wonk & soft off), optical
   sizing on so large sizes get the high-contrast display masters. */
h1,h2,h3,blockquote,
.ks-mq,.ks-menu-primary a,.ks-footer-statement,.ks-quote-name{
  font-optical-sizing:auto;
  font-variation-settings:'SOFT' 0,'WONK' 0;
}

/* ---- Keyframes (home + header) ---------------------------------------- */
@keyframes ksScrollCue{0%{transform:translateY(0);opacity:.9}50%{transform:translateY(8px);opacity:.4}100%{transform:translateY(0);opacity:.9}}
@keyframes ksMouse{0%{transform:translateY(0);opacity:0}18%{opacity:1}55%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:0}}
@keyframes ksChev{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}
@keyframes ksFloat{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}
@keyframes ksPulse{0%{box-shadow:0 0 0 0 rgba(200,153,58,.5)}70%{box-shadow:0 0 0 16px rgba(200,153,58,0)}100%{box-shadow:0 0 0 0 rgba(200,153,58,0)}}
@keyframes ksReveal{from{opacity:0;transform:translateY(42px) scale(.965)}to{opacity:1;transform:none}}
@keyframes ksGlowDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-34px,22px) scale(1.08)}}

/* ---- Scroll reveal ----------------------------------------------------
   The prototype used inline `animation:ksReveal ...;animation-timeline:view()`.
   We reproduce it here: elements start hidden and reveal when scrolled into
   view (JS IntersectionObserver adds .is-in). Where the browser supports
   scroll-driven animations natively we still degrade gracefully. */
[data-ks-reveal]{opacity:0;transform:translateY(64px) scale(.965);transition:opacity 1.1s cubic-bezier(.16,.7,.3,1),transform 1.1s cubic-bezier(.16,.7,.3,1)}
[data-ks-reveal].is-in{opacity:1;transform:none}
.no-js [data-ks-reveal]{opacity:1;transform:none}
/* GSAP path owns initial states + easing — neutralize the CSS reveal so the
   two systems never double-drive the same properties. (Load-bearing rule.) */
html.ks-gsap [data-ks-reveal]{opacity:1;transform:none;transition:none}

/* ---- Generic hover utilities (converted from style-hover) ------------- */
.h-dim{transition:opacity .3s ease}
.h-dim:hover{opacity:.85}

.btn-gold{transition:filter .3s ease,gap .3s ease,transform .3s ease}
.btn-gold:hover{filter:brightness(1.06)}

/* Ghost + outline buttons get a fill-swipe hover: a panel wipes in from the
   left behind the label instead of a flat background swap. */
.btn-ghost{position:relative;overflow:hidden;isolation:isolate;transition:border-color .3s ease}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(255,255,255,.16);transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.3,.8,.3,1)}
.btn-ghost:hover{border-color:#fff}
.btn-ghost:hover::before{transform:scaleX(1)}

/* WhatsApp CTAs: brand icon inline, and the button adopts WhatsApp green on
   hover/focus. !important is required because these buttons carry inline
   background/border/color. For the ghost variant the existing left-wipe ::before
   is recoloured green so the fill animates in; the gold variant swaps to flat green. */
a[href*="wa.me"]{display:inline-flex!important;align-items:center;justify-content:center;gap:9px;transition:background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease}
a[href*="wa.me"] svg{width:19px;height:19px;flex:none}
a[href*="wa.me"].btn-ghost::before,a[href*="wa.me"].btn-outline-navy::before{background:#25D366}
a[href*="wa.me"]:hover,a[href*="wa.me"]:focus-visible{background:#25D366!important;border-color:#25D366!important;color:#fff!important;box-shadow:0 16px 34px -18px rgba(37,211,102,.85)!important;outline:none}

.btn-outline-navy{position:relative;overflow:hidden;isolation:isolate;transition:color .35s ease,gap .3s ease}
.btn-outline-navy::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#063A61;transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.3,.8,.3,1)}
/* !important because each button carries an inline navy color that would
   otherwise win over this and leave navy text on the navy fill (invisible). */
.btn-outline-navy:hover,.btn-outline-navy:hover *{color:#fff !important}
.btn-outline-navy:hover::before{transform:scaleX(1)}

.gap-grow{transition:gap .3s cubic-bezier(.16,.7,.3,1),filter .3s ease}
.gap-grow:hover{gap:14px}

.link-arrow{transition:gap .3s cubic-bezier(.16,.7,.3,1)}
.link-arrow:hover{gap:12px}

/* ---- Card lift + image zoom ------------------------------------------- */
.card-lift,.card-lift-8,.card-lift-5,.card-story,.card-innov{
  transition:transform .5s cubic-bezier(.16,.7,.3,1),box-shadow .5s ease,border-color .3s ease,background .3s ease;
}
.card-lift:hover{transform:translateY(-6px);box-shadow:0 30px 60px -40px rgba(6,32,54,.5);border-color:#c8993a}
.card-lift-8:hover{transform:translateY(-8px);box-shadow:0 40px 80px -50px rgba(6,32,54,.6);border-color:#c8993a}
.card-lift-5:hover{transform:translateY(-5px);box-shadow:0 30px 60px -46px rgba(6,32,54,.5);border-color:#c8993a}
.card-lift-5.is-navy:hover{transform:translateY(-5px);box-shadow:0 30px 60px -40px rgba(6,32,54,.7);border-color:#063A61}
.card-innov:hover{border-color:#c8993a;background:rgba(255,255,255,.07)}
.card-story:hover{transform:translateY(-6px)}

.zoom-img{transition:transform .7s cubic-bezier(.16,.7,.3,1)}
.card-lift-8:hover .zoom-img,
.card-innov:hover .zoom-img,
.card-story:hover .zoom-img{transform:scale(1.07)}
.gallery-tile{transition:filter .4s ease}
.gallery-tile:hover .zoom-img{transform:scale(1.08)}
.video-tile:hover{filter:brightness(1.03)}
.video-tile:hover .zoom-img{transform:scale(1.05)}

.ks-modal-close{transition:background .25s ease}
.ks-modal-close:hover{background:rgba(0,0,0,.7)}

/* =======================================================================
   HEADER
   ======================================================================= */
.ks-hdr-wrap{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:16px clamp(14px,3vw,30px);
  pointer-events:none;
  transition:padding .4s ease,transform .5s cubic-bezier(.3,.8,.3,1);
}
.ks-hdr-wrap.scrolled{padding:10px clamp(10px,3vw,22px)}
/* Smart hide/reveal: slides away scrolling down, glides back scrolling up (JS-driven) */
.ks-hdr-wrap.is-hidden{transform:translateY(-120%)}

/* Adaptive pill — two states:
   at the top of the page it is fully transparent (items float over the hero);
   once scrolled it condenses into deep navy glass with a gold hairline. */
.ks-pill{
  position:relative;max-width:1260px;margin:0 auto;pointer-events:auto;
  height:68px;border-radius:999px;
  padding:0 16px 0 clamp(22px,2.4vw,30px);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
  transition:height .4s ease,box-shadow .45s ease,background .45s ease,border-color .45s ease,backdrop-filter .45s ease;
}
.scrolled .ks-pill{
  height:58px;
  background:rgba(5,30,51,.88);
  border-color:rgba(200,162,74,.45);
  box-shadow:0 18px 44px -20px rgba(4,20,36,.7), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
}
/* Retired: the blue-glow gradient layers from the first pass */
.ks-pill-glow{display:none}
/* Pages that open on a LIGHT section (no dark .ks-phero hero) need the header in
   its glass state from the top, or the light nav text lands on light cream. */
.ks-page-light .ks-pill{
  background:rgba(5,30,51,.88);
  border-color:rgba(200,162,74,.45);
  box-shadow:0 18px 44px -20px rgba(4,20,36,.7), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
}

.ks-pill-logo{position:relative;display:flex;align-items:center;flex:none}
.ks-pill-logo img{height:50px;width:auto;transition:height .4s ease}
.scrolled .ks-pill-logo img{height:40px}

.ks-topnav{position:relative;display:flex;align-items:center;gap:clamp(12px,1.8vw,28px)}
/* Top-level items only (scoped with ">" so dropdown links don't inherit these) */
.ks-topnav > a,.ks-nav-item > a{
  position:relative;text-decoration:none;color:rgba(255,255,255,.86);
  font-size:14.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  transition:color .25s ease;
}
.ks-topnav > a:hover,.ks-nav-item > a:hover{color:#fff}
.ks-topnav > a::after,.ks-nav-item > a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;border-radius:2px;background:linear-gradient(90deg,#c8993a,#c8993a);transition:right .34s cubic-bezier(.16,.7,.3,1)}
.ks-topnav > a:hover::after,.ks-nav-item > a:hover::after{right:0}
/* Active page: gold dot under the item */
.ks-topnav > a.is-active::before,.ks-nav-item > a.is-active::before{content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:#c8993a}

/* ---- Nav dropdowns (About / Academics) ---- */
.ks-nav-item{position:relative;display:flex;align-items:center}
.ks-nav-item::after{content:"▾";font-size:8px;color:rgba(200,153,58,.7);margin-left:5px;transition:transform .3s ease;pointer-events:none}
.ks-nav-item:hover::after{transform:translateY(2px)}
.ks-nav-item::before{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:18px} /* hover bridge to the panel */
.ks-dropdown{
  position:absolute;top:calc(100% + 15px);left:50%;
  transform:translate(-50%,8px);
  min-width:224px;background:rgba(5,30,51,.97);
  border:1px solid rgba(200,162,74,.45);border-radius:14px;padding:8px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.75);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,transform .34s cubic-bezier(.3,.8,.3,1),visibility 0s linear .28s;
}
.ks-nav-item:hover .ks-dropdown,.ks-nav-item:focus-within .ks-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s;
}
.ks-dropdown a{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;text-decoration:none;color:rgba(255,255,255,.8);font-size:13.5px;font-weight:600;white-space:nowrap;transition:background .2s ease,color .2s ease}
.ks-dropdown a::before{content:"";width:5px;height:5px;border-radius:50%;background:#c8993a;opacity:.55;flex:none;transition:opacity .2s ease}
.ks-dropdown a:hover{background:rgba(200,162,74,.16);color:#fff}
.ks-dropdown a:hover::before{opacity:1}
.ks-dropdown a.is-active{color:#c8993a}
.ks-dropdown a.is-active::before{opacity:1}

.ks-pill-right{position:relative;display:flex;align-items:center;gap:10px;flex:none}
.ks-lang-wrap{position:relative}
.ks-lang-btn{
  cursor:pointer;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  height:42px;padding:0 14px;border-radius:999px;display:flex;align-items:center;gap:6px;
  transition:background .25s ease,border-color .25s ease;
}
.ks-lang-btn:hover,.ks-lang-btn[aria-expanded="true"]{background:rgba(255,255,255,.18);border-color:rgba(200,162,74,.65)}
.ks-lang-btn > span{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.ks-lang-btn[aria-expanded="true"] > span{transform:rotate(180deg)}
.ks-flag{width:20px;height:13px;border-radius:3px;object-fit:cover;flex:none;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.ks-lang-menu{
  position:absolute;top:48px;right:0;min-width:152px;background:#063A61;
  border:1px solid rgba(200,162,74,.28);border-radius:12px;padding:6px;
  display:flex;flex-direction:column;box-shadow:0 24px 48px -20px rgba(0,0,0,.7);
  transform-origin:top right;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-8px) scale(.96);
  transition:opacity .22s ease,transform .24s cubic-bezier(.16,1,.3,1),visibility .24s;
}
.ks-lang-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.ks-lang-menu a{text-decoration:none;color:rgba(255,255,255,.85);font-size:13px;font-weight:600;padding:8px 11px;border-radius:8px;display:flex;align-items:center;gap:10px;opacity:0;transform:translateX(6px);transition:background .2s ease,color .2s ease,opacity .25s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.ks-lang-menu.open a{opacity:1;transform:none}
.ks-lang-menu.open a:nth-child(2){transition-delay:.05s}
.ks-lang-menu.open a:nth-child(3){transition-delay:.1s}
.ks-lang-menu a:hover{background:rgba(200,162,74,.16);color:#fff}
@media (prefers-reduced-motion:reduce){.ks-lang-menu,.ks-lang-menu a,.ks-lang-btn > span{transition:none}}

.ks-apply-cta{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;height:44px;text-decoration:none;color:#063A61;
  font-size:14px;font-weight:800;letter-spacing:.02em;padding:0 22px;
  background:linear-gradient(180deg,#c8993a,#c8993a);border-radius:999px;
  box-shadow:0 10px 24px -12px rgba(200,162,74,.9);transition:filter .3s ease,transform .3s ease;
}
.ks-apply-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}
/* Periodic gold sheen sweep (killed by the reduced-motion block) */
@keyframes ksSheen{0%{transform:translateX(-180%) skewX(-18deg)}18%{transform:translateX(300%) skewX(-18deg)}100%{transform:translateX(300%) skewX(-18deg)}}
.ks-apply-cta::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:36%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-180%) skewX(-18deg);animation:ksSheen 5.5s ease-in-out 2.5s infinite;pointer-events:none}

.ks-menu-btn{
  display:flex;align-items:center;gap:10px;height:44px;padding:0 7px 0 16px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:999px;
  cursor:pointer;color:#fff;font-family:inherit;transition:background .3s ease,border-color .3s ease;
}
.ks-menu-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(200,162,74,.65)}
.ks-menu-btn .word{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ks-menu-btn .bars{display:flex;flex-direction:column;justify-content:center;gap:4px;width:30px;height:30px;border-radius:50%;background:#c8993a;align-items:center}
.ks-menu-btn .bars span{width:14px;height:2px;background:#063A61;border-radius:2px}

/* ---- Full-screen menu overlay ----------------------------------------- */
.ks-menu-overlay{position:fixed;inset:0;z-index:1100;background:#04273F;overflow:auto;display:none}
.ks-menu-overlay.open{display:block}
.ks-menu-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(200,162,74,.12) 1.2px,transparent 1.6px);background-size:22px 22px;pointer-events:none}
.ks-menu-orb-1{position:absolute;top:-160px;right:-140px;width:540px;height:540px;border-radius:50%;background:radial-gradient(circle,rgba(155,27,30,.4),transparent 62%);pointer-events:none;animation:ksGlowDrift 13s ease-in-out infinite}
.ks-menu-orb-2{position:absolute;bottom:-180px;left:-120px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(200,162,74,.1),transparent 64%);pointer-events:none;animation:ksGlowDrift 17s ease-in-out infinite reverse}
.ks-menu-inner{position:relative;max-width:1320px;margin:0 auto;padding:0 clamp(18px,3vw,40px);min-height:100vh;display:flex;flex-direction:column}
.ks-menu-top{height:86px;display:flex;align-items:center;justify-content:space-between;flex:none}
.ks-menu-top img{height:46px;width:auto}
/* Logo fades + drops in each time the full-screen menu opens. */
@keyframes ksMenuLogoIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.ks-menu-overlay.open .ks-menu-top img{animation:ksMenuLogoIn .55s cubic-bezier(.16,.7,.3,1) .1s both}
.ks-menu-close{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .4s cubic-bezier(.16,.7,.3,1),background .3s ease,border-color .3s ease}
.ks-menu-close:hover{background:#9B1B1E;transform:rotate(90deg) scale(1.05);border-color:#9B1B1E}

.ks-menu-grid{flex:1;display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,5vw,90px);align-content:center;padding:clamp(24px,4vh,60px) 0 40px}
.ks-menu-primary{display:flex;flex-direction:column}
.ks-menu-primary a{
  display:flex;align-items:center;gap:20px;text-decoration:none;
  padding:clamp(9px,1.2vh,15px) 8px;border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff;font-family:var(--ks-display);font-size:clamp(25px,3.3vw,44px);font-weight:600;letter-spacing:-.01em;
  border-radius:10px;transition:color .3s ease,padding-left .4s cubic-bezier(.16,.7,.3,1),background .3s ease;
}
.ks-menu-primary a:hover{color:#c8993a;padding-left:22px;background:rgba(255,255,255,.05)}
.ks-menu-primary .ks-num{font-family:'Mulish',sans-serif;font-size:13px;font-weight:800;color:#9B1B1E;letter-spacing:.08em;flex:none;transition:color .3s ease,transform .35s cubic-bezier(.16,.7,.3,1)}
.ks-menu-primary a:hover .ks-num{color:#c8993a;transform:translateX(3px)}
.ks-menu-primary .ks-arrow{
  margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(200,153,58,.45);color:#c8993a;display:grid;place-items:center;
  opacity:0;transform:translateX(-16px);
  transition:opacity .3s ease,transform .45s cubic-bezier(.16,.7,.3,1),background-color .3s ease,border-color .3s ease;
}
.ks-menu-primary a:hover .ks-arrow{opacity:1;transform:translateX(0);background-color:rgba(200,153,58,.14)}

.ks-menu-disc-label{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:#c8993a;margin-bottom:22px}
.ks-menu-secondary{display:grid;grid-template-columns:1fr 1fr;gap:2px 28px}
.ks-menu-secondary a{display:flex;align-items:center;gap:9px;text-decoration:none;color:rgba(255,255,255,.74);font-size:15px;font-weight:600;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);transition:color .25s ease,padding-left .25s ease}
.ks-menu-secondary a:hover{color:#fff;padding-left:5px}
.ks-menu-secondary .ks-sdot{width:0;height:2px;background:#c8993a;opacity:0;flex:none;border-radius:2px;transition:width .3s cubic-bezier(.16,.7,.3,1),opacity .3s ease}
.ks-menu-secondary a:hover .ks-sdot{width:16px;opacity:1}
.ks-menu-cta{margin-top:34px;padding:22px 24px;background:rgba(155,27,30,.16);border:1px solid rgba(155,27,30,.4);border-radius:16px}
.ks-menu-cta h4{font-family:var(--ks-display);font-size:19px;color:#fff;margin:0 0 6px;font-weight:600}
.ks-menu-cta p{font-size:13.5px;color:rgba(255,255,255,.7);line-height:1.55;margin:0 0 16px}
.ks-menu-footer{flex:none;border-top:1px solid rgba(255,255,255,.1);padding:22px 0 30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.ks-menu-footer .est{display:flex;align-items:center;gap:10px;font-size:12.5px;color:rgba(255,255,255,.6)}
.ks-menu-footer .est span{width:7px;height:7px;border-radius:50%;background:#c8993a}
.ks-menu-langs{display:flex;align-items:center;gap:8px}
.ks-menu-langs .active{font-size:13px;font-weight:700;color:#fff;padding:7px 14px;background:rgba(255,255,255,.1);border-radius:999px}
.ks-menu-langs a{text-decoration:none;font-size:13px;font-weight:600;color:rgba(255,255,255,.7);padding:7px 14px;border-radius:999px;transition:all .25s ease}
.ks-menu-langs a:hover{color:#fff;background:rgba(255,255,255,.08)}

/* =======================================================================
   FOOTER
   ======================================================================= */
.ks-footer{font-family:'Mulish',system-ui,sans-serif;background:#04273F;color:rgba(255,255,255,.72);position:relative;overflow:hidden}
.ks-footer-orb{position:absolute;top:-140px;right:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(200,162,74,.12),transparent 62%);pointer-events:none}
.ks-footer-inner{max-width:1320px;margin:0 auto;padding:clamp(56px,7vw,92px) clamp(18px,3vw,40px) 40px;position:relative}
.ks-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.5fr;gap:clamp(28px,4vw,64px)}
.ks-footer-brand img{height:66px;width:auto;margin-bottom:22px}
.ks-footer-statement{
  font-family:var(--ks-display);font-weight:600;
  font-size:clamp(38px,5.5vw,84px);line-height:1.04;letter-spacing:-.02em;color:#fff;
  margin:0 0 clamp(44px,6vw,72px);padding-bottom:clamp(28px,4vw,44px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.ks-footer-statement em{font-style:italic;color:#c8993a}
.ks-footer-brand p{font-size:14px;line-height:1.7;margin:16px 0 22px;max-width:320px}
.ks-footer-social{display:flex;gap:10px}
.ks-footer-social a{position:relative;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:background .25s ease,border-color .25s ease,color .25s ease}
.ks-footer-social a svg{width:19px;height:19px;display:block}
.ks-footer-social a:hover,.ks-footer-social a:focus-visible{background:rgba(200,162,74,.18);border-color:#c8993a;color:#c8993a;outline:none}
/* Hover/focus reveals the platform name as a small tooltip above the icon. */
.ks-footer-social a::after{content:attr(data-soc);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);background:#04273F;color:#fff;font-size:11px;font-weight:700;letter-spacing:.03em;line-height:1;padding:6px 9px;border-radius:7px;white-space:nowrap;border:1px solid rgba(200,162,74,.45);box-shadow:0 10px 24px -12px rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.ks-footer-social a::before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#04273F;opacity:0;transition:opacity .2s ease}
.ks-footer-social a:hover::after,.ks-footer-social a:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
.ks-footer-social a:hover::before,.ks-footer-social a:focus-visible::before{opacity:1}
.ks-footer-col-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#c8993a;font-weight:700;margin-bottom:20px}
.ks-footer-link{display:block;text-decoration:none;color:rgba(255,255,255,.72);font-size:14.5px;padding:8px 0;transition:color .25s ease,padding-left .25s ease}
.ks-footer-link:hover{color:#fff;padding-left:5px}
.ks-footer-contact p{font-size:14.5px;line-height:1.7;margin:0 0 14px;color:rgba(255,255,255,.8)}
.ks-footer-contact a.plain{display:block;text-decoration:none;color:rgba(255,255,255,.72);font-size:14.5px;padding:5px 0;transition:color .25s ease}
.ks-footer-contact a.plain:hover{color:#fff}
.ks-footer-map{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:#c8993a;font-size:14px;font-weight:700;margin-top:10px;transition:gap .25s ease}
.ks-footer-map:hover{gap:11px}
.ks-footer-news{margin-top:26px;padding:18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.ks-footer-news .lbl{font-size:13.5px;font-weight:700;color:#fff;margin-bottom:10px}
.ks-footer-news .row{display:flex;gap:8px}
.ks-footer-news input{flex:1;min-width:0;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:11px 12px;color:#fff;font-family:inherit;font-size:13.5px;outline:none}
.ks-footer-news input::placeholder{color:rgba(255,255,255,.5)}
.ks-footer-news button{cursor:pointer;border:0;border-radius:9px;padding:0 16px;font-family:inherit;font-weight:800;font-size:13.5px;color:#063A61;background:linear-gradient(180deg,#c8993a,#c8993a);transition:filter .25s ease}
.ks-footer-news button:hover{filter:brightness(1.05)}
.ks-footer-rule{height:1px;background:rgba(255,255,255,.1);margin:44px 0 26px}
.ks-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.ks-footer-copy{font-size:13px;color:rgba(255,255,255,.5)}
.ks-footer-blangs{display:flex;align-items:center;gap:8px}
.ks-footer-blangs a{text-decoration:none;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;transition:color .25s ease,border-color .25s ease,background .25s ease}
.ks-footer-blangs a.active{color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.14)}
.ks-footer-blangs a.active:hover{color:#fff;border-color:#c8993a}
.ks-footer-blangs a.muted{color:rgba(255,255,255,.5)}
.ks-footer-blangs a.muted:hover{color:#fff}
.ks-footer-legal{display:flex;gap:18px}
.ks-footer-legal a{text-decoration:none;color:rgba(255,255,255,.5);font-size:13px;transition:color .25s ease}
.ks-footer-legal a:hover{color:#fff}

/* =======================================================================
   WOW-PASS COMPONENTS (grain, progress, hero lockup, marquee, stats,
   eyebrows, ghost numerals, panels, innovation pin, quote, filters)
   ======================================================================= */

/* ---- Film grain + scroll progress ---- */
.ks-grain{
  position:fixed;inset:0;z-index:1500;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:240px 240px;
}
.ks-progress{
  position:fixed;top:0;left:0;right:0;height:2.5px;z-index:1200;pointer-events:none;
  background:linear-gradient(90deg,#c8993a,#c8993a);
  transform:scaleX(0);transform-origin:0 50%;
}

/* ---- Eyebrows (unified: navy on cream, gold on dark) ---- */
.ks-eyebrow{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#0A4E7A;display:inline-block;padding:7px 16px;border-radius:999px;border:1px solid transparent;background:rgba(140,120,90,.10);background:color-mix(in srgb,currentColor 12%,transparent);border-color:color-mix(in srgb,currentColor 28%,transparent)}
.ks-eyebrow--gold{color:#c8993a}

/* ---- Active nav state (per-page highlight) ----
   Only the desktop top nav marks the current page (gold text + the gold dot
   below — distinct from its white-underline hover). The full-screen menu
   overlay is deliberately NOT marked: styling its current item gold / with an
   expanded dot made it look permanently hovered. Hover still works normally. */
.ks-topnav > a.is-active,.ks-nav-item > a.is-active{color:#c8993a}

/* ---- Interior page hero (shared across every non-home page) ---- */
.ks-phero{
  position:relative;min-height:clamp(56vh,62vh,74vh);display:flex;align-items:flex-end;
  padding:clamp(150px,20vh,210px) clamp(18px,5vw,72px) clamp(56px,8vh,88px);
  overflow:hidden;background:#04273F;
}
.ks-phero-bg{position:absolute;inset:0;overflow:hidden}
.ks-phero-bg > div{position:absolute;top:-14%;left:0;right:0;height:128%;background-size:cover;background-position:center;background-repeat:no-repeat}
.ks-phero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,28,47,.5) 0%,rgba(4,20,36,.86) 100%)}
.ks-phero-scrim.side{background:linear-gradient(90deg,rgba(4,20,36,.8) 0%,rgba(4,20,36,.42) 55%,rgba(4,20,36,.16) 100%),linear-gradient(180deg,transparent 40%,rgba(4,20,36,.7))}
.ks-phero-inner{position:relative;max-width:1320px;margin:0 auto;width:100%;z-index:2}
.ks-phero-kicker{display:inline-flex;align-items:center;margin-bottom:22px}
.ks-phero h1{
  font-family:var(--ks-display);font-weight:600;
  font-size:clamp(40px,6vw,88px);line-height:1.02;letter-spacing:-.025em;color:#fff;margin:0;max-width:17ch;
}
.ks-phero h1 em{font-style:italic;font-weight:500;color:#a87d1e} /* a11y: 3:1+ on the light hero */
.ks-phero p{font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:rgba(255,255,255,.85);max-width:62ch;margin:24px 0 0}
@media (max-width:760px){ .ks-phero{min-height:52vh;padding-top:130px} }

/* ---- Shared content helpers for interior pages ---- */
.ks-section{padding:clamp(84px,10vw,140px) clamp(18px,5vw,72px)}
.ks-section.tint{background:#FBF8F1;border-top:1px solid #EEE4D0}
.ks-wrap{max-width:1320px;margin:0 auto}
.ks-wrap-narrow{max-width:820px;margin:0 auto}
.ks-h2{font-family:var(--ks-display);font-weight:600;font-size:clamp(38px,5vw,72px);line-height:1.05;letter-spacing:-.02em;color:#063A61;margin:0}
.ks-lead{font-size:17px;line-height:1.78;color:#5F5848}
.ks-card{background:#fff;border:1px solid #EADFC8;border-radius:18px}

/* ---- Ghost chapter numerals ---- */
.ks-chapter{position:relative;z-index:0}

/* ============ About page — the "King's Story" editorial feature ============ */
/* In-page anchor targets (About dropdown/footer jump to these) must clear the fixed header. */
main > section[id]{scroll-margin-top:100px}
/* Quiet values list — deliberately boxless, hairline-divided rows (the calm
   counterweight to the dense Reasons mosaic that follows it). */
.ks-value-row{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.4vw,46px);
  align-items:center;padding:clamp(22px,2.8vw,34px) 0;border-top:1px solid #EADFC8;
}
.ks-value-row:last-child{border-bottom:1px solid #EADFC8}
.ks-value-num{display:flex;align-items:center;justify-content:center;width:clamp(40px,4vw,52px);height:clamp(40px,4vw,52px);border-radius:50%;background:rgba(138,26,31,.07);color:#8A1A1F}
.ks-value-row.is-gold .ks-value-num{color:#c8993a;background:rgba(200,153,58,.12)}
.ks-value-row.is-gold .ks-value-num{color:#c8993a}   /* Innovation — rhymes with the gold Reasons tile */
/* Reasons mosaic — rich mixed-size grid; auto-placement fills cleanly given DOM
   order: feature(2x2) → 4 small → photo(2x1) → 2 small = 3 tidy rows. */
.ks-reasons-mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,1fr);gap:16px}
.ks-rtile{border-radius:18px;padding:26px 24px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.ks-rtile-glass{background:rgba(255,255,255,.045);border:1px solid rgba(200,162,74,.2)}
.ks-rtile-gold{background:linear-gradient(160deg,#d9a83f,#c19236);border:1px solid #c8993a}
.ks-rtile-feat{grid-column:span 2;grid-row:span 2}
.ks-rtile-photo{grid-column:span 2}
@media (max-width:900px){
  .ks-reasons-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(150px,auto)}
  .ks-rtile-feat,.ks-rtile-photo{grid-column:span 2;grid-row:auto;min-height:220px}
}
@media (max-width:560px){
  .ks-reasons-mosaic{grid-template-columns:1fr}
  .ks-rtile-feat,.ks-rtile-photo{grid-column:span 1}
}

/* ---- Hero frame ----
   Default frame inset mirrors the JS formula (max(20px, min(50px, 3.4vw)))
   so the very first paint — before any scroll or script — already matches
   what the scrub computes. Header items then align inside the video panel. */
#ks-hero{--ks-fr:clamp(20px,3.4vw,50px)}

/* ---- Hero lockup ---- */
.ks-hero-content{position:absolute;inset:0;display:flex;align-items:flex-end;padding:96px clamp(22px,5vw,66px) clamp(28px,4.5vh,54px);z-index:3}
.ks-hero-lockup{width:100%;max-width:1180px}
.ks-hero-kicker{display:inline-flex;align-items:center;gap:13px;margin-bottom:clamp(14px,2.2vh,26px)}
.ks-hero-title{
  font-family:var(--ks-display);font-weight:600;
  font-size:clamp(46px,min(7.4vw,12.5vh),110px);
  line-height:1.02;letter-spacing:-.025em;color:#fff;margin:0;
}
.ks-line{display:block;overflow:clip;padding-bottom:.12em;margin-bottom:-.12em}
.ks-line-in{display:block}
.ks-line-accent{font-style:italic;font-weight:500;color:#c8993a}
.ks-hero-sub{font-size:clamp(15px,1.4vw,18px);line-height:1.7;color:rgba(255,255,255,.85);max-width:560px;margin:clamp(16px,2.4vh,28px) 0 0;font-weight:400}
.ks-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:clamp(26px,3.8vh,44px)}
/* Hero background-video play/pause toggle (bottom-right, below the scroll cue) */
.ks-hero-vidbtn{position:absolute;right:clamp(20px,4vw,52px);bottom:clamp(24px,4vh,40px);z-index:4;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.42);background:rgba(4,20,36,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s ease}
.ks-hero-vidbtn:hover{background:rgba(200,153,58,.92);border-color:#c8993a;color:#063A61;transform:scale(1.06)}
.ks-hero-vidbtn:focus-visible{outline:2px solid #c8993a;outline-offset:3px}
.ks-hero-vidbtn svg{width:18px;height:18px;fill:currentColor;display:block}
.ks-hero-vidbtn .ks-ic-play{display:none;margin-left:2px}
.ks-hero-vidbtn.is-paused .ks-ic-pause{display:none}
.ks-hero-vidbtn.is-paused .ks-ic-play{display:block}
/* Back-to-top — JS-injected site-wide (main.js), shown once scrolled past ~1 screen */
.ks-totop{position:fixed;right:clamp(16px,2.5vw,30px);bottom:clamp(16px,2.5vw,30px);z-index:60;width:52px;height:52px;border-radius:50%;border:1px solid rgba(200,153,58,.5);background:rgba(6,58,97,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 16px 34px -16px rgba(4,20,36,.7);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .4s cubic-bezier(.16,.7,.3,1),transform .4s cubic-bezier(.16,.7,.3,1),background .3s ease,border-color .3s ease,color .3s ease}
.ks-totop.is-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.ks-totop.is-visible:hover{background:#c8993a;border-color:#c8993a;color:#063A61;transform:translateY(-3px) scale(1.06)}
.ks-totop:focus-visible{outline:2px solid #c8993a;outline-offset:3px}
.ks-totop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;display:block}

/* ---- Slogan marquee ---- */
.ks-marquee{
  position:relative;background:#04273F;overflow:hidden;
  border-top:1px solid rgba(200,162,74,.2);border-bottom:1px solid rgba(200,162,74,.2);
  padding:clamp(9px,1.3vw,15px) 0;
}
.ks-marquee-track{display:flex;width:max-content;will-change:transform}
.ks-marquee-group{display:flex;align-items:center;gap:clamp(28px,3.5vw,54px);padding-right:clamp(28px,3.5vw,54px)}
.ks-mq{font-family:var(--ks-display);font-weight:600;font-size:clamp(12px,1.6vw,22px);letter-spacing:-.01em;white-space:nowrap}
.ks-mq.solid{color:#c8993a}
.ks-mq.outline{color:#fff;-webkit-text-stroke:0}
.ks-marquee i{font-style:normal;color:rgba(200,162,74,.55);font-size:7px;flex:none}

/* ---- Stats band ---- */
.ks-stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.ks-stat{text-align:center;padding:clamp(8px,1.8vw,26px)}
.ks-stat + .ks-stat{border-left:1px solid rgba(200,162,74,.26)}
.ks-stats-line{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 16px;
  margin-top:clamp(40px,5vw,64px);font-size:13.5px;font-weight:600;letter-spacing:.04em;
  color:rgba(255,255,255,.75);
}
.ks-stats-line i{color:#c8993a;font-style:normal}

/* ---- Expanding division panels ---- */
.ks-panels{display:flex;gap:16px;height:clamp(440px,60vh,600px)}
.ks-panel{
  position:relative;flex:1;min-width:0;display:block;text-decoration:none;
  border-radius:20px;overflow:hidden;background:#0A4E7A;
  transition:flex .68s cubic-bezier(.3,.8,.3,1);
  outline-offset:4px;
}
.ks-panels:hover .ks-panel:not(:hover){flex:.74}
.ks-panel:hover,.ks-panel:focus-visible{flex:2.35}
.ks-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,.7,.3,1)}
.ks-panel:hover img{transform:scale(1.06)}
.ks-panel-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,20,36,.08) 32%,rgba(4,20,36,.85))}
.ks-panel-badge{position:absolute;top:18px;left:18px;font-size:12px;font-weight:700;letter-spacing:.06em;color:#063A61;background:#c8993a;padding:6px 12px;border-radius:999px}
.ks-panel-body{
  position:absolute;left:14px;right:14px;bottom:14px;color:#fff;
  padding:18px 20px;border-radius:16px;border:1px solid transparent;
  transition:background-color .45s ease,border-color .45s ease,backdrop-filter .45s ease,-webkit-backdrop-filter .45s ease;
}
/* Glossy glass chip behind the text on hover — keeps copy readable over any photo */
.ks-panel:hover .ks-panel-body,.ks-panel:focus-visible .ks-panel-body{
  background-color:rgba(8,30,50,.44);
  border-color:rgba(255,255,255,.2);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);   /* top light line = the gloss */
}
.ks-panel-body h3{font-family:var(--ks-display);font-weight:600;font-size:clamp(24px,2.3vw,34px);letter-spacing:-.01em;margin:0 0 10px}
.ks-panel-body p,.ks-panel-link{
  opacity:0;transform:translateY(12px);
  transition:opacity .45s ease .14s,transform .55s cubic-bezier(.16,.7,.3,1) .14s;
}
.ks-panel-body p{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.85);margin:0 0 14px;max-width:430px}
.ks-panel-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:#c8993a}
.ks-panel:hover .ks-panel-body p,.ks-panel:hover .ks-panel-link,
.ks-panel:focus-visible .ks-panel-body p,.ks-panel:focus-visible .ks-panel-link{opacity:1;transform:none}

/* ---- Innovation: pinned horizontal gallery ---- */
.ks-innov{position:relative;background:#04273F;color:#fff;overflow:hidden}
.ks-innov-ghost{
  position:absolute;top:clamp(16px,4vh,44px);left:clamp(8px,2vw,32px);z-index:0;
  font-family:var(--ks-display);font-weight:600;line-height:1;white-space:nowrap;
  font-size:clamp(110px,16vw,250px);letter-spacing:.01em;
  color:transparent;-webkit-text-stroke:1.5px rgba(200,153,58,.09);
  pointer-events:none;
}
.ks-innov-viewport{position:relative;z-index:1;height:100vh;min-height:620px;display:flex;align-items:center;overflow:hidden}
.ks-innov-track{display:flex;align-items:center;gap:clamp(20px,2.6vw,36px);padding:0 clamp(18px,5vw,72px);width:max-content}
.ks-innov-intro{flex:0 0 min(560px,78vw)}
.ks-innov-hint{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.48);white-space:nowrap}
.ks-innov-card{
  position:relative;flex:0 0 clamp(330px,29vw,430px);
  background:rgba(255,255,255,.04);border:1px solid rgba(200,162,74,.22);border-radius:18px;
  overflow:hidden;transition:border-color .3s ease,background .3s ease;
}
.ks-innov-card:hover{border-color:#c8993a;background:rgba(255,255,255,.07)}
.ks-innov-media{aspect-ratio:16/10;overflow:hidden}
.ks-innov-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,.7,.3,1)}
.ks-innov-card:hover .ks-innov-media img{transform:scale(1.06)}
.ks-innov-body{padding:26px 24px 30px}
.ks-innov-body h3{font-size:19px;font-weight:800;color:#fff;margin:0 0 9px}
.ks-innov-body p{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.68);margin:0}
.ks-innov-num{
  position:absolute;top:10px;right:16px;z-index:2;
  font-family:var(--ks-display);font-weight:600;font-size:52px;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(200,153,58,.5);
  pointer-events:none;
}
/* Flow fallback (mobile, reduced-motion, or no GSAP): native scroll-snap row */
@media (max-width:1023.98px){
  .ks-innov-viewport{height:auto;min-height:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:clamp(64px,9vw,96px) 0;align-items:stretch}
  .ks-innov-track{align-items:stretch}
  .ks-innov-intro,.ks-innov-card{scroll-snap-align:center}
}
html.ks-no-pin .ks-innov-viewport{height:auto;min-height:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:clamp(64px,9vw,96px) 0;align-items:stretch}
html.ks-no-pin .ks-innov-track{align-items:stretch}
html.ks-no-pin .ks-innov-intro,html.ks-no-pin .ks-innov-card{scroll-snap-align:center}

/* ---- Open Lessons interlock ---- */
@media (min-width:1024px){
  .ks-pullup{margin-top:-110px}
}

/* ---- Leadership quote ---- */
.ks-quote{position:relative;background:#04273F;color:#fff;padding:clamp(100px,13vw,180px) clamp(18px,5vw,72px);overflow:hidden}
.ks-quote::before{
  content:"";position:absolute;right:-140px;bottom:-160px;width:580px;height:580px;
  background:url("../assets/logo-crest-color.png") center/contain no-repeat;
  opacity:.05;filter:grayscale(1) brightness(2.6);pointer-events:none;
}
.ks-quote-mark{
  position:absolute;top:clamp(18px,4vw,48px);left:50%;transform:translateX(-50%);
  font-family:var(--ks-display);font-size:clamp(130px,17vw,230px);line-height:.9;
  color:rgba(200,162,74,.26);pointer-events:none;
}
.ks-quote-inner{position:relative;max-width:1080px;margin:0 auto;text-align:center}
.ks-quote blockquote{
  margin:0;font-family:var(--ks-display);font-style:italic;font-weight:500;
  font-size:clamp(28px,3.8vw,58px);line-height:1.22;letter-spacing:-.01em;color:#fff;
}
.ks-quote blockquote .ks-w{display:inline-block}
.ks-quote-attr{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:clamp(30px,4.5vw,48px);flex-wrap:wrap}
.ks-quote-rule{width:36px;height:1.5px;background:#c8993a;flex:none}
.ks-quote-attr>div{text-align:left}
.ks-quote-name{font-family:var(--ks-display);font-weight:600;font-size:19px;color:#c8993a}
.ks-quote-role{font-size:13px;color:rgba(255,255,255,.62);margin-top:2px}
.ks-quote-link{text-decoration:none;color:#fff;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:8px;opacity:.85}
.ks-quote-link:hover{opacity:1}

/* ---- Gallery filters ---- */
.ks-filter{
  cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;color:#5F5848;
  background:#fff;border:1px solid #EADFC8;padding:9px 18px;border-radius:999px;
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.ks-filter:hover{border-color:#c8993a;color:#063A61}
.ks-filter.is-active{color:#fff;background:#063A61;border-color:#063A61;font-weight:700}
.ks-filter:focus-visible{outline:2px solid #c8993a;outline-offset:2px}
.ks-gtile.is-hidden{display:none}

/* ---- Home gallery: featured video banner + uniform filterable grid ----
   Uniform fixed-size tiles mean filtering just reflows the survivors instead
   of stretching them (the old auto-fit + spanning grid broke on filter). */
.ks-gfeature{position:relative;display:block;width:100%;border:0;padding:0;cursor:pointer;font-family:inherit;aspect-ratio:16/6;border-radius:18px;overflow:hidden;background:#04273F;transition:filter .4s ease}
.ks-gfeature:hover{filter:brightness(1.04)}
.ks-gfeature:hover .zoom-img{transform:scale(1.04)}
/* position:relative anchors the absolutely-positioned "leaving" tiles during a
   filter transition; align-content:start keeps rows their natural size when JS
   momentarily locks the grid height taller than the content (so tiles never
   stretch mid-glide). Neither affects the normal auto-height layout. */
#ks-gallery-grid{position:relative;align-content:start}
#ks-gallery-grid .gallery-tile{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#0A4E7A}
.ks-gtile-chip{position:absolute;top:12px;left:12px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.04em;color:#063A61;background:#c8993a;padding:5px 11px;border-radius:999px;pointer-events:none}
#ks-gallery-empty{display:none;text-align:center;padding:44px 0 8px;color:#8A8163;font-size:15px;font-weight:600}

/* ---- Clickable photo tiles + lightbox ----
   Tiles get a zoom-in cursor and a magnifier badge on hover so it's obvious
   they open a larger view; clicking any tile opens the lightbox (JS). */
.gallery-tile{cursor:zoom-in}
.gallery-tile::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(4,20,36,.3);opacity:0;transition:opacity .3s ease;pointer-events:none}
.gallery-tile::before{content:"";position:absolute;top:50%;left:50%;z-index:3;transform:translate(-50%,-50%) scale(.82);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063A61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35M11 8v6M8 11h6'/%3E%3C/svg%3E") center/22px no-repeat;opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.gallery-tile:hover::after,.gallery-tile:focus-visible::after{opacity:1}
.gallery-tile:hover::before,.gallery-tile:focus-visible::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
.gallery-tile:focus-visible{outline:2px solid #c8993a;outline-offset:3px}

@keyframes ksLbIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.ks-lightbox{position:fixed;inset:0;z-index:2100;display:none;align-items:center;justify-content:center;padding:clamp(14px,4vw,48px);background:rgba(4,10,20,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ks-lightbox.open{display:flex}
.ks-lb-fig{margin:0;max-width:min(1100px,94vw);display:flex;flex-direction:column;align-items:center;gap:14px}
.ks-lb-fig img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:10px;box-shadow:0 40px 100px -30px rgba(0,0,0,.8);animation:ksLbIn .4s cubic-bezier(.16,.7,.3,1)}
.ks-lb-fig figcaption{color:rgba(255,255,255,.85);font-size:14.5px;font-weight:600;text-align:center}
.ks-lb-close{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:19px;cursor:pointer;z-index:2}
.ks-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.ks-lb-prev{left:14px}
.ks-lb-next{right:14px}
.ks-lb-close:hover,.ks-lb-nav:hover{background:rgba(200,162,74,.3);border-color:#c8993a}
.ks-lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.72);font-size:13px;letter-spacing:.06em}
@media (max-width:600px){.ks-lb-nav{width:44px;height:44px;font-size:22px}.ks-lb-fig img{max-height:74vh}}

/* ---- News: editorial lead card + story list --------------------------- */
/* Source badge (crest + name + time) — shared by the lead card and rows. */
.ks-source{display:flex;align-items:center;gap:8px;font-size:13px}
.ks-source img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;background:#F5EAD2}
.ks-source-name{font-weight:800;color:#063A61}
.ks-source-time{color:#736B57;font-weight:600}
.ks-dot{color:#c9bfa6}
.ks-cat{color:#8A1A1F;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:11.5px}

/* Featured: image with a white card floating over its lower-left. */
.ks-lead{position:relative;display:block;text-decoration:none}
.ks-lead-img{aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#0A4E7A}
.ks-lead-img img{width:100%;height:100%;object-fit:cover;object-position:68% center}
.ks-lead-card{
  position:absolute;top:50%;left:clamp(-32px,-1.6vw,-12px);transform:translateY(-50%);
  width:min(56%,368px);background:#fff;border-radius:16px;padding:clamp(22px,2vw,30px);
  box-shadow:0 40px 80px -40px rgba(6,32,54,.55);
  transition:transform .5s cubic-bezier(.16,.7,.3,1),box-shadow .5s ease;
}
.ks-lead:hover .ks-lead-card{transform:translateY(calc(-50% - 5px));box-shadow:0 52px 92px -42px rgba(6,32,54,.62)}
.ks-lead-card h3{font-family:var(--ks-display);font-weight:700;color:#063A61;font-size:clamp(21px,1.9vw,29px);line-height:1.16;letter-spacing:-.01em;margin:14px 0 12px}
.ks-lead-card p{font-size:14.5px;line-height:1.62;color:#6B6353;margin:0 0 18px}
.ks-more{color:#8a681f;font-weight:800;white-space:nowrap} /* a11y: gold-ink, 4.5:1 on white */
.ks-lead-foot{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#736B57;font-weight:600;padding-top:14px;border-top:1px solid #EADFC8}

/* Secondary: stacked thumbnail rows. */
.ks-stories{display:flex;flex-direction:column;gap:clamp(14px,1.5vw,20px)}
.ks-story-row{display:grid;grid-template-columns:clamp(96px,9vw,118px) 1fr;gap:clamp(14px,1.4vw,20px);align-items:center;text-decoration:none;padding:8px;border-radius:14px;transition:background .25s ease}
.ks-story-row:hover{background:#fff;box-shadow:0 24px 48px -38px rgba(6,32,54,.5)}
.ks-story-thumb{aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#0A4E7A}
.ks-story-thumb img{width:100%;height:100%;object-fit:cover}
.ks-story-body{min-width:0}
.ks-story-body h3{font-family:var(--ks-display);font-weight:700;color:#063A61;font-size:clamp(16px,1.15vw,18.5px);line-height:1.26;margin:7px 0 8px}
.ks-story-foot{display:flex;align-items:center;gap:7px;font-size:12px;color:#736B57;font-weight:600}
.ks-story-row:hover .ks-story-body h3{color:#8A1A1F}
.ks-lead .zoom-img,.ks-story-thumb .zoom-img{transition:transform .7s cubic-bezier(.16,.7,.3,1)}
.ks-lead:hover .zoom-img,.ks-story-row:hover .zoom-img{transform:scale(1.06)}

/* Stack on narrow screens; the lead card settles under the image, still overlapping. */
@media (max-width:900px){
  .ks-news-grid{grid-template-columns:1fr !important;gap:34px !important}
  /* Stack as a unified image-top card. The desktop float (card inset over the
     photo) clipped the image's bottom edge on narrow screens, so here the image
     gets a rounded top, the card sits flush below with a rounded bottom, both
     full width — no overlap seam. */
  .ks-lead-img{border-radius:18px 18px 0 0}
  .ks-lead-card{position:static;transform:none;width:auto;margin:0;border-radius:0 0 16px 16px;box-shadow:0 26px 54px -38px rgba(6,32,54,.45)}
  .ks-lead:hover .ks-lead-card{transform:none}
}
@media (max-width:600px){
  .ks-story-row{grid-template-columns:82px 1fr;gap:14px}
}

/* ---- Why Parents Choose: "Medallion Rail" (home chapter 02) ------------ */
/* Section owns --ks-rail-inset so the header/progress align with the 1320px
   grid while the rail itself full-bleeds off the right edge. */
.ks-why{--ks-rail-inset:max(clamp(18px,5vw,72px),calc((100vw - 1320px)/2))}
.ks-why-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;padding-inline:var(--ks-rail-inset);margin-bottom:48px}
.ks-why-intro{max-width:680px}
.ks-why-lede{max-width:520px;font-size:15.5px;line-height:1.7;color:#6B6353;margin:16px 0 24px}
.ks-why-nav{display:flex;gap:10px}
.ks-why-nav[hidden]{display:none} /* author display:flex would beat the UA [hidden] rule — keep dead buttons hidden no-JS */
.ks-why-arrow{width:52px;height:52px;border-radius:50%;border:1px solid #EADFC8;background:#fff;color:#063A61;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .3s ease,border-color .3s ease,color .3s ease,opacity .3s ease}
.ks-why-arrow--next{background:#063A61;border-color:#063A61;color:#fff}
.ks-why-arrow:hover{background:#c8993a;border-color:#c8993a;color:#fff}
.ks-why-arrow[disabled]{opacity:.35;pointer-events:none}
.ks-why-rail{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding-inline-start:var(--ks-rail-inset);padding:8px 0 40px} /* block padding = room for the card-lift shadow */
.ks-why-rail::-webkit-scrollbar{display:none}
.ks-why-track{display:flex;gap:24px;width:max-content;padding-inline:var(--ks-rail-inset)} /* first card aligns with the H2; later cards run off-edge = swipe signal */
.ks-why-card{position:relative;flex:0 0 clamp(300px,24vw,344px);scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid #EADFC8;border-radius:20px;overflow:hidden;text-align:left;text-decoration:none}
.ks-why-ghost{display:none}
.ks-why-ring{position:relative;z-index:1;width:140px;height:140px;margin:30px 0 0 28px;border-radius:50%;border:1.5px solid #c8993a;display:grid;place-items:center;transition:border-color .3s ease}
.ks-why-card:hover .ks-why-ring{border-color:#a87d2b}
.ks-why-medal{width:124px;height:124px;border-radius:50%;overflow:hidden;position:relative}
.ks-why-medal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateX(var(--px,0px)) scale(1.18)} /* overscan = porthole-parallax slack; --px default 0 keeps no-JS framing clean */
.ks-why-card h3{font-family:var(--ks-display);font-weight:600;font-size:23px;letter-spacing:-.01em;color:#063A61;margin:22px 28px 0}
.ks-why-tick{display:block;width:28px;height:2px;background:#c8993a;margin:14px 28px 16px}
.ks-why-card p{flex:1;font-size:15px;line-height:1.7;color:#6B6353;margin:0 28px 26px} /* flex:1 baseline-aligns all six footers */
.ks-why-more{margin-top:auto;height:54px;border-top:1px solid #EADFC8;background:#FBF8F1;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;isolation:isolate;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#063A61}
.ks-why-more::before{content:"";position:absolute;inset:0;z-index:-1;background:#F5EAD2;transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.3,.8,.3,1)}
.ks-why-card:hover .ks-why-more::before{transform:scaleX(1)}
.ks-why-plus{color:#c8993a;font-weight:800;font-size:18px;line-height:1;transition:transform .4s cubic-bezier(.3,.8,.3,1)}
.ks-why-card:hover .ks-why-plus{transform:rotate(90deg)}
.ks-why-progress{display:flex;align-items:center;gap:18px;padding-inline:var(--ks-rail-inset);margin-top:4px}
.ks-why-count{font-family:var(--ks-display);font-weight:600;font-size:15px;letter-spacing:.04em;color:#8a681f;white-space:nowrap} /* a11y: gold-ink on cream */
.ks-why-bar{flex:1;max-width:280px;height:2px;background:#EADFC8;position:relative}
.ks-why-fill{position:absolute;inset:0;background:#c8993a;transform-origin:left center} /* CSS default = scaleX(1): no-JS shows a finished gold rule; JS scales it live */
@media (max-width:767.98px){
  /* arrows stay visible on mobile (swipe still works alongside them) */
  .ks-why-card{flex-basis:min(82vw,320px);scroll-snap-align:center}
  .ks-why-ring{width:120px;height:120px;margin:26px 0 0 22px}
  .ks-why-medal{width:104px;height:104px}
  .ks-why-card h3,.ks-why-tick,.ks-why-card p{margin-inline:22px}
}

/* ---- Academics division pages: per-page signature layouts ---- */
/* Kindergarten "A Day With Us" gentle wave: cards 2 & 4 drop to make a rhythm.
   The inline grid is repeat(5,1fr) so mobile collapse needs !important. */
@media (min-width:1024px){
  .ks-day-wave .ks-day-card:nth-child(2){margin-top:56px}
  .ks-day-wave .ks-day-card:nth-child(4){margin-top:56px}
}
@media (max-width:1023px){
  .ks-day-wave{grid-template-columns:repeat(2,1fr) !important}
  .ks-day-wave .ks-day-card{margin-top:0 !important}
}
@media (max-width:600px){
  .ks-day-wave{grid-template-columns:1fr !important}
}
/* Elementary "foundations staircase": the climbing indents flatten on phones so
   all four steps go full-width (inline margin-left is reset with !important). */
@media (max-width:760px){
  .ks-stair{margin-left:0 !important;margin-right:0 !important}
}
/* Academics "K–12 journey spine": gold numeral node above each division card,
   connected by the inline horizontal gold line. Marker halo matches the #FBF8F1
   section bg so it punches cleanly through the line. */
.ks-spine-node{position:relative;padding-top:64px}
.ks-spine-marker{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;width:46px;height:46px;border-radius:50%;background:#c8993a;color:#04273F;display:grid;place-items:center;font-family:var(--ks-display);font-weight:600;font-size:19px;box-shadow:0 0 0 6px #FBF8F1}
@media (max-width:1023px){
  .ks-spine{grid-template-columns:1fr !important}
  .ks-spine-line{display:none}
}

/* ---- Breadcrumb trail (interior pages: climb back to home) ---- */
.ks-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:0;font-size:13.5px;font-weight:700}
.ks-crumbs a{display:inline-flex;align-items:center;gap:7px;color:#6B6353;text-decoration:none;transition:color .25s ease}
.ks-crumbs a:hover{color:#c8993a}
.ks-crumbs [aria-current="page"]{color:#063A61;font-weight:800}
.ks-crumb-sep{color:#c8993a;font-size:15px;line-height:1}

/* ---- Focus visibility for keyboard users ---- */
a:focus-visible,button:focus-visible{outline:2px solid #c8993a;outline-offset:3px;border-radius:4px;box-shadow:0 0 0 5px rgba(6,58,97,.45)} /* two-tone ring: gold reads on dark, navy halo reads on cream/white */

/* =======================================================================
   RESPONSIVE
   ======================================================================= */

/* ---- Global mobile hardening (≤768px) ----
   The interior pages carry many desktop-only inline layouts. Rather than edit
   every inline style, normalize the recurring patterns here so all 14 pages
   stack cleanly. Scoped to `main` so header/footer chrome is untouched. */
@media (max-width:768px){
  /* Every inline multi-column grid collapses to one column … */
  main [style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:20px}
  /* … a child with grid-column:span 2 would otherwise force an implicit 2nd
     column back in (e.g. the enquiry form), so reset spans to a single track. */
  main [style*="grid-column:span"]{grid-column:auto !important}
  /* … except stat bands, which read better two-up. */
  main [data-ks-stats][style*="grid-template-columns"]{grid-template-columns:1fr 1fr !important;gap:16px 12px}

  /* Floating "cards" that sit at negative offsets over an image hang off the
     edge once the column is full-width. Let them flow inline below the image. */
  main [style*="position:absolute"][style*="left:-22px"],
  main [style*="position:absolute"][style*="right:-20px;bottom:-20px"]{
    position:static !important;margin:16px 0 0 !important;
    animation:none !important;max-width:none !important;
  }

  /* Sticky media columns shouldn't stick once the layout is single-column. */
  main [style*="position:sticky"]{position:static !important;top:auto !important}

  /* Tap targets >= 44px: category filters, footer form + social. */
  .ks-filter{min-height:44px;padding:11px 16px;font-size:14px}
  .ks-footer-news .row{flex-direction:column}
  .ks-footer-news input,.ks-footer-news button{width:100%;min-height:46px}
  .ks-footer-social a{width:44px;height:44px}
  .ks-footer-link{padding:11px 0}

  /* Hide the dev-only hero watermark caption on phones (placeholder text). */
  #ks-hero span[style*="monospace"]{display:none}

  /* Innovation: shrink the ghost word so it doesn't collide with the intro,
     and let the next card peek so the horizontal swipe is discoverable. */
  .ks-innov-ghost{font-size:clamp(58px,17vw,96px);top:6px;opacity:.5}
  .ks-innov-card{flex:0 0 min(80vw,320px)}
  .ks-innov-intro{flex:0 0 min(86vw,360px)}

  /* Photo gallery -> full-width video banner on top, then a tidy 2-up square
     photo grid. (Scoped with :has so it never touches the News article grid,
     which reuses the same #id. The video tile was clipping its caption as a
     square, so it spans the full width at a 16/10 ratio instead.) */
  #ks-gallery-grid:has(.gallery-tile){grid-template-columns:1fr 1fr !important;grid-auto-rows:auto !important;gap:12px}
  #ks-gallery-grid .gallery-tile{aspect-ratio:1/1 !important;grid-column:auto !important;grid-row:auto !important}
  .ks-gfeature{aspect-ratio:16/9}
}

/* Display headings pin to their (too-large) clamp floor on phones because the
   vw middle term underflows — bring the floors down so nothing clips or crowds. */
@media (max-width:600px){
  .ks-phero h1{font-size:clamp(30px,8.5vw,44px) !important;line-height:1.08}
  .ks-h2,
  main [style*="clamp(38px,5vw,72px)"],
  main [style*="clamp(38px,5vw,68px)"],
  main [style*="clamp(38px,4.6vw,68px)"],
  main [style*="clamp(40px,5vw,66px)"]{font-size:clamp(26px,7vw,40px) !important;line-height:1.12 !important}
  main [style*="clamp(30px,4vw,52px)"],
  main [style*="clamp(30px,4.6vw,56px)"],
  main [style*="clamp(30px,4.6vw,58px)"],
  main [style*="clamp(30px,3.8vw,48px)"]{font-size:clamp(23px,6.4vw,32px) !important;line-height:1.14 !important}
  main [style*="clamp(46px,6.5vw,96px)"]{font-size:clamp(32px,9vw,52px) !important;line-height:1.06 !important}
  /* Trim the generous section vertical padding for a tighter mobile rhythm.
     Exclude the hero — it must stay flush to the top so the video fills up to
     under the header (no dotted gap above it). */
  main > section:not(.ks-phero):not(.ks-innov):not(#ks-hero):not(.ks-lead-section){padding-top:clamp(52px,13vw,84px) !important;padding-bottom:clamp(52px,13vw,84px) !important}
  /* Lead section on a hero-less page keeps enough top padding to clear the fixed header. */
  main > section.ks-lead-section{padding-top:clamp(104px,17vw,128px) !important;padding-bottom:clamp(48px,10vw,72px) !important}
}

/* Giant stat numerals are too wide for a ~160px 2-column cell — scale + pad. */
@media (max-width:560px){
  main [data-ks-stats] [style*="clamp(60px,8.6vw,132px)"]{font-size:clamp(38px,12.5vw,60px) !important}
  main [data-ks-stats] [style*="clamp(56px,8vw,120px)"]{font-size:clamp(38px,12.5vw,56px) !important}
  .ks-stat{padding:8px 6px}
  .ks-stats-grid{gap:20px 12px}
}

/* Header fit: the crest+wordmark logo is wide, so the full inline nav + EN
   switcher stop fitting below ~1110px (five items: Admissions dropped — the
   Apply Now button covers it) and the MENU button spilled off-edge. Collapse
   to the compact header (logo + Apply + MENU) — the MENU overlay still
   carries the full navigation and the language switcher. */
@media (max-width:1119.98px){
  .ks-topnav,.ks-lang-wrap{display:none}
}

@media (max-width:1023.98px){
  /* Stacked panels keep the SAME look as desktop: full photo, gradient shade,
     text overlaid at the bottom — with the glass chip always on (no hover on touch). */
  .ks-panels{flex-direction:column;height:auto;gap:16px}
  .ks-panel{flex:none !important;height:clamp(340px,56vw,420px)}   /* tall enough that photo shows above the glass chip */
  .ks-panel-badge{top:14px;left:14px}
  .ks-panel-body p,.ks-panel-link{opacity:1;transform:none}
  .ks-panel-body p{max-width:none}
  .ks-panel-body{
    background-color:rgba(8,30,50,.44);
    border-color:rgba(255,255,255,.2);
    backdrop-filter:blur(14px) saturate(1.25);
    -webkit-backdrop-filter:blur(14px) saturate(1.25);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  }
}
@media (max-width:760px){
  .ks-topnav,.ks-lang-wrap,.ks-menu-btn .word{display:none}
  .ks-apply-cta{height:44px;padding:0 16px;font-size:12px}
  .ks-pill-logo img{height:38px}
  .scrolled .ks-pill-logo img{height:34px}
  .ks-menu-grid{grid-template-columns:1fr}
  .ks-footer-grid{grid-template-columns:1fr 1fr}
  .ks-hero-content{padding:88px clamp(20px,5vw,40px) 72px}
  .ks-hero-title{font-size:clamp(38px,11vw,56px)}
  .ks-hero-sub{font-size:14.5px;line-height:1.65}
  .ks-hero-actions{margin-top:22px;gap:10px}
  #ks-scroll-cue{display:none !important}
  .ks-stats-grid{grid-template-columns:1fr 1fr}
  .ks-stat + .ks-stat{border-left:0}
  .ks-stat:nth-child(even){border-left:1px solid rgba(200,162,74,.26)}
  .ks-stat:nth-child(n+3){border-top:1px solid rgba(200,162,74,.26)}
  .ks-quote-attr{gap:12px}
}
@media (max-width:560px){
  .ks-footer-grid{grid-template-columns:1fr}
  .ks-menu-secondary{grid-template-columns:1fr}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-ks-reveal]{opacity:1 !important;transform:none !important}
  .ks-marquee-track{transform:none !important}
}

/* =====================================================================
   Admissions "Golden Thread" steps (js/main.js -> goldenThread)
   CSS defaults render the COMPLETED state (thread filled, nodes lit,
   cards visible) so no-JS / reduced-motion stay legible. The empty/
   hidden START state is applied ONLY by GSAP, then scrubbed on scroll.
   ===================================================================== */
.ks-steps{position:relative;max-width:1240px;margin:0 auto;min-height:clamp(430px,42vw,510px)}
.ks-steps-track{position:absolute;left:10%;right:10%;top:50%;height:2px;margin-top:-1px;background:#EADFC8;border-radius:2px}
.ks-steps-fill{position:absolute;left:10%;top:50%;width:80%;height:2.5px;margin-top:-1.25px;background:#c8993a;border-radius:2px;transform-origin:left center;transform:scaleX(1)}
.ks-steps-list{list-style:none;margin:0;padding:0}
.ks-step{position:absolute;top:50%;width:52px;height:52px;transform:translate(-50%,-50%)}
.ks-step-disc{position:relative;z-index:2;width:52px;height:52px;border-radius:50%;background:#063A61;border:1.5px solid #063A61;display:flex;align-items:center;justify-content:center;font-family:var(--ks-display);font-size:21px;font-weight:700;color:#c8993a;box-shadow:0 12px 26px -14px rgba(6,58,97,.6)}
.ks-step--join .ks-step-disc{background:#c8993a;border-color:#c8993a;color:#063A61}
.ks-step.is-lit .ks-step-disc::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #c8993a;opacity:0;animation:ksStepPulse .75s ease-out}
@keyframes ksStepPulse{from{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.85)}}
.ks-step-stem{position:absolute;left:50%;width:1.5px;background:#c8993a;opacity:.5;transform:translateX(-50%)}
.ks-step--above .ks-step-stem{bottom:52px;height:34px}
.ks-step--below .ks-step-stem{top:52px;height:34px}
.ks-step-cardwrap{position:absolute;left:50%;width:clamp(208px,17vw,248px);transform:translateX(-50%)}
.ks-step--above .ks-step-cardwrap{bottom:86px}
.ks-step--below .ks-step-cardwrap{top:86px}
.ks-step-card{background:#fff;border:1px solid #EADFC8;border-radius:18px;padding:22px 22px 24px;box-shadow:0 26px 50px -40px rgba(6,32,54,.4);transition:transform .4s cubic-bezier(.16,.7,.3,1),box-shadow .4s ease}
.ks-step-ic{display:block;width:26px;height:26px;color:#c8993a;margin-bottom:13px}
.ks-step-card h3{font-family:var(--ks-display);font-weight:600;font-size:21px;color:#063A61;margin:0 0 8px;letter-spacing:-.01em}
.ks-step-card p{font-size:13.5px;line-height:1.55;color:#6B6353;margin:0}
.ks-step-card--join{background:#063A61;border-color:#063A61}
.ks-step-card--join h3{color:#fff}
.ks-step-card--join p{color:rgba(255,255,255,.74)}
.ks-step-card--join .ks-step-ic{color:#c8993a}
@media (hover:hover){ .ks-step-card:hover{transform:translateY(-4px);box-shadow:0 34px 60px -42px rgba(6,32,54,.5)} }

/* Mobile: rotate to a vertical rail (matches the site's 1024px context switch) */
@media (max-width:1023.98px){
  .ks-steps{min-height:0;max-width:520px}
  .ks-steps-track{left:25px;right:auto;top:6px;bottom:6px;width:2px;height:auto;margin-top:0}
  .ks-steps-fill{left:25px;top:6px;width:2.5px;height:calc(100% - 12px);margin-top:0;transform-origin:top center;transform:scaleY(1)}
  .ks-step{position:relative!important;top:auto;left:auto!important;width:auto;height:auto;transform:none;padding-left:78px;margin:0 0 22px}
  .ks-step-disc{position:absolute;left:0;top:2px}
  .ks-step-stem{display:none}
  .ks-step-cardwrap,.ks-step--above .ks-step-cardwrap,.ks-step--below .ks-step-cardwrap{position:static;left:auto;width:auto;transform:none;bottom:auto;top:auto}
}

/* ===== AR Curriculum — "How It Works" staggered step cards =====
   Cards take natural height (not a stretched equal-height row) and the 2nd–4th
   step drop by staggered amounts, matching the reference layout. Offsets only
   apply once the grid is genuinely 4-across (≥1120px); below that it wraps to
   2/1 columns and any offset would misalign the stack, so it resets to 0. */
.ks-arc-steps{align-items:start}
.ks-arc-steps .card-lift-8 h3{background-image:none}   /* drop the gold underline-reveal under the heading */
.ks-arc-steps .card-lift-8:hover{border-color:#c8993a !important}   /* inline resting border-color blocks the plain hover rule, so force it */
@media (min-width:1120px){
  .ks-arc-steps>*:nth-child(2){margin-top:56px}
  .ks-arc-steps>*:nth-child(3){margin-top:24px}
  .ks-arc-steps>*:nth-child(4){margin-top:64px}
}

/* ===== Homepage "About" — full-height media that bleeds to the section's right edge =====
   Desktop: the image is pinned to fill the section top-to-bottom (into the vertical
   padding) and out to the right edge, without inflating the section height. Below 900px
   it falls back to a normal stacked image (aspect 4/5). */
.ks-about-media{position:relative}   /* set here, not inline — GSAP reveal clearProps wipes the inline style */
.ks-about-media>[data-ks-wipe]{position:relative;aspect-ratio:4/5}
/* Stacked (≤768): the image still fills — bleed over the section's side and bottom
   padding, and overlay the curriculum card on the photo instead of flowing below
   (the global mobile hardening would otherwise leave it floating in cream). */
@media (max-width:768px){
  .ks-about-media{
    order:-1;   /* image first, text below (AR band's inline order:1 already does this) */
    margin-left:calc(clamp(18px,5vw,72px) * -1);
    margin-right:calc(clamp(18px,5vw,72px) * -1);
    margin-top:calc(clamp(84px,10vw,140px) * -1);   /* image on top: bleed the section's top padding (601–768) */
  }
  /* must out-specify the hardening rule `main [style*="position:absolute"][style*="left:-22px"]` */
  main .ks-about-media [style*="position:absolute"][style*="left:-22px"]{
    position:absolute !important;top:auto !important;left:14px !important;right:14px;bottom:14px;
    margin:0 !important;
  }
}
@media (max-width:600px){
  .ks-about-media{margin-top:calc(clamp(52px,13vw,84px) * -1)}   /* mobile rhythm rule shrinks the padding */
}

/* News magazine cards are borderless on white, so the card-lift hover shadow reads
   as a floating rectangle — keep the lift + photo-zoom, drop the shadow. */
.ks-news .card-lift-8:hover{box-shadow:none}

/* Overlay feature cards (Must Read centre + Editor's Pick banner): their wide
   inline aspect (4/3.6, 21/9) is too short on phones for the overlaid headline +
   paragraph — the caption is position:absolute so it can't grow the card, it just
   swamps the photo under the gradient. Go portrait on small screens so the image
   reads above the caption. Two selectors: the theme renders these as inline-styled
   <a> (card-lift-8), the static news.html used the .ks-news-banner class. */
@media (max-width:600px){
  main.ks-news a.ks-news-banner,
  main.ks-news a[style*="aspect-ratio"]{aspect-ratio:4/5 !important}
}

/* Overlay menu: Academics is a click-to-reveal accordion (native <details> —
   no JS; main.js's details animation is scoped to details.ks-faq and won't
   touch this). The summary mimics the .ks-menu-primary a row styling; the
   gold arrow points down closed / up open as the reveal affordance. */
.ks-menu-primary details{border-bottom:1px solid rgba(255,255,255,.08)}
.ks-menu-primary summary{
  display:flex;align-items:center;gap:20px;cursor:pointer;list-style:none;
  padding:clamp(9px,1.2vh,15px) 8px;
  color:#fff;font-family:var(--ks-display);font-size:clamp(25px,3.3vw,44px);font-weight:600;letter-spacing:-.01em;
  border-radius:10px;transition:color .3s ease,padding-left .4s cubic-bezier(.16,.7,.3,1),background .3s ease;
}
.ks-menu-primary summary::-webkit-details-marker{display:none}
.ks-menu-primary summary:hover{color:#c8993a;padding-left:22px;background:rgba(255,255,255,.05)}
.ks-menu-primary summary:hover .ks-num{color:#c8993a;transform:translateX(3px)}
/* Ringed chevron: hidden at rest like the sibling rows' arrows, slides in on
   hover pointing down; flips 180° and fills gold-tint while open. */
.ks-menu-primary summary .ks-arrow{
  margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(200,153,58,.45);color:#c8993a;display:grid;place-items:center;
  opacity:0;transform:translateX(-16px);
  transition:opacity .3s ease,transform .45s cubic-bezier(.16,.7,.3,1),background-color .3s ease,border-color .3s ease;
}
.ks-menu-primary summary:hover .ks-arrow{opacity:1;transform:translateX(0)}
.ks-menu-primary details[open] summary .ks-arrow{
  opacity:1;transform:translateX(0) rotate(180deg);
  background-color:rgba(200,153,58,.14);border-color:#c8993a;
}

/* Fluid expand/collapse where the browser can animate <details> natively
   (Chromium 129+): the content panel's height eases both ways, and its 0-height
   clip doubles as the closed-state guard, so the display:none fallback is
   scoped out here to keep the closing animation visible. */
@supports (interpolate-size: allow-keywords){
  .ks-menu-primary details{interpolate-size:allow-keywords}
  .ks-menu-primary details::details-content{
    block-size:0;overflow:clip;
    transition:block-size .5s cubic-bezier(.16,.7,.3,1),content-visibility .5s allow-discrete;
  }
  .ks-menu-primary details[open]::details-content{block-size:auto}
  .ks-menu-primary details:not([open]) .ks-menu-sub{display:flex}
}

/* Entrance parity: main.js staggers only the `a` rows (the summary isn't one),
   so replay the same fade-rise here when the overlay opens — 135ms slots it
   into the cascade right after "About". */
.ks-menu-overlay.open .ks-menu-primary summary{animation:ksMenuRowIn .52s cubic-bezier(.33,1,.68,1) .135s both}
@keyframes ksMenuRowIn{from{opacity:0;transform:translateY(30px)}}

/* Premium reveal: the sub links cascade in with a fade + rise (CSS animations
   outrank the inline opacity the menu-entrance tween leaves on these links). */
/* `both` fill: the from-state holds during each link's delay (a plain class
   opacity:0 would lose to the inline opacity the entrance tween leaves behind) */
.ks-menu-primary details[open] .ks-menu-sub a{animation:ksSubIn .5s cubic-bezier(.16,.7,.3,1) both}
.ks-menu-primary details[open] .ks-menu-sub a:nth-child(2){animation-delay:.07s}
.ks-menu-primary details[open] .ks-menu-sub a:nth-child(3){animation-delay:.14s}
.ks-menu-primary details[open] .ks-menu-sub a:nth-child(4){animation-delay:.21s}
@keyframes ksSubIn{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}

/* Compact category links revealed under the Academics row.
   Placed after .ks-menu-primary a so these same-specificity rules win and
   the sub links don't inherit the giant serif row styling. */
.ks-menu-sub{display:flex;flex-wrap:wrap;gap:6px 26px;padding:4px 8px 18px 52px}
/* main.js's menu-entrance tween sets inline visibility/opacity on every
   .ks-menu-primary a (sub links included), which defeats the closed-details
   hiding — display:none can't be overridden by those inline props. Fallback
   only: where the browser animates <details>, the ::details-content 0-height
   clip is the guard instead (display:none here would snap the close shut). */
@supports not (interpolate-size: allow-keywords){
  .ks-menu-primary details:not([open]) .ks-menu-sub{display:none}
}
.ks-menu-primary .ks-menu-sub a{
  display:inline-flex;padding:2px 0;border:0;border-radius:0;background:none;
  font-family:'Mulish',sans-serif;font-size:14.5px;font-weight:700;letter-spacing:.02em;
  color:rgba(255,255,255,.62);
}
.ks-menu-primary .ks-menu-sub a:hover{color:#c8993a;padding-left:0;background:none}
/* ===== AR Curriculum — featured top-nav tab =====
   Reads as a gold-tinted chip at rest; on hover the chip fills solid gold,
   flips the text navy and lifts with a soft glow — distinct from the plain
   links' underline sweep (suppressed here via ::after{content:none}).
   NOTE: ::before stays free — it renders the shared .is-active dot. */
.ks-topnav > a.ks-nav-ar{
  color:#EAC98C;padding:6px 13px;border-radius:999px;
  border:1px solid rgba(200,153,58,.4);background-color:rgba(200,153,58,.12);
  transition:color .3s ease,background-color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.ks-topnav > a.ks-nav-ar::after{content:none}
.ks-topnav > a.ks-nav-ar:hover{
  color:#063A61;background-color:#c8993a;border-color:#c8993a;
  box-shadow:0 6px 20px -6px rgba(200,153,58,.7);transform:translateY(-1px);
}

/* Mirrored variant stacks image FIRST (text below it) — bleed over the section's
   TOP padding instead of the bottom. */
@media (max-width:768px){
  .ks-about-media--left{margin-bottom:0;margin-top:calc(clamp(84px,10vw,140px) * -1)}
}
@media (max-width:600px){
  .ks-about-media--left{margin-top:calc(clamp(52px,13vw,84px) * -1);margin-bottom:0}
}
@media (min-width:769px){   /* full-bleed whenever the grid is 2-col (it collapses to 1-col at <=768) */
  .ks-about-media{align-self:stretch}
  .ks-about-media>[data-ks-wipe]{
    position:absolute;aspect-ratio:auto;left:0;
    /* Reach the true viewport edge: past the section padding on narrow screens,
       past the centered 1320px grid's margin on wide screens (min picks the more
       negative). The section clips overflow, so the 100vw scrollbar overshoot is safe. */
    right:min(calc((1320px - 100vw) / 2), calc(clamp(18px,5vw,72px) * -1));
    top:calc(clamp(84px,10vw,140px) * -1);
    bottom:calc(clamp(84px,10vw,140px) * -1);
  }
  /* Mirrored variant: image column on the LEFT — bleed to the left viewport edge. */
  .ks-about-media--left>[data-ks-wipe]{
    right:0;
    left:min(calc((1320px - 100vw) / 2), calc(clamp(18px,5vw,72px) * -1));
  }
}

/* =======================================================================
   RTL LOCALIZATION (Kurdish /ku/  ckb, Arabic /ar/  ar)
   Appended, not woven in: every rule is gated on :lang(ckb|ar) or [dir=rtl],
   so English (lang=en, no dir) never matches — the LTR site is byte-identical.
   The layout skeleton is flexbox/grid, which mirror automatically under
   dir=rtl; this block only fixes what auto-flip can't express.
   ======================================================================= */
/* Arabic-script fonts (the <link> is added per-page on /ku/ and /ar/ only). */
:lang(ckb), :lang(ar){ --ks-display:'Noto Kufi Arabic','Fraunces',Georgia,serif; }
body:lang(ckb), body:lang(ar){ font-family:'Noto Naskh Arabic','Mulish',system-ui,sans-serif; }
/* hardcoded 'Mulish' rules that carry translated text -> inherit the Arabic body font */
:lang(ckb) .ks-menu-primary .ks-menu-sub a, :lang(ar) .ks-menu-primary .ks-menu-sub a{ font-family:inherit; }

/* Arabic script: any tracking breaks glyph joining -> neutralize sitewide on RTL pages. */
[dir="rtl"] *{ letter-spacing:0 !important; }

/* Explicit physical text-align that won't inherit `start`. */
[dir="rtl"] .ks-quote-attr>div{ text-align:right; }
[dir="rtl"] .ks-why-card{ text-align:right; }

/* Directional chevron/arrow SVGs (content -> glyphs are swapped in the HTML). */
[dir="rtl"] .ks-menu-primary .ks-arrow svg,
[dir="rtl"] .ks-why-arrow svg,
[dir="rtl"] .link-arrow svg{ transform:scaleX(-1); }

/* Overlay-menu rows: the reveal indent + the auto-pushed arrow flip side. */
[dir="rtl"] .ks-menu-primary a:hover,
[dir="rtl"] .ks-menu-primary summary:hover{ padding-left:8px; padding-right:22px; }
[dir="rtl"] .ks-menu-primary .ks-arrow{ margin-left:0; margin-right:auto; }
/* The base row transition only animates padding-left; in RTL the hover indent is
   padding-right, which isn't transitioned -> the slide snapped (static on ku/ar).
   Animate padding-right here (same .4s easing) and flip the number's nudge. */
[dir="rtl"] .ks-menu-primary a,
[dir="rtl"] .ks-menu-primary summary{ transition:color .3s ease,padding-right .4s cubic-bezier(.16,.7,.3,1),background .3s ease; }
[dir="rtl"] .ks-menu-primary a:hover .ks-num,
[dir="rtl"] .ks-menu-primary summary:hover .ks-num{ transform:translateX(-3px); }

/* Language dropdown anchors to the button's (now-left) edge. */
[dir="rtl"] .ks-lang-menu{ right:auto; left:0; transform-origin:top left; }


/* Hero + interior side scrims darken the text side; the text moves right in RTL. */
[dir="rtl"] #ks-hero-ov{ background:linear-gradient(270deg,rgba(4,20,36,.78) 0%,rgba(4,20,36,.38) 52%,rgba(4,20,36,.12) 100%) !important; }
[dir="rtl"] .ks-phero-scrim.side{ background:linear-gradient(270deg,rgba(4,20,36,.8) 0%,rgba(4,20,36,.42) 55%,rgba(4,20,36,.16) 100%),linear-gradient(180deg,transparent 40%,rgba(4,20,36,.7)); }

/* News editorial lead card floats over the reading-start (right) edge of its photo. */
[dir="rtl"] .ks-lead-card{ left:auto; right:clamp(-32px,-1.6vw,-12px); }

/* Homepage full-bleed section media: the grid swaps the media column to the other
   side under RTL, so the image must bleed to the opposite viewport edge. */
@media (min-width:769px){
  [dir="rtl"] .ks-about-media>[data-ks-wipe]{
    left:min(calc((1320px - 100vw) / 2), calc(clamp(18px,5vw,72px) * -1));
    right:0;
  }
  [dir="rtl"] .ks-about-media--left>[data-ks-wipe]{
    right:min(calc((1320px - 100vw) / 2), calc(clamp(18px,5vw,72px) * -1));
    left:0;
  }
}

/* RTL display headings: Arabic/Kurdish glyphs (tall ascenders + harakat marks)
   overlap at the Latin-tuned heading line-heights (1.02-1.1). Loosen them;
   !important beats the per-heading inline line-heights. The home hero title is
   excluded - single-line wordmark whose clip-masked reveal a taller box exposes. */
[dir="rtl"] h1:not(.ks-hero-title),
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .ks-footer-statement,
[dir="rtl"] .ks-quote blockquote{ line-height:1.4 !important; }

/* Hero eyebrow ("Welcome to") enlarged 3x per request: 12.5px -> 37.5px, all
   languages. !important beats the inline font-size on the span. */
.ks-hero-kicker span{ font-size:37.5px !important; }

/* RTL header: the pill + menu-button horizontal paddings are asymmetric (generous
   on the logo side, tight on the controls side). Physical padding doesn't flip, so
   under RTL the controls (now on the left) inherited the generous side -> an ugly
   gap before the menu button. Mirror both paddings for RTL. */
[dir="rtl"] .ks-pill{ padding-right:clamp(22px,2.4vw,30px); padding-left:16px; }
[dir="rtl"] .ks-menu-btn{ padding-right:16px; padding-left:7px; }

/* RTL hero play/pause button -> left (mirror of the right-anchored default). */
[dir="rtl"] .ks-hero-vidbtn{ right:auto; left:clamp(20px,4vw,52px); }

/* RTL marquee loop: the seamless-scroll trick (two identical groups + translateX
   -50%) needs the track anchored at the LEFT and tiling rightward. Under dir=rtl
   the track anchors right and scrolling left exposes empty space -> no loop. Force
   the track to ltr so tiling/animation match the English marquee; keep each phrase
   rtl so the Arabic/Kurdish text still shapes correctly. */
[dir="rtl"] .ks-marquee{ direction:ltr; }
[dir="rtl"] .ks-marquee .ks-mq{ direction:rtl; }

/* Article body (WordPress the_content) — typography that was inline on the static
   article pages, so imported Posts edit as clean blocks yet render identically. */
.ks-article-body{max-width:720px;margin:0 auto}
.ks-article-body>*:first-child{margin-top:0}
.ks-article-body p{font-size:17px;line-height:1.85;color:#55503F;margin:0 0 24px}
.ks-article-body h2{font-family:var(--ks-display);font-weight:700;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.01em;color:#063A61;margin:clamp(22px,3vw,38px) 0 16px}
.ks-article-body h3{font-family:var(--ks-display);font-weight:700;font-size:20px;letter-spacing:-.01em;color:#063A61;margin:28px 0 14px}
.ks-article-body blockquote{border-left:3px solid #c8993a;padding-left:22px;margin:clamp(26px,3.5vw,40px) 0;font-family:var(--ks-display);font-style:italic;font-size:21px;line-height:1.5;color:#063A61}
.ks-article-body ul,.ks-article-body ol{font-size:17px;line-height:1.85;color:#55503F;margin:0 0 24px;padding-left:1.4em}
.ks-article-body li{margin:0 0 8px}
.ks-article-body a{color:#8A1A1F;text-decoration:underline;text-underline-offset:2px}
.ks-article-body img{max-width:100%;height:auto;border-radius:14px;margin:24px 0}
.ks-article-body .ks-sig{margin-top:clamp(28px,3.5vw,40px);font-size:13px;font-weight:800;letter-spacing:.02em;color:#736B57}

/* =========================================================================
   Accessibility pass (2026-07) — contrast, keyboard, touch, RTL legibility.
   Gold #c8993a stays the brand color; it only gets an "ink" variant where it
   was used as TEXT on light backgrounds (2.6:1 → fails WCAG):
     #8a681f = gold-ink (4.6:1+ on cream/white, body text)
     #a87d1e = gold-ink-lg (3.3:1+ on cream/white, large display text)
   Gold on navy/deep-navy passes (4.5–5.9:1) and is untouched.
   ========================================================================= */

/* Meta text that carries an inline color (dates, kickers, timestamps):
   #9A9074 was 2.8–3.2:1 on cream/white. Only ever used as `color:`. */
[style*="color:#9A9074"]{color:#736B57!important}

/* Gold eyebrow chips: ink only on the known light section backgrounds
   (fail-safe: unknown/dark sections keep the passing original gold).
   The chip tint tracks currentColor, so it re-tints automatically. */
section[style*="background:#F7F1E6"] .ks-eyebrow--gold,
section[style*="background:#FBF8F1"] .ks-eyebrow--gold,
section[style*="background:#FAF6F0"] .ks-eyebrow--gold,
section[style*="background:#faf6f0"] .ks-eyebrow--gold,
section[style*="background:#fff"] .ks-eyebrow--gold{color:#8a681f}

/* Inline-styled gold italic accents inside H1s — only inner-page (light,
   cream) heroes carry these; the home hero H1 has no gold em. */
h1 em[style*="c8993a"]{color:#a87d1e!important}

/* Skip link — first tabbable element (printed by header.php); hidden until
   keyboard focus. Logical inset so it lands correctly in RTL. */
.ks-skip{position:fixed;top:12px;inset-inline-start:12px;z-index:4000;background:#063A61;color:#fff;font-size:14.5px;font-weight:800;padding:13px 24px;border-radius:999px;text-decoration:none;transform:translateY(-250%)}
.ks-skip:focus{transform:none;outline:2px solid #c8993a;outline-offset:3px}

/* Overlay-menu CTA title: was an <h4> (outranked the page H1 in DOM order);
   now a <p class="ks-menu-cta-title"> styled identically. */
.ks-menu-cta .ks-menu-cta-title{font-family:var(--ks-display);font-size:19px;color:#fff;margin:0 0 6px;font-weight:600}

/* iOS Safari zooms the page when a focused input is under 16px. */
@media (max-width:767px){
  input[type="text"],input[type="email"],input[type="tel"],textarea,select,.ks-footer-news input{font-size:16px!important}
}

/* RTL reading comfort: Naskh needs ~1 step more size + leading than Latin
   for equal legibility. Templates carry inline sizes, hence !important;
   tiers only lift the small text — larger display sizes are untouched. */
[dir="rtl"] main [style*="font-size:12.5px"],
[dir="rtl"] main [style*="font-size:13px"],
[dir="rtl"] main [style*="font-size:13.5px"],
[dir="rtl"] main [style*="font-size:14px"]{font-size:15px!important;line-height:1.8!important}
[dir="rtl"] main [style*="font-size:14.5px"],
[dir="rtl"] main [style*="font-size:15.5px"]{font-size:16px!important;line-height:1.8!important}

/* =========================================================================
   Gallery page ("The King's Yearbook Wall") — reuses the home gallery filter,
   the .ks-lb photo lightbox and the site-wide video modal. Append-only and
   page-scoped via .ks-gallerypage so the home gallery (same #ids) is untouched.
   ========================================================================= */

/* Shared video-modal close button (rendered in footer.php). */
.ks-modal-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.32);color:#fff;font-size:18px;line-height:1;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;transition:background .25s ease,border-color .25s ease}
.ks-modal-close:hover,.ks-modal-close:focus-visible{background:rgba(200,162,74,.32);border-color:#c8993a;outline:none}

/* Featured centerfold: the muted-loop <video> fills the tile and zooms on hover
   exactly like the .zoom-img it replaced (home + gallery). */
.ks-gfeature video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,.7,.3,1)}
.ks-gfeature:hover video{transform:scale(1.04)}

/* Video tiles in the wall: same footprint as photo tiles but a <button> (keyboard
   focusable, routes to the modal). Grid sizing at #ks-gallery-grid only targets
   .gallery-tile, so video tiles need their own box. */
#ks-gallery-grid .ks-gvideo{position:relative;display:block;width:100%;aspect-ratio:4/3;border:0;padding:0;margin:0;border-radius:16px;overflow:hidden;background:#04273F;cursor:pointer;font-family:inherit}
#ks-gallery-grid .ks-gvideo:focus-visible{outline:2px solid #c8993a;outline-offset:3px}
.ks-gvideo-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(200,153,58,.22);border:2px solid #c8993a;color:#fff;font-size:19px;padding-left:3px;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;transition:transform .35s cubic-bezier(.16,.7,.3,1),background .3s ease}
#ks-gallery-grid .ks-gvideo:hover .ks-gvideo-badge{transform:translate(-50%,-50%) scale(1.08);background:rgba(200,153,58,.34)}

/* Premium "framed print" hairline on every wall tile. */
#ks-gallery-grid .ks-gtile{box-shadow:0 0 0 1px rgba(200,153,58,.28)}

/* Page-scoped extras (never touch the home reuse of the same #ids).
   NB: the filter bar is deliberately NOT sticky — with the site's floating pill
   header, a pinned bar let tiles slide up behind it and looked sandwiched. It now
   scrolls away with the content like every other page. */
.ks-gallerypage #ks-gallery-filters{margin-bottom:4px}
@media (min-width:1200px){.ks-gallerypage #ks-gallery-grid{grid-template-columns:repeat(4,1fr) !important}}

/* Living chapter head. */
.ks-gchapter{transition:opacity .15s ease}
.ks-gchapter.is-fading{opacity:0}
.ks-gchapter-title{font-family:var(--ks-display);font-weight:700;font-size:clamp(24px,3vw,40px);letter-spacing:-.01em;color:#063A61;margin:0}
.ks-gchapter-dek{font-size:clamp(15px,1.4vw,17.5px);line-height:1.7;color:#6B6353}
@media (prefers-reduced-motion:reduce){.ks-gchapter{transition:none}}

/* Video tiles collapse to square on phones alongside the photo tiles. */
@media (max-width:760px){#ks-gallery-grid .ks-gvideo{aspect-ratio:1/1;grid-column:auto;grid-row:auto}}

/* RTL: chip flips to the right edge; modal close flips to the left. Grid + flex are
   logical-flow so they mirror automatically. */
[dir="rtl"] .ks-gtile-chip{left:auto;right:12px}
[dir="rtl"] .ks-modal-close{right:auto;left:16px}

/* ============ Decorative image accents (.ks-deco) ============
   Editorial gold dot-grid tucked behind an image's bottom-left corner, softly
   drifting — the King's take on the "dots under the photo" pattern. Add the
   class to any image WRAPPER (the <img> must be a direct child). `--in` keeps
   offsets inside the wrapper for use inside overflow:hidden cards (used on the
   /apply-now/ chooser cards). Pure CSS; honors reduced motion. */
.ks-deco{position:relative}
.ks-deco>img{position:relative;z-index:1}
.ks-deco::before{content:"";position:absolute;left:-44px;bottom:-38px;width:58%;height:52%;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(200,153,58,.75) 1.9px,transparent 2.2px);
  background-size:16px 16px;
  -webkit-mask-image:radial-gradient(125% 125% at 0% 100%,#000 60%,transparent 98%);
  mask-image:radial-gradient(125% 125% at 0% 100%,#000 60%,transparent 98%);
  animation:ksDecoDrift 8s linear infinite}
.ks-deco--in::before{left:10px;bottom:8px}
/* RTL mirrors the dots to the bottom-right corner */
[dir="rtl"] .ks-deco::before{left:auto;right:-44px;
  -webkit-mask-image:radial-gradient(120% 120% at 100% 100%,#000 55%,transparent 98%);
  mask-image:radial-gradient(120% 120% at 100% 100%,#000 55%,transparent 98%)}
[dir="rtl"] .ks-deco--in::before{right:10px}
@keyframes ksDecoDrift{to{background-position:30px 30px}}
@media (prefers-reduced-motion:reduce){.ks-deco::before{animation:none}}

/* ============ Checklist panel (.ks-checks) ============
   Soft tone-on-tone rounded panel around ✓ lists (the SISD-style presentation):
   the row markup inside stays untouched; this class only draws the panel. */
.ks-checks{background:rgba(255,255,255,.65);border:1px solid #EADFC8;border-radius:18px;padding:clamp(18px,2.5vw,26px);box-shadow:0 24px 50px -44px rgba(11,36,71,.45)}

/* ---- News card hover: warm veil + go-to-article arrow (2026-07-15) ----
   Chosen over the old gold underline-draw. Hook = the aspect-ratio image
   wrapper directly inside a .card-lift-8 link (news page + the related
   articles on single.php, both under main.ks-news). The overlay-card helper
   puts aspect-ratio on the <a> itself, so it never matches. Touch devices
   have no hover, so nothing renders there. */
main.ks-news .card-lift-8 > div[style*="aspect-ratio"]{position:relative}
main.ks-news .card-lift-8 > div[style*="aspect-ratio"]::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(4,24,44,.12) 0%,rgba(4,24,44,.18) 45%,rgba(6,58,97,.48) 100%);
  transition:opacity .45s ease;
}
main.ks-news .card-lift-8:hover > div[style*="aspect-ratio"]::before{opacity:1}
main.ks-news .card-lift-8 > div[style*="aspect-ratio"]::after{
  content:"";position:absolute;top:10px;inset-inline-end:10px;z-index:2;pointer-events:none;
  width:34px;height:34px;border-radius:50%;
  background:rgba(200,153,58,.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  box-shadow:0 10px 22px -10px rgba(4,24,44,.55);
  opacity:0;transform:translateY(-6px) scale(.9);
  transition:opacity .4s ease,transform .4s cubic-bezier(.16,.7,.3,1);
}
main.ks-news .card-lift-8:hover > div[style*="aspect-ratio"]::after{opacity:1;transform:translateY(0) scale(1)}
/* RTL: the chip flips to top-left via inset-inline-end; mirror the glyph too */
[dir="rtl"] main.ks-news .card-lift-8 > div[style*="aspect-ratio"]::after{transform:translateY(-6px) scale(.9) scaleX(-1)}
[dir="rtl"] main.ks-news .card-lift-8:hover > div[style*="aspect-ratio"]::after{transform:translateY(0) scale(1) scaleX(-1)}


/* ===== AR Curriculum menu tagline =====
   White blurb tucked under row 04 in the mega menu; first click on the row
   reveals it (main.js toggles .is-open and blocks that navigation), second
   click goes to the page. Starts flush with the 04 number and eases down
   with a little breathing room from the title.
   row-gap:0 — the flex gap:20px would otherwise pad the wrapped line even
   while the tagline is clipped to 0 height. */
.ks-menu-primary a.ks-has-tag{flex-wrap:wrap;row-gap:0;column-gap:20px}
.ks-menu-tag{
  flex-basis:100%;min-width:0;margin-inline-start:0;margin-top:0;
  font-family:'Mulish',sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.02em;
  line-height:1.65;color:rgba(255,255,255,.88);
  max-height:0;opacity:0;transform:translateY(-6px);overflow:hidden;
  transition:max-height .5s cubic-bezier(.16,.7,.3,1),opacity .35s ease .06s,transform .5s cubic-bezier(.16,.7,.3,1),margin-top .5s cubic-bezier(.16,.7,.3,1);
}
.ks-menu-primary a.ks-has-tag.is-open .ks-menu-tag{max-height:4.6em;opacity:1;transform:none;margin-top:10px}
/* Mulish has no Arabic glyphs — fall back to the body stack, as elsewhere */
:lang(ckb) .ks-menu-tag,:lang(ar) .ks-menu-tag{font-family:inherit;letter-spacing:0;font-size:14px}