/* ==========================================================================
   The Spanish Academy — Brand Design System
   Palette derived from the Academy crest: deep navy, laurel gold, champagne.
   Author: custom build. No frameworks. No jQuery.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* Brand — navy */
  --navy-900:#050B1C;
  --navy-800:#0A1430;
  --navy-700:#0E1F45;   /* primary brand navy */
  --navy-600:#14294F;
  --navy-500:#1E3A6B;
  --navy-400:#3A5384;
  --navy-300:#6C80A5;
  --navy-200:#AAB6CC;
  --navy-100:#DDE3EE;

  /* Brand — laurel gold */
  --gold-700:#8F6A18;
  --gold-600:#A97F23;
  --gold-500:#C0912F;   /* primary accent */
  --gold-400:#D4AC5B;
  --gold-300:#E3CB94;
  --gold-200:#EFE0BE;
  --gold-100:#F7EFDC;

  /* Neutrals */
  --cream:#FAF7F0;
  --cream-2:#F4EFE4;
  --paper:#FFFFFF;
  --ink:#141821;
  --body:#4A5261;
  --muted:#6E7686;
  --line:#E7E2D6;
  --line-soft:rgba(14,31,69,.08);

  /* Semantic */
  --bg:var(--paper);
  --fg:var(--ink);

  /* Typography */
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --fs-display:clamp(2.75rem,1.6rem + 4.6vw,5.25rem);
  --fs-h1:clamp(2.25rem,1.5rem + 3vw,3.75rem);
  --fs-h2:clamp(1.85rem,1.3rem + 2.1vw,2.9rem);
  --fs-h3:clamp(1.3rem,1.13rem + .62vw,1.6rem);
  --fs-h4:clamp(1.08rem,1.02rem + .28vw,1.22rem);
  --fs-lead:clamp(1.05rem,1rem + .35vw,1.25rem);
  --fs-body:1rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;

  /* Space */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:2.75rem;--sp-8:3.5rem;
  --sp-9:4.5rem; --sp-10:6rem;  --sp-11:7.5rem;
  --section-y:clamp(3.75rem,2.2rem + 6vw,7rem);
  --gutter:clamp(1.15rem,.6rem + 2vw,2rem);
  --maxw:1240px;
  --maxw-narrow:820px;

  /* Radii + elevation */
  --r-xs:6px; --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(10,20,48,.05),0 4px 14px rgba(10,20,48,.05);
  --sh-2:0 2px 6px rgba(10,20,48,.06),0 16px 40px rgba(10,20,48,.09);
  --sh-3:0 30px 70px rgba(10,20,48,.16);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.18s; --t:.32s; --t-slow:.6s;

  --header-h:84px;
}

/* ------------------------------------------------------------- 2. RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.72;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* `overflow-x:hidden` here was breaking `position:fixed` on mobile browsers:
     it propagates to the viewport and turns it into a scroll container, so the
     fixed .site-header scrolled up with the page and got clipped by the top of
     the screen (leaving only the pill's cream bottom edge as a white line).
     `overflow-x:clip` stops the sideways scroll exactly the same way WITHOUT
     creating a scroll container, so fixed positioning keeps working. */
  overflow-x:clip;
}
@supports not (overflow-x: clip){
  body{ overflow-x:hidden; }
}
img,svg,video{max-width:100%;display:block;height:auto}
h1,h2,h3,h4,h5,h6{margin:0 0 .6em;color:var(--navy-700);line-height:1.16;font-weight:600;letter-spacing:-.02em}
h1,h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;line-height:1.08}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)} h4{font-size:var(--fs-h4)}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
a{color:var(--navy-600);text-decoration:none;transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--gold-600)}
ul,ol{margin:0 0 1.15em;padding-left:1.15em}
li{margin-bottom:.4em}
strong,b{font-weight:600;color:var(--navy-700)}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-7) 0}
button{font:inherit;cursor:pointer}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold-200);color:var(--navy-800)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--sp-4);top:-100px;z-index:2000;background:var(--navy-700);color:#fff;
  padding:.7rem 1.1rem;border-radius:var(--r-xs);font-size:var(--fs-sm);font-weight:600;transition:top var(--t) var(--ease)}
.skip-link:focus{top:var(--sp-4);color:#fff}

/* ------------------------------------------------------------ 3. LAYOUT */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container-narrow{max-width:var(--maxw-narrow)}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:clamp(2.75rem,1.8rem + 4vw,5rem)}
.section--cream{background:var(--cream)}
.section--cream2{background:var(--cream-2)}
.section--navy{background:var(--navy-700);color:var(--navy-100)}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{color:#fff}
.section--navy strong{color:#fff}
.section--navy a{color:var(--gold-300)}
.section--navy p{color:rgba(255,255,255,.82)}

.grid{display:grid;gap:var(--sp-5)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-gap-lg{gap:clamp(1.5rem,1rem + 2vw,2.75rem)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:start}
.split--mid{align-items:center}
.split--wide-left{grid-template-columns:1.15fr .85fr}
.split--wide-right{grid-template-columns:.85fr 1.15fr}
.stack>*+*{margin-top:var(--sp-5)}
.text-center{text-align:center}
.mx-auto{margin-inline:auto}
.mt-6{margin-top:var(--sp-6)} .mt-7{margin-top:var(--sp-7)} .mt-8{margin-top:var(--sp-8)}

/* ------------------------------------------------- 4. TYPE COMPONENTS */
.eyebrow{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--font-body);font-size:.7rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-600);margin-bottom:1rem;
}
.eyebrow::before{content:"";width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-500))}
.eyebrow--center::after{content:"";width:32px;height:1px;background:linear-gradient(270deg,transparent,var(--gold-500))}
.section--navy .eyebrow{color:var(--gold-300)}
.section--navy .eyebrow::before,.section--navy .eyebrow--center::after{background:linear-gradient(90deg,transparent,var(--gold-400))}

.section-head{max-width:760px;margin-bottom:clamp(2.25rem,1.5rem + 2.4vw,3.5rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{font-size:var(--fs-lead);color:var(--muted);line-height:1.68}
.section--navy .section-head p{color:rgba(255,255,255,.75)}

.lead{font-size:var(--fs-lead);line-height:1.68;color:var(--navy-500)}
.section--navy .lead{color:rgba(255,255,255,.86)}
.prose{max-width:74ch}
.prose h3{margin-top:2.2em;color:var(--navy-700)}
.prose h3:first-child{margin-top:0}
.prose h4{margin-top:1.9em;color:var(--navy-600)}
.rule-gold{width:64px;height:2px;background:linear-gradient(90deg,var(--gold-500),var(--gold-300));border:0;margin:0 0 1.75rem}
.section-head--center .rule-gold{margin-inline:auto}

/* Pull-quote / statement */
.statement{
  font-family:var(--font-display);font-size:clamp(1.5rem,1.1rem + 1.7vw,2.35rem);
  line-height:1.32;color:var(--navy-700);font-weight:500;letter-spacing:-.015em;
}
.statement--navy{color:#fff}
blockquote.quote{
  margin:0;padding:clamp(1.6rem,1rem + 2vw,2.6rem);background:var(--gold-100);
  border-left:3px solid var(--gold-500);border-radius:0 var(--r-sm) var(--r-sm) 0;
}
blockquote.quote p{font-family:var(--font-display);font-size:clamp(1.2rem,1rem + .9vw,1.65rem);
  line-height:1.42;color:var(--navy-700);font-style:italic;margin:0}

/* --------------------------------------------------------- 5. BUTTONS */
.btn{
  --btn-bg:var(--navy-700);--btn-fg:#fff;--btn-bd:var(--navy-700);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.85rem;border-radius:var(--r-pill);border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:.9375rem;font-weight:600;letter-spacing:.01em;line-height:1;
  text-align:center;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--navy-800);
  transform:translateY(101%);transition:transform var(--t) var(--ease-out);
}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:translateY(0)}
.btn .ico{width:17px;height:17px;flex:none;transition:transform var(--t) var(--ease)}
.btn:hover .ico{transform:translateX(3px)}

.btn--gold{--btn-bg:var(--gold-500);--btn-bd:var(--gold-500);--btn-fg:var(--navy-800)}
.btn--gold::after{background:var(--gold-400)}
.btn--gold:hover{color:var(--navy-900)}
.btn--outline{--btn-bg:transparent;--btn-fg:var(--navy-700);--btn-bd:rgba(14,31,69,.25)}
.btn--outline::after{background:var(--navy-700)}
.btn--outline:hover{border-color:var(--navy-700);color:#fff}
.btn--ghost-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.35)}
.btn--ghost-light::after{background:#fff}
.btn--ghost-light:hover{color:var(--navy-800);border-color:#fff}
.btn--sm{padding:.68rem 1.3rem;font-size:.85rem}
.btn--lg{padding:1.1rem 2.3rem;font-size:1rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.btn-row--center{justify-content:center}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:var(--fs-sm);
  color:var(--navy-600);letter-spacing:.005em;
}
.link-arrow .ico{width:15px;height:15px;transition:transform var(--t) var(--ease)}
.link-arrow:hover{color:var(--gold-600)}
.link-arrow:hover .ico{transform:translateX(4px)}

/* ------------------------------------------------------------ 6. ICONS */
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico--solid{fill:currentColor;stroke:none}
.icon-badge{
  width:56px;height:56px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;
  background:linear-gradient(145deg,var(--gold-100),var(--gold-200));color:var(--gold-700);
  border:1px solid rgba(192,145,47,.24);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)
}
.icon-badge .ico{width:26px;height:26px;stroke-width:1.4}
.icon-badge--navy{background:linear-gradient(145deg,var(--navy-600),var(--navy-800));color:var(--gold-300);border-color:rgba(255,255,255,.12)}
.icon-circle{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--gold-100);color:var(--gold-700);border:1px solid rgba(192,145,47,.2)}

/* ------------------------------------------------------------- 7. HEADER */
/* Light Embossed Glass SaaS Floating Header */
.site-header{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  width:min(1240px, calc(100vw - 32px));
  z-index:900;
  background:linear-gradient(135deg, rgba(238, 241, 251, 0.94) 0%, rgba(247, 248, 253, 0.90) 50%, rgba(253, 246, 238, 0.94) 100%) !important;
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-radius:100px !important;
  border:1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow:inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95), inset 0 -1.5px 1px rgba(180, 190, 215, 0.4), 0 14px 35px rgba(12, 26, 60, 0.12), 0 0 20px rgba(212, 163, 58, 0.1) !important;
  /* Was `transition:all`, which animated `top` (and width/transform) on every
     scroll and made the bar visibly slide. Only the looks animate now. */
  transition:background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
             border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
             box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  padding:4px 14px;
}
.site-header.is-stuck{
  top:10px;
  background:linear-gradient(135deg, rgba(238, 241, 251, 0.98) 0%, rgba(247, 248, 253, 0.95) 50%, rgba(253, 246, 238, 0.98) 100%) !important;
  border-color:rgba(212, 163, 58, 0.45) !important;
  box-shadow:inset 0 1.5px 0.5px rgba(255, 255, 255, 1), inset 0 -1.5px 1px rgba(180, 190, 215, 0.5), 0 18px 45px rgba(12, 26, 60, 0.16) !important;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  height:58px;
  max-width:100%;
}
.brand{display:flex;align-items:center;gap:.7rem;flex:none;margin-right:auto}
.brand img, .brand svg{
  height:44px;
  width:auto;
  mix-blend-mode:normal !important;
  filter:none !important;
  transition:transform 0.3s ease, opacity 0.3s ease;
}
.brand:hover{opacity:.9}

.nav-item{position:relative}
.nav-list{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
.nav-link{
  position:relative;
  display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .95rem;border-radius:30px;
  font-size:.92rem;font-weight:600;color:#0C1A3C !important;letter-spacing:-.005em;white-space:nowrap;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.nav-link:hover,.nav-item:hover>.nav-link,.nav-link[aria-expanded=true]{
  color:#8C5B14 !important;
  background:rgba(212, 163, 58, 0.15) !important;
}
.nav-link.is-active{
  color:#8C5B14 !important;
  font-weight:700;
  background:linear-gradient(135deg, rgba(212, 163, 58, 0.22), rgba(243, 208, 121, 0.15)) !important;
  border:1px solid rgba(212, 163, 58, 0.38) !important;
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
.nav-link.is-active::after{display:none}
.nav-link .caret{width:12px;height:12px;stroke:#0C1A3C !important;stroke-width:2.1;transition:transform var(--t) var(--ease);opacity:.85}
.nav-item:hover .caret,.nav-link[aria-expanded=true] .caret{stroke:#8C5B14 !important;transform:rotate(180deg)}

/* Header Apply Now Button - Attached SS Gold Color */
.header-cta .btn--gold{
  background:#C7942C !important;
  color:#0C1A3C !important;
  font-weight:700 !important;
  font-size:14px !important;
  padding:10px 24px !important;
  border-radius:50px !important;
  border:1px solid #B88522 !important;
  box-shadow:0 4px 14px rgba(199, 148, 44, 0.25) !important;
  transition:all 0.3s ease !important;
}
.header-cta .btn--gold:hover{
  background:#D49E33 !important;
  color:#0C1A3C !important;
  transform:translateY(-1px) scale(1.03) !important;
  box-shadow:0 8px 20px rgba(199, 148, 44, 0.35) !important;
}

.dropdown{
  position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%,8px);
  min-width:290px;padding:.55rem;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r);box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t);
  transition-delay:0s;
}
/* Invisible bridge across the gap so moving mouse down into panel never passes over dead space */
.dropdown::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.dropdown--wide{min-width:520px;display:grid;grid-template-columns:1fr 1fr;gap:.15rem}

/* ---- Mega panel: compact size & reliable hover bridge ---- */
.header-inner{position:relative}
.nav-item--mega{position:static}
/* Higher specificity than `.nav-item:hover > .dropdown`, which otherwise re-applies
   translate(-50%) and drags the full-width panel off the left of the screen. */
.nav-list .nav-item--mega>.dropdown--mega{
  left:50%;right:auto;
  width:min(920px, calc(100vw - (2 * var(--gutter))));
  min-width:0;
  top:calc(100% + 2px);
  transform:translate(-50%, 6px);padding:1.35rem 1.4rem;
  display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:1.25rem;
  background:#ffffff;border:1px solid rgba(14,31,69,.08);
  border-radius:20px;box-shadow:0 20px 45px rgba(10,20,48,.12);
}
.nav-list .nav-item--mega:hover>.dropdown--mega,
.nav-list .nav-item--mega:focus-within>.dropdown--mega,
.dropdown--mega:hover{transform:translate(-50%, 0);opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.mega-list{display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.25rem;align-content:start}
.mega-item{
  display:flex;gap:.75rem;align-items:flex-start;padding:.5rem .6rem;
  border-radius:12px;
  transition:background var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mega-item:hover{background:var(--cream);padding-left:.95rem;transform:translateX(3px)}
.mega-ico{
  width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:#FEF6E6;color:#C07D2B;border:1px solid rgba(192,145,47,.18);
  transition:background var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t) var(--ease);
}
.mega-ico .ico{width:20px;height:20px;stroke-width:1.6}
.mega-item:hover .mega-ico{background:var(--navy-700);color:var(--gold-300);border-color:var(--navy-700)}
.mega-txt{min-width:0}
.mega-txt strong{display:block;font-size:.875rem;font-weight:700;color:#1E293B;
  line-height:1.28;margin-bottom:.1rem;letter-spacing:-.01em;transition:color var(--t-fast) var(--ease)}
.mega-txt>span{display:block;font-size:.76rem;font-weight:400;color:#64748B;line-height:1.35}
.mega-item:hover .mega-txt strong{color:var(--navy-800)}

/* Cream card, gold accents, navy type — spacious height layout */
.mega-promo{
  position:relative;isolation:isolate;overflow:hidden;border-radius:16px;
  padding:1.4rem 1.25rem;display:flex;flex-direction:column;align-items:flex-start;
  min-height:340px;
  background:linear-gradient(165deg, #FFFDF9 0%, #FFF8EC 45%, #F5E8C9 100%);
  border:1px solid #F3E6CB;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.mega-promo:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(192,145,47,.22)}
.mega-promo img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  opacity:0.28; mix-blend-mode:multiply; filter:contrast(1.05) brightness(1.02);
  transform:scale(1.02);transition:transform .9s var(--ease-out), opacity .4s ease}
.mega-promo:hover img{transform:scale(1.06); opacity:0.38}
.mega-promo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(172deg,rgba(255,253,249,.82) 0%,rgba(252,246,233,.75) 45%,rgba(245,232,201,.85) 100%)}
.mega-pill{
  align-self:flex-start;flex:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.38rem;padding:.34rem .78rem;border-radius:var(--r-pill);
  background:#FDEECC;border:1px solid rgba(192,145,47,.25);
  font-size:.74rem;font-weight:700;letter-spacing:.01em;color:#92400E;
}
.mega-pill .ico{width:13px;height:13px;color:#D97706}
.mega-promo>strong{display:block;font-family:var(--font-body);font-size:1.32rem;font-weight:700;
  color:#0F172A;line-height:1.22;margin:1rem 0 .45rem;letter-spacing:-.015em}
.mega-copy{display:block;font-size:.78rem;color:#475569;line-height:1.48;
  margin-bottom:1.1rem}
.mega-btn{
  margin-top:auto;align-self:stretch;justify-content:center;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.42rem;
  padding:.72rem 1rem;border-radius:var(--r-pill);
  background:linear-gradient(135deg,#E6CA7E 0%,#C49520 100%);color:#3B2602;
  font-size:.8rem;font-weight:700;letter-spacing:.01em;
  box-shadow:0 4px 12px rgba(196,149,32,.28);transition:box-shadow var(--t) var(--ease), transform var(--t) var(--ease)
}
.mega-btn .ico{width:14px;height:14px;transition:transform var(--t) var(--ease)}
.mega-promo:hover .mega-btn{box-shadow:0 8px 20px rgba(196,149,32,.42); transform:translateY(-1px)}
.mega-promo:hover .mega-btn .ico{transform:translateX(4px)}
@media (max-width:1180px){
  .nav-list .nav-item--mega>.dropdown--mega{grid-template-columns:minmax(0,1fr) 210px}
  .mega-promo{padding:.9rem}
  .mega-promo>strong{font-size:1.1rem;margin-top:.6rem}
  .mega-copy{font-size:.72rem;margin-bottom:.75rem}
}
.nav-item:hover>.dropdown,
.nav-item:focus-within>.dropdown,
.dropdown:hover{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
  transition-delay:0s;     /* opens immediately */
}
/* Keep the last item's panel inside the viewport */
.nav-list>.nav-item:last-child .dropdown{left:auto;right:0;transform:translate(0,10px)}
.nav-list>.nav-item:last-child:hover>.dropdown,
.nav-list>.nav-item:last-child:focus-within>.dropdown{transform:translate(0,0)}
/* Scoped away from the mega panel, which has its own layout */
.dropdown:not(.dropdown--mega) a{
  display:block;padding:.6rem .8rem;border-radius:var(--r-xs);
  font-size:.875rem;font-weight:500;color:var(--navy-600);line-height:1.4;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease);
}
.dropdown:not(.dropdown--mega) a:hover{background:var(--cream);color:var(--navy-800);padding-left:1.05rem}
.dropdown:not(.dropdown--mega) a span{display:block;font-size:.75rem;font-weight:400;color:var(--muted);margin-top:.1rem}

.header-cta{display:flex;align-items:center;gap:.55rem;flex:none}
.nav-toggle{
  display:none;width:46px;height:46px;border:1px solid var(--line-soft);background:#fff;
  border-radius:var(--r-xs);align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.nav-toggle span{display:block;width:19px;height:1.7px;background:var(--navy-700);border-radius:2px;transition:transform var(--t) var(--ease),opacity var(--t-fast) var(--ease)}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6.7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg)}

/* Mobile drawer */
.mobile-nav{
  position:fixed;inset:var(--header-h) 0 0;z-index:880;background:#fff;
  padding:var(--sp-5) var(--gutter) var(--sp-9);overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);visibility:hidden;
  transition:transform var(--t-slow) var(--ease-out),visibility var(--t-slow);
}
.mobile-nav.is-open{transform:translateX(0);visibility:visible}
.mobile-nav a{display:block;padding:.85rem .25rem;font-size:1.02rem;font-weight:500;color:var(--navy-700);border-bottom:1px solid var(--line)}
.mobile-nav .m-group>button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.85rem .25rem;background:none;border:0;border-bottom:1px solid var(--line);
  font-size:1.02rem;font-weight:600;color:var(--navy-700);text-align:left;
}
.mobile-nav .m-group>button .caret{width:16px;height:16px;transition:transform var(--t) var(--ease)}
.mobile-nav .m-group>button[aria-expanded=true] .caret{transform:rotate(180deg)}
.mobile-nav .m-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t) var(--ease)}
.mobile-nav .m-group>button[aria-expanded=true]+.m-panel{grid-template-rows:1fr}
.mobile-nav .m-panel>div{overflow:hidden}
.mobile-nav .m-panel a{padding-left:1.1rem;font-size:.94rem;font-weight:400;color:var(--body)}
.mobile-nav .m-cta{margin-top:var(--sp-6);display:grid;gap:.7rem}
body.nav-open{overflow:hidden}

/* ---------------------------------------------------------- 8. PRELOADER */
/* The preloader is styled entirely by the inline critical CSS in <head> so that it
   paints on the first frame, before this stylesheet arrives. Nothing to do here. */

/* --------------------------------------------------------------- 9. HERO */
/* --------------------------------------------------------------- 9. HERO REDESIGN */
.hero{
  position:relative;
  padding-top:calc(var(--header-h) + clamp(2.5rem, 2rem + 3vw, 4.8rem));
  padding-bottom:0 !important;
  background:linear-gradient(180deg, #eef1fb 0%, #f7f8fc 45%, #fdf6ee calc(100% - 68px), #ffffff calc(100% - 68px), #ffffff 100%) !important;
  color:var(--navy-900);
  overflow:visible;
  isolation:isolate;
}
.hero + .section {
  padding-top:clamp(7.5rem, 6rem + 4vw, 10rem) !important;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.2;
  background-image:linear-gradient(rgba(11,31,58,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(11,31,58,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 40%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 80%);
}
.hero::after{
  display:none !important;
}

.hero-grid{
  display:grid;
  grid-template-columns:0.88fr 1.12fr;
  gap:clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items:center;
}
@media (max-width: 991px){
  .hero-grid{grid-template-columns:1fr;gap:3rem;text-align:left}
}

.hero-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:#8C5B14;
  background:linear-gradient(135deg, rgba(212, 163, 58, 0.2), rgba(243, 208, 121, 0.08));
  padding:7px 18px;border-radius:30px;
  border:1px solid rgba(212, 163, 58, 0.42);
  box-shadow:0 4px 16px rgba(212, 163, 58, 0.14);
  font-weight:700;letter-spacing:0.06em;
  text-transform:uppercase;font-size:0.8rem;
  margin-bottom:22px;
}
.hero .eyebrow::before{display:none}

/* Live Dot Pulse Animation Badge */
.live-dot-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:10px;
  height:10px;
  margin-right:2px;
}
.live-dot{
  position:relative;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#D4A33A;
  box-shadow:0 0 8px rgba(212, 163, 58, 0.7);
}
.live-dot-ping{
  position:absolute;
  inset:-2px;
  border-radius:50%;
  background:rgba(212, 163, 58, 0.7);
  animation:livePing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes livePing{
  75%, 100%{
    transform:scale(2.5);
    opacity:0;
  }
}

.hero-title{margin-bottom:26px;letter-spacing:-1px;text-align:left;line-height:1.25}
.hero-title-main{
  display:block;
  font-family:'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size:clamp(2.5rem, 2rem + 2.5vw, 3.8rem);
  font-weight:700;
  color:#0B1F3A;
  line-height:1.2;
  letter-spacing:-.015em;
  padding-bottom:6px;
}
.hero-title-sub{
  display:block;
  font-family:'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style:italic;
  font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
  font-weight:500;
  color:#B8851B;
  margin-top:.45rem;
  letter-spacing:.01em;
  padding-bottom:6px;
}
/* Clipping Text Reveal Animation */
.hero .hl{
  display:block;
  overflow:hidden;
  padding-block:.08em;
  margin-block:-.08em;
}
.hero h1 .hl > span{
  display:block;
  transform:translateY(100%);
  opacity:0;
}
body.is-ready .hero h1 .hl > span{
  animation:clipTextReveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}
body.is-ready .hero h1 .hl:nth-child(1) > span{animation-delay:0.12s}
body.is-ready .hero h1 .hl:nth-child(2) > span{animation-delay:0.32s}

@keyframes clipTextReveal{
  from{
    opacity:0;
    transform:translateY(100%);
  }
  to{
    opacity:1;
    transform:translateY(0%);
  }
}

.hero-sub{
  font-family:'Cormorant Garamond', Georgia, serif !important;
  font-style:italic !important;
  font-size:clamp(1.12rem, 1.05rem + 0.4vw, 1.3rem) !important;
  font-weight:500 !important;
  color:#1E3A6B !important;
  line-height:1.55 !important;
  max-width:52ch !important;
  margin-bottom:30px !important;
  letter-spacing:0.01em !important;
}
body.is-ready .hero-sub .hl > span{
  animation:clipTextReveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both;
}

/* Staged SaaS Hero Entrance & Staggered Reveal Animations */
body.is-ready .hero-copy > .eyebrow{animation:heroFadeUp .75s cubic-bezier(.16,1,.3,1) .05s both}
body.is-ready .hero-copy > .btn-row{animation:heroFadeUp .85s cubic-bezier(.16,1,.3,1) .78s both}

@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* Horizontal Left-to-Right Clip-Path Sweep Reveal for Confidence (Solid Gold Color) */
.accent-sweep{
  display:inline-block;
  position:relative;
  color:#D4A33A !important;
  font-style:italic;
  padding-right:4px;
  clip-path:inset(0 100% 0 0);
  -webkit-clip-path:inset(0 100% 0 0);
}
body.is-ready .accent-sweep{
  animation:horizontalSweep 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}
@keyframes horizontalSweep{
  from{
    clip-path:inset(0 100% 0 0);
    -webkit-clip-path:inset(0 100% 0 0);
  }
  to{
    clip-path:inset(0 0 0 0);
    -webkit-clip-path:inset(0 0 0 0);
  }
}

/* Classic Luxury Gold Pill Button */
.btn--gold-pill::after,
.btn--navy-pill::after{
  display:none !important;
  content:none !important;
}

/* Primary Hero Gold Pill Button ("Begin Your Enquiry") - Attached SS Gold Color */
.btn--gold-pill,
.btn--gold-pill::before,
.btn--gold-pill::after{
  background:#C7942C !important;
  color:#0C1A3C !important;
}
.btn--gold-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:#C7942C !important;
  color:#0C1A3C !important;
  font-weight:700;font-size:16px;letter-spacing:0.02em;
  padding:16px 36px;border-radius:50px;
  border:1px solid #B88522 !important;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(199, 148, 44, 0.25);
  transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
  text-decoration:none;
}
.btn--gold-pill:hover,
.btn--gold-pill:hover::before,
.btn--gold-pill:hover::after{
  background:#D49E33 !important;
  color:#0C1A3C !important;
  transform:translateY(-2px) scale(1.025);
  box-shadow:0 12px 30px rgba(199, 148, 44, 0.38);
}
.btn--gold-pill svg,
.btn--gold-pill svg path,
.btn--gold-pill svg line,
.btn--gold-pill svg polyline{
  width:18px;height:18px;
  stroke:#0C1A3C !important;
  color:#0C1A3C !important;
  transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn--gold-pill:hover svg{stroke:#0C1A3C !important;transform:translateX(4px)}

/* Secondary Navy Pill Button: Idle & Smooth Hover Animation */
.btn--navy-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:#FFFFFF !important;
  color:#0C1A3C !important;
  font-weight:700;font-size:16px;
  padding:16px 32px;border-radius:50px;
  border:1px solid #0C1A3C;cursor:pointer;
  box-shadow:0 4px 14px rgba(12, 26, 60, 0.08);
  transition:transform 0.3s ease-out, background-color 0.3s ease-out, color 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
  text-decoration:none;
}
.btn--navy-pill:hover{
  background:#0C1A3C !important;
  border-color:#0C1A3C !important;
  color:#FFFFFF !important;
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 10px 25px rgba(12, 26, 60, 0.3);
}

/* ------------------------------------------------ Right Column Media Container */
.hero-media-wrapper{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}
body.is-ready .hero-media-wrapper{
  animation:heroGraphicZoom 1.1s cubic-bezier(.16,1,.3,1) .88s both;
}
@keyframes heroGraphicZoom{
  from{opacity:0;transform:scale(0.95) translateY(15px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.hero-media-container{
  position:relative;
  width:100%;
  max-width:720px;
  display:flex;
  align-items:center;
  justify-content:center;
}


/* Hero Art Container & Floating Animation */
.hero-art-box{
  position:relative;
  width:115%;
  max-width:115%;
  transform-origin:center center;
  animation:heroFloat 7s ease-in-out infinite;
  filter:drop-shadow(0 25px 50px rgba(11, 31, 58, 0.22));
  z-index:2;
}
@keyframes heroFloat{
  0%, 100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
.hero-art-img{
  width:100%;
  height:auto;
  display:block;
  image-rendering:-webkit-optimize-contrast;
}

/* 4 Glassmorphism Badges Around Hero Graphic */
.glass-badge{
  position:absolute;
  z-index:10;
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255, 255, 255, 0.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(212, 163, 58, 0.35);
  box-shadow:0 12px 30px rgba(11, 31, 58, 0.12), 0 2px 6px rgba(11, 31, 58, 0.04);
  border-radius:16px;
  padding:10px 16px;
  animation:floatBadge 6s ease-in-out infinite;
  pointer-events:auto;
  transition:transform .3s ease;
}
.glass-badge:hover{transform:scale(1.06) translateY(-4px) !important}

.glass-badge-icon{
  width:34px;height:34px;
  border-radius:10px;
  background:rgba(212, 163, 58, 0.15);
  color:#0B1F3A;
  display:flex;align-items:center;justify-content:center;
}
.glass-badge-icon svg{width:18px;height:18px;stroke:#0B1F3A}

.glass-badge-text{
  font-family:Inter, sans-serif;
  font-size:0.82rem;
  font-weight:700;
  color:#0B1F3A;
  white-space:nowrap;
}

.glass-badge--chat{top:8%;left:-4%;animation-delay:0s}
.glass-badge--video{top:6%;right:-4%;animation-delay:-1.5s}
.glass-badge--lang{bottom:12%;left:-6%;animation-delay:-3s}
.glass-badge--mic{bottom:8%;right:-4%;animation-delay:-4.5s}

@keyframes floatBadge{
  0%, 100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-10px) scale(1.02)}
}

@media (max-width: 600px){
  .glass-badge{padding:8px 12px}
  .glass-badge-text{font-size:0.75rem}
  .glass-badge--chat{top:2%;left:-2%}
  .glass-badge--video{top:2%;right:-2%}
  .glass-badge--lang{bottom:4%;left:-2%}
  .glass-badge--mic{bottom:4%;right:-2%}
}

/* White Luxury Card Background with Dark Navy & Gold Accents */
.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: clamp(3rem, 2.5rem + 3vw, 4.5rem);
  margin-bottom: -68px;
  position: relative;
  z-index: 10;
  width: 100%;
}

.stat-card {
  position: relative;
  background: #FFFFFF !important;
  border: 1px solid rgba(12, 26, 60, 0.12) !important;
  border-radius: 24px;
  padding: 24px 18px 22px 18px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 1), 0 18px 42px rgba(12, 26, 60, 0.08), 0 4px 14px rgba(12, 26, 60, 0.04) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #0C1A3C;
}

/* Navy & Gold Dual Top Border Highlight Accent */
.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, #0C1A3C 0%, #C7942C 50%, #0C1A3C 100%);
  opacity: 0.95;
  transition: opacity 0.3s ease, height 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-8px) scale(1.025);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 1), 0 28px 60px rgba(12, 26, 60, 0.16), 0 0 25px rgba(199, 148, 44, 0.2) !important;
  border-color: rgba(12, 26, 60, 0.28) !important;
}
.stat-card:hover::before {
  height: 4.5px;
  opacity: 1;
}

/* Category Tag - Gold Accent Pill */
.stat-card-badge-top {
  display: inline-block;
  font-family: Inter, sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8C5B14;
  background: rgba(212, 163, 58, 0.14);
  border: 1px solid rgba(212, 163, 58, 0.32);
  padding: 3px 11px;
  border-radius: 20px;
  margin-bottom: 12px;
}

/* Rich Navy Blue Dual-Ring Icon Badge Container with Gold Icon */
.stat-icon-badge {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0C1A3C 0%, #152650 100%);
  border: 1.5px solid #C7942C;
  box-shadow: 0 0 0 3px rgba(12, 26, 60, 0.12), 0 6px 16px rgba(12, 26, 60, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: #DFB251;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.stat-icon-badge svg {
  width: 22px;
  height: 22px;
  stroke: #DFB251;
}

.stat-card:hover .stat-icon-badge {
  transform: scale(1.14) rotate(5deg);
  background: linear-gradient(135deg, #152650 0%, #0C1A3C 100%);
  box-shadow: 0 0 0 5px rgba(199, 148, 44, 0.25), 0 10px 24px rgba(12, 26, 60, 0.3);
}

/* Rich Dark Navy Typography for Stat Numbers */
.stat-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.55rem;
  font-weight: 800;
  color: #0C1A3C;
  line-height: 1.05;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #0C1A3C 0%, #172852 70%, #8C5B14 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Gold/Navy Hairline Divider Line Inside Card */
.stat-card-divider {
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #C7942C, transparent);
  margin: 6px 0 10px 0;
  opacity: 0.85;
  transition: width 0.3s ease, opacity 0.3s ease;
}
.stat-card:hover .stat-card-divider {
  width: 62px;
  opacity: 1;
}

.stat-lbl {
  font-family: Inter, sans-serif;
  font-size: 0.85rem;
  color: #475569;
  font-weight: 600;
  line-height: 1.38;
}

/* ---------------- Split-Slide Animations (Left 2 From Left, Right 2 From Right) */
.stat-card--slide-left {
  opacity: 0;
  transform: translateX(-100px);
}
.stat-card--slide-right {
  opacity: 0;
  transform: translateX(100px);
}

body.is-ready .stat-card--slide-left,
body.is-ready .stat-card--slide-right {
  animation-duration: 1.15s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
}

body.is-ready .stat-card--1 {
  animation-name: slideInFromLeft;
  animation-delay: 0.15s;
}
body.is-ready .stat-card--2 {
  animation-name: slideInFromLeft;
  animation-delay: 0.38s;
}
body.is-ready .stat-card--3 {
  animation-name: slideInFromRight;
  animation-delay: 0.38s;
}
body.is-ready .stat-card--4 {
  animation-name: slideInFromRight;
  animation-delay: 0.15s;
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-110px) scale(0.94);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(110px) scale(0.94);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0px);
  }
}

@media (max-width: 1024px) {
  .hero-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .hero-stats-grid {
    grid-template-columns: 1fr;
  }
  .stat-card--slide-left,
  .stat-card--slide-right {
    transform: translateY(40px);
  }
  body.is-ready .stat-card--slide-left,
  body.is-ready .stat-card--slide-right {
    animation-name: slideInFromBottom;
  }
}

@keyframes slideInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page hero (inner pages) - Spanish Courtyard Background Image */
.page-hero{
  position:relative;padding-top:calc(var(--header-h) + clamp(2.5rem,1.6rem + 4vw,4.75rem));
  padding-bottom:clamp(2.5rem,1.6rem + 4vw,4.5rem);
  background:url('../img/page-hero-bg.jpg') center center / cover no-repeat !important;
  color:#fff;overflow:hidden;isolation:isolate;
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.42;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(circle at 55% 30%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(circle at 55% 30%,#000,transparent 76%);
}
.page-hero h1 {
  color: #ffffff !important;
  max-width: 24ch;
  margin-bottom: 0.35em;
  text-shadow: 0 2px 10px rgba(8, 20, 44, 0.3);
}
.page-hero .page-hero-sub,
.page-hero p:not(.breadcrumb p) {
  font-family: var(--font-display), 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(1.08rem, 1rem + 0.38vw, 1.25rem) !important;
  font-style: italic !important;
  color: rgba(255, 255, 255, 0.94) !important;
  line-height: 1.55 !important;
  max-width: 58ch !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}
.page-hero--center{text-align:center}
.page-hero--center h1,.page-hero--center .page-hero-sub{margin-inline:auto}
.page-hero--center .eyebrow{justify-content:center}

.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.25rem;
  font-size:.8rem;color:rgba(255,255,255,.6);list-style:none;padding:0}
.breadcrumb li{margin:0;display:flex;align-items:center;gap:.5rem}
.breadcrumb li+li::before{content:"/";color:rgba(255,255,255,.32)}
.breadcrumb a{color:rgba(255,255,255,.78)}
.breadcrumb a:hover{color:var(--gold-300)}
.breadcrumb [aria-current]{color:var(--gold-300)}
.page-hero--center .breadcrumb{justify-content:center}

/* -------------------------------------------------------------- 10. CARDS */
.card{
  position:relative;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:clamp(1.5rem,1.1rem + 1.1vw,2.1rem);height:100%;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.card::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:0;border-radius:var(--r) 0 0 0;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300));transition:width var(--t-slow) var(--ease-out);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:rgba(192,145,47,.28)}
.card:hover::before{width:58%}
.card:hover .icon-badge{transform:scale(1.06) rotate(-3deg)}
.card h3{font-family:var(--font-body);font-size:1.1rem;font-weight:600;letter-spacing:-.012em;margin:1.15rem 0 .55rem}
.card p{font-size:var(--fs-sm);color:var(--body);margin-bottom:0;line-height:1.68}
.card--flat{background:var(--cream);border-color:transparent}
.card--flat:hover{background:#fff;border-color:rgba(192,145,47,.24)}
.card--navy{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.card--navy h3{color:#fff}
.card--navy p{color:rgba(255,255,255,.72)}
.card--navy:hover{background:rgba(255,255,255,.08);border-color:rgba(227,203,148,.35)}
.card .num{font-family:var(--font-display);font-size:1.6rem;font-weight:600;color:var(--gold-400);line-height:1}

/* Link card */
a.card{display:block;color:inherit}
a.card:hover h3{color:var(--navy-800)}
.card-link-row{display:flex;align-items:center;gap:.45rem;margin-top:1.1rem;font-size:.83rem;
  font-weight:600;color:var(--gold-600);letter-spacing:.005em}
.card-link-row .ico{width:14px;height:14px;transition:transform var(--t) var(--ease)}
a.card:hover .card-link-row .ico{transform:translateX(4px)}

/* Course / lesson card with media */
.lesson-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden;height:100%;color:inherit;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.lesson-card:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:rgba(192,145,47,.3)}
.lesson-card .thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy-100)}
.lesson-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .75s var(--ease-out)}
.lesson-card:hover .thumb img{transform:scale(1.055)}
.lesson-card .tag{
  position:absolute;left:1rem;top:1rem;z-index:2;padding:.35rem .8rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.94);color:var(--navy-700);font-size:.7rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
}
.lesson-card .body{padding:clamp(1.25rem,1rem + .8vw,1.75rem);display:flex;flex-direction:column;flex:1}
.lesson-card h3{font-family:var(--font-body);font-size:1.08rem;font-weight:600;margin-bottom:.5rem}
.lesson-card p{font-size:var(--fs-sm);color:var(--body);flex:1;margin-bottom:1.1rem}

/* Feature list */
.feature-list{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.feature-list li{display:flex;gap:.8rem;align-items:flex-start;margin:0;font-size:var(--fs-sm);line-height:1.62}
.feature-list .ico{width:19px;height:19px;color:var(--gold-600);margin-top:.22rem;stroke-width:2}
.feature-list--2col{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1.75rem}
.section--navy .feature-list li{color:rgba(255,255,255,.82)}
.section--navy .feature-list .ico{color:var(--gold-300)}

.pill-list{display:flex;flex-wrap:wrap;gap:.55rem;padding:0;margin:0;list-style:none}
.pill-list li{margin:0}
.pill{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border-radius:var(--r-pill);
  background:var(--cream);border:1px solid var(--line);font-size:.83rem;font-weight:500;color:var(--navy-600)}
.section--navy .pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.85)}
.pill--gold{background:var(--gold-100);border-color:rgba(192,145,47,.3);color:var(--gold-700)}

/* Media figure */
.figure{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2)}
.figure img{width:100%;height:100%;object-fit:cover}
.figure--tall{aspect-ratio:4/5}
.figure--wide{aspect-ratio:3/2}
.figure--square{aspect-ratio:1/1}
.figure-frame{position:relative;z-index:0}
.figure-frame::after{
  content:"";position:absolute;inset:auto -18px -18px auto;width:58%;height:58%;z-index:-1;
  border:1px solid var(--gold-400);border-radius:var(--r-lg);opacity:.55;
}

/* ------------------------------------------------------------ 11. TEAM */
.team-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;height:100%;
  display:flex;flex-direction:column;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)
}
.team-card:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.team-card .portrait{aspect-ratio:1/1;overflow:hidden;background:var(--navy-100);position:relative}
.team-card .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 8% !important;transition:transform .75s var(--ease-out)}
.team-card:hover .portrait img{transform:scale(1.05)}
.team-card .body{padding:1.5rem}
.team-card h3{font-family:var(--font-display);font-size:1.5rem;margin-bottom:.2rem}
.team-card .role{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600);font-weight:600}
.team-card .langs{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}

.bio{display:grid;grid-template-columns:340px 1fr;gap:clamp(1.75rem,1rem + 3vw,3.25rem);align-items:start}
.bio+.bio{margin-top:clamp(3rem,2rem + 3vw,5rem);padding-top:clamp(3rem,2rem + 3vw,5rem);border-top:1px solid var(--line)}
.bio .portrait{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--sh-2);position:sticky;top:calc(var(--header-h) + 24px)}
.bio .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 8% !important}
.bio h3{font-family:var(--font-display);font-size:clamp(1.7rem,1.3rem + 1.3vw,2.3rem);margin-bottom:.15rem}
.bio .role{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-600);font-weight:600;margin-bottom:1.4rem;display:block}
.bio p{font-size:var(--fs-sm);line-height:1.78}

/* ------------------------------------------------------- 12. ACCORDION */
.accordion{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-trigger{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem;
  padding:1.35rem 0;background:none;border:0;text-align:left;
  font-family:var(--font-body);font-size:1.02rem;font-weight:600;color:var(--navy-700);line-height:1.5;
  transition:color var(--t-fast) var(--ease);
}
.acc-trigger:hover{color:var(--gold-600)}
.acc-icon{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;margin-top:.1rem;position:relative;transition:all var(--t) var(--ease)}
.acc-icon::before,.acc-icon::after{content:"";position:absolute;background:var(--navy-600);border-radius:2px;transition:transform var(--t) var(--ease),background var(--t) var(--ease)}
.acc-icon::before{width:11px;height:1.6px}
.acc-icon::after{width:1.6px;height:11px}
.acc-trigger[aria-expanded=true] .acc-icon{background:var(--gold-500);border-color:var(--gold-500)}
.acc-trigger[aria-expanded=true] .acc-icon::before,.acc-trigger[aria-expanded=true] .acc-icon::after{background:#fff}
.acc-trigger[aria-expanded=true] .acc-icon::after{transform:rotate(90deg)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t) var(--ease)}
.acc-trigger[aria-expanded=true]+.acc-panel{grid-template-rows:1fr}
.acc-panel>div{overflow:hidden}
.acc-panel .inner{padding:0 3rem 1.6rem 0;font-size:var(--fs-sm);color:var(--body);line-height:1.75}
.acc-panel .inner ul{margin-top:.5rem}

/* ----------------------------------------------------------- 13. TABLES */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  -webkit-overflow-scrolling:touch}
.table{min-width:560px;font-size:var(--fs-sm)}
.table caption{text-align:left;padding:1.1rem 1.25rem;font-weight:600;color:var(--navy-700);border-bottom:1px solid var(--line)}
.table th,.table td{padding:1rem 1.25rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.table thead th{background:var(--navy-700);color:#fff;font-size:.74rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:600;border-bottom:0;white-space:nowrap}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--t-fast) var(--ease)}
.table tbody tr:hover{background:var(--gold-100)}
.table .lvl{font-family:var(--font-display);font-size:1.35rem;font-weight:600;color:var(--gold-600);line-height:1}

/* ----------------------------------------------------------- 14. PRICING */
.price-card{
  position:relative;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:clamp(1.85rem,1.4rem + 1.4vw,2.6rem);height:100%;display:flex;flex-direction:column;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:rgba(192,145,47,.32)}
.price-card.is-featured{background:linear-gradient(165deg,var(--navy-700),var(--navy-900));border-color:transparent;color:rgba(255,255,255,.82)}
.price-card.is-featured h3{color:#fff}
.price-card.is-featured .price .amt{color:var(--gold-300)}
.price-card.is-featured .price .per{color:rgba(255,255,255,.6)}
.price-card.is-featured .feature-list li{color:rgba(255,255,255,.8)}
.price-card.is-featured .feature-list .ico{color:var(--gold-300)}
.price-badge{position:absolute;top:1.35rem;right:1.35rem;padding:.35rem .8rem;border-radius:var(--r-pill);
  background:var(--gold-500);color:var(--navy-800);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.price-card h3{font-family:var(--font-body);font-size:1.05rem;font-weight:600;letter-spacing:.005em;margin-bottom:.35rem}
.price-card .dur{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);font-weight:600}
.price{display:flex;align-items:baseline;gap:.4rem;margin:1.25rem 0 .35rem}
.price .amt{font-family:var(--font-display);font-size:clamp(2.6rem,2rem + 2vw,3.5rem);font-weight:600;color:var(--navy-700);line-height:1;letter-spacing:-.02em}
.price .per{font-size:.85rem;color:var(--muted)}
.price-card hr{margin:1.5rem 0}
.price-card .btn{margin-top:auto}
.price-card .feature-list{margin-bottom:1.75rem}

/* ------------------------------------------------------------- 15. CTA */
.cta-band{
  position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-lg);
  padding:clamp(2.5rem,1.8rem + 3.4vw,4.75rem) clamp(1.5rem,1rem + 3vw,4rem);
  background:
    radial-gradient(680px 380px at 88% 12%,rgba(192,145,47,.28),transparent 62%),
    linear-gradient(140deg,var(--navy-700),var(--navy-900));
  color:#fff;text-align:center;
}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%);
}
.cta-band h2{color:#fff;max-width:20ch;margin-inline:auto}
.cta-band p{color:rgba(255,255,255,.8);max-width:58ch;margin-inline:auto;font-size:var(--fs-lead)}
.cta-band .eyebrow{color:var(--gold-300);justify-content:center}
.cta-band .eyebrow::before{background:linear-gradient(90deg,transparent,var(--gold-400))}

/* ------------------------------------------------------------ 16. FORMS */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field--full{grid-column:1/-1}
.field label{font-size:.8rem;font-weight:600;color:var(--navy-700);letter-spacing:.01em}
.field label .req{color:var(--gold-600)}
.field input,.field select,.field textarea{
  width:100%;padding:.9rem 1.05rem;border:1px solid var(--line);border-radius:var(--r-xs);
  background:#fff;font:inherit;font-size:.92rem;color:var(--ink);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.field textarea{min-height:150px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7686' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;padding-right:2.6rem}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(192,145,47,.16)}
.field input::placeholder,.field textarea::placeholder{color:#9AA1AE}
.checkbox{display:flex;gap:.7rem;align-items:flex-start;font-size:.83rem;color:var(--body);line-height:1.55}
.checkbox input{width:18px;height:18px;margin-top:.18rem;accent-color:var(--gold-600);flex:none}
.form-note{font-size:.78rem;color:var(--muted)}

.contact-tile{display:flex;gap:1.1rem;align-items:flex-start;padding:1.35rem 0;border-bottom:1px solid var(--line)}
.contact-tile:last-child{border-bottom:0}
.contact-tile h3{font-family:var(--font-body);font-size:.95rem;font-weight:600;margin-bottom:.2rem}
.contact-tile p,.contact-tile a{font-size:var(--fs-sm);color:var(--body);margin:0}
.contact-tile a:hover{color:var(--gold-600)}

/* ------------------------------------------------------------ 17. FOOTER */
.site-footer{
  position:relative;
  background:linear-gradient(180deg, rgba(8, 20, 44, 0.78) 0%, rgba(10, 24, 52, 0.85) 100%), url('../img/footer-bg.png') center center / cover no-repeat !important;
  color:rgba(255,255,255,.88);
  padding-top:clamp(3.25rem,2.2rem + 4vw,5.5rem);
  overflow:hidden;
  isolation:isolate;
}
.site-footer::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-500),transparent);opacity:.65
}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(1.75rem,1rem + 3vw,3.5rem);
  padding-bottom:clamp(2.5rem,1.8rem + 2.6vw,3.75rem)}
.footer-brand img{height:auto;width:min(132px,42%);margin-bottom:1.35rem}
.footer-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem !important;
  margin-top: 1.5rem !important;
  padding: 0.88rem 1.8rem !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  background: #C7942C !important;
  border: 1px solid #B88522 !important;
  border-radius: 999px !important;
  color: #0C1A3C !important;
  box-shadow: 0 6px 22px rgba(199, 148, 44, 0.35) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
  text-decoration: none !important;
  width: auto !important;
}

.footer-cta::after {
  display: none !important;
}

.footer-cta:hover {
  background: #d4a33a !important;
  color: #0C1A3C !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(199, 148, 44, 0.48) !important;
}

.footer-cta svg, .footer-cta .ico {
  width: 16px !important;
  height: 16px !important;
  stroke: #0C1A3C !important;
  stroke-width: 2.2 !important;
  transition: transform 0.25s ease !important;
}

.footer-cta:hover svg, .footer-cta:hover .ico {
  transform: translateX(4px) !important;
}
.footer-brand p{font-size:.88rem;line-height:1.72;color:rgba(255,255,255,.62);max-width:34ch}
.footer-col h4{font-size:.74rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-300);
  font-weight:600;margin-bottom:1.25rem;font-family:var(--font-body)}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.62rem}
.footer-col li{margin:0}
.footer-col a{font-size:.875rem;color:rgba(255,255,255,.66);transition:color var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease)}
.footer-col a:hover{color:var(--gold-300);padding-left:5px}
.footer-contact li{display:flex;gap:.7rem;align-items:flex-start;font-size:.875rem;color:rgba(255,255,255,.66);line-height:1.6}
.footer-contact .ico{width:17px;height:17px;color:var(--gold-400);margin-top:.22rem}

.socials{display:flex;gap:.55rem;margin-top:1.6rem}
.social-link{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.8);
  transition:transform var(--t) var(--ease),background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.social-link svg{width:17px;height:17px;fill:currentColor;stroke:none;display:block}
.social-link:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-900);transform:translateY(-3px)}

.footer-bottom{
  display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:center;justify-content:space-between;
  padding-block:1.6rem;border-top:1px solid rgba(255,255,255,.09);font-size:.8rem;color:rgba(255,255,255,.5)
}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:1.25rem}
.footer-bottom a{color:rgba(255,255,255,.6)}
.footer-bottom a:hover{color:var(--gold-300)}

/* --------------------------------------------------- 18. MISC / UTILITIES */
.to-top{
  position:fixed;right:clamp(1rem,.5rem + 1.2vw,1.85rem);bottom:clamp(1rem,.5rem + 1.2vw,1.85rem);z-index:800;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy-700);color:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t),background var(--t) var(--ease);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--gold-500);color:var(--navy-900)}

.marquee-strip{
  border-block:1px solid var(--line);background:var(--cream);padding-block:1.5rem;overflow:hidden
}
.marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;width:max-content;will-change:transform;
  animation:mqDrift 38s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes mqDrift{to{transform:translate3d(-50%,0,0)}}
.logo-row{display:flex;align-items:center;gap:clamp(1.75rem,1rem + 3vw,4rem);
  padding-right:clamp(1.75rem,1rem + 3vw,4rem);flex:none}
.logo-row span{font-family:var(--font-display);font-size:1.2rem;color:var(--navy-500);
  letter-spacing:.02em;font-weight:600;white-space:nowrap;position:relative;
  transition:color var(--t) var(--ease)}
.logo-row span::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-400),transparent);
  transform:scaleX(0);transition:transform var(--t) var(--ease)}
.marquee:hover .logo-row span{color:var(--navy-300)}
.logo-row span:hover{color:var(--navy-700)}
.logo-row span:hover::after{transform:scaleX(1)}

.badge-row{display:flex;flex-wrap:wrap;gap:.6rem}
.badge{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .9rem;border-radius:var(--r-pill);
  background:rgba(192,145,47,.1);border:1px solid rgba(192,145,47,.26);
  font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-700)}
.section--navy .badge{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:var(--gold-300)}

.step{display:flex;gap:1.35rem;align-items:flex-start}
.step .n{
  width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.25rem;font-weight:600;
  background:var(--navy-700);color:var(--gold-300);border:1px solid rgba(255,255,255,.1)
}
.step h3{font-family:var(--font-body);font-size:1.02rem;font-weight:600;margin-bottom:.35rem}
.step p{font-size:var(--fs-sm);margin:0}
.steps{display:grid;gap:2rem;position:relative}

.callout{
  display:flex;gap:1.15rem;align-items:flex-start;padding:clamp(1.25rem,1rem + .9vw,1.85rem);
  background:var(--gold-100);border:1px solid rgba(192,145,47,.24);border-radius:var(--r);
}
.callout h3{font-family:var(--font-body);font-size:1rem;font-weight:600;margin-bottom:.4rem}
.callout p{font-size:var(--fs-sm);margin:0}
.callout--navy{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}

.quote-list{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.quote-list li{
  margin:0;padding:1rem 1.25rem;background:#fff;border:1px solid var(--line-soft);border-left:3px solid var(--gold-400);
  border-radius:0 var(--r-xs) var(--r-xs) 0;font-size:var(--fs-sm);font-style:italic;color:var(--navy-600);line-height:1.62
}

.aside-nav{position:sticky;top:calc(var(--header-h) + 24px);background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r);padding:1.5rem}
.aside-nav h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600);margin-bottom:1rem}
.aside-nav ul{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.aside-nav li{margin:0}
.aside-nav a{display:block;padding:.5rem .7rem;border-radius:var(--r-xs);font-size:.86rem;color:var(--navy-600)}
.aside-nav a:hover{background:#fff;color:var(--navy-800)}

/* --------------------------------------------------------- 19. MOTION */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s} .reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s} .reveal-d4{transition-delay:.32s}
.reveal-d5{transition-delay:.4s}  .reveal-d6{transition-delay:.48s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ----------------------------------------------------- 20. RESPONSIVE */
@media (max-width:1150px){
  .nav-link{padding:.62rem .62rem;font-size:.86rem}
  .brand img{height:46px}
}
@media (max-width:1024px){
  :root{--header-h:74px}
  .nav-list,.site-header nav[aria-label="Main navigation"],.header-cta .btn--desktop{display:none}
  .nav-toggle{display:flex}
  .hero-grid{grid-template-columns:1fr;gap:2.75rem}
  .hero-media{max-width:480px;margin-inline:auto;width:100%}
  .hero-figure{aspect-ratio:5/4}
  .split,.split--wide-left,.split--wide-right{grid-template-columns:1fr;gap:2.25rem}
  .split .figure-frame{order:-1}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-top{grid-template-columns:1fr 1fr;gap:2.25rem}
  .bio{grid-template-columns:1fr;gap:1.75rem}
  .bio .portrait{position:static;max-width:340px;aspect-ratio:1/1}
  .aside-nav{position:static}
  .hero-badge{right:12px}
}
@media (max-width:820px){
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:1.75rem 1rem}
  .feature-list--2col{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--header-h:68px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .brand img{height:38px}
  .btn{padding:.88rem 1.5rem;font-size:.9rem}
  .btn-row .btn{width:100%}
  .hero-figure{aspect-ratio:4/3}
  .hero-badge{position:static;margin-top:1rem;max-width:none}
  .acc-panel .inner{padding-right:0}
  .footer-top{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;align-items:flex-start;text-align:left}
  .step{gap:1rem}
  .card{padding:1.4rem}
  .table th,.table td{padding:.85rem 1rem}
}
@media (max-width:400px){
  .hero-stats{grid-template-columns:1fr}
  .socials{flex-wrap:wrap}
}

/* --------------------------------------------------------- 21. PRINT */
@media print{
  .site-header,.mobile-nav,.to-top,#preloader,.cta-band,.site-footer .socials{display:none!important}
  body{color:#000;background:#fff}
  .hero,.page-hero{background:#fff!important;color:#000;padding-top:1rem}
  .hero h1,.page-hero h1{color:#000}
  a{color:#000;text-decoration:underline}
  .reveal{opacity:1!important;transform:none!important}
}

/* ----------------------------------------------------- PROGRAMMES REDESIGN (MATCH SCREENSHOT) */
.section--programmes {
  background-color: #ffffff !important;
  padding-top: clamp(3rem, 2.5rem + 3vw, 5.5rem);
  padding-bottom: clamp(3rem, 2.5rem + 3vw, 5.5rem);
}

.programme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.programme-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(226, 232, 240, 0.9);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}

.programme-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 40px rgba(12, 26, 60, 0.09), 0 4px 12px rgba(199, 148, 44, 0.12);
  border-color: rgba(199, 148, 44, 0.4);
}

/* Image Card Header */
.programme-card-header-img {
  position: relative;
  height: 200px;
  width: 100%;
  overflow: hidden;
  background: #f8fafc;
}

.programme-card-header-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.programme-card:hover .programme-card-header-img img {
  transform: scale(1.05);
}

/* Icon Card Header */
.programme-card-header-icon {
  padding: 24px 24px 8px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.programme-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #fdf8ed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.programme-icon-circle svg {
  width: 26px;
  height: 26px;
  stroke: #c7942c;
  stroke-width: 1.8;
  fill: none;
}

/* Category Badges */
.programme-pill {
  font-size: 0.73rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  display: inline-block;
}

.programme-pill--overlay {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.programme-pill--inline {
  background: #fdf8ed;
  color: #9a6616;
}

/* Card Content Body */
.programme-card-body {
  padding: 22px 24px 20px 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.programme-card-title {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.32rem;
  font-weight: 800;
  color: #0c1a3c;
  margin: 0 0 6px 0;
  line-height: 1.25;
  letter-spacing: -0.025em;
  -webkit-font-smoothing: antialiased;
}

.programme-card:hover .programme-card-title {
  color: #081430;
}

.programme-card-subtitle {
  font-family: var(--font-body), Inter, sans-serif;
  font-size: 0.83rem;
  font-weight: 700;
  color: #a16207;
  margin-bottom: 14px;
  line-height: 1.4;
}

.programme-card-desc {
  font-family: var(--font-body), Inter, sans-serif;
  font-size: 0.89rem;
  color: #475569;
  line-height: 1.62;
  margin-bottom: 18px;
}

/* Bullet Points */
.programme-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.programme-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body), Inter, sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  color: #334155;
  line-height: 1.45;
}

.programme-check-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  stroke: #d97706;
  stroke-width: 2.2;
  margin-top: 2px;
}

/* Card Footer */
.programme-card-footer {
  border-top: 1px solid #f1f5f9;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  background: #ffffff;
}

.programme-footer-mode {
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8;
}

.programme-footer-link {
  font-size: 0.83rem;
  font-weight: 700;
  color: #b45309;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.programme-footer-link:hover {
  color: #78350f;
}

.programme-footer-link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.5;
  transition: transform 0.2s ease;
}

.programme-card:hover .programme-footer-link svg {
  transform: translateX(3px);
}

@media (max-width: 1024px) {
  .programme-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .programme-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------- PHILOSOPHY SECTION (WARM LUXURY CREAM) */
.section--philosophy {
  background-color: #FDFBF7 !important;
  padding-top: clamp(3.5rem, 3rem + 3vw, 6rem);
  padding-bottom: clamp(3.5rem, 3rem + 3vw, 6rem);
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.section--philosophy .eyebrow {
  color: #a16207;
}

.section--philosophy h2 {
  color: #0c1a3c;
}

.section--philosophy .statement--navy {
  color: #0c1a3c;
  background: #ffffff;
  border-left: 4px solid #c7942c;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  padding: 1rem 1.25rem;
}

.section--philosophy p {
  color: #475569;
  line-height: 1.7;
}

.philosophy-card {
  background: #ffffff;
  border-radius: 20px;
  padding: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 30px rgba(12, 26, 60, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.philosophy-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(12, 26, 60, 0.08), 0 4px 12px rgba(199, 148, 44, 0.1);
  border-color: rgba(199, 148, 44, 0.4);
}

.philosophy-icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #fdf8ed;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  transition: transform 0.3s ease;
}

.philosophy-icon-badge svg {
  width: 26px;
  height: 26px;
  stroke: #c7942c;
  stroke-width: 1.8;
  fill: none;
}

.philosophy-card:hover .philosophy-icon-badge {
  transform: scale(1.08) rotate(-4deg);
}

.philosophy-card h3 {
  font-family: var(--font-display), 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0c1a3c;
  margin-bottom: 0.75rem;
}

.philosophy-card p {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.65;
}

/* ==========================================================================
   24. ELEGANT EDITORIAL LESSON LAYOUT (MATCHING USER SCREENSHOTS)
   ========================================================================== */
.section--editorial {
  padding-block: clamp(3rem, 2rem + 3.5vw, 5.5rem);
}

.editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 2rem + 3.5vw, 5rem);
  align-items: center;
}

@media (max-width: 991px) {
  .editorial-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.editorial-img-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(12, 26, 60, 0.08);
  border: 1px solid rgba(14, 31, 69, 0.06);
  background: #ffffff;
}

.editorial-img-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.editorial-img-frame--tall img {
  aspect-ratio: 3/4;
}

/* Full-Width Feature Quote Banner (Middle Section SS1) */
.editorial-quote-banner {
  position: relative;
  padding: clamp(3.8rem, 3rem + 4vw, 6rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  background: linear-gradient(180deg, rgba(8, 20, 44, 0.88) 0%, rgba(10, 24, 52, 0.92) 100%), url('../img/card-alevel-spanish.jpg') center center / cover no-repeat !important;
  color: #ffffff;
  text-align: center;
  margin-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  overflow: hidden;
  border-radius: 0;
}

.editorial-quote-banner h2 {
  font-family: var(--font-display), 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
  font-weight: 600;
  color: #ffffff;
  max-width: 28ch;
  margin-inline: auto;
  line-height: 1.22;
  margin-bottom: 1rem;
}

.editorial-quote-banner p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 58ch;
  margin-inline: auto;
  font-size: 1.02rem;
  line-height: 1.65;
}

/* Card with Gold Left Accent (SS2) */
.card-gold-left-accent {
  background: #ffffff;
  border: 1px solid rgba(14, 31, 69, 0.08);
  border-left: 5px solid #c0912f !important;
  border-radius: 16px;
  padding: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem);
  box-shadow: 0 12px 36px rgba(12, 26, 60, 0.06);
}

.card-gold-left-accent h2,
.card-gold-left-accent h3 {
  font-family: Inter, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0c1a3c;
  margin-bottom: 1.25rem;
}

.card-gold-left-accent ul.list-bordered {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.card-gold-left-accent ul.list-bordered li {
  padding-block: 0.9rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.91rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.card-gold-left-accent ul.list-bordered li:last-child {
  border-bottom: 0;
}

.gold-bullet-dot {
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 50%;
  background: #c0912f;
  margin-top: 4px;
}

/* Mobile Nav CTA Button Alignment Fix */
.m-cta .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 0.6rem !important;
  width: 100% !important;
  padding: 0.85rem 1.2rem !important;
}
.m-cta .btn .ico {
  margin: 0 !important;
  flex: none !important;
}

/* ==========================================================================
   25. LUXURY EDITORIAL A-LEVEL SPANISH DESIGN SYSTEM (REFINED 80-96px SPACED)
   ========================================================================== */
.editorial-alevel-section {
  padding-block: clamp(3.75rem, 3rem + 3.5vw, 6rem); /* 80-96px vertical spacing */
}

.editorial-bg-cream {
  background-color: #FAF8F5 !important;
}

.editorial-bg-warm {
  background-color: #FDFBF7 !important;
}

.editorial-bg-white {
  background-color: #FFFFFF !important;
}

.editorial-bg-navy {
  background-color: #0C1A3C !important;
  color: #FFFFFF !important;
}

/* Typography Hierarchy & 20-24px Heading Gaps */
.editorial-prose {
  max-width: 720px;
  margin-inline: auto;
}

.editorial-prose h1,
.editorial-h1 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(2.5rem, 2rem + 3.5vw, 4rem) !important; /* 64px */
  font-weight: 600 !important;
  line-height: 1.15 !important;
  color: #0C1A3C !important;
  letter-spacing: -0.02em;
  margin-bottom: 1.35rem; /* 22px heading-to-paragraph gap */
}

.editorial-prose h2,
.editorial-h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(2rem, 1.6rem + 2.5vw, 3rem) !important; /* 48px */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #0C1A3C !important;
  letter-spacing: -0.015em;
  margin-top: 1.85rem;
  margin-bottom: 0.9rem; /* 20-24px heading gap */
}

.editorial-prose h3,
.editorial-h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.875rem) !important; /* 30px */
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #0C1A3C !important;
  margin-top: 1.45rem;
  margin-bottom: 0.65rem;
}

.editorial-prose p {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 1.1875rem !important; /* 19px */
  line-height: 1.9 !important;
  color: #334155 !important;
  margin-bottom: 1.1rem; /* 16-20px paragraph-to-list gap */
}

.editorial-prose p.lead {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  color: #1E3A6B !important;
  margin-bottom: 1.35rem;
}

/* Gold Accent Line Draw-In Animation */
.editorial-prose .rule-gold,
.rule-gold {
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, #C7942C, #E3CB94);
  border: 0;
  margin: 0 0 1.35rem;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-in .rule-gold,
.reveal.is-visible .rule-gold,
.rule-gold.is-drawn {
  transform: scaleX(1);
}

/* Heading Staggered Reveal Sequence (Supporting main.js .is-in) */
.reveal-head:not(.is-in):not(.is-visible) .eyebrow { opacity: 0; transform: translateY(14px); }
.reveal-head:not(.is-in):not(.is-visible) h2 { opacity: 0; transform: translateY(18px); }
.reveal-head:not(.is-in):not(.is-visible) p { opacity: 0; transform: translateY(18px); }

.reveal-head.is-in .eyebrow, .reveal-head.is-visible .eyebrow { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s; }
.reveal-head.is-in h2, .reveal-head.is-visible h2 { opacity: 1; transform: translateY(0); transition: opacity 0.55s ease 0.28s, transform 0.55s ease 0.28s; }
.reveal-head.is-in p, .reveal-head.is-visible p { opacity: 1; transform: translateY(0); transition: opacity 0.55s ease 0.42s, transform 0.55s ease 0.42s; }

/* Staggered Bullet List & Gold Checkmark Scale-In (Supporting main.js .is-in) */
.feature-list li,
.list-bordered li {
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal:not(.is-in):not(.is-visible) .feature-list li,
.reveal:not(.is-in):not(.is-visible) .list-bordered li {
  opacity: 0;
  transform: translateY(14px);
}

.is-in .feature-list li:nth-child(1), .is-in .list-bordered li:nth-child(1),
.is-visible .feature-list li:nth-child(1), .is-visible .list-bordered li:nth-child(1) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }

.is-in .feature-list li:nth-child(2), .is-in .list-bordered li:nth-child(2),
.is-visible .feature-list li:nth-child(2), .is-visible .list-bordered li:nth-child(2) { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }

.is-in .feature-list li:nth-child(3), .is-in .list-bordered li:nth-child(3),
.is-visible .feature-list li:nth-child(3), .is-visible .list-bordered li:nth-child(3) { transition-delay: 0.38s; opacity: 1; transform: translateY(0); }

.is-in .feature-list li:nth-child(4), .is-in .list-bordered li:nth-child(4),
.is-visible .feature-list li:nth-child(4), .is-visible .list-bordered li:nth-child(4) { transition-delay: 0.51s; opacity: 1; transform: translateY(0); }

.is-in .feature-list li:nth-child(5), .is-in .list-bordered li:nth-child(5),
.is-visible .feature-list li:nth-child(5), .is-visible .list-bordered li:nth-child(5) { transition-delay: 0.64s; opacity: 1; transform: translateY(0); }

.is-in .feature-list li:nth-child(6), .is-in .list-bordered li:nth-child(6),
.is-visible .feature-list li:nth-child(6), .is-visible .list-bordered li:nth-child(6) { transition-delay: 0.77s; opacity: 1; transform: translateY(0); }

.is-in .feature-list li:nth-child(7), .is-in .list-bordered li:nth-child(7),
.is-visible .feature-list li:nth-child(7), .is-visible .list-bordered li:nth-child(7) { transition-delay: 0.90s; opacity: 1; transform: translateY(0); }

/* Checkmark Icon Scale-In before Text */
.feature-list li .ico,
.gold-bullet-dot {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal:not(.is-in):not(.is-visible) .feature-list li .ico,
.reveal:not(.is-in):not(.is-visible) .gold-bullet-dot {
  transform: scale(0);
}

.is-in .feature-list li .ico,
.is-visible .feature-list li .ico,
.is-in .gold-bullet-dot,
.is-visible .gold-bullet-dot {
  transform: scale(1);
}

.feature-list li span,
.list-bordered li span {
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

.reveal:not(.is-in):not(.is-visible) .feature-list li span,
.reveal:not(.is-in):not(.is-visible) .list-bordered li span {
  opacity: 0;
  transform: translateX(8px);
}

.is-in .feature-list li span,
.is-visible .feature-list li span,
.is-in .list-bordered li span,
.is-visible .list-bordered li span {
  opacity: 1;
  transform: translateX(0);
}

/* 80-96px Spaced Editorial Split Grid */
.editorial-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 2rem + 3.5vw, 5rem);
  align-items: center;
}

@media (max-width: 991px) {
  .editorial-split-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  /* On mobile screens (< 992px), always place heading & text first, photo card second */
  .editorial-split-grid > .editorial-prose {
    order: 1 !important;
  }
  .editorial-split-grid > *:not(.editorial-prose) {
    order: 2 !important;
  }
}

/* Premium 8K Photo Frame & Gentle 1.03 Image Scale Hover */
.editorial-photo-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(12, 26, 60, 0.08);
  border: 1px solid rgba(14, 31, 69, 0.06);
  background: #ffffff;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.editorial-photo-card:hover,
.card-gold-left-accent:hover {
  transform: translateY(-8px);
  border-color: rgba(199, 148, 44, 0.45) !important;
  box-shadow: 0 24px 50px rgba(12, 26, 60, 0.12), 0 0 0 1px rgba(199, 148, 44, 0.22) !important;
}

.editorial-photo-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.editorial-photo-card--portrait img {
  aspect-ratio: 3/4 !important;
  object-fit: cover;
}

.editorial-photo-card:hover img {
  transform: scale(1.03); /* Gentle 1.03 scale */
}

/* Full-Width 8K Film & Culture Banner with Subtle Parallax */
.editorial-culture-banner {
  position: relative;
  padding: clamp(4.5rem, 3.5rem + 5vw, 7rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  background: linear-gradient(180deg, rgba(8, 20, 44, 0.86) 0%, rgba(10, 24, 52, 0.92) 100%), url('../img/alevel-culture-8k.jpg') center center / cover no-repeat !important;
  color: #ffffff;
  text-align: center;
  margin: 0 !important; /* Zero margin removes white gap above & below banner */
}

/* 8K CTA Band Styling with Parallax */
.editorial-cta-section {
  position: relative;
  padding: clamp(4.5rem, 3.5rem + 5vw, 7rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  background: linear-gradient(180deg, rgba(8, 20, 44, 0.88) 0%, rgba(10, 24, 52, 0.94) 100%), url('../img/alevel-cta-bg-8k.jpg') center center / cover no-repeat !important;
  color: #ffffff;
  text-align: center;
  border-radius: 24px;
  overflow: hidden;
  margin: 0 !important; /* Zero margin maintains consistent 80-96px section gap */
}

@media (min-width: 992px) {
  .editorial-culture-banner,
  .editorial-cta-section {
    background-attachment: fixed !important; /* Subtle parallax depth */
  }
}

.editorial-culture-banner h2,
.editorial-cta-section h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(2.2rem, 1.8rem + 2.5vw, 3.2rem) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  max-width: 28ch;
  margin-inline: auto;
  line-height: 1.2;
}

.editorial-culture-banner p,
.editorial-cta-section p {
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1.1rem !important;
  line-height: 1.8 !important;
  max-width: 60ch;
  margin-inline: auto;
}

/* Button Hover Animations (Scale 1.04 with smooth arrow slide) */
.editorial-btn-hover,
.btn--gold-pill,
.btn--navy-pill,
.btn {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease !important;
}

.editorial-btn-hover:hover,
.btn--gold-pill:hover,
.btn--navy-pill:hover {
  transform: scale(1.04) translateY(-2px) !important;
}

.editorial-btn-hover:hover .ico,
.btn:hover .ico {
  transform: translateX(5px) !important;
}

/* ==========================================================================
   26. ULTRA-PREMIUM LIVE FEATURE CARDS (SLOW LUXURY BREATHING AURA)
   ========================================================================== */
.section--tight .grid .card {
  position: relative;
  background: linear-gradient(145deg, #ffffff 0%, #fdfbf7 60%, #fffbf2 100%) !important;
  border: 1px solid rgba(199, 148, 44, 0.28) !important;
  border-top: 3.5px solid #C7942C !important;
  border-radius: 20px !important;
  padding: 2.2rem 2rem !important;
  box-shadow: 0 14px 36px rgba(12, 26, 60, 0.06), 0 0 14px rgba(199, 148, 44, 0.15) !important;
  animation: slowLuxuryPulse 8s cubic-bezier(0.4, 0, 0.2, 1) infinite, slowGoldGlow 9s ease-in-out infinite !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.5s ease !important;
  overflow: hidden;
  isolation: isolate;
}

.section--tight .grid .card:nth-child(1) {
  animation-delay: 0s, 0s !important;
}

.section--tight .grid .card:nth-child(2) {
  animation-delay: 2.5s, 2.5s !important;
}

.section--tight .grid .card:nth-child(3) {
  animation-delay: 5s, 5s !important;
}

/* Slow Ultra-Smooth Breathing Rhythm (8 seconds) */
@keyframes slowLuxuryPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.012);
  }
}

/* Slow Metallic Gold Glow Shift (9 seconds) */
@keyframes slowGoldGlow {
  0%, 100% {
    border-color: rgba(199, 148, 44, 0.28) !important;
    border-top-color: #C7942C !important;
    box-shadow: 0 14px 36px rgba(12, 26, 60, 0.06), 0 0 14px rgba(199, 148, 44, 0.15) !important;
  }
  50% {
    border-color: rgba(212, 163, 58, 0.65) !important;
    border-top-color: #D4A33A !important;
    box-shadow: 0 22px 55px rgba(12, 26, 60, 0.12), 0 0 26px rgba(199, 148, 44, 0.38) !important;
  }
}

/* Slow Shimmer Light Sweep (10 seconds) */
.section--tight .grid .card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -150%;
  width: 75%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(212, 163, 58, 0.15), rgba(255, 255, 255, 0.65), rgba(212, 163, 58, 0.15), transparent);
  transform: rotate(25deg);
  animation: slowShimmerSweep 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.section--tight .grid .card:nth-child(1)::after { animation-delay: 1s; }
.section--tight .grid .card:nth-child(2)::after { animation-delay: 4.5s; }
.section--tight .grid .card:nth-child(3)::after { animation-delay: 7.5s; }

@keyframes slowShimmerSweep {
  0% { left: -150%; opacity: 0; }
  15% { opacity: 1; }
  45%, 100% { left: 200%; opacity: 0; }
}

.section--tight .grid .card:hover {
  transform: translateY(-10px) scale(1.02) !important;
  border-color: #D4A33A !important;
  border-top-color: #E5B84C !important;
  box-shadow: 0 30px 70px rgba(12, 26, 60, 0.16), 0 0 30px rgba(199, 148, 44, 0.45) !important;
}

/* Slow Floating Live Icon Badge (7 seconds) */
.section--tight .grid .card .icon-badge {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(212, 163, 58, 0.2) 0%, rgba(243, 208, 121, 0.08) 100%) !important;
  border: 1.5px solid rgba(212, 163, 58, 0.4) !important;
  color: #8C5B14 !important;
  margin-bottom: 1.35rem;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease !important;
  animation: slowBadgeBreath 7s ease-in-out infinite !important;
}

.section--tight .grid .card:nth-child(1) .icon-badge { animation-delay: 0s; }
.section--tight .grid .card:nth-child(2) .icon-badge { animation-delay: 2.3s; }
.section--tight .grid .card:nth-child(3) .icon-badge { animation-delay: 4.6s; }

@keyframes slowBadgeBreath {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(2.5deg); }
}

.section--tight .grid .card:hover .icon-badge {
  transform: scale(1.15) rotate(5deg) translateY(-2px) !important;
  background: #0C1A3C !important;
  color: #DFB251 !important;
  border-color: #C7942C !important;
  box-shadow: 0 0 0 4px rgba(199, 148, 44, 0.25), 0 12px 28px rgba(12, 26, 60, 0.25) !important;
}

.section--tight .grid .card .icon-badge svg,
.section--tight .grid .card .icon-badge .ico {
  width: 25px !important;
  height: 25px !important;
  stroke-width: 2.2 !important;
}

.section--tight .grid .card h3 {
  font-family: Inter, sans-serif !important;
  font-size: 1.28rem !important;
  font-weight: 800 !important;
  color: #0C1A3C !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 0.75rem !important;
}

.section--tight .grid .card p {
  font-family: Inter, sans-serif !important;
  font-size: 0.96rem !important;
  line-height: 1.68 !important;
  color: #475569 !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   27. CLASSICAL EDITORIAL STATEMENT SECTION (STAGGERED LOAD & SCROLL ANIMATION)
   ========================================================================== */
.editorial-classical-statement {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  padding-block: 1rem;
}

.editorial-classical-statement .statement {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(2.2rem, 1.8rem + 2.2vw, 3.25rem) !important;
  font-weight: 500 !important;
  font-style: italic !important;
  color: #0C1A3C !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  max-width: 26ch;
  margin-inline: auto;
  margin-bottom: 1.85rem !important;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.editorial-classical-statement .rule-navy {
  width: 80px;
  height: 1px;
  background: rgba(12, 26, 60, 0.25);
  border: 0;
  margin: 0 auto 1.85rem;
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.editorial-classical-statement .lead {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.1875rem !important; /* 19px */
  line-height: 1.9 !important;
  color: #334155 !important;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 1.5rem !important;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

.editorial-classical-statement .sub-statement {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #1E3A6B !important;
  line-height: 1.7 !important;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: 0 !important;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.58s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.58s;
}

/* Trigger Staggered Reveal on Load / Scroll */
.is-in .editorial-classical-statement .statement,
.is-visible .editorial-classical-statement .statement,
.is-in.editorial-classical-statement .statement,
.is-visible.editorial-classical-statement .statement,
body.is-ready .editorial-classical-statement .statement {
  opacity: 1;
  transform: translateY(0);
}

.is-in .editorial-classical-statement .rule-navy,
.is-visible .editorial-classical-statement .rule-navy,
.is-in.editorial-classical-statement .rule-navy,
.is-visible.editorial-classical-statement .rule-navy,
body.is-ready .editorial-classical-statement .rule-navy {
  transform: scaleX(1);
}

.is-in .editorial-classical-statement .lead,
.is-visible .editorial-classical-statement .lead,
.is-in.editorial-classical-statement .lead,
.is-visible.editorial-classical-statement .lead,
body.is-ready .editorial-classical-statement .lead {
  opacity: 1;
  transform: translateY(0);
}

.is-in .editorial-classical-statement .sub-statement,
.is-visible .editorial-classical-statement .sub-statement,
.is-in.editorial-classical-statement .sub-statement,
.is-visible.editorial-classical-statement .sub-statement,
body.is-ready .editorial-classical-statement .sub-statement {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   28. GLOBAL LIST-TO-PARAGRAPH & EDITORIAL PROSE SPACING ENHANCEMENTS
   ========================================================================== */
.feature-list,
.list-bordered,
.pill-list {
  margin-bottom: 1.85rem !important; /* 30px clear margin after any list */
}

/* Clear gap on paragraphs immediately following a list */
.feature-list + p,
.list-bordered + p,
.pill-list + p,
ul + p,
.editorial-prose ul + p,
.editorial-prose .feature-list + p,
.editorial-prose .list-bordered + p,
.card-gold-left-accent ul + p,
.editorial-culture-banner ul + p,
.editorial-culture-banner p.mt-4 {
  margin-top: 1.85rem !important; /* 30px top margin for paragraphs following lists */
}

/* Paragraph to Paragraph spacing inside editorial prose */
.editorial-prose p + p {
  margin-top: 1.35rem !important; /* 22px clear spacing between paragraphs */
}

/* Culture banner list-to-paragraph gap */
.editorial-culture-banner ul.feature-list {
  margin-bottom: 2.25rem !important; /* 36px bottom margin inside dark banner */
}

.editorial-culture-banner ul.feature-list + p,
.editorial-culture-banner p.mt-4,
.editorial-banner-sub {
  margin-top: 2.25rem !important; /* 36px clear gap for text in dark banner */
  font-size: 1.15rem !important;
  line-height: 1.8 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  max-width: 680px;
  margin-inline: auto;
}


/* Alternating Z-Pattern Split Grid Reverse Rule */
@media (min-width: 992px) {
  .editorial-split-grid--reverse {
    grid-template-columns: 0.9fr 1.1fr !important;
  }
  .editorial-split-grid--reverse > *:first-child {
    order: 2;
  }
  .editorial-split-grid--reverse > *:last-child {
    order: 1;
  }
}


/* Luxury Editorial Table Styling */
.table-wrap {
  overflow-x: auto;
  margin-block: 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(12, 26, 60, 0.06);
}

.table.table--editorial {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border: 1px solid rgba(199, 148, 44, 0.25);
  border-radius: 12px;
  overflow: hidden;
}

.table.table--editorial th {
  background: #0C1A3C !important;
  color: #C7942C !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  padding: 1.1rem 1.25rem !important;
  text-align: left;
  border-bottom: 2px solid #C7942C !important;
}

.table.table--editorial td {
  padding: 1.1rem 1.25rem !important;
  color: #334155 !important;
  font-size: 1.0625rem !important;
  line-height: 1.7 !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
}

.table.table--editorial tbody tr:nth-child(even) {
  background-color: #FAF8F5 !important;
}

.table.table--editorial tbody tr:hover {
  background-color: rgba(199, 148, 44, 0.05) !important;
}

.table.table--editorial .lvl {
  display: inline-block;
  background: linear-gradient(135deg, #C7942C, #9A6E1A) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 6px !important;
  font-size: 0.95rem !important;
  box-shadow: 0 2px 6px rgba(199, 148, 44, 0.3);
}


/* Gold Card & Section Background Luxury Styling (Matching User Reference) */
.editorial-bg-gold-tint {
  background: linear-gradient(180deg, #FFFDF8 0%, #FAF3E5 100%) !important;
  border-top: 1px solid rgba(199, 148, 44, 0.18);
  border-bottom: 1px solid rgba(199, 148, 44, 0.18);
}

.section--tight .grid .card,
.card-luxury-gold {
  position: relative !important;
  background: linear-gradient(180deg, #FFFDF9 0%, #FFF6E5 100%) !important;
  border: 1.5px solid rgba(199, 148, 44, 0.35) !important;
  border-top: 4px solid #C7942C !important;
  border-radius: 20px !important;
  padding: 2.25rem 2rem !important;
  box-shadow: 0 16px 42px rgba(199, 148, 44, 0.14), 0 4px 12px rgba(12, 26, 60, 0.04) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
}

.section--tight .grid .card:hover,
.card-luxury-gold:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: #D4A33A !important;
  border-top-color: #E5B84C !important;
  box-shadow: 0 28px 65px rgba(199, 148, 44, 0.25), 0 8px 24px rgba(12, 26, 60, 0.08) !important;
}

.section--tight .grid .card .icon-badge,
.card-luxury-gold .icon-badge {
  background: linear-gradient(135deg, #FFF3D6 0%, #FFE7B3 100%) !important;
  border: 1.5px solid #C7942C !important;
  color: #8C5B14 !important;
  box-shadow: 0 4px 12px rgba(199, 148, 44, 0.2) !important;
}

.section--tight .grid .card:hover .icon-badge,
.card-luxury-gold:hover .icon-badge {
  background: #0C1A3C !important;
  color: #E8C170 !important;
  border-color: #C7942C !important;
  box-shadow: 0 0 0 4px rgba(199, 148, 44, 0.3), 0 8px 20px rgba(12, 26, 60, 0.2) !important;
}


/* Callout Spacing Gap Rule */
.callout {
  margin-bottom: 1.85rem !important;
}

.callout + p,
.callout + div,
.callout + ul,
.callout + h2,
.callout + h3 {
  margin-top: 1.85rem !important;
}


/* Compact Exam & Topic Cards in Editorial Sections */
.exam-tracks-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.exam-track-card {
  background: #FAF8F5;
  border: 1px solid rgba(14, 31, 69, 0.09);
  border-left: 3px solid #C5A059;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.exam-track-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 31, 69, 0.06);
  border-color: rgba(197, 160, 89, 0.4);
}

.exam-track-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.exam-track-emoji {
  font-size: 1.15rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(197, 160, 89, 0.14);
  border-radius: 7px;
  flex-shrink: 0;
}

.exam-track-head h3 {
  margin: 0 !important;
  font-size: 1.15rem;
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
  color: #0E1F45;
  font-weight: 600;
  line-height: 1.2;
}

.exam-track-card p {
  margin: 0 !important;
  font-size: 0.91rem;
  line-height: 1.5;
  color: #334155;
}


/* Mission Card Highlighted Feature Section */
.editorial-mission-section {
  padding: 4rem 0;
}

.mission-card-highlight {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(14, 31, 69, 0.22);
  color: #FFFFFF;
  border: 1px solid rgba(197, 160, 89, 0.35);
  background: #0E1F45;
}

.mission-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.45;
}

.mission-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(14, 31, 69, 0.94) 0%, rgba(10, 20, 48, 0.88) 100%);
}

.mission-card-content {
  position: relative;
  z-index: 2;
  padding: 3.5rem 3rem;
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
}

.eyebrow--gold {
  color: #D4AF37 !important;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.mission-card-content h2 {
  color: #FFFFFF !important;
  font-size: 2.5rem;
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.rule-gold--center {
  margin-left: auto;
  margin-right: auto;
}

.mission-subhead {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
}

.mission-quote-box {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(197, 160, 89, 0.35);
  border-left: 5px solid #C5A059;
  border-radius: 14px;
  padding: 2rem 2.25rem;
  margin: 1.5rem 0 2rem 0;
  backdrop-filter: blur(8px);
  position: relative;
}

.mission-quote-icon {
  width: 28px;
  height: 28px;
  color: #D4AF37;
  margin-bottom: 0.75rem;
}

.mission-quote-box p {
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
  font-size: 1.45rem;
  font-style: italic;
  line-height: 1.6;
  color: #F8FAFC !important;
  margin: 0 !important;
}

.mission-prose-body p {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.statement--gold {
  color: #D4AF37 !important;
  font-weight: 600;
  font-size: 1.15rem !important;
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .mission-card-content {
    padding: 2.25rem 1.5rem;
  }
  .mission-card-content h2 {
    font-size: 2rem;
  }
  .mission-quote-box p {
    font-size: 1.2rem;
  }
}



/* High Contrast Typography Fix for Full-Width Dark Mission Section */
.editorial-mission-fullwidth {
  position: relative;
  width: 100%;
  background: #0A1430 !important;
  padding: 5.5rem 0;
  overflow: hidden;
  color: #FFFFFF !important;
}

.editorial-mission-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.25;
}

.editorial-mission-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 20, 48, 0.95) 0%, rgba(14, 31, 69, 0.92) 50%, rgba(10, 20, 48, 0.95) 100%);
}

.mission-content-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 5;
}

.editorial-mission-fullwidth h2,
.editorial-mission-fullwidth .h2,
.editorial-mission-fullwidth h2.text-white {
  color: #FFFFFF !important;
  opacity: 1 !important;
  font-size: 2.6rem;
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.editorial-mission-fullwidth .eyebrow,
.editorial-mission-fullwidth .eyebrow--gold {
  color: #D4AF37 !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

.editorial-mission-fullwidth .mission-subhead {
  color: #E2E8F0 !important;
  font-size: 1.15rem !important;
  opacity: 1 !important;
  margin-bottom: 1.5rem;
}

.editorial-mission-fullwidth .mission-quote-box {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(197, 160, 89, 0.4) !important;
  border-left: 5px solid #C5A059 !important;
  border-radius: 14px;
  padding: 2rem 2.25rem;
  margin: 1.75rem 0 2.25rem 0;
  backdrop-filter: blur(8px);
}

.editorial-mission-fullwidth .mission-quote-box p {
  color: #FFFFFF !important;
  opacity: 1 !important;
  font-size: 1.45rem !important;
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif) !important;
  font-style: italic;
  line-height: 1.6;
  margin: 0 !important;
}

.editorial-mission-fullwidth p,
.editorial-mission-fullwidth .mission-prose-body p {
  color: #E2E8F0 !important;
  opacity: 1 !important;
  font-size: 1.08rem !important;
  line-height: 1.75 !important;
  margin-bottom: 1rem;
}

.editorial-mission-fullwidth .statement--gold,
.editorial-mission-fullwidth p.statement--gold {
  color: #F3E5AB !important;
  font-weight: 600 !important;
  font-size: 1.15rem !important;
  opacity: 1 !important;
  margin-top: 1.5rem;
}


/* CTA Band with Background Image */
.cta-band--bg-image {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(197, 160, 89, 0.35);
  box-shadow: 0 20px 50px rgba(14, 31, 69, 0.22);
}

.cta-band-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10, 20, 48, 0.88) 0%, rgba(14, 31, 69, 0.82) 100%);
  z-index: 1;
}

.cta-band-content {
  position: relative;
  z-index: 2;
  padding: 4rem 2rem;
}


/* Slow Beautiful Sparkle Live Animation for Our Mission Icon */
@keyframes sparkleGlow {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.4)) brightness(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.18) rotate(7deg);
    filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.95)) brightness(1.3);
    opacity: 1;
  }
}

.mission-quote-icon,
.sparkle-anim {
  width: 32px;
  height: 32px;
  color: #D4AF37 !important;
  margin-bottom: 0.75rem;
  display: inline-block;
  animation: sparkleGlow 3.5s ease-in-out infinite !important;
  transform-origin: center center;
  will-change: transform, filter, opacity;
}


/* Centered Team Summary Box in about-meet-the-team.html */
.team-summary-centered {
  max-width: 820px !important;
  margin: 3.5rem auto 0 auto !important;
  text-align: center !important;
}

.team-summary-centered .rule-gold--center {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 1.5rem !important;
}

.team-summary-centered .statement,
.team-summary-centered .statement--center {
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif) !important;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
  line-height: 1.35 !important;
  color: #FFFFFF !important;
  text-align: center !important;
  margin: 0 0 1.25rem 0 !important;
  font-weight: 400 !important;
}

.team-summary-centered .team-summary-text,
.team-summary-centered p:not(.statement) {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: #E2E8F0 !important;
  text-align: center !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}


/* Editorial Subpage Hero Exact Alignment */
.editorial-hero {
  position: relative;
  padding-top: 10.5rem;
  padding-bottom: 5.5rem;
  background-color: #0E1F45;
  overflow: hidden;
}

.editorial-hero .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  opacity: 0.65;
  z-index: 1;
}

.editorial-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0A1430 0%, rgba(10, 20, 48, 0.94) 38%, rgba(10, 20, 48, 0.55) 75%, rgba(10, 20, 48, 0.25) 100%);
  z-index: 2;
}

.editorial-hero .container {
  position: relative;
  z-index: 3;
}



/* Live Golden Sheen & Floating Icon Animations for Squarish Cards */
.card-gold-top-square {
  position: relative;
  overflow: hidden;
  background: #FFFDF9;
  border-radius: 22px;
  padding: 2.25rem 1.75rem;
  border: 1px solid rgba(226, 218, 198, 0.75);
  border-top: 3.5px solid #C5A059;
  box-shadow: 0 16px 36px -6px rgba(212, 175, 55, 0.16), 0 4px 14px rgba(10, 20, 48, 0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  min-height: 280px;
}

.card-gold-top-square::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 25%,
    rgba(212, 175, 55, 0.18) 48%,
    rgba(255, 255, 255, 0.45) 52%,
    rgba(212, 175, 55, 0.18) 56%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 2;
  animation: goldSheenSweep 5.5s ease-in-out infinite;
}

.card-gold-top-square:nth-child(1)::before { animation-delay: 0.5s; }
.card-gold-top-square:nth-child(2)::before { animation-delay: 2.3s; }
.card-gold-top-square:nth-child(3)::before { animation-delay: 4.1s; }

@keyframes goldSheenSweep {
  0% { left: -150%; }
  35%, 100% { left: 180%; }
}

.card-gold-top-square:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px -8px rgba(212, 175, 55, 0.28), 0 8px 20px rgba(10, 20, 48, 0.06);
}

.card-gold-top-square .icon-badge {
  background: #F9F1E0;
  border: 1px solid #E8D8B2;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9A7B38;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 3;
  transition: transform 0.3s ease, background 0.3s ease;
  animation: iconPulseFloat 4.5s ease-in-out infinite;
}

.card-gold-top-square:nth-child(1) .icon-badge { animation-delay: 0s; }
.card-gold-top-square:nth-child(2) .icon-badge { animation-delay: 1.5s; }
.card-gold-top-square:nth-child(3) .icon-badge { animation-delay: 3s; }

@keyframes iconPulseFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.05);
    background: #F5E8CE;
    box-shadow: 0 6px 14px rgba(212, 175, 55, 0.25);
  }
}

.card-gold-top-square h3 {
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: #0E1F45;
  margin-bottom: 0.75rem;
  line-height: 1.25;
  position: relative;
  z-index: 3;
}

.card-gold-top-square p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #64748B;
  margin: 0;
  position: relative;
  z-index: 3;
}
ze: 0.92rem;
  line-height: 1.55;
  color: #64748B;
  margin: 0;


/* Card Mouse Hover Icon Badge Color Swap (Dark Navy Fill + Gold Icon) */
.card-gold-top-square:hover .icon-badge {
  background: linear-gradient(135deg, #0A1430 0%, #142854 100%) !important;
  border-color: #D4AF37 !important;
  color: #D4AF37 !important;
  transform: scale(1.1) rotate(-3deg) !important;
  box-shadow: 0 8px 18px rgba(10, 20, 48, 0.35) !important;
}

.card-gold-top-square:hover .icon-badge .ico,
.card-gold-top-square:hover .icon-badge svg {
  fill: #D4AF37 !important;
  stroke: #D4AF37 !important;
}

/* Card Heading Sans-Serif Bold Typography (Matching Screenshot Exactly) */
.card-gold-top-square h3 {
  font-family: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0E1F45 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.35 !important;
  position: relative;
  z-index: 3;
}


/* Soft Gold Badge for Feature Emojis */
.feature-emoji-badge {
  background: #FDF8EC;
  border: 1px solid #F3E6C8;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-right: 0.6rem;
}

/* Mobile Responsive Alignment for Last Item in 2-Col Lists */
.last-item-span {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
}

@media (max-width: 640px) {
  .last-item-span {
    justify-content: flex-start !important;
    grid-column: auto !important;
  }
  .feature-list--2col li[style*="grid-column"] {
    justify-content: flex-start !important;
    grid-column: auto !important;
  }
}


/* Generous spacing for policy and prose headings */
.prose h2 {
  margin-top: 3.5rem;
  margin-bottom: 0.6rem;
}
.prose h2:first-child,
.prose > *:first-child {
  margin-top: 0;
}
.prose .rule-gold {
  margin-top: 0.4rem;
  margin-bottom: 1.35rem;
}
.prose p {
  margin-bottom: 1.15rem;
  line-height: 1.75;
}


/* ---------------- Form Submission Status Styles ---------------- */
.form-status-msg {
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  margin-top: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  animation: fadeIn 0.4s ease forwards;
}
.form-status-msg strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}
.form-status-msg--success {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #166534;
}
.form-status-msg--success svg {
  width: 26px;
  height: 26px;
  stroke: #16A34A;
  flex-shrink: 0;
  margin-top: 2px;
}
.form-status-msg--error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}
.form-status-msg--error svg {
  width: 24px;
  height: 24px;
  stroke: #DC2626;
  flex-shrink: 0;
  margin-top: 2px;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ---------------- 2026-27 Student Registration Form Styles ---------------- */
.reg-form fieldset {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  padding: 1.6rem 1.6rem 1rem;
  margin: 0 0 1.75rem;
  box-shadow: 0 2px 10px rgba(10, 24, 52, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.reg-form fieldset:focus-within {
  border-color: rgba(199, 148, 44, 0.45);
  box-shadow: 0 4px 18px rgba(199, 148, 44, 0.08);
}
.reg-form legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--navy-800);
  padding: 0 0.65rem;
  letter-spacing: -0.01em;
}
.reg-form .hint {
  color: var(--muted);
  font-size: 0.88rem;
  margin: -0.25rem 0 1.1rem;
  line-height: 1.5;
}
.reg-form .field {
  margin: 0 0 1.35rem;
}
.reg-form label.q {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy-800);
  margin-bottom: 0.55rem;
  line-height: 1.45;
}
.reg-form .opt {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.85rem;
}
.reg-form .choice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.55rem 0;
  font-size: 0.92rem;
  color: var(--body);
  cursor: pointer;
  line-height: 1.5;
  transition: color 0.15s ease;
}
.reg-form .choice:hover {
  color: var(--navy-900);
}
.reg-form .choice input[type="radio"],
.reg-form .choice input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--gold-600);
  flex: 0 0 auto;
  cursor: pointer;
}
.reg-form .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1.5rem;
}
@media (max-width: 640px) {
  .reg-form .grid2 {
    grid-template-columns: 1fr;
  }
}
.reg-form .tcbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: #fff !important;
  background: linear-gradient(135deg, #0B2C5D 0%, #1A407A 60%, #C7942C 100%);
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 4px 14px rgba(11, 44, 93, 0.22);
  margin: 0.25rem 0 1.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.reg-form .tcbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(11, 44, 93, 0.32);
}
.reg-form .tcbtn svg {
  flex: 0 0 auto;
}

/* --------------------------------------------- 21. HEADER SCROLL STABILITY
   Mobile only. The floating pill was re-positioning itself on scroll
   (top:16px -> top:10px), which on a phone reads as the bar sliding upward
   and, caught mid-scroll while the browser's address bar collapses, leaves
   just the pill's cream bottom edge showing as a thin white line under the
   status bar. The pill now holds a single, fixed position at every scroll
   offset - only its shadow and border still react. Nothing else about the
   design changes. */
@media (max-width:1024px){
  .site-header,
  .site-header.is-stuck{
    top:16px;
  }
}

/* ------------------------------------------ 22. LONG-STRING OVERFLOW FIX
   The contact email ("thespanishacademy.online@gmail.com") is a single
   unbreakable 257px word. It sits in a flex item, and flex items default to
   `min-width:auto`, so nothing could shrink below it: every page had a
   min-content width of ~366px. On a 360px-wide phone that made the document
   wider than the screen, so the page could be dragged sideways - the
   full-width navy hero slid left and exposed a white strip down the right
   edge, and the fixed header slid with it.
   Letting the email wrap removes the extra width. Desktop is unaffected:
   the string only breaks when there genuinely isn't room. */
a[href^="mailto:"],
a[href^="tel:"]{
  overflow-wrap:anywhere;
}
.contact-tile,
.contact-tile > *{
  min-width:0;
}

/* ---------------------------------------------- 23. GRID BLOWOUT / TABLES
   `grid-template-columns: 1fr` is shorthand for `minmax(auto, 1fr)`, and
   grid/flex items default to `min-width:auto` - so a column can never shrink
   below its widest content. On the lesson pages a ~700px wide comparison
   table sat inside `.editorial-split-grid`: the column stretched to fit the
   table, `.table-wrap`'s `overflow-x:auto` therefore never engaged, and the
   whole page rendered ~720px wide on a 360px phone (header shoved off to the
   right, hero misaligned, everything scrollable sideways).
   `minmax(0, 1fr)` + `min-width:0` lets the column take the screen width
   again, so wide tables scroll inside their own container as intended.
   Layout is unchanged wherever the content already fit. */
.editorial-split-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
@media (max-width:991px){
  .editorial-split-grid{ grid-template-columns:minmax(0,1fr); }
}
.editorial-split-grid > *,
.split > *,
.stack > *,
.editorial-prose{
  min-width:0;
}
/* `.editorial-prose` sets `margin-inline:auto` (for standalone, centred use).
   Auto inline margins switch a grid item OFF stretch sizing, so inside
   `.editorial-split-grid` it sized itself to fit-content - 701px - instead of
   filling its 323px column, dragging the whole DELE page sideways. Pinning it
   to the column width restores stretch. No visual change: on desktop the
   column is already narrower than its 720px max-width, so this resolves to
   exactly the same size it had before. */
.editorial-split-grid > .editorial-prose{
  width:100%;
}
/* Wide tables stay inside their scroll container on every page. */
.table-wrap{
  max-width:100%;
}
.table-wrap > table{
  margin:0;
}