/* ============================================================
   ITS Education Asia: Choosing a University
   Design tokens follow the existing ITS pages (ucat.css):
   Poppins, card radius 12px, button radius 6px, button weight 600
   (CTA banner buttons 700), 24px grid gap, 28px card padding.
   Breakpoints: 1024 / 768 / 620 / 540.
   Note: the ITS site loads Poppins 300-700 only, so weights 800 / 900
   render as 700 there.
   ============================================================ */

/* ---- Brand tokens ---- */
:root {
  --its-navy:        #003A63;
  --its-blue:        #0067AC;
  --its-sky:         #00A4E4;
  --its-sky-dark:    #0086bc;
  --its-blue-dark:   #004f83;
  --its-text:        #333333;
  --its-muted:       #555555;
  --its-muted-2:     #666666;
  --its-border:      #dde4ed;
  --its-bg-light:    #f4f6f9;
  --its-white:       #ffffff;
  --its-tint:        #e6f0fb;
  --r-card:          12px;
  --r-btn:           6px;
  --gap:             24px;
  --card-pad:        28px;
  --sec-pad:         40px;
  --shadow-card:     0 2px 10px rgba(0,58,99,0.07);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  /* font-family: 'Poppins', Arial, sans-serif; */
  /* font-size: 1rem; line-height: 1.7;
  color: var(--its-text); background: var(--its-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; */
}
img { display: block; max-width: 100%; }
a { color: inherit; }
strong { font-weight: 600; }
.container { margin: 0 auto;}
:focus-visible { outline: 2px solid var(--its-sky); outline-offset: 3px; border-radius: 4px; }

/* ---- Buttons ---- */
#main-content .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 28px; border-radius: var(--r-btn);
  font-family: 'Poppins', Arial, sans-serif; font-size: 0.95rem; font-weight: 600;
  border: 2px solid transparent; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
#main-content .btn-primary { background: var(--its-sky); color: #fff; border-color: var(--its-sky); }
#main-content .btn-primary:hover { background: var(--its-sky-dark); border-color: var(--its-sky-dark); }
/* outline (white fill) is used only for the hero Contact Us; every other button is sky blue (.btn-primary) */
#main-content .btn-outline { background: transparent; color: var(--its-blue); border-color: var(--its-blue); }
#main-content .btn-outline:hover { background: var(--its-blue); color: #fff; }
#main-content .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
#main-content .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.arrow-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; color: var(--its-blue); text-decoration: none; }
.arrow-link span { transition: transform .2s; }
.arrow-link:hover span { transform: translateX(4px); }
.arrow-link:hover { color: var(--its-blue-dark); }
.inline-link { color: var(--its-blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(0,103,172,.3); transition: color .15s, border-color .15s; }
.inline-link:hover { color: var(--its-blue-dark); border-bottom-color: var(--its-blue-dark); }

/* ---- Hero: photo is a full-bleed background that dissolves into white on the left and bottom ---- */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 480px; padding: 72px 0; background: #fff; }
.hero .container { position: relative; z-index: 1; width: 100%; }
.hero-bg {
  position: absolute; top: 0; right: 0; bottom: 0; width: 68%;
  background: url('https://itseducation.asia/assets/webp-images/uni_bg-fa2-min.webp') 70% center / cover no-repeat;
}
/* eased white overlay: left edge is solid white, so there is no visible seam with the page */
.hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    #fff 0%, rgba(255,255,255,.97) 8%, rgba(255,255,255,.88) 18%, rgba(255,255,255,.7) 30%,
    rgba(255,255,255,.45) 44%, rgba(255,255,255,.2) 60%, rgba(255,255,255,.05) 78%, rgba(255,255,255,0) 100%);
}
.hero-bg::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(to top, #fff 0%, rgba(255,255,255,.75) 35%, rgba(255,255,255,.3) 70%, rgba(255,255,255,0) 100%);
}
.hero-copy { max-width: 640px; }
.eyebrow { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--its-blue); margin-bottom: 12px; }
.hero h1 { font-size: 3rem; font-weight: 900; color: var(--its-navy); line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; margin-bottom: 20px; }
.hero-sub { font-size: 1.05rem; color: var(--its-muted); line-height: 1.78; max-width: 480px; margin-bottom: 24px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Sticky text nav ---- */
.subnav { position: sticky; top: 55px; z-index: 20; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--its-border); border-bottom: 1px solid var(--its-border); }
.subnav-inner { display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none; }
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a { position: relative; padding: 16px 0; font-size: .9rem; font-weight: 600; color: var(--its-muted-2); text-decoration: none; white-space: nowrap; transition: color .2s; }
.subnav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--its-blue); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.subnav a:hover, .subnav a.active { color: var(--its-navy); }
.subnav a.active::after { transform: scaleX(1); }

/* ---- Sections ---- */
.sec { padding: var(--sec-pad) 0; }
.sec + .sec { border-top: 1px solid var(--its-border); }
.sec-grid { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; }
.sec-head { position: sticky; top: 88px; }
.sec-heading { font-size: 2.5rem; font-weight: 700; color: var(--its-navy); line-height: 1.3; margin-bottom: 16px; }
.sec-head p { font-size: 1.05rem; color: var(--its-muted); line-height: 1.8; }
.sec-body > * + * { margin-top: var(--gap); }
.sec-lead { font-size: 1.05rem; color: var(--its-muted); line-height: 1.8; }
.sec-lead strong { color: var(--its-navy); }
.sec-body p { color: var(--its-muted); }

/* ---- How to select: compact, single column ---- */
.approach-head { max-width: 760px; }
.approach-head .sec-lead { margin-top: 0; }
.reasons { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 36px; }
.reasons li { padding-top: 18px; border-top: 2px solid var(--its-navy); }
.reasons .n { display: block; font-size: .8rem; font-weight: 700; color: var(--its-sky); margin-bottom: 6px; }
.reasons h3 { font-size: 1.05rem; font-weight: 700; color: var(--its-navy); line-height: 1.35; margin-bottom: 8px; }
.reasons p { font-size: .95rem; color: var(--its-muted); line-height: 1.7; }

.course { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center; margin-top: 40px; padding: var(--card-pad); background: var(--its-bg-light); border: 1px solid var(--its-border); border-radius: var(--r-card); }
.course h3 { font-size: 1.15rem; font-weight: 700; color: var(--its-blue); line-height: 1.3; margin-bottom: 8px; }
.course p { font-size: .95rem; color: var(--its-muted); line-height: 1.7; }
.course-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pkg { background: #fff; border: 1px solid var(--its-border); border-radius: var(--r-card); padding: 18px 20px; }
.pkg .big { font-size: 2.25rem; font-weight: 700; color: var(--its-navy); line-height: 1; }
.pkg .big small { font-size: .9rem; font-weight: 500; color: var(--its-muted-2); margin-left: 6px; }
.pkg p { margin-top: 8px; font-size: .9rem; font-weight: 500; color: var(--its-text); line-height: 1.45; }
.course-note { margin-top: 16px; font-size: .95rem; color: var(--its-muted); }
.actions-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 24px; }

.qlinks { display: grid; grid-template-columns: 1.5fr 1fr; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--its-border); }
.qgroup { padding-right: 32px; }
.qgroup + .qgroup { padding: 0 0 0 32px; border-left: 1px solid var(--its-border); }
.qgroup h4 { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--its-muted-2); margin-bottom: 12px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { padding: 7px 14px; font-size: .875rem; font-weight: 600; color: var(--its-blue); text-decoration: none; background: #fff; border: 1px solid var(--its-border); border-radius: var(--r-btn); line-height: 1.5; transition: border-color .2s, background .2s; }
.pill:hover { border-color: var(--its-blue); background: #f2f9fd; }

/* ---- Destination photo band ----
   Full-bleed (edge to edge of the window) so there is no left/right border at all.
   The photo fades out completely at the bottom BEFORE any text starts. */
.sec.dest { padding-top: 0; border-top: 0; }
.dest-band { position: relative; height: clamp(260px, 30vw, 400px); margin-bottom: 8px; }
.dest-media {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0,0,0,.92) 44%, rgba(0,0,0,.76) 54%, rgba(0,0,0,.52) 65%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.12) 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0,0,0,.92) 44%, rgba(0,0,0,.76) 54%, rgba(0,0,0,.52) 65%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.12) 88%, transparent 100%);
}
.dest-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) contrast(1.05); }

/* ---- Panels ---- */
.panel { background: var(--its-bg-light); border: 1px solid var(--its-border); border-radius: var(--r-card); padding: var(--card-pad); }
.panel.plain { background: #fff; box-shadow: var(--shadow-card); }
.panel h3 { font-size: 1.15rem; font-weight: 700; color: var(--its-blue); line-height: 1.3; }
.tag { display: inline-block; margin: 10px 0 0; padding: 3px 12px; font-size: .8rem; font-weight: 600; color: var(--its-blue); background: var(--its-tint); border-radius: var(--r-btn); line-height: 1.6; }
.panel p { margin-top: 14px; color: var(--its-muted); }
.panel .arrow-link { margin-top: 20px; }

/* ---- Numbered list (UK + US) ---- */
.num-list { list-style: none; counter-reset: n; margin: 16px 0 0; }
.num-list li { counter-increment: n; display: flex; gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--its-border); font-weight: 500; color: var(--its-text); line-height: 1.6; }
.num-list li:first-child { border-top: 1px solid var(--its-border); }
.num-list li::before { content: counter(n, decimal-leading-zero); min-width: 1.6em; font-size: .8rem; font-weight: 700; color: var(--its-sky); flex-shrink: 0; }
.num-list li.more-item { color: var(--its-muted-2); font-weight: 400; }
.plain-list { list-style: none; margin: 16px 0 0; }
.plain-list li { padding: 11px 0; border-bottom: 1px solid var(--its-border); color: var(--its-text); font-weight: 500; line-height: 1.6; }
.plain-list li:first-child { border-top: 1px solid var(--its-border); }

/* bullet list: same look as .svc-list--bullet in ucat.css */
.bullet-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; }
.bullet-list li { position: relative; padding-left: 22px; font-size: 1rem; color: #444; line-height: 1.65; }
.bullet-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--its-blue); }

.note-box { background: #f7f9fc; border-left: 3px solid var(--its-blue); border-radius: 0 8px 8px 0; padding: 14px 18px; font-size: 1rem; color: var(--its-muted); line-height: 1.75; }
.note-box strong { color: var(--its-navy); }

/* ---- Advisors ---- */
.advisors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.advisor { background: #fff; border: 1px solid var(--its-border); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.advisor-photo img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: center top; background: var(--its-bg-light); }
.advisor-info { padding: 20px var(--card-pad) 24px; }
.advisor-info h3 { font-size: 1.15rem; font-weight: 700; color: var(--its-navy); line-height: 1.3; }
/* role is plain text (no pill background), so it lines up with the name and credentials with no offset */
.advisor-role { display: block; margin: 4px 0 12px; font-size: .9rem; font-weight: 600; color: var(--its-blue); line-height: 1.5; }
.advisor-info ul { list-style: none; font-size: .9rem; color: var(--its-muted); line-height: 1.7; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }

/* ---- CTA ----
   Light full-width band: the real site footer below is dark navy, so a navy CTA would merge into it. */
#main-content .cta { padding: 72px 0; text-align: center; background: linear-gradient(180deg, #f2f7fc 0%, #e4eff9 100%); border-top: 1px solid var(--its-border); }
#main-content .cta h2 { font-size: 1.9rem; font-weight: 800; color: var(--its-navy); line-height: 1.2; margin: 0 auto 12px; }
#main-content .cta p { font-size: 1rem; color: var(--its-muted); line-height: 1.7; max-width: 520px; margin: 0 auto; }
#main-content .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
#main-content .cta .btn { font-weight: 700; }

/* ---- Breakpoints: only the 4 approved ---- */
@media (max-width: 1024px) {
  .sec-grid { grid-template-columns: 1fr; gap: 28px; }
  .sec-head { position: static; }
  .course { grid-template-columns: 1fr; gap: 20px; }
  #main-content .cta h2 { font-size: 1.65rem; }
  .hero h1 { font-size: 2.6rem; }
}
@media (max-width: 768px) {
  .subnav {top: 0;}
}
@media (max-width: 768px) {
  :root { --sec-pad: 32px; }
  /* hero: photo becomes a top band that fades down into the text */
  .hero { display: block; min-height: 0; padding: 0 0 40px; }
  .hero-bg { position: relative; width: 100%; height: 260px; background-position: 72% 25%; }
  .hero-bg::before { background: linear-gradient(to bottom, rgba(255,255,255,0) 30%, rgba(255,255,255,.5) 60%, rgba(255,255,255,.88) 82%, #fff 100%); }
  .hero-bg::after { display: none; }
  .hero-copy { margin-top: -36px; }
  .reasons { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
  .reasons li { padding-top: 14px; }
  .qlinks { grid-template-columns: 1fr; }
  .qgroup { padding-right: 0; }
  .qgroup + .qgroup { padding: 20px 0 0; margin-top: 20px; border-left: 0; border-top: 1px solid var(--its-border); }
  .two-col { grid-template-columns: 1fr; }
  #main-content .cta { padding: 44px 0; }
  #main-content .cta h2 { font-size: 1.45rem; }
}
@media (max-width: 620px) {
  .sec-heading { font-size: 2rem; }
  .advisors { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .dest-band { height: 220px; }
  .hero-bg { height: 220px; }
  .hero h1 { font-size: 2.2rem; }
}
@media (max-width: 540px) {
  :root { --sec-pad: 28px; --card-pad: 20px; }
  .container { padding: 0 10px; }
  .sec-heading { font-size: 1.75rem; }
  .hero h1 { font-size: 1.9rem; }
  #main-content .btn { font-size: .9rem; padding: 11px 20px; white-space: normal; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
  .course-split { grid-template-columns: 1fr; }
  .subnav-inner { gap: 24px; }
  #main-content .cta { padding: 36px 0; }
  #main-content .cta h2 { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }