/* ==========================================================================
   The Majlis Academy — stylesheet
   All brand values are declared once, here. Change them in one place.
   ========================================================================== */

:root{
  /* Colour: sampled from Victoria and Mufida's prototype. */
  --navy:        #123D73;
  --navy-deep:   #0E3159;
  --rust:        #BD5A3D;
  --gold:        #C99C46;
  --sage:        #789F79;
  --cream:       #FBF8F2;
  --sand:        #F2EADF;
  --white:       #FFFFFF;
  --ink:         #25313C;
  --muted:       #6A7074;
  --line:        #E7DCCF;
  --plate:       #F5ECDF;
  --tint-blue:   #EEF5FF;
  --tint-peach:  #FFF4EC;
  --tint-green:  #F3F8EF;
  --tint-lilac:  #F7F2FC;

  /* Legacy aliases so pages written before the prototype re-skin
     themselves without their markup being edited. */
  --blue:        var(--navy);
  --blue-deep:   var(--navy-deep);
  --blue-mid:    #2B5C96;
  --blue-pale:   var(--tint-blue);
  --gold-soft:   #E3C88F;
  --slate:       var(--muted);
  --border:      var(--line);

  /* Type: our original stack. The prototype declared Inter but never
     loaded it, so it was silently falling back to system-ui anyway. */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --arabic: "IBM Plex Sans Arabic", var(--body);

  --wrap: 1320px;
  --wrap-narrow: 860px;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 18px 55px rgba(23,63,103,.08);
  --shadow-lift: 0 26px 55px -26px rgba(18,61,115,.35);
  --section-y: clamp(3rem, 6vw, 3.75rem);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-mid);text-decoration:none}
a:hover{color:var(--blue)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4,h5{
  font-family:var(--display);
  font-weight:600;
  color:var(--blue-deep);
  line-height:1.15;
  margin:0 0 .6em;
  font-variation-settings:"SOFT" 20,"WONK" 0;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.3rem,5.2vw,3.65rem)}
h2{font-size:clamp(1.85rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.6rem)}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong{font-weight:800;color:var(--blue-deep)}

/* ---------- layout ---------- */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,var(--wrap-narrow));margin-inline:auto}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(2.5rem,4.5vw,4rem)}
.section--sand{background:var(--sand)}
.section--white{background:var(--white)}
.section--blue{background:var(--blue-deep);color:#E4EEF3}
.section--blue h1,.section--blue h2,.section--blue h3{color:var(--white)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue);color:#fff;padding:.75rem 1.25rem;font-weight:700;
}
.skip-link:focus{left:0}

/* ---------- eyebrow ---------- */
.eyebrow{
  font-family:var(--body);
  font-size:.75rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .9rem;display:flex;align-items:center;gap:.7rem;
}
.eyebrow::after{content:"";height:1px;flex:1;max-width:70px;background:var(--gold-soft)}
.section--blue .eyebrow{color:var(--gold-soft)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--body);font-weight:800;font-size:.95rem;letter-spacing:.02em;
  padding:.85rem 1.7rem;border-radius:999px;border:2px solid transparent;
  background:var(--blue);color:#fff;cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn:hover{background:var(--blue-deep);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--gold{background:var(--gold);color:var(--blue-deep)}
.btn--gold:hover{background:#b3862f;color:#fff}
.btn--ghost{background:transparent;border-color:var(--blue);color:var(--blue)}
.btn--ghost:hover{background:var(--blue);color:#fff}
.btn--light{background:#fff;color:var(--blue-deep)}
.btn--light:hover{background:var(--gold);color:var(--blue-deep)}
.link-arrow{
  font-weight:800;color:var(--blue);display:inline-flex;align-items:center;gap:.4rem;
}
.link-arrow::after{content:"›";font-size:1.35em;line-height:0;transition:transform .18s ease}
.link-arrow:hover::after{transform:translateX(4px)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.utility{background:var(--blue-deep);color:#CFE0E9;font-size:.82rem}
.utility .wrap{display:flex;align-items:center;justify-content:flex-end;gap:1.5rem;min-height:42px;flex-wrap:wrap}
.utility a{color:#CFE0E9;font-weight:700}
.utility a:hover{color:var(--gold-soft)}
.utility .basket{display:inline-flex;align-items:center;gap:.4rem}
.utility .basket .amount{font-family:var(--arabic)}

.masthead{
  background:var(--white);position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--border);
}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.9rem}
.brand img{width:auto;height:62px}
.nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}
.nav a{
  font-weight:800;font-size:.92rem;color:var(--blue-deep);letter-spacing:.01em;
  padding-block:.35rem;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--blue)}

.nav-toggle{
  display:none;background:none;border:0;padding:.5rem;cursor:pointer;
  width:46px;height:46px;
}
.nav-toggle span{display:block;height:2px;background:var(--blue-deep);margin:6px 0;transition:.2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:940px){
  .nav-toggle{display:block}
  .brand img{height:48px}
  .nav{
    position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--border);box-shadow:var(--shadow);
    max-height:0;overflow:hidden;transition:max-height .28s ease;
  }
  .nav.is-open{max-height:70vh;overflow-y:auto}
  .nav ul{flex-direction:column;gap:0;padding:.5rem 1.25rem 1.25rem}
  .nav li{border-bottom:1px solid var(--border)}
  .nav li:last-child{border-bottom:0}
  .nav a{display:block;padding:.95rem 0}
  .nav a::after{display:none}
  .utility .wrap{justify-content:center;gap:1rem;font-size:.76rem}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background:linear-gradient(180deg,var(--cream) 0%,var(--blue-pale) 100%);
  padding-block:clamp(3rem,6vw,5.5rem) 0;overflow:hidden;
}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{margin-bottom:.5em}
.hero p{font-size:1.15rem;color:var(--slate);max-width:34ch}
.hero .btn{margin-top:.6rem}
.hero-media img{width:100%;filter:drop-shadow(0 24px 34px rgba(13,47,66,.18))}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:2rem}
  .hero p{max-width:none}
}

/* page hero for interior pages */
.page-hero{background:var(--blue-deep);color:#DCE9EF;padding-block:clamp(3rem,6vw,5rem)}
.page-hero h1{color:#fff;margin-bottom:.35em}
.page-hero p{font-size:1.1rem;max-width:62ch;color:#C6DAE4}
.page-hero .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:2.5rem;align-items:center}
.page-hero--plain .wrap{grid-template-columns:1fr}
.page-hero img{max-height:260px;width:auto;margin-inline:auto}
@media (max-width:860px){.page-hero .wrap{grid-template-columns:1fr}}

/* ==========================================================================
   SPLIT (image + text)
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--reverse .split__media{order:2}
.split__media img{border-radius:var(--radius)}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:2rem}
  .split--reverse .split__media{order:0}
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.grid{display:grid;gap:clamp(1.4rem,2.6vw,2.2rem)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid--3,.grid--2{grid-template-columns:1fr}}

.card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card__img{aspect-ratio:3/2;overflow:hidden;background:var(--blue-pale)}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__body{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;flex:1}
.card__body h3{margin-bottom:.5rem}
.card__body p{color:var(--slate);font-size:.98rem}
.card__body .link-arrow,.card__body .btn{margin-top:auto;align-self:flex-start;padding-top:.9rem}
.card__body .btn{padding:.75rem 1.4rem;margin-top:1rem}

/* product cards */
.product .card__img{aspect-ratio:4/3;background:var(--white)}
.product .card__img img{object-fit:contain;padding:.5rem}
.price{font-family:var(--arabic);font-weight:800;color:var(--blue);font-size:1.05rem;margin:.2rem 0 .9rem}
.product .actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:auto}
.product .actions .btn{margin-top:0;padding:.7rem 1.25rem;font-size:.86rem}

/* download cards (teachers / parents) */
.download{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.download img{width:100%;aspect-ratio:16/11;object-fit:cover}
.download__body{padding:1.35rem 1.45rem 1.6rem;display:flex;flex-direction:column;flex:1}
.download__body h3{font-size:1.15rem;margin-bottom:.45rem}
.download__body p{font-size:.95rem;color:var(--slate)}
.download__body .btn{margin-top:auto;align-self:flex-start;padding:.7rem 1.35rem;font-size:.86rem}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid--4{grid-template-columns:1fr}}

/* ---------- tick list ---------- */
.ticks{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.7rem}
.ticks li{position:relative;padding-left:2rem;font-weight:600}
.ticks li::before{
  content:"";position:absolute;left:0;top:.45em;width:1.15rem;height:1.15rem;border-radius:50%;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23000'/%3E%3C/svg%3E") center/78% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23000'/%3E%3C/svg%3E") center/78% no-repeat;
}
.page-hero .ticks li{color:#DCE9EF}

/* ==========================================================================
   FAQ (accordion)
   ========================================================================== */
.faq{border-top:1px solid var(--border)}
.faq__item{border-bottom:1px solid var(--border)}
.faq__q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-weight:800;font-size:1.05rem;color:var(--blue-deep);
  padding:1.35rem 3rem 1.35rem 0;position:relative;line-height:1.45;
}
.faq__q::after{
  content:"";position:absolute;right:.4rem;top:50%;width:14px;height:14px;
  border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease;
}
.faq__q[aria-expanded="true"]::after{transform:translateY(-20%) rotate(-135deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{padding-bottom:1.4rem;color:var(--slate);max-width:78ch}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{background:var(--blue);color:#fff;text-align:center;padding-block:clamp(2.5rem,5vw,3.75rem)}
.cta-band p{
  font-family:var(--display);font-size:clamp(1.4rem,3vw,2rem);color:#fff;
  margin:0 0 1.4rem;font-weight:600;
}

/* ==========================================================================
   TESTIMONIALS — the signature block
   ========================================================================== */
.quotes{background:var(--sand);position:relative;overflow:hidden}
.quotes__mark{position:absolute;opacity:.4;width:clamp(70px,10vw,130px);pointer-events:none}
.quotes__mark--open{top:clamp(1.5rem,4vw,3rem);left:clamp(1rem,5vw,4rem)}
.quotes__mark--close{bottom:clamp(1.5rem,4vw,3rem);right:clamp(1rem,5vw,4rem)}
.quotes .wrap-narrow{position:relative;z-index:2;text-align:center}
.quote{display:none}
.quote.is-active{display:block;animation:quoteIn .45s ease both}
@keyframes quoteIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.quote blockquote{
  margin:0 0 1.75rem;font-family:var(--display);font-weight:400;
  font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.55;color:var(--blue-deep);
}
.quote cite{font-style:normal;display:block;font-size:.95rem;color:var(--blue)}
.quote cite b{display:block;font-family:var(--body);font-weight:800;font-size:1rem;color:var(--blue-deep)}
.quotes__nav{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:2.25rem}
.quotes__dots{display:flex;gap:.55rem}
.quotes__dots button{
  width:10px;height:10px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(13,47,66,.25);transition:.2s;
}
.quotes__dots button[aria-selected="true"]{background:var(--blue);transform:scale(1.35)}
.quotes__arrow{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--blue);background:transparent;
  color:var(--blue);font-size:1.3rem;line-height:1;cursor:pointer;transition:.2s;
}
.quotes__arrow:hover{background:var(--blue);color:#fff}

/* ==========================================================================
   TEAM
   ========================================================================== */
.team{display:grid;grid-template-columns:340px 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.team + .team{margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--border)}
.team--reverse{grid-template-columns:1fr 340px}
.team--reverse .team__photo{order:2}
.team__photo img{border-radius:var(--radius);box-shadow:var(--shadow)}
@media (max-width:800px){
  .team,.team--reverse{grid-template-columns:1fr}
  .team--reverse .team__photo{order:0}
  .team__photo img{max-width:320px}
}

/* ==========================================================================
   VIDEO
   ========================================================================== */
.video{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.video__frame{position:relative;padding-top:56.25%;background:var(--blue-deep)}
.video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video h3{padding:1.15rem 1.4rem;margin:0;font-size:1.15rem}

/* ==========================================================================
   FORM
   ========================================================================== */
.form{display:grid;gap:1.15rem;max-width:640px}
.field{display:grid;gap:.4rem}
.field label{font-weight:800;font-size:.9rem;color:var(--blue-deep)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;padding:.85rem 1rem;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);background:#fff;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(22,80,110,.15)}
.field textarea{min-height:150px;resize:vertical}
.form .btn{justify-self:start}
.hp{position:absolute;left:-9999px}

.contact-details{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.contact-details li{padding-left:2.1rem;position:relative;color:var(--slate)}
.contact-details li b{display:block;color:var(--blue-deep);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.15rem}
.contact-details li::before{content:"";position:absolute;left:0;top:.3rem;width:1.3rem;height:1.3rem;background:var(--gold);border-radius:50%;opacity:.85}

/* ==========================================================================
   AUTH / LOGIN
   ========================================================================== */
.auth{
  min-height:calc(100vh - 190px);
  display:grid;place-items:center;
  padding:clamp(2.5rem,6vw,4.5rem) 1.25rem;
  background:
    radial-gradient(900px 460px at 50% -10%, rgba(199,154,69,.22), transparent 65%),
    var(--blue-deep);
}
.auth__card{
  width:min(100%,470px);
  background:var(--white);
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:0 34px 70px -30px rgba(0,0,0,.55);
  padding:clamp(2rem,4vw,2.9rem) clamp(1.5rem,3.5vw,2.6rem);
  text-align:center;
}
.auth__logo{height:78px;width:auto;margin:0 auto 1.5rem}
.auth__card h1{font-size:clamp(1.5rem,3.6vw,1.95rem);margin-bottom:.55rem}
.auth__intro{color:var(--slate);font-size:.97rem;margin-bottom:1.9rem}
.auth__form{text-align:left;max-width:none;gap:1.25rem}
.auth__form .btn{justify-self:stretch;justify-content:center;margin-top:.4rem}
.auth__form input::placeholder{color:#A9B4BC}
.auth__foot{
  margin:1.9rem 0 0;padding-top:1.4rem;border-top:1px solid var(--border);
  font-size:.88rem;color:var(--slate);
}

/* tabs */
.auth__tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:.35rem;
  background:var(--blue-pale);border-radius:999px;padding:.35rem;margin-bottom:1.6rem;
}
.auth__tab{
  border:0;border-radius:999px;padding:.6rem .5rem;cursor:pointer;
  font-family:var(--body);font-weight:800;font-size:.88rem;color:var(--blue);
  background:transparent;transition:background .2s ease,color .2s ease;
}
.auth__tab[aria-selected="true"]{background:var(--blue);color:#fff}

/* status message */
.auth__status{
  text-align:left;font-size:.9rem;line-height:1.55;margin:0 0 1.25rem;
  padding:.85rem 1rem;border-radius:var(--radius-sm);border-left:4px solid;
}
.auth__status.is-error{background:#FCEEEE;border-color:#B23B3B;color:#7A2727}
.auth__status.is-warn{background:#FDF4E3;border-color:var(--gold);color:#6E5216}
.auth__status.is-success{background:#EAF5EE;border-color:#3F8558;color:#255A38}
.auth__status.is-info{background:var(--blue-pale);border-color:var(--blue);color:var(--blue-deep)}

.auth__minor{font-size:.85rem;color:var(--slate);margin:.2rem 0 0}
.optional{font-weight:400;color:var(--slate)}

/* ==========================================================================
   PORTAL
   ========================================================================== */
.portal__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;padding-bottom:1.75rem;margin-bottom:2.5rem;
  border-bottom:1px solid var(--border);
}
.portal__head h1{margin-bottom:.2em}
.portal__school{color:var(--gold);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;margin:0}
.portal__group + .portal__group{margin-top:clamp(2.5rem,5vw,3.5rem)}
.portal__group > h3{
  font-family:var(--body);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);margin-bottom:1.25rem;padding-bottom:.6rem;border-bottom:1px solid var(--border);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--blue-deep);color:#B9CEDA;padding-block:clamp(3rem,5vw,4.5rem) 0;font-size:.95rem}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:clamp(1.75rem,3.5vw,3rem)}
.footer img{height:74px;width:auto;margin-bottom:1.25rem}
.footer h5{
  font-family:var(--body);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);margin:0 0 1.1rem;
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.footer a{color:#DCE9EF}
.footer a:hover{color:var(--gold-soft)}
.footer strong{color:#fff}
.footer__bar{
  margin-top:clamp(2.5rem,4vw,3.5rem);border-top:1px solid rgba(255,255,255,.13);
  padding-block:1.4rem;font-size:.85rem;color:#8FA9B8;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}}

/* ---------- drop-in entrance ----------
   The card is invisible until its slot scrolls into view, then it is placed
   at the top of the screen and falls the whole way down into place.
   main.js measures the distance; --stagger offsets cards across a row. */
.drop{
  opacity:0;
  transition:opacity .6s ease,transform 1.7s cubic-bezier(.2,.85,.25,1);
  transition-delay:var(--stagger,0ms);
  will-change:transform,opacity;
}
.drop.is-in{opacity:1}
.drop.has-landed{will-change:auto}
@media (prefers-reduced-motion: reduce){
  .drop{opacity:1;transform:none!important;transition:none}
}

/* ==========================================================================
   SCHOOLS PAGE — the shop window
   Editorial treatment: Cormorant-flavoured display sizes, asymmetric hero,
   deliberate whitespace. Uses the site palette, not the portal's.
   ========================================================================== */
.sc-hero{
  background:linear-gradient(160deg,var(--blue-deep) 0%,#123B52 60%,var(--blue) 100%);
  color:#DCE9EF;padding-block:clamp(3.5rem,7vw,6rem);overflow:hidden;
}
.sc-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.sc-eyebrow{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:800;
  color:var(--gold-soft);margin:0 0 1rem;
}
.sc-hero h1{color:#fff;font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.05;margin-bottom:.4em}
.sc-hero h1 em{font-style:italic;color:var(--gold-soft);font-weight:400}
.sc-lede{font-size:1.12rem;color:#C6DAE4;max-width:46ch}
.sc-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.75rem}
.btn--ghost-light{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghost-light:hover{background:#fff;color:var(--blue-deep)}

.sc-mosaic{display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:auto auto;gap:.75rem}
.sc-tile{border-radius:14px;overflow:hidden;background:rgba(255,255,255,.08);box-shadow:0 24px 50px -28px rgba(0,0,0,.7)}
.sc-tile img{width:100%;height:100%;object-fit:cover}
.sc-tile--tall{grid-row:span 2}
@media (max-width:860px){
  .sc-hero .wrap{grid-template-columns:1fr}
  .sc-lede{max-width:none}
  .sc-mosaic{grid-template-columns:1fr 1fr}
  .sc-tile--tall{grid-row:span 1}
}

/* stats banner */
.sc-stats{background:var(--gold);color:var(--blue-deep)}
.sc-stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:2rem;text-align:center}
.sc-stats strong{display:block;font-family:var(--display);font-size:clamp(2rem,4vw,2.9rem);line-height:1;font-weight:600}
.sc-stats span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;opacity:.85}
@media (max-width:640px){.sc-stats .wrap{grid-template-columns:1fr 1fr;gap:1.5rem}}

/* tension section with the fanned cards */
.sc-tension{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.sc-stack{position:relative;height:340px}
.sc-card{
  position:absolute;left:50%;top:50%;width:230px;padding:1.4rem 1.3rem;border-radius:12px;
  background:var(--blue-deep);color:#DCE9EF;font-family:var(--display);font-size:1.22rem;line-height:1.25;
  box-shadow:0 26px 50px -26px rgba(13,47,66,.75);transform-origin:center;
}
.sc-card span{
  display:block;font-family:var(--body);font-size:.68rem;letter-spacing:.2em;
  color:var(--gold-soft);font-weight:800;margin-bottom:.6rem;
}
.sc-card--1{transform:translate(-50%,-50%) rotate(-11deg) translate(-46px,-30px)}
.sc-card--2{transform:translate(-50%,-50%) rotate(-4deg) translate(-14px,-8px);background:#123B52}
.sc-card--3{transform:translate(-50%,-50%) rotate(4deg) translate(18px,14px);background:var(--blue)}
.sc-card--4{transform:translate(-50%,-50%) rotate(11deg) translate(50px,36px);background:#1D5F80}
@media (max-width:860px){
  .sc-tension{grid-template-columns:1fr}
  .sc-stack{height:300px;order:2}
  .sc-card{width:200px;font-size:1.05rem}
}

/* ecosystem cards */
.sc-eco__card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.75rem 1.8rem;position:relative;
}
.sc-num{
  display:block;font-family:var(--display);font-size:2.2rem;color:var(--gold);
  line-height:1;margin-bottom:.5rem;font-weight:600;
}
.sc-eco__card h3{margin-bottom:.5rem}
.sc-eco__card p{color:var(--slate);margin:0;font-size:.97rem}
.sc-badge{
  display:inline-block;vertical-align:middle;margin-left:.5rem;
  font-family:var(--body);font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:#6E8F72;color:#fff;border-radius:999px;padding:.18rem .55rem;
}

/* testimonial */
.sc-quote{background:var(--blue-deep);color:#DCE9EF;text-align:center}
.sc-quote blockquote{
  margin:0 0 1.75rem;font-family:var(--display);font-size:clamp(1.2rem,2.6vw,1.7rem);
  line-height:1.5;color:#fff;
}
.sc-quote cite{font-style:normal;font-size:.9rem;color:#B9CEDA}
.sc-quote cite b{display:block;color:var(--gold-soft);font-family:var(--body);font-weight:800;margin-bottom:.2rem}

/* pricing */
.sc-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start}
.sc-price{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.9rem 1.8rem;display:flex;flex-direction:column;height:100%;
}
.sc-price h3{margin-bottom:.3rem}
.sc-price__amount{font-family:var(--display);font-size:2rem;color:var(--blue);margin:0;font-weight:600}
.sc-price__period{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin:0 0 1.25rem;font-weight:700}
.sc-price ul{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;gap:.6rem;font-size:.93rem}
.sc-price ul li{position:relative;padding-left:1.6rem;color:var(--slate)}
.sc-price ul li::before{content:"\\2713";position:absolute;left:0;color:var(--gold);font-weight:800}
.sc-sub{margin:.6rem 0 0!important;gap:.35rem!important;font-size:.86rem!important}
.sc-sub li{padding-left:1.1rem!important}
.sc-sub li::before{content:"\\2013"!important;color:var(--slate)!important}
.sc-price .btn{margin-top:auto;align-self:flex-start}
.sc-price--elite{background:var(--blue-deep);border-color:var(--blue-deep);color:#DCE9EF}
.sc-price--elite h3{color:#fff}
.sc-price--elite ul li{color:#C6DAE4}
.sc-price--elite ul li::before{color:var(--gold-soft)}
.sc-tier{
  display:inline-block;background:var(--gold);color:#fff;border-radius:999px;
  padding:.2rem .7rem;font-size:.64rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 .9rem;
}
@media (max-width:960px){.sc-pricing{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* closing CTA */
.sc-cta{background:var(--blue);color:#fff;text-align:center;padding-block:clamp(3rem,6vw,4.5rem)}
.sc-cta h2{color:#fff}
.sc-cta h2 em{font-style:italic;color:var(--gold-soft);font-weight:400}
.sc-cta p{color:#D6E7EF;max-width:52ch;margin-inline:auto}

/* ==========================================================================
   CURRICULUM EXPLORER (public)
   ========================================================================== */
.cx-hero{background:linear-gradient(155deg,var(--blue-deep),#123B52 70%);color:#DCE9EF;padding-block:clamp(3rem,6vw,5rem)}
.cx-hero h1{color:#fff;font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:.35em}

.cx-numbers{background:var(--blue)}
.cx-numbers .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;padding-block:1.75rem;text-align:center;color:#fff}
.cx-numbers strong{display:block;font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1;font-weight:600}
.cx-numbers span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--gold-soft)}
@media (max-width:700px){.cx-numbers .wrap{grid-template-columns:repeat(3,1fr);gap:1.4rem}}

.cx-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1.5rem}
.cx-tabs button{
  background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:.85rem 1rem;
  cursor:pointer;font-family:var(--body);font-weight:800;font-size:1rem;color:var(--blue-deep);text-align:left;
}
.cx-tabs button small{display:block;font-weight:400;font-size:.68rem;color:var(--slate);margin-top:.2rem}
.cx-tabs button[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
@media (max-width:640px){.cx-tabs{grid-template-columns:1fr}}

.cx-term{margin-bottom:1.5rem}
.cx-term h4{
  font-family:var(--body);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);
  margin:0 0 .7rem;padding-bottom:.45rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;
}
.cx-term h4 span{letter-spacing:.04em;text-transform:none;font-weight:400}
.cx-blocks{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.cx-block{
  background:#fff;border:1.5px solid var(--border);border-radius:9px;padding:.8rem .85rem;
  cursor:pointer;text-align:left;font-family:var(--body);transition:.16s;position:relative;
}
.cx-block:hover{border-color:var(--gold);transform:translateY(-2px)}
.cx-block.is-open{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.cx-block small{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:800}
.cx-block strong{display:block;font-size:.88rem;color:var(--blue-deep);margin:.25rem 0 .4rem;line-height:1.3}
.cx-block.is-outline strong{color:var(--slate);font-style:italic;font-weight:600}
.cx-weeks{font-size:.66rem;color:var(--slate)}
@media (max-width:900px){.cx-blocks{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cx-blocks{grid-template-columns:1fr}}

.cx-detail{background:var(--white);border:1px solid var(--gold);border-radius:var(--radius);padding:1.75rem;margin-top:1.5rem;box-shadow:var(--shadow)}
.cx-detail__head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:1.5rem}
.cx-kicker{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:800;margin:0 0 .35rem}
.cx-detail h3{margin:0 0 .3rem;font-size:1.5rem}
.cx-theme{margin:0;color:var(--slate);max-width:60ch}
.cx-theme--tbc{font-style:italic}
.cx-close{background:none;border:0;font-size:1.6rem;line-height:1;color:var(--slate);cursor:pointer;padding:0 .3rem}
.cx-close:hover{color:var(--blue-deep)}

.cx-facts{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin-bottom:1.5rem}
.cx-facts div{background:var(--blue-pale);border-radius:8px;padding:.8rem .5rem;text-align:center}
.cx-facts strong{display:block;font-family:var(--display);font-size:1.5rem;color:var(--blue-deep);font-weight:600;line-height:1}
.cx-facts span{font-size:.66rem;color:var(--slate);letter-spacing:.04em}
@media (max-width:700px){.cx-facts{grid-template-columns:repeat(3,1fr)}}

.cx-arc{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1.5rem}
.cx-arc div{border-left:3px solid var(--gold);background:var(--cream);border-radius:0 8px 8px 0;padding:.75rem .9rem}
.cx-arc small{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-weight:800}
.cx-arc strong{display:block;font-family:var(--display);font-size:1.1rem;color:var(--blue-deep);margin:.1rem 0 .3rem}
.cx-arc span{font-size:.8rem;color:var(--slate);line-height:1.5}
@media (max-width:700px){.cx-arc{grid-template-columns:1fr}}

.cx-locked-row{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.cx-locked-item{
  display:grid;grid-template-columns:28px 1fr;gap:.7rem;align-items:start;
  background:var(--cream);border:1px dashed var(--border);border-radius:8px;padding:.8rem .9rem;
}
.cx-lock{color:var(--gold)}
.cx-lock svg{width:18px;height:18px}
.cx-locked-item strong{display:block;font-size:.85rem;color:var(--blue-deep)}
.cx-locked-item small{display:block;font-size:.76rem;color:var(--slate);line-height:1.5;margin-top:.15rem}
.cx-locked-note{margin:1rem 0 0;font-size:.82rem;color:var(--slate)}
@media (max-width:640px){.cx-locked-row{grid-template-columns:1fr}}

/* anatomy of a day */
.cx-anatomy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.cx-episodes{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;counter-reset:ep}
.cx-episodes li{
  background:#fff;border-left:5px solid var(--ep);border-radius:0 9px 9px 0;
  padding:.85rem 1.1rem;display:flex;align-items:baseline;gap:.7rem;font-size:.95rem;
}
.cx-episodes b{font-family:var(--body);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ep);font-weight:800}
.cx-episodes span{margin-left:auto;font-size:.75rem;color:var(--slate);white-space:nowrap}
@media (max-width:860px){.cx-anatomy{grid-template-columns:1fr}}

/* open vs licensed */
.cx-split{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.cx-open,.cx-locked{border-radius:var(--radius);padding:1.75rem 1.8rem}
.cx-open{background:#EAF5EE;border:1px solid #BFD9C7}
.cx-locked{background:var(--blue-deep);color:#C6DAE4}
.cx-locked h3{color:#fff}
.cx-open ul,.cx-locked ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem;font-size:.93rem}
.cx-open li{padding-left:1.6rem;position:relative;color:#2F5A3E}
.cx-open li::before{content:"\\2713";position:absolute;left:0;font-weight:800;color:#3F8558}
.cx-locked li{padding-left:1.6rem;position:relative}
.cx-locked li::before{content:"\\1F512";position:absolute;left:0;font-size:.85em;filter:saturate(0) brightness(1.6)}
@media (max-width:760px){.cx-split{grid-template-columns:1fr}}

/* sample block */
.cx-sample{background:var(--sand);padding-block:clamp(3rem,6vw,4.5rem);text-align:center}
.cx-sample p{max-width:62ch;margin-inline:auto;color:var(--ink)}
.cx-sample__note{font-size:.88rem;color:var(--slate);margin-top:1rem}
.cx-form{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:1.75rem}
.cx-form input{
  font-family:var(--body);font-size:.95rem;padding:.8rem 1rem;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);background:#fff;min-width:190px;
}
.cx-form input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(22,80,110,.15)}

/* free sample block */
.cx-block.is-sample{border-color:var(--gold);background:linear-gradient(180deg,#FFFDF7,#fff)}
.cx-free{
  position:absolute;top:-8px;right:.6rem;background:var(--gold);color:#fff;
  font-size:.58rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:.14rem .48rem;border-radius:999px;
}
.cx-sample-panel{background:#EAF5EE;border:1px solid #BFD9C7;border-radius:var(--radius);padding:1.5rem 1.6rem}
.cx-sample-panel__flag{
  margin:0 0 .7rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:#2F5A3E;
}
.cx-sample-panel p{color:#2F5A3E;font-size:.95rem}
.cx-prereq{
  background:#fff;border-left:4px solid var(--gold);border-radius:0 8px 8px 0;
  padding:.9rem 1.1rem;font-size:.88rem!important;margin-bottom:1.25rem!important;
}
.cx-prereq strong{color:var(--blue-deep)}
.cx-sample h2 em{font-style:italic;color:var(--blue)}


/* ==========================================================================
   PROTOTYPE LAYER — the prototype's structure, our type and substance.
   ========================================================================== */

.masthead{
  position:sticky;top:0;z-index:40;
  background:rgba(251,248,242,.97);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.masthead .wrap{max-width:var(--wrap);margin:auto;padding:0 22px}
.top{min-height:82px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand img{height:50px;width:auto;display:block}
.brand small{
  display:block;font-family:var(--body);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:#9A7542;
  font-weight:800;line-height:1.6;border-left:1px solid var(--line);padding-left:13px;
}
.topnav{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.topnav a{
  border:1px solid #DDD0BF;background:var(--white);border-radius:999px;
  padding:10px 15px;font-weight:800;font-size:13px;color:#525A58;
  text-decoration:none;transition:background .18s ease,color .18s ease;
}
.topnav a:hover{background:#FFF6E9;color:var(--navy)}
.topnav a[aria-current="page"]{border-color:var(--gold);color:var(--navy)}
.topnav a.member{background:var(--navy);color:#fff;border-color:var(--navy)}
.topnav a.member:hover{background:var(--navy-deep);color:#fff}
.nav-toggle{display:none}

@media(max-width:1040px){
  .top{align-items:flex-start;flex-direction:column;padding:14px 0;position:relative}
  .topnav{margin-left:0;display:none;width:100%}
  .topnav.is-open{display:flex}
  .nav-toggle{
    display:block;position:absolute;top:18px;right:0;
    width:44px;height:38px;background:none;border:1px solid var(--line);
    border-radius:12px;cursor:pointer;padding:9px 10px;
  }
  .nav-toggle span{display:block;height:2px;background:var(--navy);margin:4px 0;border-radius:2px}
}

.mj h1,.mj h2,.mj h3{font-family:var(--display);color:var(--navy);margin:0}
.mj h1{font-size:clamp(2.1rem,4.4vw,3.15rem);line-height:1.06;letter-spacing:-.01em;font-weight:600}
.mj h2{font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.14;font-weight:600}
.mj h3{font-size:1.32rem;line-height:1.22;font-weight:600}
.kicker{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rust);font-weight:800;margin:0 0 11px;
}
.lede{font-size:1.05rem;line-height:1.62;color:#5F666A;max-width:760px}

/* ---------- Arabic ---------- */
.ar{font-family:var(--arabic);direction:rtl;unicode-bidi:isolate}
.book-ar{
  font-family:var(--arabic);direction:rtl;unicode-bidi:isolate;
  display:block;font-size:1.12rem;line-height:1.85;color:var(--rust);
  font-weight:600;margin:.15rem 0 .35rem;
}
.price{
  font-family:var(--arabic);direction:rtl;unicode-bidi:isolate;
  font-weight:700;color:var(--navy);font-size:1.02rem;margin:.15rem 0 .75rem;
}
.price .vat{
  font-family:var(--body);direction:ltr;display:block;
  font-size:.64rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-top:.25rem;
}

.mj-hero{padding:54px 0;background:linear-gradient(135deg,#FFF9EF,#F1E5D6)}
.hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:34px;align-items:center}
.hero-art{background:var(--plate);border-radius:28px}
.hero-art img{
  border-radius:28px;border:1px solid var(--line);
  box-shadow:var(--shadow);width:100%;display:block;
}
/* The homepage hero artwork is portrait (1122 x 1402). Left at width:100%
   it would render about 790px tall beside a 300px text column and swamp
   the fold. Capping the height and letting the width follow keeps the
   whole image visible without cropping any of it. */
.mj-hero .hero-art{background:none;display:flex;justify-content:center}
.mj-hero .hero-art img{width:auto;max-width:100%;max-height:76vh}
.hero-plain{padding:54px 0;background:linear-gradient(135deg,#FFF9EF,#F1E5D6)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.primary-btn,.secondary-btn,.small-btn,.ghost-btn{
  display:inline-block;border-radius:999px;padding:11px 17px;
  font-family:var(--body);font-size:.8rem;font-weight:800;
  text-decoration:none;border:0;cursor:pointer;
}
.primary-btn,.small-btn{background:var(--navy);color:#fff}
.primary-btn:hover,.small-btn:hover{background:var(--navy-deep);color:#fff}
.secondary-btn{background:#fff;border:1px solid #D9C7AF;color:var(--navy)}
.secondary-btn:hover{background:#FFF6E9;color:var(--navy)}
.ghost-btn{background:#EFE6DA;color:#6A6055}
.ghost-btn:hover{background:#E5D9C9;color:var(--navy)}

.mj-section{padding:60px 0}
.mj-section.alt{background:var(--sand)}
.section-head{text-align:center;max-width:840px;margin:0 auto 32px}
.section-head p{color:var(--muted);line-height:1.58}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.info-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px}
.info-card p{color:var(--muted);line-height:1.55;margin:.6em 0 0}

/* ---------- books grid ----------
   object-fit:contain, not cover. The prototype cropped covers to
   1.42:1 with object-fit:cover, which sliced the first letter off
   several titles. Letterboxing on a warm plate keeps every cover whole. */
.books-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.book-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;
}
.cover-wrap{position:relative;background:var(--plate)}
.cover-wrap img{width:100%;aspect-ratio:1.42/1;object-fit:contain;display:block}
/* The number sits in the copy, NOT over the artwork. The prototype
   placed it at top:10px/left:10px, which lands squarely on the first
   letter of the English title on covers 1, 4, 6, 7 and 10 — on the
   live prototype "Counting Under the Desert Sky" read as "ounting". */
.book-number{
  display:inline-block;background:var(--navy);color:#fff;
  border-radius:999px;min-width:24px;padding:3px 9px;
  font-size:.66rem;font-weight:800;letter-spacing:.06em;
  margin-bottom:.5rem;align-self:flex-start;
}
.book-copy{padding:16px;display:flex;flex-direction:column;gap:2px;flex:1}
.book-copy h3{font-size:1.16rem;margin:0}
.book-copy .objective{font-size:.82rem;color:var(--muted);line-height:1.5;margin:.35rem 0 .6rem}
.book-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto}
.book-actions a{padding:9px 13px;font-size:.72rem}

.book-detail{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.book-facts{list-style:none;margin:1.4rem 0;padding:0;display:grid;gap:.7rem}
.book-facts li{
  display:grid;grid-template-columns:150px 1fr;gap:14px;
  padding-bottom:.7rem;border-bottom:1px solid var(--line);
  color:var(--ink);line-height:1.55;font-size:.94rem;
}
.book-facts b{
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:800;padding-top:.18rem;
}

.sneak-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sneak-card{background:#fff;border:1px solid var(--line);border-radius:19px;overflow:hidden}
.sneak-card img{width:100%;height:210px;object-fit:contain;background:var(--plate);padding:12px;display:block}
.sneak-copy{padding:14px}
.tiny{
  font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--rust);font-weight:800;display:block;
}
.sneak-copy h3{font-size:1.2rem;margin:5px 0 0}

.sample-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.sample-feature{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden}
.sample-feature img{width:100%;height:270px;object-fit:contain;background:var(--plate);padding:16px;display:block}
.sample-feature-copy{padding:20px}
.sample-feature-copy .tiny{margin-bottom:6px}
.sample-feature-copy h3{margin:0 0 8px}
.sample-feature-copy p{color:var(--muted);line-height:1.55;margin:0}
.sample-boundary{
  margin-top:22px;background:var(--navy);color:#fff;border-radius:24px;padding:26px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.sample-boundary h3{color:var(--cream);margin:0 0 6px}
.sample-boundary p{color:var(--cream);margin:0;line-height:1.55}
.sample-boundary .secondary-btn{flex:0 0 auto}

.stats-band{background:var(--navy);color:#fff;padding:34px 0}
.stats-band .wrap{
  max-width:var(--wrap);margin:auto;padding:0 22px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center;
}
.stats-band strong{
  display:block;font-family:var(--display);font-size:2.6rem;
  font-weight:600;line-height:1;color:var(--gold);
}
.stats-band span{
  display:block;margin-top:.5rem;font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:800;color:#CBDAE8;
}

.quote-band{background:var(--sand);padding:60px 0}
.quote-band .wrap{max-width:var(--wrap-narrow);margin:auto;padding:0 22px;text-align:center}
.quote-band blockquote{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.55;color:var(--navy);
}
.quote-band cite{display:block;margin-top:1.5rem;font-style:normal;color:var(--muted);font-size:.88rem;line-height:1.55}
.quote-band cite b{display:block;color:var(--navy);font-size:1rem;font-weight:800;margin-bottom:.15rem}

.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}

/* --- base tier (light card) --- */
.tier{
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;
  display:flex;flex-direction:column;
}
.tier-flag{
  display:inline-block;align-self:flex-start;background:var(--gold);color:#3B2A08;
  border-radius:999px;padding:5px 11px;font-size:.62rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;margin-bottom:.8rem;
}
.tier-amount{
  font-family:var(--display);font-size:2.05rem;font-weight:600;
  color:var(--navy);margin:.5rem 0 .1rem;line-height:1;
}
.tier-period{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800;margin:0 0 1.1rem}
.tier ul{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.65rem}
.tier ul li{position:relative;padding-left:1.5rem;color:var(--ink);line-height:1.5;font-size:.9rem}
.tier ul li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.tier ul ul{margin:.6rem 0 0;gap:.4rem}
.tier ul ul li{font-size:.83rem;color:var(--muted)}
.tier ul ul li::before{width:4px;height:4px;top:.6em;background:var(--muted)}
.tier .primary-btn,.tier .secondary-btn{margin-top:auto;align-self:flex-start}

/* --- modifiers ---
   These MUST come after the base .tier rules. ".tier--elite ul li" and
   ".tier ul li" have identical specificity (one class, two elements), so
   whichever is declared last wins. When the modifiers sat first, the base
   rule repainted the elite list var(--ink) — near-black on navy, i.e.
   invisible. Keep this block at the bottom. */
.tier--mid{border-color:var(--gold-soft)}

.tier--elite{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.tier--elite h3{color:var(--cream)}
.tier--elite .tier-amount{color:var(--gold)}
.tier--elite .tier-period{color:var(--gold-soft)}
.tier--elite ul li{color:var(--cream)}
.tier--elite ul ul li{color:var(--gold-soft)}
.tier--elite ul ul li::before{background:var(--gold-soft)}

/* This band used to be navy sitting directly above the navy footer — two
   almost-but-not-quite-matching blues meeting on a hard edge. It is now
   the brand rust, which separates cleanly from both the cream section
   above and the navy footer below. Deepened from #BD5A3D so cream body
   text clears WCAG AA: 5.4:1 at the light end, 6.9:1 at the dark end. */
.cta-band{background:linear-gradient(135deg,#A64B31,#8F3E27);color:var(--cream);padding:56px 0;text-align:center}
.cta-band .wrap{max-width:var(--wrap-narrow);margin:auto;padding:0 22px}
.cta-band h2{color:var(--cream)}
.cta-band p{color:var(--cream);line-height:1.6;margin:.9rem 0 0}
.cta-band .actions{justify-content:center}
.cta-band .secondary-btn{background:var(--cream);border-color:var(--cream);color:#8F3E27}
.cta-band .secondary-btn:hover{background:#fff;border-color:#fff;color:#8F3E27}

.site-foot{background:var(--navy);color:#D3E0EA;padding:46px 22px 26px;font-size:.86rem}
.site-foot .wrap{max-width:var(--wrap);margin:auto;padding:0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.5fr;gap:34px;align-items:start}
.site-foot img{height:56px;width:auto;margin-bottom:1rem}
.site-foot h5{
  font-family:var(--body);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1rem;font-weight:800;
}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.site-foot p{line-height:1.65;margin:0;color:#B9CBDA}
/* The global rule at the top of this stylesheet is
   strong{color:var(--blue-deep)} — near-black. The old override targeted
   ".footer strong", which stopped matching when the footer was renamed to
   .site-foot, so bold text inside dark panels went invisible. Every dark
   panel needs to reassert it. */
.site-foot strong,.cta-band strong,.sample-boundary strong,
.tier--elite strong{color:var(--cream)}
/* NOT .stats-band strong — that already sets its own gold, and this rule
   would win on source order and repaint the numbers cream. */
.site-foot a{color:#D3E0EA;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
.foot-bar{
  border-top:1px solid rgba(255,255,255,.16);margin-top:34px;padding-top:18px;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:#9FB6CB;font-size:.78rem;
}

@media(max-width:1100px){
  .hero-grid{grid-template-columns:1fr}
  .books-grid,.sneak-grid{grid-template-columns:repeat(3,1fr)}
  .grid3,.pricing{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:840px){
  .sample-grid{grid-template-columns:1fr}
  .sample-boundary{flex-direction:column;align-items:flex-start}
  .book-detail{grid-template-columns:1fr}
  .stats-band .wrap{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .books-grid,.sneak-grid{grid-template-columns:repeat(2,1fr)}
  .book-facts li{grid-template-columns:1fr;gap:.25rem}
}
@media(max-width:560px){
  .books-grid,.sneak-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}