
:root{
  --navy:#071f55;
  --blue:#0b7fd3;
  --gold:#c78318;
  --gold2:#f0ae2e;
  --ink:#071a44;
  --muted:#5e6b82;
  --soft:#f6f9ff;
  --line:#dce4f0;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,"Noto Sans KR",sans-serif;color:var(--ink);background:var(--soft)}
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:12px 5vw;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)
}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand img{height:82px;max-width:240px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(7,31,85,.18))}
.brand span{display:flex;flex-direction:column;line-height:.95}
.brand b{font-size:28px;color:var(--navy);font-weight:1000}
.brand em{font-style:normal;font-size:15px;color:var(--gold);font-weight:1000;letter-spacing:.17em}
.nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--navy);font-weight:900;font-size:14px}
.menu-btn{display:none;border:0;background:var(--navy);color:#fff;border-radius:10px;padding:9px 12px;font-size:22px}

.home-hero{
  min-height:calc(100vh - 106px);
  display:grid;grid-template-columns:.95fr 1.05fr;gap:42px;align-items:center;
  padding:64px 6vw;
  background:linear-gradient(135deg,#041642 0%,#092b70 54%,#0b7fd3 100%);
  position:relative;overflow:hidden
}
.home-hero:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 85% 20%,rgba(240,174,46,.28),transparent 28%),
             linear-gradient(90deg,rgba(4,22,66,.92),rgba(4,22,66,.25))
}
.home-copy,.home-photo{position:relative;z-index:2}
.home-copy{color:#fff;max-width:760px}
.eyebrow{display:inline-block;padding:10px 18px;border-radius:999px;background:var(--navy);color:#fff;font-weight:1000;letter-spacing:.04em;margin:0 0 18px}
.eyebrow.gold{background:var(--gold2);color:#081a42}
h1{font-size:clamp(42px,6vw,82px);line-height:1.03;margin:0 0 22px;color:var(--navy)}
.home-copy h1,.page-hero h1{color:#fff}
h2{font-size:clamp(32px,4.2vw,56px);line-height:1.16;margin:0 0 28px;color:var(--navy)}
h3{font-size:26px;margin:0 0 12px;color:var(--navy)}
.lead{font-size:21px;line-height:1.75;color:#eaf2ff;margin:0}
.big-text{font-size:21px;line-height:1.85;color:var(--muted)}
.focus-line{
  margin:28px 0 30px;padding:17px 19px;border-radius:20px;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);
  color:#fff;font-weight:800
}
.actions{display:flex;gap:15px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:16px 22px;border-radius:16px;text-decoration:none;font-weight:1000}
.btn.light{background:#fff;color:var(--navy)}
.btn.goldbtn{background:var(--gold2);color:#081a42}
.dark-border{border:2px solid var(--navy)}
.home-photo img,.photo-story img{width:100%;display:block;border-radius:34px;border:5px solid rgba(255,255,255,.78);box-shadow:0 30px 85px rgba(0,0,0,.35)}

.section{max-width:1240px;margin:auto;padding:78px 6vw}
.intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.intro-grid article,.card,.value-list div,.service-grid article,.country-groups article,.contact-card,.contact-info{
  background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:0 12px 36px rgba(7,31,85,.08);padding:28px
}
.intro-grid span{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--gold2);font-weight:1000;margin-bottom:16px}
.intro-grid p,.card p,.service-grid p,.country-groups p,.contact-card p,.contact-info p{font-size:17px;line-height:1.75;color:var(--muted)}
.intro-grid a{font-weight:1000;color:var(--navy);text-decoration:none}

.page-hero{min-height:520px;display:flex;align-items:center;padding:90px 6vw;background:linear-gradient(135deg,#071f55,#0b7fd3);position:relative;overflow:hidden}
.page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,22,66,.9),rgba(4,22,66,.45))}
.page-hero>div{position:relative;z-index:2;max-width:900px}
.page-hero.compact{min-height:430px}
.universities-hero{background-image:linear-gradient(90deg,rgba(4,22,66,.9),rgba(4,22,66,.4)),url('assets/muslim-students-hero.png');background-size:cover;background-position:center}
.students-hero{background-image:linear-gradient(90deg,rgba(4,22,66,.88),rgba(4,22,66,.35)),url('assets/muslim-students-hero.png');background-size:cover;background-position:center}
.pathway-hero{background-image:none!important;background-color:#123d7a!important}
.cards{display:grid;gap:22px}
.cards.three,.service-grid,.country-groups,.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.icon{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--navy);font-size:30px;margin-bottom:18px}
.two-col,.split-panel,.photo-story{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.value-list{display:grid;gap:18px}
.value-list b{font-size:24px;color:var(--navy)}
.flow-box{display:flex;gap:12px;flex-wrap:wrap;background:#fff;padding:28px;border-radius:26px;box-shadow:0 12px 36px rgba(7,31,85,.08)}
.flow-box span{background:var(--navy);color:#fff;border-radius:16px;padding:14px 18px;font-weight:900}
.flow-box span:nth-child(even){background:var(--gold)}
.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.journey div{background:#fff;border-radius:24px;padding:24px;box-shadow:0 12px 36px rgba(7,31,85,.08);border-top:7px solid var(--gold)}
.journey b{font-size:30px;color:var(--gold)}
.service-grid article span{font-size:42px;display:block;margin-bottom:15px}
.network-map,.career-img{ display:none;}
.contact-grid{grid-template-columns:1fr 1fr 1fr}
.contact-card h2{font-size:34px}
.footer{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:30px 6vw;background:var(--navy);color:#fff}
.footer p{margin:4px 0;color:#dce9ff}

@media(max-width:1050px){
  .home-hero,.two-col,.split-panel,.photo-story{grid-template-columns:1fr}
  .intro-grid,.cards.three,.service-grid,.country-groups,.contact-grid,.journey{grid-template-columns:1fr}
}
@media(max-width:860px){
  .site-header{align-items:flex-start}
  .brand img{height:62px;max-width:180px}
  .brand b{font-size:22px}
  .brand em{font-size:12px}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:88px;background:#fff;padding:20px 6vw;border-bottom:1px solid var(--line)}
  .nav.open{display:grid;gap:14px}
  .home-hero{padding:52px 5vw}
  .section{padding:56px 5vw}
  .page-hero{padding:70px 5vw;min-height:430px}
  .footer{flex-direction:column;text-align:center}
}


/* Updated visual improvements */
.logo img {
    max-height: 90px !important;
}

.hero-image img,
.page-hero img,
.section-image img {
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}


/* Improved branding visibility */
.logo img {
    max-height: 120px !important;
    width: auto !important;
}

.logo-text,
.hero h1,
.brand-title {
    font-size: 1.25em !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
}

.hero-subtitle,
.tagline,
.brand-subtitle {
    font-size: 1.05em !important;
    opacity: 0.95;
}


/* Clean premium branding */

.brand img,
.logo img {
    max-height: 145px !important;
    width: auto !important;
}

.brand-title-main {
    font-size: 34px;
    font-weight: 800;
    color: #123d7a;
    line-height: 1.1;
    margin-bottom: 6px;
}

.brand-slogan {
    font-size: 14px;
    font-weight: 700;
    color: #c2932f;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.brand-sub {
    font-size: 13px;
    color: #555;
    letter-spacing: 0.4px;
}

@media (max-width: 768px) {
    .brand-title-main {
        font-size: 24px;
    }

    .brand-slogan,
    .brand-sub {
        font-size: 11px;
    }

    .brand img,
    .logo img {
        max-height: 105px !important;
    }
}


/* Header brand rebuild */
.brand,
.logo,
.navbar .brand,
.header-brand {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
}

.brand img,
.logo img,
.header-brand img,
.navbar img {
    max-height: 128px !important;
    width: auto !important;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
    white-space: nowrap;
}

.brand-copy-title {
    font-size: 32px;
    font-weight: 800;
    color: #123d7a;
    letter-spacing: 0.3px;
}

.brand-copy-slogan {
    font-size: 14px;
    font-weight: 700;
    color: #c2932f;
    letter-spacing: 1px;
    margin-top: 6px;
}

.brand-copy-sub {
    font-size: 13px;
    font-weight: 500;
    color: #444;
    letter-spacing: 0.4px;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .brand,
    .logo,
    .navbar .brand,
    .header-brand {
        gap: 10px !important;
    }

    .brand img,
    .logo img,
    .header-brand img,
    .navbar img {
        max-height: 90px !important;
    }

    .brand-copy-title {
        font-size: 20px;
    }

    .brand-copy-slogan,
    .brand-copy-sub {
        font-size: 10px;
        white-space: normal;
    }
}


/* Final corrected header */

.brand-copy{
display:flex;
flex-direction:column;
justify-content:center;
margin-left:18px;
line-height:1.15;
}

.brand-copy-title{
font-size:34px;
font-weight:800;
color:#123d7a;
}

.brand-copy-slogan{
font-size:14px;
font-weight:700;
color:#c59a35;
margin-top:6px;
letter-spacing:1px;
}

.brand-copy-sub{
font-size:13px;
color:#555;
margin-top:4px;
}

.logo img,
.brand img,
header img{
max-height:150px !important;
width:auto !important;
}

@media(max-width:768px){
.logo img,
.brand img,
header img{
max-height:95px !important;
}

.brand-copy-title{
font-size:21px;
}

.brand-copy-slogan,
.brand-copy-sub{
font-size:10px;
}
}


/* Student-facing English pages: blue hero with soft photo background */
.student-photo-hero {
    position: relative;
    overflow: hidden;
    background-color: #123d7a !important;
    color: #ffffff !important;
    min-height: 340px;
    display: flex;
    align-items: center;
}

.student-photo-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.22;
    filter: saturate(1.05) contrast(1.05);
    z-index: 0;
}

.student-photo-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18,61,122,0.92), rgba(18,61,122,0.72), rgba(18,61,122,0.55));
    z-index: 1;
}

.student-photo-hero > div {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.student-photo-hero .eyebrow,
.student-photo-hero h1,
.student-photo-hero .lead {
    color: #ffffff !important;
}

.student-photo-hero .eyebrow {
    color: #f1c66a !important;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.services-hero::before {
    background-image: url("assets/study-life.png");
}

.network-hero::before {
    background-image: url("assets/korean-life.png");
}

.pathway-hero::before {
    background-image: url("assets/work-scene.png");
}

@media (max-width: 768px) {
    .student-photo-hero {
        min-height: 300px;
    }
    .student-photo-hero::after {
        background: rgba(18,61,122,0.82);
    }
}

/* Unified navy hero background height: all non-home page hero sections */
.page-hero,
.page-hero.compact,
.student-photo-hero {
    min-height: 520px !important;
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}

@media (max-width: 768px) {
    .page-hero,
    .page-hero.compact,
    .student-photo-hero {
        min-height: 430px !important;
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }
}

/* EXACT 0.7x: ONLY main H1 text inside navy hero sections, not logo/menu/body/outside text */
.page-hero h1,
.student-photo-hero h1 {
    font-size: clamp(29.4px, 4.2vw, 57.4px) !important;
}


/* FIX: Pathway hero image must appear only once.
   The actual photo is applied only through .pathway-hero::before. */
.pathway-hero {
    background-image: none !important;
    background-color: #123d7a !important;
}

.pathway-hero::before {
    background-image: url("assets/work-scene.png") !important;
    background-size: cover !important;
    background-position: center !important;
}


/* FIX: prevent awkward word-by-word / letter-breaking line wraps only inside hero text */
.page-hero h1,
.page-hero h2,
.page-hero p,
.hero h1,
.hero h2,
.hero p,
.hero-title,
.hero-subtitle {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    line-break: strict !important;
}

.page-hero .hero-content,
.hero .hero-content,
.page-hero .hero-copy,
.hero .hero-copy {
    max-width: 980px !important;
}


/* Mobile full-width protection */
@media (max-width: 768px) {
    .page-hero .hero-content,
    .hero .hero-content,
    .page-hero .hero-copy,
    .hero .hero-copy {
        max-width: 100% !important;
    }
}


/* Keep the home page hero from being affected if it uses .home-hero */
.home-hero .container,
.home-hero .section-inner,
.home-hero .hero-inner,
.home-hero .hero-content,
.home-hero .hero-copy {
    width: auto !important;
    max-width: inherit !important;
}

/* Mobile: use full available width to prevent worse wrapping */
@media (max-width: 768px) {
    .page-hero .container,
    .page-hero .section-inner,
    .page-hero .hero-inner,
    .page-hero .hero-content,
    .page-hero .hero-copy,
    .page-hero .content,
    section[class*="hero"] .container,
    section[class*="hero"] .section-inner,
    section[class*="hero"] .hero-inner,
    section[class*="hero"] .hero-content,
    section[class*="hero"] .hero-copy {
        width: 100% !important;
        max-width: 100% !important;
    }
}





/* Force network hero title into exactly two lines */
.network-hero h1{
    max-width: 900px !important;
    line-height: 1.15 !important;
}

.network-hero h1 br{
    display:block !important;
}





/* Increase ONLY top navigation menu text by 15% */
header nav a,
.nav-links a,
.nav-menu a{
    font-size: 115% !important;
}


/* Universities hero title spacing */
.universities-hero h1{
    line-height: 1.35 !important;
}


/* ABOUT PAGE ONLY - bilingual section */
.about-bilingual{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    margin-top:28px;
}

.about-bilingual h3{
    color:#f0c24b;
    font-size:1.45rem;
    margin-bottom:18px;
}

.about-bilingual p{
    line-height:1.9;
}

@media (max-width:768px){
    .about-bilingual{
        grid-template-columns:1fr;
        gap:32px;
    }
}


/* ABOUT white section bilingual layout */
.about-bilingual-section{
    background:#ffffff;
    padding:90px 0;
}

.about-bilingual{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
}

.about-bilingual h3{
    color:#0f2d67;
    font-size:1.7rem;
    margin-bottom:24px;
}

.about-bilingual p{
    color:#333;
    line-height:1.95;
    font-size:1.04rem;
}

@media (max-width:768px){
    .about-bilingual{
        grid-template-columns:1fr;
        gap:36px;
    }
}


/* ABOUT identity merged section */
.about-identity{
    background:#fff;
    padding:96px 0;
}

.identity-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:72px;
    align-items:start;
}

.identity-main .eyebrow{
    color:#b88a1d;
    font-weight:900;
    letter-spacing:.14em;
    margin-bottom:18px;
}

.identity-main h2{
    color:#0f2d67;
    font-size:clamp(32px,4vw,54px);
    line-height:1.22;
    margin:0 0 30px;
}

.identity-main p{
    color:#333;
    font-size:1.08rem;
    line-height:1.95;
    margin:0 0 20px;
}

.identity-side{
    display:grid;
    gap:18px;
}

.identity-card{
    background:#f7f9fc;
    border:1px solid rgba(15,45,103,.10);
    border-radius:22px;
    padding:26px 28px;
    box-shadow:0 12px 28px rgba(15,45,103,.07);
}

.identity-card span{
    display:inline-block;
    color:#c79a2b;
    font-weight:900;
    font-size:.9rem;
    margin-bottom:8px;
}

.identity-card h3{
    color:#0f2d67;
    font-size:1.35rem;
    margin:0 0 10px;
}

.identity-card p{
    color:#444;
    line-height:1.75;
    margin:0;
}

@media (max-width:768px){
    .identity-grid{
        grid-template-columns:1fr;
        gap:36px;
    }
    .about-identity{
        padding:64px 0;
    }
}


/* ===== FINAL MOBILE SAFE FIX ===== */

/* PC/tablet only */
@media (min-width: 769px) {
  .page-hero > div,
  .page-hero .container,
  .page-hero .hero-content,
  .page-hero .hero-copy {
    max-width: 70vw !important;
    width: 70vw !important;
    box-sizing: border-box !important;
  }

  .students-hero h1 {
    white-space: nowrap !important;
  }

  .network-hero h1 {
    max-width: 1100px !important;
    width: 100% !important;
  }
}

/* Mobile: prevent hero text clipping */
@media (max-width: 768px) {
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .page-hero,
  .home-hero,
  section[class*="hero"] {
    height: auto !important;
    min-height: 360px !important;
    padding: 96px 18px 52px !important;
    box-sizing: border-box !important;
  }

  .page-hero > div,
  .page-hero .container,
  .page-hero .hero-content,
  .page-hero .hero-copy,
  .home-hero > div,
  .home-hero .container,
  section[class*="hero"] > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .page-hero h1,
  .home-hero h1,
  section[class*="hero"] h1 {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    max-width: 100% !important;
    width: 100% !important;
    font-size: clamp(28px, 8.2vw, 38px) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
  }

  .page-hero .lead,
  .home-hero .lead,
  section[class*="hero"] .lead,
  .page-hero p,
  .home-hero p {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  .network-hero h1 br,
  .students-hero h1 br {
    display: none !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}


/* FINAL FIX: restore visible mobile hamburger menu */
@media (max-width: 768px) {
  .site-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    min-height: 70px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 9999 !important;
    background: #fff !important;
  }

  .brand {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 54px) !important;
    overflow: hidden !important;
  }

  .brand img {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 42px !important;
    max-width: 52px !important;
  }

  .brand-copy {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    line-height: 1.05 !important;
  }

  .brand-copy-title {
    display: block !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #071a4d !important;
  }

  .brand-copy-slogan {
    display: block !important;
    font-size: 0.46rem !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #b88a1d !important;
    margin-top: 2px !important;
  }

  .brand-copy-sub {
    display: none !important;
  }

  .menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    margin-left: 4px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #071a4d !important;
    color: #fff !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 10001 !important;
  }

  .site-header .nav,
  header .nav,
  .nav {
    display: none !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 70px !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #fff !important;
    padding: 16px 22px !important;
    border-top: 1px solid rgba(7,26,77,.08) !important;
    border-bottom: 1px solid rgba(7,26,77,.12) !important;
    box-shadow: 0 16px 28px rgba(7,26,77,.14) !important;
    box-sizing: border-box !important;
    z-index: 10000 !important;
  }

  .site-header .nav.open,
  header .nav.open,
  .nav.open {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .site-header .nav a,
  header .nav a,
  .nav a {
    display: block !important;
    color: #071a4d !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    padding: 3px 0 !important;
    text-decoration: none !important;
    white-space: normal !important;
  }
}
