/*
  GradeMitra heritage theme: duck-egg and dusty rose with old gold, a light, cool English palette.
  Loaded last on every public page, so its tokens win over the colours set in the older stylesheets
  (site.css, homepage-v2.css, english-academy-theme.css …). Change the palette here, in one place.
*/
:root{
  /* The "burgundy" names are kept so older stylesheets still pick these up; the colour is now dusty rose. */
  --hx-burgundy:#9A4E5E;--hx-burgundy-deep:#7E3E4C;
  /* Footer: a deep duck-egg slate, softer than black. */
  --hx-burgundy-ink:#33505A;
  /* Hero band: a pale duck-egg wash with dark text. */
  --hx-hero:#DFEDEB;--hx-hero-light:#F2F8F7;
  --hx-gold:#C9A55C;--hx-gold-ink:#7A5C1F;--hx-gold-on-dark:#E6D3A6;
  --hx-ivory:#FAF8F6;--hx-tint:#F3E9EA;--hx-line:#E3DCDA;--hx-line-strong:#D8CDCB;
  --hx-ink:#23282E;--hx-muted:#5A5F63;--hx-on-dark:#DCE9E8;
  --hx-shadow:0 14px 34px rgba(31,42,54,.08);

  /* Older token names used across the site. */
  --ink:var(--hx-ink);--copy:var(--hx-muted);--forest:var(--hx-burgundy);--forest2:var(--hx-burgundy-deep);--leaf:var(--hx-burgundy);
  --gold:var(--hx-gold);--cream:var(--hx-ivory);--sage:var(--hx-tint);--line:var(--hx-line);
  --gm-ink:var(--hx-ink);--gm-copy:var(--hx-muted);--gm-line:var(--hx-line);
  --gm-navy:var(--hx-burgundy);--gm-navy-deep:var(--hx-burgundy-deep);--gm-blue:var(--hx-burgundy);--gm-blue-soft:var(--hx-tint);
  --gm-burgundy:var(--hx-burgundy);--gm-burgundy-dark:var(--hx-burgundy-deep);--gm-blush:var(--hx-tint);
  --gm-action:var(--hx-burgundy);--gm-action-hover:var(--hx-burgundy-deep);--gm-action-soft:var(--hx-tint);--gm-focus:var(--hx-gold);
  --gm-shadow:var(--hx-shadow);
}
body{background:var(--hx-ivory)}

/* ---------- Header ---------- */
.header{background:#fff;border-bottom:1px solid var(--hx-line);box-shadow:none}
.desktop-nav>a,.desktop-nav .nav-menu>button{color:var(--hx-ink)}
.desktop-nav>a:hover,.desktop-nav .nav-menu>button:hover{color:var(--hx-burgundy)}
.desktop-nav .portal,#mobile-navigation a.portal{background:var(--hx-burgundy)!important;border-color:var(--hx-burgundy)!important;color:#fff!important;box-shadow:none!important}
.desktop-nav .portal:hover,#mobile-navigation a.portal:hover{background:var(--hx-burgundy-deep)!important}
.gm-brand-identity-name{color:var(--hx-ink)}
.gm-brand-identity-accent{color:var(--hx-burgundy)}

/* ---------- Buttons and links ---------- */
.button,.gm-unified-btn,.gm-product-cta,.gm-small-cta{background:var(--hx-burgundy)!important;color:#fff!important}
.button:hover,.gm-unified-btn:hover,.gm-product-cta:hover,.gm-small-cta:hover{background:var(--hx-burgundy-deep)!important;box-shadow:0 12px 24px rgba(126,62,76,.18)}
.gm-section-head>a,.gm-text-link{color:var(--hx-burgundy)}
:focus-visible{outline-color:var(--hx-gold)}

/* ---------- Hero: two products ---------- */
.gmh-hero{position:relative;background:radial-gradient(120% 140% at 100% 0%,#fff 0%,var(--hx-hero-light) 40%,var(--hx-hero) 100%);border-bottom:1px solid var(--hx-line);color:var(--hx-ink);padding:clamp(26px,4vw,44px) 0 clamp(36px,5vw,58px)}
.gmh-intro{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 32px;margin-bottom:clamp(20px,3vw,30px)}
.gmh-intro>div:first-child{min-width:0}
.gmh-eyebrow{margin:0;color:var(--hx-burgundy);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.gmh-title{margin:6px 0 0;color:var(--hx-ink);font:800 clamp(26px,3vw,36px)/1.15 "Plus Jakarta Sans",sans-serif;letter-spacing:-.015em}
.gmh-lede{max-width:500px;color:var(--hx-muted);font-size:16px;line-height:1.55}
.gmh-lede p{margin:0}
.gmh-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px}
.gmh-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--hx-line);border-radius:20px;background:#fff;color:var(--hx-ink);box-shadow:0 12px 30px rgba(31,42,54,.10);transition:transform .25s ease,box-shadow .25s ease}
.gmh-media{position:relative;height:clamp(190px,20vw,240px);background:var(--hx-tint);overflow:hidden}
.gmh-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.gmh-badge{position:absolute;top:14px;left:16px;z-index:1;padding:6px 12px;border-radius:999px;background:var(--hx-gold);color:#241A08;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.gmh-card--score .gmh-badge{background:var(--hx-burgundy);color:#fff}
.gmh-sample{position:absolute;top:16px;right:16px;z-index:1;padding:4px 10px;border-radius:999px;background:#fff;color:var(--hx-muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.gmh-body{display:flex;flex:1;flex-direction:column;gap:12px;padding:24px 26px 26px}
.gmh-kicker{margin:0;color:var(--hx-burgundy);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.gmh-name{margin:0;color:var(--hx-ink);font:800 clamp(26px,2.6vw,32px)/1.1 "Plus Jakarta Sans",sans-serif;letter-spacing:-.015em}
.gmh-name span{color:var(--hx-gold-ink)}
.gmh-summary{margin:0;color:var(--hx-muted);font-size:16px;line-height:1.55}
.gmh-text{color:var(--hx-muted);font-size:15px}
.gmh-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.gmh-tags li{padding:6px 12px;border-radius:999px;background:var(--hx-tint);font-size:13px;font-weight:600}
.gmh-cta{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:52px;margin-top:auto;padding:0 24px;border-radius:12px;background:var(--hx-gold);color:#241A08;font-weight:800;font-size:16px;text-decoration:none}
.gmh-card--score .gmh-cta{background:var(--hx-burgundy);color:#fff}
.gmh-cta:hover{filter:brightness(.95)}
.gmh-cta:focus-visible{outline:3px solid var(--hx-burgundy);outline-offset:3px}
.gmh-card--score .gmh-cta:focus-visible{outline-color:var(--hx-gold)}
.gmh-arrow{width:18px;height:18px;fill:none;stroke:currentColor}

/* Mitra Score sample English report */
.gmh-report{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,30px);height:auto;min-height:clamp(190px,20vw,240px);padding:34px 22px 18px;box-sizing:border-box}
.gmh-ring{flex:none;width:clamp(110px,11vw,140px);height:auto}
.gmh-ring-track{fill:#fff;stroke:#fff;stroke-width:12}
.gmh-ring-value{fill:none;stroke:var(--hx-gold);stroke-width:12;stroke-linecap:round;stroke-dasharray:258 314}
.gmh-ring-score{fill:var(--hx-ink);font:800 32px "Plus Jakarta Sans",sans-serif}
.gmh-ring-label{fill:var(--hx-muted);font:600 10px Manrope,sans-serif}
.gmh-skills{display:grid;gap:10px;width:min(220px,48%);margin:0;padding:0;list-style:none;font-size:13px;font-weight:600}
.gmh-skills li{display:grid;grid-template-columns:1fr auto;column-gap:8px}
.gmh-skills em{color:var(--hx-muted);font-style:normal}
.gmh-skills b{grid-column:1/-1;height:8px;margin-top:4px;border-radius:4px;background:#fff;overflow:hidden}
.gmh-skills i{display:block;width:var(--w);height:100%;border-radius:4px;background:var(--hx-burgundy);transform-origin:left center}
.gmh-skills .is-weak i{background:var(--hx-gold)}
@media(max-width:560px){.gmh-report{padding:60px 18px 22px}.gmh-skills{width:56%}}

/* ---------- Why GradeMitra (benefits) ---------- */
.gmw-section{padding:clamp(34px,5vw,56px) 0;background:var(--hx-ivory)}
.gmw-head{margin-bottom:22px}
.gmw-eyebrow{margin:0 0 6px;color:var(--hx-gold-ink);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.gmw-head h2{margin:0;color:var(--hx-ink);font:800 clamp(24px,2.6vw,32px)/1.15 "Plus Jakarta Sans",sans-serif;letter-spacing:-.015em}
.gmw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.gmw-item{display:flex;flex-direction:column;gap:8px;padding:22px 20px;border:1px solid var(--hx-line);border-radius:16px;background:#fff;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.gmw-item:hover{transform:translateY(-3px);border-color:var(--hx-line-strong);box-shadow:var(--hx-shadow)}
.gmw-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:4px;border-radius:12px;background:var(--hx-tint);color:var(--hx-burgundy)}
.gmw-icon svg{width:24px;height:24px}
.gmw-item strong{color:var(--hx-ink);font-size:16px;line-height:1.3}
.gmw-text{color:var(--hx-muted);font-size:14px;line-height:1.5}
.gmw-text p{margin:0}
@media(max-width:640px){.gmw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gmw-item:last-child:nth-child(odd){grid-column:1/-1}}

/* ---------- Motion: invite a click, never block reading ---------- */
@media(prefers-reduced-motion:no-preference){
  .gmh-card{animation:gmh-rise .7s ease-out both,gmh-glow 6s ease-in-out infinite;animation-delay:calc(var(--gmh-i,0)*.15s),calc(1.2s + var(--gmh-i,0)*3s)}
  .gmh-cta::after{content:"";position:absolute;inset:-4px;border-radius:15px;border:2px solid currentColor;opacity:0;pointer-events:none;animation:gmh-ping 2.4s ease-out infinite;animation-delay:calc(1.6s + var(--gmh-i,0)*1.2s)}
  .gmh-card--series .gmh-cta::after{border-color:var(--hx-gold-ink)}
  .gmh-arrow{animation:gmh-nudge 1.4s ease-in-out infinite}
  .gmh-badge{animation:gmh-bob 2.6s ease-in-out infinite}
  .gmh-ring-value{stroke-dasharray:0 314;animation:gmh-ring 1.6s ease-out .5s forwards}
  .gmh-skills i{animation:gmh-bar 1.2s ease-out both;animation-delay:calc(.3s + var(--i,0)*.2s)}
  .gmw-item{animation:gmh-rise .6s ease-out both;animation-delay:calc(var(--i,0)*.08s)}
  .gmh-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(31,42,54,.16)}
  .gmh-card:hover .gmh-media img{transform:scale(1.03)}
}
@keyframes gmh-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes gmh-glow{0%,30%,100%{box-shadow:0 12px 30px rgba(31,42,54,.10)}12%{box-shadow:0 0 0 6px rgba(224,198,142,.75),0 16px 38px rgba(31,42,54,.16)}}
@keyframes gmh-ping{0%{opacity:.7;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.12)}}
@keyframes gmh-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes gmh-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes gmh-ring{to{stroke-dasharray:258 314}}
@keyframes gmh-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Rest of the home page in the same palette ---------- */
.gm-section{background:var(--hx-ivory)}
.gm-section-head h2,.gm-insight-head h2,.gm-learning-head h2,.gm-showcase-card h3,.gm-path-brand h3,.gm-journey-copy strong,.gm-upcoming-state h3{color:var(--hx-ink)}
.gm-upcoming-state{border-color:var(--hx-line-strong);background:#fff}
.gm-upcoming-state>span{color:var(--hx-burgundy);background:var(--hx-tint)}
.gm-showcase-card{border-color:var(--hx-line)}
.gm-showcase-topline>b,.gm-skill-showcase .gm-showcase-topline>b{color:var(--hx-burgundy);background:var(--hx-tint)}
.gm-showcase-price strong,.gm-showcase-schedule .gm-meta-icon,.gm-showcase-syllabus summary span{color:var(--hx-burgundy)}
.gm-skill-showcase .gm-showcase-chips span{color:var(--hx-ink);background:var(--hx-ivory);border-color:var(--hx-line)}
.gm-skill-promise .gm-meta-icon,.gm-skill-promise strong{color:var(--hx-burgundy)}
.gm-insight-section{background:var(--hx-ivory)}
.gm-journey-card,.gm-performance-card{border-color:var(--hx-line);background:#fff}
.gm-journey-flow:before{border-color:var(--hx-line-strong);background:var(--hx-line-strong)}
.gm-journey-icon{color:var(--hx-burgundy);border-color:var(--hx-line);background:#fff}
.gm-journey-step:last-child .gm-journey-icon{color:#fff;background:var(--hx-burgundy);border-color:var(--hx-burgundy);box-shadow:0 12px 26px rgba(154,78,94,.24)}
.gm-journey-number{background:var(--hx-gold);color:#241A08}
.gm-performance-card .gm-insight-head>span,.gm-journey-card .gm-insight-head>span,.gm-learning-head .gm-section-eyebrow{color:var(--hx-burgundy);background:var(--hx-tint)}
.gm-performance-message{background:var(--hx-tint)}
.gm-performance-message strong,.gm-performance-message .gm-line-icon{color:var(--hx-burgundy)}
.gm-path-card,.gm-path-card.competitive{border-color:var(--hx-line);background:#fff}
.gm-path-card:before,.gm-path-card.competitive:before{background:var(--hx-burgundy)}
.gm-path-icon,.gm-path-card.competitive .gm-path-icon{color:var(--hx-burgundy);background:var(--hx-tint)}
.gm-path-brand small,.gm-path-card.competitive .gm-path-brand small{color:var(--hx-gold-ink)}
.gm-path-subtitle .gm-meta-icon,.gm-path-card.competitive .gm-path-subtitle .gm-meta-icon{color:var(--hx-burgundy)}
.gm-path-chips li,.gm-path-card.competitive .gm-path-chips li{color:var(--hx-ink);border-color:var(--hx-line);background:var(--hx-ivory)}
.gm-path-media,.gm-path-art,.gm-path-card.competitive .gm-path-media,.gm-path-card.competitive .gm-path-art{background:var(--hx-tint)}
.gm-path-art .gm-learning-art-icon,.gm-path-card.competitive .gm-path-art .gm-learning-art-icon{color:var(--hx-burgundy)}
.gm-stats{background:var(--hx-burgundy-deep)}

/* ---------- Footer ---------- */
footer.gm-site-footer{background:var(--hx-burgundy-ink);color:var(--hx-on-dark)}
footer.gm-site-footer .gm-brand-identity-accent,.gm-footer-brand-name .accent{color:var(--hx-gold-on-dark)!important}
.gm-footer-col h3{color:var(--hx-gold-on-dark)}
.gm-footer-about,.gm-footer-col a,.gm-footer-col span{color:var(--hx-on-dark)}
.gm-footer-col a:hover{color:#fff}
.gm-footer-bottom{color:#B7CCCA}

/* ---------- Live home page: scroll reveals, step-by-step "How it works" (with js/home-motion.js) ----------
   Content is hidden only under html.gm-motion, which the script sets, and never for reduced motion. */
@property --gm-score{syntax:"<number>";inherits:true;initial-value:0}
/* Entrances use translate/scale, so hover lifts and the step highlight (transform) still work. */
html.gm-motion .gm-reveal{opacity:0;translate:0 26px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.2,1),transform .3s ease,box-shadow .3s ease}
html.gm-motion .gm-reveal.is-in{opacity:1;translate:none}
html.gm-motion .gm-reveal:nth-child(2){transition-delay:.12s}
html.gm-motion .gm-reveal:nth-child(3){transition-delay:.24s}
/* Grids reveal their items one by one instead of all at once. */
html.gm-motion .gmw-grid.gm-reveal,html.gm-motion .gm-blog-grid.gm-reveal,html.gm-motion .gm-stats.gm-reveal{opacity:1;translate:none}
html.gm-motion .gmw-item,html.gm-motion .gm-blog-grid>article,html.gm-motion .gm-stats-grid>div{opacity:0;animation:none}
html.gm-motion .gmw-grid.is-in>.gmw-item,html.gm-motion .gm-blog-grid.is-in>article,html.gm-motion .gm-stats.is-in .gm-stats-grid>div{animation:gml-step .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*.1s)}
html.gm-motion .gmw-grid.is-in .gmw-icon{animation:gml-pop .55s ease-out backwards;animation-delay:calc(.15s + var(--i,0)*.1s)}
html.gm-motion .gm-stats.is-in .gm-stats-grid>div>span{animation:gml-pop .55s ease-out backwards;animation-delay:calc(.2s + var(--i,0)*.1s)}

/* How it works: each step rises in turn, its icon and number pop, and the dotted line draws behind them. */
html.gm-motion .gm-journey-step{opacity:0}
html.gm-motion .gm-journey-card.is-in .gm-journey-step{animation:gml-step .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.3s + var(--i,0)*.42s)}
html.gm-motion .gm-journey-card.is-in .gm-journey-icon{animation:gml-pop .6s ease-out backwards;animation-delay:calc(.38s + var(--i,0)*.42s)}
html.gm-motion .gm-journey-card.is-in .gm-journey-number{animation:gml-pop .5s ease-out backwards;animation-delay:calc(.6s + var(--i,0)*.42s)}
html.gm-motion .gm-journey-flow:before{clip-path:inset(0 100% 0 0);transition:clip-path calc(var(--gm-steps,5)*.42s) linear .3s}
html.gm-motion .gm-journey-card.is-in .gm-journey-flow:before{clip-path:inset(0 0 0 0)}
@media(max-width:680px){html.gm-motion .gm-journey-flow:before{clip-path:inset(0 0 100% 0)}html.gm-motion .gm-journey-card.is-in .gm-journey-flow:before{clip-path:inset(0 0 0 0)}}
/* Then a highlight keeps moving through the steps, so the section stays alive. */
.gm-journey-icon{transition:transform .4s ease,background-color .4s ease,color .4s ease,box-shadow .4s ease,border-color .4s ease}
.gm-journey-flow.is-cycling .gm-journey-step:last-child:not(.is-active) .gm-journey-icon{color:var(--hx-burgundy);background:#fff;border-color:var(--hx-line);box-shadow:0 10px 24px rgba(31,42,54,.08)}
.gm-journey-step.is-active .gm-journey-icon{color:#fff;background:var(--hx-burgundy);border-color:var(--hx-burgundy);transform:translateY(-5px) scale(1.05);box-shadow:0 14px 28px rgba(154,78,94,.28)}
.gm-journey-step.is-active .gm-journey-copy strong{color:var(--hx-burgundy)}
.gm-journey-copy strong{transition:color .4s ease}

/* Your performance: the score ring fills up. */
html.gm-motion .gm-performance-card.is-in .gm-performance-meter{animation:gml-meter 1.8s cubic-bezier(.2,.8,.2,1) .3s both}

/* Ambient movement: soft colour washes drift behind the hero; learning-path art floats. */
@media(prefers-reduced-motion:no-preference){
  .gmh-hero{overflow:hidden;isolation:isolate}
  .gmh-hero::before,.gmh-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none}
  .gmh-hero::before{width:420px;height:420px;left:-120px;top:-160px;background:radial-gradient(circle,#F3DDE1 0%,transparent 70%);animation:gml-drift 16s ease-in-out infinite alternate}
  .gmh-hero::after{width:520px;height:520px;right:-160px;bottom:-260px;background:radial-gradient(circle,#CFE6E3 0%,transparent 70%);animation:gml-drift 20s ease-in-out infinite alternate-reverse}
  .gm-path-art .gm-learning-art-icon{animation:gml-float 5s ease-in-out infinite}
  .gm-path-card{transition:transform .3s ease,box-shadow .3s ease}
  .gm-path-card:hover,.gm-showcase-card:hover,.gm-performance-card:hover,.gm-journey-card:hover{transform:translateY(-4px);box-shadow:var(--hx-shadow)}
  .gm-showcase-card,.gm-performance-card,.gm-journey-card{transition:transform .3s ease,box-shadow .3s ease,opacity .7s ease}
  .gmh-badge{background-image:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:250% 100%;animation:gmh-bob 2.6s ease-in-out infinite,gml-shine 3.2s ease-in-out infinite}
}
@keyframes gml-step{from{opacity:0;translate:0 18px}to{opacity:1;translate:none}}
@keyframes gml-pop{0%{scale:.55;opacity:0}65%{scale:1.12;opacity:1}100%{scale:1}}
@keyframes gml-meter{from{--gm-score:0}}
@keyframes gml-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(90px,50px) scale(1.15)}}
@keyframes gml-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes gml-shine{0%,60%{background-position:150% 0}100%{background-position:-100% 0}}