:root{
  --brand:#2f3a3d;
  --brand-dark:#1f2729;
  --bg:#ffffff;
  --ink:#111315;
  --muted:#556066;
  --accent:#f2f4f5;
  --success:#2e7d32;
  --danger:#c62828;

  --radius:12px;
  --shadow:0 10px 28px rgba(0,0,0,.08);
  --container:1100px;

  --fs-base:16px;
  --fs-sm:0.9375rem;
  --fs-md:1.125rem;
  --fs-lg:1.5rem;
  --fs-xl:2rem;
  --fs-xxl:2.75rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-size:var(--fs-base);
}

h1,h2,h3{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1{font-size:var(--fs-xxl); margin:.2em 0 .4em; font-weight:700;}
h2{font-size:var(--fs-xl);  margin:1.2em 0 .4em; font-weight:700;}
h3{font-size:var(--fs-lg);  margin:1em 0 .3em;  font-weight:600;}

p{margin:.6em 0}
a{color:var(--brand); text-decoration:underline transparent; transition:all .2s ease}
a:hover{ text-decoration:underline }

.muted{color:var(--muted)}
.container{max-width:var(--container); margin-inline:auto; padding-inline:1rem}
.narrow{max-width:760px}
.section{padding:3rem 0}

.skip-link{
  position:absolute; left:-9999px; top:auto;
}
.skip-link:focus{
  left:1rem; top:1rem; background:#fff; padding:.5rem 1rem; border-radius:8px; box-shadow:var(--shadow);
}

.site-header{
  position:sticky; top:0; background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(6px);
  border-bottom:1px solid #eee;
  z-index:10;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px}
.brand{font-weight:700; text-decoration:none; color:var(--ink)}
.nav-toggle{
  appearance:none; border:0; background:transparent; font-size:1.5rem; line-height:1; cursor:pointer;
}
.site-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:.75rem; align-items:center}
.site-nav a{display:block; padding:.5rem .75rem; border-radius:8px; text-decoration:none}
.site-nav a:hover{background:rgba(122,162,169,.12)}

.hero-title{
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.1;
  font-size: clamp(1.6rem, 3.6vw + 0.7rem, 2.4rem);
  max-width: 24ch;
  margin: 0.25rem 0 0.5rem;
  text-wrap: balance;
}

.hero-subtitle{
  max-width: 52ch;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}



.hero-visual{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  min-height:240px;
}

.hero-visual .hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero-visual{ aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden }
.hero-img{ width:100%; height:100%; object-fit:cover; display:block }

.hero-visual{ position:relative; }
.hero-visual::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(45deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
  pointer-events:none;
}

@media (max-width: 860px){
  .site-nav{position:absolute; inset:64px 0 auto 0; background:#fff; border-bottom:1px solid #eee; display:none}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column; align-items:flex-start; padding:1rem}
}

@media (min-width: 861px){
  .nav-toggle{ display:none; }
}

.hero{
  padding:4rem 0;
  background: linear-gradient(180deg, #ffffff 0%, #f6f7f8 100%);
}
.hero-inner{display:grid; gap:2rem; align-items:center}
.hero-copy p{max-width:46ch}
.hero-cta{display:flex; gap:.75rem; margin-top:1rem}
.hero-visual{min-height:220px; border-radius:var(--radius); background:linear-gradient(0deg, rgba(122,162,169,.2), rgba(246,210,214,.35));}

@media (min-width: 768px){
  .hero-inner{grid-template-columns:1.2fr .8fr}
}

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.hero--stacked .hero-inner.hero-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1rem;
}

.hero-logo img{
  max-width:min(520px, 90vw);
  height:auto;
  display:block;
}

.hero-photo{
  width:min(760px, 92vw);
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}

.hero-photo img{
  width:100%;
  height:auto;
  display:block;
}

.hero-lead{
  max-width: 70ch;
  font-size: var(--fs-md);
  margin: 0.25rem 0 0;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
  margin-top:.5rem;
}

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:10px;
  border:1px solid #ccd7da;
  background:#fff;
  text-decoration:none;
}

.icon-btn svg{
  width:22px;
  height:22px;
  fill: currentColor;
  color: var(--ink);
}

.icon-btn:hover{
  transform:translateY(-1px);
  border-color: var(--brand);
}

.btn{
  display:inline-block; text-decoration:none; padding:.65rem 1rem; border-radius:10px;
  border:1px solid var(--brand); background:#fff; color:var(--brand); font-weight:600; transition:.2s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:var(--brand); color:#fff; border-color:var(--brand);
}
.btn-primary:hover{background:var(--brand-dark); border-color:var(--brand-dark)}
.btn-ghost{background:transparent; border-color:#cfd6d9; color:var(--ink)}

.btn:focus-visible,
.site-nav a:focus-visible,
.nav-toggle:focus-visible{
  outline: 3px solid rgba(122,162,169,.35);
  outline-offset: 2px;
  border-radius: 10px;
}

#submitBtn .btn-loading { display:none; }
#submitBtn.is-loading .btn-label { display:none; }
#submitBtn.is-loading .btn-loading { display:inline; }
#submitBtn.is-loading { opacity:.9; cursor:progress; }

.grid{display:grid; gap:1rem}
.grid-2{display:grid; gap:1rem}
@media (min-width: 700px){ .grid-2{grid-template-columns:1fr 1fr} }

.cards{grid-template-columns:1fr}
@media (min-width: 760px){ .cards{grid-template-columns:repeat(3, 1fr)} }

.card{
  background:#fff; 
  border:1px solid #eef2f3;
  border-radius:var(--radius);
  padding:1rem; 
  box-shadow:var(--shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}

.card-actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem}

.card-media{
  display:block;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  margin-bottom:.75rem;
  aspect-ratio: 4/3;
}

.card-img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

.cards{
  display:grid; gap:1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px){
  .cards{ grid-template-columns: repeat(3, 1fr); }
}

.card{
  display:flex;
  flex-direction:column;
}
.card-actions{
  margin-top:auto;
  display:flex; gap:.5rem; flex-wrap:wrap;
}

.card:hover{
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
  transform: translateY(-1px);
  transition: box-shadow .2s ease, transform .2s ease;
}

.prose ul{padding-left:1.1rem}

.field{margin-bottom:1rem}
.field label{display:block; font-weight:600; margin-bottom:.35rem}
.field input, .field textarea, .field select{
  width:100%; padding:.7rem .8rem; border:1px solid #ccd7da; border-radius:10px; font:inherit; background:#fff;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:3px solid rgba(122,162,169,.25); border-color:var(--brand);
}
.field .help{display:block; color:var(--muted); font-size:.9rem; margin-top:.25rem}
.field.checkbox{
    display:flex;
    align-items:flex-start;
    gap:.6rem;
  }
.field.checkbox input{
    width:auto;
    margin-top:.25rem;
}

.field.checkbox label{
    font-weight:500;
    margin:0;
}

.field.hp{position:absolute; left:-9999px; opacity:0}

.actions{display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
.status{min-height:1.2em}
.status.ok{color:var(--success)}
.status.err{color:var(--danger)}

.site-footer{border-top:1px solid #eee; padding:2rem 0; margin-top:2rem}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}

.breadcrumb a{text-decoration:none}
.section-head{margin-bottom:1rem}

h1{
  font-size: clamp(1.75rem, 2.4vw + 1rem, var(--fs-xxl));
}
h2{
  font-size: clamp(1.25rem, 1.4vw + 0.9rem, var(--fs-xl));
}
h3{
  font-size: clamp(1.125rem, 1vw + 0.8rem, var(--fs-lg));
}

.prose, .course-head, .breadcrumb, .cta-row {
  overflow-wrap: anywhere;
  word-break: normal;
}

.course-head{
  margin-bottom: 1rem;
}
.course-head .muted{
  font-size: var(--fs-sm);
  margin-top: .25rem;
}

.cta-row{
  display:flex;
  gap:.75rem;
  flex-wrap: wrap;
  align-items:center;
}
.cta-row .btn{ min-width: 11rem; }

details{
  border:1px solid #eef2f3;
  border-radius: var(--radius);
  padding:.6rem .8rem;
  margin:.6rem 0;
  background:#fff;
}
summary{
  cursor:pointer;
  font-weight:600;
  list-style:none;
}
summary::-webkit-details-marker{ display:none; }
details[open]{
  box-shadow: var(--shadow);
}
details > p{
  margin:.5rem 0 0;
}

.breadcrumb{
  font-size: .95rem; 
  margin:.25rem 0 1rem;
}
.breadcrumb a{
  text-decoration:none;
}
.breadcrumb a:hover{
  text-decoration:underline;
}

@media (max-width: 420px){
  .container{ padding-inline: .75rem; }
  .cta-row .btn{ flex:1 1 auto; }
}

@media (min-width: 1100px){
  .narrow{ max-width: 820px; }
}

.prose ul li{ margin:.35em 0; }

.prose h2{ margin-top:1.25em; margin-bottom:.4em; }
.prose h3{ margin-top:1.1em;  margin-bottom:.35em; }

.narrow {
  margin-inline: auto;
  padding-inline: 1rem;
  max-width: 760px;
}

.course-wrap{
  max-width: 760px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.course-head,
.prose,
.cta-row,
.breadcrumb{
  max-width: 760px;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition: none !important; }
}

.consent a{
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.consent a:hover{
  color: var(--brand);
}

.consent a:focus-visible{
  outline: 3px solid rgba(0,0,0,.18);
  outline-offset: 2px;
  border-radius: 6px;
}

.team{
  display:grid;
  gap:1rem;
}

.team-member{
  display:grid;
  gap:1rem;
  align-items:center;
  background:#fff;
  border:1px solid #eef2f3;
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:var(--shadow);
}

.team-name{
  margin:0 0 .2rem;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem);
}

.team-role{
  margin:.1rem 0 .6rem;
  font-weight:600;
}

.team-bio{
  margin:0;
}

.team-photo{
  border-radius: calc(var(--radius) - 4px);
  overflow:hidden;
  aspect-ratio: 1 / 1;
  background: var(--accent);
}

.team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (min-width: 860px){
  .team-member{
    grid-template-columns: 1.2fr .8fr;
  }
}

.contact-grid{
  display:grid;
  gap:1rem;
}

.contact-card{
  background:#fff;
  border:1px solid #eef2f3;
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:var(--shadow);
}

@media (min-width: 860px){
  .contact-grid{
    grid-template-columns: repeat(2, 2fr);
  }
}

#courseForWho, #courseCertificate { white-space: pre-line; }