/* Brand v2 site-wide layer (3 Nov 2026). Loaded LAST on every page by BaseLayout.
   Carries the homepage "lead magnet" look to all pages without changing their layouts:
   one sans family (Plus Jakarta Sans), bold navy headings with orange accents, rounded cards,
   orange circle step numbers, navy rounded CTA card. Palette = DESIGN.md colours only.
   Homepage-only layout lives in lead-style.css (body.lm). */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jakarta-400.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jakarta-500.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/jakarta-600.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/jakarta-700.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/jakarta-800.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/caveat-600.woff2) format('woff2')}

:root{
  --sans:'Plus Jakarta Sans',Manrope,system-ui,sans-serif;
  --script:'Caveat','Segoe Script',cursive;
  --radius-card:24px;
  --radius-panel:28px;
  --shadow-sm:0 1px 2px rgba(25,47,90,.05),0 10px 24px -14px rgba(25,47,90,.25);
  --shadow-md:0 1px 2px rgba(25,47,90,.04),0 24px 48px -24px rgba(25,47,90,.22);
}

/* 1. One type family everywhere (the old CSS sets Manrope / DM Serif in many shorthands) */
html body,html body :where(*:not(svg):not(path)){font-family:var(--sans)!important}
html body .lm-script{font-family:var(--script)!important}
body{background:var(--paper)}

/* 2. Headings: bold navy, orange accent words */
h1,h2{font-weight:800;letter-spacing:-.035em}
h3{font-weight:700;letter-spacing:-.01em}
body:not(.lm) h1{font-size:clamp(40px,5vw,68px)!important;line-height:1.05!important;letter-spacing:-.04em}
body:not(.lm) .hero h1 span:not(.nowrap),body:not(.lm) h2 .accent{color:var(--orange)}
/* Former DM Serif display text: give it sans weight */
.glance-grid strong,.glance-title,.v3 .glance-title,.v4-fastpath-text,.v2-lead,.v2-questions,.audience-strip p,.form-heading,.planner h2.plan-title{font-weight:800!important;letter-spacing:-.03em}
.pillar-lead h3,.reason-lead h3,.route-card h3,.results-grid h3,.curricula-grid h3,.card-heading h3,.plan-contact h3,.fees-detail .fees-lead,.fee-flow-steps strong,.visa-facts dt,.panel-steps li:before,.footer-main>div:first-child>p{font-weight:700!important;letter-spacing:-.02em}
.mobile-menu a,.mobile-menu summary{font-weight:700!important;letter-spacing:-.02em}
.eyebrow{font-weight:800;letter-spacing:.16em}

/* 3. Buttons and links */
.button{border-radius:14px;min-height:52px;padding:12px 24px;font-weight:700;color:var(--ink);background:var(--orange);box-shadow:0 12px 24px -10px rgba(241,93,38,.6);gap:12px}
.button span{font-size:20px;line-height:24px}
.button:hover{background:var(--orange-hover);box-shadow:0 16px 28px -10px rgba(241,93,38,.65)}
.header-cta{border-radius:12px;min-height:44px;padding-inline:18px;box-shadow:0 8px 18px -8px rgba(241,93,38,.6)}
.text-link{color:var(--orange-text);gap:8px;font-size:15px}
.text-link span{font-size:18px}
.text-link:hover{color:var(--orange-text)}

/* 4. Header and footer */
.header{border-radius:20px;border-color:var(--line);background:color-mix(in srgb,var(--paper) 92%,transparent);box-shadow:var(--shadow-sm)}
.desktop-nav a,.nav-drop summary{font-weight:500}
.nav-drop-panel{border-radius:16px}
footer{background:var(--cream)}

/* 5. Cards and panels: rounder, white, soft shadow */
.destination-card,.route-card,.results-grid>article,.school-table-wrap,.consultation-form,.pillar,.honesty,.cross-list>a,.route-link{border-radius:var(--radius-card)}
.destination-card,.route-card,.results-grid>article,.consultation-form{background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.reason-photo{border-radius:20px}
.reason-grid-photos .reason-lead{overflow:hidden}
.destination-image{border-radius:0}
.location-label{border-radius:999px;padding:6px 12px;background:var(--orange);color:var(--ink);letter-spacing:.04em}
.tags li{border-radius:999px;padding:4px 12px;background:var(--cream)}
.photo-label{border-radius:18px;box-shadow:var(--shadow-md)}
.hero-panel{background:radial-gradient(80% 120% at 100% 0%,var(--blue) 0%,rgba(30,78,140,0) 60%),var(--navy)}
.glance,.audience-strip{background:radial-gradient(60% 160% at 100% 0%,var(--blue) 0%,rgba(30,78,140,0) 60%),var(--navy)}

/* FAQ */
.faq-list{gap:12px}
.faq-list details{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px 24px;box-shadow:0 1px 2px rgba(25,47,90,.04)}
.faq-list details[open]{background:var(--white);box-shadow:var(--shadow-sm)}
.faq-list summary{font-weight:700}
.faq-list summary>span{color:var(--orange);font-weight:600}

/* Forms */
input,select,textarea{border-radius:10px}
.form-row input,.field input,.field select,.field textarea{background:var(--white)}

/* 6. Step numbers: orange circles, like the homepage steps */
.step-number{display:grid!important;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--orange);color:var(--white)!important;font-size:20px!important;font-weight:800!important;line-height:1!important;letter-spacing:0;box-shadow:0 0 0 6px rgba(241,93,38,.15)}
.journey-six .step-number,.sg-journey .step-number{font-size:20px!important}

/* 7. Closing call to action: navy rounded card */
.about-cta{background:transparent;padding-block:48px 80px}
.about-cta-inner{background:radial-gradient(70% 120% at 100% 100%,var(--blue) 0%,rgba(30,78,140,0) 60%),var(--navy);color:var(--white);border-radius:var(--radius-panel);padding:56px;box-shadow:var(--shadow-md);align-items:center}
.about-cta-inner .eyebrow{color:var(--on-navy)}
.about-cta-inner h2{color:var(--white)}
.about-cta-inner>div:last-child p,.about-cta-inner p:not(.eyebrow){color:var(--on-navy)}
.about-cta-inner .text-link,.about-cta-inner a:not(.button){color:var(--white)}
.about-cta-inner .text-link:hover{color:var(--on-navy)}
.about-cta-inner .v2-signoff em{font-family:var(--script)!important;font-style:normal;font-size:26px;line-height:1.1;color:var(--on-navy)}

/* 8. Cream bands get rounded inner panels feel via softer edges */
.care-section,.faq-section{background:var(--cream)}

@media(max-width:760px){
  .about-cta{padding-block:32px 56px}
  .about-cta-inner{padding:32px 20px;gap:24px}
  .step-number{width:44px;height:44px;font-size:18px!important}
  .faq-list details{padding:16px}
  .button{width:auto}
  .route-card h3{font-size:24px!important;line-height:30px!important}
}

/* Links inside navy areas keep the light text colour (orange-text is for light backgrounds only) */
.glance .text-link,.hero-panel .text-link,.audience-strip .text-link,.pillar-lead .text-link,.promise .text-link{color:inherit}
.glance .text-link:hover,.hero-panel .text-link:hover,.audience-strip .text-link:hover,.pillar-lead .text-link:hover,.promise .text-link:hover{color:var(--on-navy)}

/* Eyebrows on navy cards stay light; orange-text is for light backgrounds only */
.pillar-lead .eyebrow,.hero-panel .eyebrow,.glance .eyebrow,.reason-lead .eyebrow{color:var(--on-navy)}
/* Big orange fact numbers: deep orange on light backgrounds, brand orange only on navy */
.glance-grid>div:first-child strong{color:var(--orange-text)}
.glance .glance-grid>div:first-child strong{color:var(--orange)}
/* Feature h2 (60px serif era) brought in line with the new h1 scale */
.promise h2{font-size:clamp(32px,4vw,48px);line-height:1.08}

/* Results cards (Study in Malaysia / Korea): proper inner padding inside the new white cards, short orange accent bar */
.results-grid>article{padding:28px 28px 32px;border-top:1px solid var(--line)}
.results-grid>article:before{content:'';display:block;width:36px;height:4px;border-radius:4px;background:var(--orange);margin-bottom:20px}
.results-grid h3{font-size:24px!important;line-height:30px!important}
@media(max-width:760px){.results-grid>article{padding:24px 20px 28px}.results-grid h3{font-size:22px!important;line-height:28px!important}}

/* "Guidance in your language" (LanguageBenefit.astro): icon + title + chips; "row" sits under hero buttons, "card"/"dark" add a sentence */
.lang-benefit{display:flex;align-items:center;gap:14px;max-width:440px;margin-top:20px;padding:14px 16px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(25,47,90,.04),0 12px 24px -16px rgba(25,47,90,.22)}
.lang-benefit-icon{flex-shrink:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--orange) 10%,var(--white))}
.lang-benefit-icon svg{width:22px;height:22px;fill:none;stroke:var(--orange-text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lang-benefit-body{min-width:0}
.lang-benefit-title{font-size:15px;line-height:20px;font-weight:800;color:var(--navy);margin:0 0 8px}
.lang-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.lang-chips li{padding:3px 10px;border-radius:999px;background:var(--cream);font-size:13px;line-height:18px;font-weight:700;color:var(--navy)}
.lang-benefit-card,.lang-benefit-dark{align-items:flex-start;max-width:none;padding:18px 20px}
.lang-benefit-card .lang-benefit-text,.lang-benefit-dark .lang-benefit-text{margin:0 0 12px;font-size:15px;line-height:22px;color:var(--text-2)}
.lang-benefit-card .lang-benefit-title,.lang-benefit-dark .lang-benefit-title{margin-bottom:6px}
.lang-benefit-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);box-shadow:none}
.lang-benefit-dark .lang-benefit-title{color:var(--white);font-size:16px}
.lang-benefit-dark .lang-benefit-icon{background:rgba(255,255,255,.1)}
.lang-benefit-dark .lang-benefit-icon svg{stroke:var(--on-navy)}
.lang-benefit-dark .lang-benefit-text{color:var(--on-navy)}
.lang-benefit-dark .lang-chips li{background:rgba(255,255,255,.12);color:var(--white)}
/* CJK text uses the system's Korean/Chinese/Japanese fonts (Plus Jakarta Sans has no CJK glyphs) */
html body [lang="ko"]{font-family:'Plus Jakarta Sans','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif!important}
html body [lang="zh"]{font-family:'Plus Jakarta Sans','PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif!important}
html body [lang="ja"]{font-family:'Plus Jakarta Sans','Hiragino Sans','Yu Gothic','Noto Sans JP',sans-serif!important}
@media(max-width:760px){.lang-benefit{max-width:none;padding:12px 14px;gap:12px}.lang-benefit-icon{width:38px;height:38px}.lang-chips li{font-size:12.5px;padding:2px 9px}}

/* Header fit with six menu items (incl. Agency partnership) on laptops and tablets */
@media (min-width:761px) and (max-width:1240px){
  .header{gap:16px;padding-inline:16px}
  .desktop-nav{gap:20px}
  .desktop-nav a,.nav-drop summary{font-size:13px}
  .brand{width:120px}
  .header-cta{padding-inline:14px;gap:8px}
}
@media (min-width:761px) and (max-width:1000px){
  .desktop-nav{gap:14px}
  .header-cta span{display:none}
  .brand{width:104px}
}
/* Small tablets: six items + button don't fit, so the header button hides (every page has the same button in its hero) */
@media (min-width:761px) and (max-width:960px){.header-cta{display:none}.desktop-nav{margin-right:0}}
/* Row variant: keep all five languages on one line beside the icon */
.lang-benefit-row{gap:12px;padding:12px 14px}
.lang-benefit-row .lang-benefit-icon{width:40px;height:40px}
.lang-benefit-row .lang-benefit-title{margin-bottom:6px}
.lang-benefit-row .lang-chips{gap:5px;flex-wrap:nowrap}
.lang-benefit-row .lang-chips li{padding:2px 8px;font-size:12.5px;white-space:nowrap}
@media(max-width:760px){.lang-benefit-row .lang-chips{flex-wrap:wrap}}

/* Guidance form: "Your message is ready." is an h2 (heading order) styled like the old h3 */
.message-review .message-ready-title{font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}