/* ETC V9.2 Professional Typography & Layout Refinement */
:root{
  --etc-heading:#12315f;
  --etc-blue:#1267d6;
  --etc-text:#536b8b;
}

html{scroll-behavior:smooth;}
body{
  font-family: "Inter","Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--etc-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{
  color:var(--etc-heading);
  letter-spacing:-0.025em;
  line-height:1.15;
  margin-top:0;
}

h1{font-size:clamp(42px,5vw,68px);}
h2{font-size:clamp(34px,4vw,48px);}
h3{font-size:clamp(22px,2.2vw,28px);}
h4{font-size:20px;}

p{
  font-size:16px;
  line-height:1.7;
}

nav, header{
  font-size:14px;
}

button,a{
  font-family:inherit;
}

section{
  scroll-margin-top:90px;
}

/* Cards */
.card, .course-card, .program-card, .special-card, article{
  border-radius:18px;
}

.card h3, .course-card h3, .program-card h3, .special-card h3, article h3{
  font-size:24px;
  line-height:1.25;
  margin-bottom:12px;
}

.card h4, .course-card h4, .program-card h4, .special-card h4{
  font-size:17px;
  line-height:1.35;
}

.card p, .course-card p, .program-card p, .special-card p, article p{
  font-size:15px;
  line-height:1.7;
}

.card, .course-card, .program-card, .special-card{
  padding:28px;
}

/* Small category labels */
.eyebrow, .label, .kicker, .badge, .program-label{
  font-size:11px;
  line-height:1.3;
  letter-spacing:.16em;
  font-weight:800;
}

/* Program detail rows */
.program-card strong, .special-card strong{
  font-size:13px;
}

/* Buttons */
.btn, button, .button{
  font-size:14px;
  font-weight:700;
  line-height:1.2;
}

/* Avoid oversized titles inside cards */
.program-card .title,
.special-card .title{
  font-size:24px;
  line-height:1.25;
}

/* Mobile typography */
@media (max-width: 768px){
  body{font-size:15px;}
  h1{font-size:42px;}
  h2{font-size:34px;}
  h3{font-size:23px;}
  p{font-size:15px;}
  .card, .course-card, .program-card, .special-card{
    padding:22px;
  }
}


/* ETC V9.3 — Layout & Typography Refinement */
:root{
  --etc-navy:#12315f;
  --etc-blue:#1267d6;
  --etc-text:#536b8b;
  --etc-border:#d9e2ef;
  --etc-bg:#f6f9fd;
}

/* Global rhythm */
body{
  font-family:"Inter","Segoe UI",Arial,sans-serif;
  color:var(--etc-text);
  font-size:16px;
  line-height:1.7;
}
h1,h2,h3,h4,h5,h6{
  color:var(--etc-navy);
  font-weight:750;
  letter-spacing:-.028em;
  line-height:1.16;
}
h1{font-size:clamp(42px,5vw,66px);}
h2{font-size:clamp(34px,4vw,48px);}
h3{font-size:24px;}
h4{font-size:18px;}
p{font-size:16px;line-height:1.7;}

/* Consistent section spacing */
section{
  padding-top:72px;
  padding-bottom:72px;
}

/* Cards: professional proportions */
.card,.course-card,.program-card,.special-card,article{
  border:1px solid var(--etc-border);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(18,49,95,.04);
}
.card h3,.course-card h3,.program-card h3,.special-card h3{
  font-size:24px;
  line-height:1.28;
  margin-bottom:12px;
}
.card p,.course-card p,.program-card p,.special-card p{
  font-size:15px;
  line-height:1.72;
}
.card,.course-card,.program-card,.special-card{
  padding:28px;
}

/* Small labels */
.eyebrow,.label,.kicker,.badge{
  font-size:11px;
  letter-spacing:.15em;
  font-weight:800;
  line-height:1.3;
}

/* Detail text and metadata */
.meta,.details,.program-details{
  font-size:14px;
  line-height:1.55;
}

/* Buttons */
button,.btn,.button{
  font-size:14px;
  font-weight:700;
  letter-spacing:0;
  border-radius:9px;
}

/* Navigation */
header nav,nav{
  font-size:14px;
}
header nav a,nav a{
  font-weight:650;
}

/* Special-program cards: prevent oversized titles */
.special-card h2,.special-card .title,.program-card h2,.program-card .title{
  font-size:25px;
  line-height:1.25;
}

/* Improve long text columns */
.content,.section-copy{
  max-width:760px;
}

/* Responsive refinement */
@media (max-width:900px){
  section{padding-top:56px;padding-bottom:56px;}
  h1{font-size:46px;}
  h2{font-size:36px;}
}
@media (max-width:640px){
  body{font-size:15px;}
  section{padding-top:44px;padding-bottom:44px;}
  h1{font-size:38px;}
  h2{font-size:32px;}
  h3,.card h3,.course-card h3,.program-card h3,.special-card h3{font-size:22px;}
  p,.card p,.course-card p,.program-card p,.special-card p{font-size:15px;}
  .card,.course-card,.program-card,.special-card{padding:22px;}
}



/* =========================================================
   ETC V10 — Professional Typography & Layout Polish
   Final override layer
   ========================================================= */

:root{
  --etc-navy:#12315f;
  --etc-blue:#1267d6;
  --etc-text:#536b8b;
  --etc-border:#d9e2ef;
  --etc-soft:#f6f9fd;
}

/* Global type system */
body{
  font-family:"Inter","Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--etc-text);
}

h1,h2,h3,h4,h5,h6{
  font-family:"Inter","Segoe UI",Arial,sans-serif;
  color:var(--etc-navy);
  font-weight:800;
  letter-spacing:-.028em;
  line-height:1.14;
}

/* Header: clean proportions without squeezing the navigation */
header .nav{
  min-height:76px;
}
header .logo{
  min-width:190px;
  flex:0 0 190px;
  gap:12px;
}
header .logo img{
  width:58px !important;
  height:58px !important;
}
header .brand-text strong{
  font-size:18px;
  font-weight:900;
  letter-spacing:-.35px;
}
header .brand-text span{
  font-size:9px;
  letter-spacing:1.45px;
}
header .nav nav{
  gap:16px;
  font-size:13px;
}
header .nav nav a{
  font-weight:750;
}

/* Hero: stronger hierarchy, more breathing room */
.hero{
  padding:82px 0 76px;
}
.hero-grid{
  grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);
  gap:62px;
}
.hero label,
section label{
  font-size:10.5px;
  letter-spacing:1.9px;
}
.hero h1{
  font-size:clamp(48px,5.25vw,68px);
  line-height:1.015;
  letter-spacing:-3px;
  margin:16px 0 20px;
  max-width:720px;
}
.hero p{
  font-size:17px;
  line-height:1.72;
  max-width:700px;
}
.actions{
  margin:28px 0 30px;
}
.btn{
  font-size:14px;
  line-height:1.2;
  padding:13px 20px;
}

/* Hero information card — fix low-contrast heading */
.hero-card{
  padding:38px;
  border-radius:22px;
  min-height:420px;
}
.hero-card small{
  font-size:11px;
  letter-spacing:1.8px;
}
.hero-card h2{
  color:#fff !important;
  font-size:32px !important;
  line-height:1.13 !important;
  letter-spacing:-.7px;
  margin:42px 0 0 !important;
}
.hero-card p,
.hero-card span{
  color:#cbd8e8;
  font-size:13px;
  line-height:1.6;
}
.hero-card hr{
  margin:26px 0;
  border-top-color:rgba(255,255,255,.14);
}

/* General sections */
.section{
  padding:78px 0;
}
.section-heading{
  margin-bottom:34px;
}
.section h2{
  font-size:clamp(34px,3.6vw,46px);
  line-height:1.12;
  letter-spacing:-1.5px;
}

/* Course cards */
.coursegrid{
  gap:18px;
}
.course{
  padding:27px;
  min-height:250px;
  border-radius:17px;
}
.course small{
  font-size:10px;
  letter-spacing:1.5px;
}
.course h3{
  font-size:21px;
  line-height:1.25;
  margin:11px 0 8px;
}
.course>p{
  font-size:14px;
  line-height:1.7;
}
.course>b{
  font-size:12.5px;
}
.details-btn{
  font-size:13px;
}

/* About cards */
.about-grid{
  gap:18px;
  margin-top:44px;
}
.about-card{
  padding:27px;
}
.about-card h3{
  font-size:21px;
  line-height:1.25;
}
.about-card.large h3{
  font-size:27px;
}
.about-card p{
  font-size:14px;
  line-height:1.7;
}

/* Programs / special programs */
.special-grid{
  gap:22px;
}
.special-card{
  padding:31px;
}
.special-card h3{
  font-size:26px;
  line-height:1.18;
}
.special-card>p{
  font-size:14px;
  line-height:1.7;
}
.special-details span{
  font-size:13px;
}
.special-details b{
  font-size:11px;
}

/* Schedule */
.schedule-banner,
.time-grid{
  gap:16px;
}
.schedule-banner>div,
.time-grid article{
  padding:23px;
}
.time-grid h3{
  font-size:21px;
}

/* Custom training */
.custom-grid{
  gap:20px;
}
.custom-card{
  padding:29px;
}
.custom-card h3{
  font-size:21px;
}
.custom-card p{
  font-size:14px;
  line-height:1.7;
}

/* Modals */
.modal-box{
  padding:38px;
}
.modal-box h2{
  font-size:34px;
}
.modal-box p,
.modal-box li{
  font-size:14px;
  line-height:1.7;
}

/* Forms */
form{
  padding:30px;
}
form label{
  font-size:13px;
  font-weight:700;
}
input,select,textarea{
  font-size:15px;
}

/* Footer */
.foot a{
  font-size:14px;
}

/* Tablet */
@media(max-width:1000px){
  header .logo{
    min-width:165px;
    flex-basis:165px;
  }
  header .logo img{
    width:54px !important;
    height:54px !important;
  }
  header .brand-text strong{
    font-size:16px;
  }
  header .nav nav{
    gap:10px;
    font-size:12px;
  }
  .hero-grid{
    grid-template-columns:1fr 1fr;
    gap:35px;
  }
  .hero h1{
    font-size:clamp(44px,5.5vw,60px);
  }
}

/* Mobile */
@media(max-width:760px){
  header .nav{
    min-height:68px;
  }
  header .logo{
    min-width:0;
    flex-basis:auto;
  }
  header .logo img{
    width:52px !important;
    height:52px !important;
  }
  header .brand-text strong{
    font-size:16px;
  }
  .hero{
    padding:58px 0 55px;
  }
  .hero h1{
    font-size:clamp(42px,10vw,56px);
    letter-spacing:-2.2px;
    line-height:1.02;
  }
  .hero p{
    font-size:16px;
  }
  .hero-card{
    min-height:0;
    padding:30px;
  }
  .hero-card h2{
    font-size:29px !important;
    margin-top:32px !important;
  }
  .section{
    padding:58px 0;
  }
}

/* Small phones */
@media(max-width:560px){
  .hero h1{
    font-size:42px;
  }
  .section h2{
    font-size:32px;
  }
  .course h3,
  .special-card h3{
    font-size:22px;
  }
  .course,
  .special-card{
    padding:23px;
  }
}


/* =========================================================
   ETC V11 — Functional & Responsive Polish
   ========================================================= */

/* Mobile navigation */
@media(max-width:850px){
  header .nav{
    position:relative;
  }
  header .nav nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:#fff;
    border:1px solid #e4eaf2;
    border-top:0;
    border-radius:0 0 14px 14px;
    padding:14px;
    flex-direction:column;
    align-items:stretch;
    gap:3px;
    box-shadow:0 16px 35px rgba(16,42,86,.12);
  }
  header.mobile-open .nav nav{
    display:flex;
  }
  header .nav nav a{
    display:block;
    padding:11px 12px;
    border-radius:8px;
  }
  header .nav nav a:hover{
    background:#f3f7fc;
  }
  header .nav .navbtn{
    text-align:center;
  }
  .mobile-menu-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border:1px solid #d8e1ed;
    border-radius:9px;
    background:#fff;
    color:#102a56;
    font-size:22px;
    cursor:pointer;
    margin-left:10px;
  }
}

/* Accessible focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:3px solid rgba(13,99,206,.28);
  outline-offset:2px;
}

/* FAQ */
.faq{
  max-width:900px;
  margin:0 auto;
}
.faq details{
  background:#fff;
  border:1px solid #dfe6ef;
  border-radius:12px;
  margin:10px 0;
  overflow:hidden;
}
.faq summary{
  cursor:pointer;
  list-style:none;
  padding:18px 21px;
  font-weight:800;
  color:#102a56;
  position:relative;
  padding-right:50px;
}
.faq summary::-webkit-details-marker{
  display:none;
}
.faq summary::after{
  content:"+";
  position:absolute;
  right:20px;
  top:13px;
  font-size:24px;
  font-weight:500;
  color:#0d63ce;
}
.faq details[open] summary::after{
  content:"−";
}
.faq details p{
  margin:0;
  padding:0 21px 20px;
  color:#687386;
  font-size:14px;
  line-height:1.7;
}

/* Registration form feedback */
.form-note{
  margin-top:12px;
  padding:12px 14px;
  border-radius:9px;
  background:#eef7ee;
  color:#275d31;
  font-size:13px;
  display:none;
}
.form-note.show{
  display:block;
}

/* Better long course/program names in selects */
select{
  line-height:1.35;
}

/* Prevent action buttons from becoming cramped */
.course-actions{
  gap:9px;
  flex-wrap:wrap;
}
.course-actions .btn{
  flex:1 1 120px;
}


/* V12 — Final content polish */
.program-title,
.course h3,
.special-card h3{
  overflow-wrap:anywhere;
}

@media(max-width:760px){
  .hero-grid,
  .about-grid,
  .special-grid,
  .coursegrid{
    grid-template-columns:1fr !important;
  }
  .hero-card{
    width:100%;
  }
}


/* V13 — Final launch polish */
.location-card p{
  line-height:1.7;
}
@media(max-width:760px){
  .hero-card,
  .course,
  .special-card,
  .about-card{
    box-sizing:border-box;
  }
}