/* ==========================================================================
   Certificate Course on Mediation
   Dharmashastra National Law University, Jabalpur & MP State Legal Services Authority
   Shared stylesheet. Lato throughout, body copy in black.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typefaces, served from this site rather than from Google, so the pages do
   not depend on an outside request and render identically offline.
   Lora carries the display headings, Lato the running text and the interface.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Lato';src:url('assets/fonts/lato-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('assets/fonts/lato-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Lato';src:url('assets/fonts/lato-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('assets/fonts/lato-latin-900-normal.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('assets/fonts/lora-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('assets/fonts/lora-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Lora';src:url('assets/fonts/lora-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('assets/fonts/lora-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans Devanagari';src:url('assets/fonts/noto-sans-devanagari-devanagari-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans Devanagari';src:url('assets/fonts/noto-sans-devanagari-devanagari-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Serif Devanagari';src:url('assets/fonts/noto-serif-devanagari-devanagari-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Serif Devanagari';src:url('assets/fonts/noto-serif-devanagari-devanagari-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root {
  --navy: #10233c;
  --navy-deep: #0b1a2e;
  --gold: #b0812f;
  --gold-dark: #8f6a24;
  --ink: #000000;
  --ink-soft: #2b2b2b;
  --muted: #4a4a4a;
  --cream: #faf6ee;
  --sand: #f4f1ea;
  --line: #e3ddd1;
  --line-soft: #efece4;
  --white: #ffffff;
  --font: 'Lato', 'Noto Sans Devanagari', 'Segoe UI', Tahoma, Arial, sans-serif;
  --display: 'Lora', 'Noto Serif Devanagari', Georgia, 'Times New Roman', serif;
  --display-weight: 700;
  --wrap: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  line-height: 1.26;
  color: var(--ink);
  letter-spacing: 0;
  text-wrap: pretty;
}

p { color: var(--ink); }

a { color: var(--gold-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

img { display: block; max-width: 100%; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.section { padding: clamp(48px, 6vw, 84px) 0; }
.section-cream { background: var(--cream); }
.section-sand { background: var(--sand); }
.section-navy { background: var(--navy); }
.section-navy, .section-navy h2, .section-navy h3, .section-navy p { color: #ffffff; }

.kicker {
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold);
}
.section-navy .kicker { color: #d9b976; }

.section-head { max-width: 820px; }
.section-head h2 { font-size: clamp(25px, 3vw, 34px); margin-top: 12px; }
.section-head .lead { font-size: 17.5px; color: var(--ink-soft); margin-top: 14px; }

.rule { width: 62px; height: 3px; background: var(--gold); margin: 18px 0 0; border: 0; }

/* -------------------------------------------------- utility bar */
.utility {
  background: var(--navy-deep);
  color: #e8ecf3;
  font-size: 13.5px;
}
.utility a { color: #e8ecf3; }
.utility .wrap {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  align-items: center; justify-content: space-between;
  padding-top: 9px; padding-bottom: 9px;
}
.utility-left, .utility-right { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
.lang-switch {
  display: inline-flex; border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px; overflow: hidden; margin-left: 4px;
}
.lang-switch button {
  font-family: var(--font); background: transparent; color: #ffffff; border: 0;
  padding: 3px 13px; font-size: 12.5px; font-weight: 900; cursor: pointer;
}
.lang-switch button.is-active { background: var(--gold); }

/* -------------------------------------------------- brand row */
.brand { background: var(--white); border-bottom: 1px solid var(--line-soft); }
.brand .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding-top: 16px; padding-bottom: 16px;
}
.brand-unit { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand-unit img { height: 62px; width: auto; object-fit: contain; flex-shrink: 0; }
/* Both institution names sit on a single line at the same size, so the two
   crests stay level and the lock-up reads as one unit. */
.brand-name {
  font-family: var(--display);
  font-size: clamp(12.5px, 1.42vw, 16.5px); font-weight: 700;
  line-height: 1.28; color: var(--navy); white-space: nowrap;
}
.brand-city { font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.brand-join { text-align: center; flex-shrink: 0; }
.brand-join span {
  font-size: 11.5px; font-weight: 900; letter-spacing: 2.6px;
  text-transform: uppercase; color: var(--gold);
}
.brand-join .rule { margin: 8px auto 0; width: 74px; height: 2px; }
.brand-unit.is-right { text-align: right; justify-content: flex-end; }
.brand-unit.is-right .brand-text { order: -1; }

/* -------------------------------------------------- navigation */
.mainnav { background: var(--navy); }
.mainnav .wrap { display: flex; flex-wrap: wrap; padding: 0 24px; }
.mainnav a {
  font-weight: 900; font-size: 14.5px; letter-spacing: 0.4px;
  color: #ffffff; padding: 16px 18px; white-space: nowrap;
  border-bottom: 3px solid transparent; text-decoration: none;
}
.mainnav a:hover { background: rgba(255,255,255,0.08); text-decoration: none; }
.mainnav a.is-active { background: rgba(255,255,255,0.09); border-bottom-color: var(--gold); }

/* -------------------------------------------------- announcement */
.announce { background: var(--gold); color: #ffffff; }
.announce .wrap {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  align-items: center; justify-content: center;
  padding-top: 11px; padding-bottom: 11px;
  font-weight: 700; font-size: 15px; text-align: center;
}
.announce .btn-small {
  background: #ffffff; color: var(--navy); border-radius: 999px;
  padding: 5px 16px; font-weight: 900; font-size: 13.5px;
}
.announce .btn-small:hover { text-decoration: none; background: #fff8ec; }

/* -------------------------------------------------- buttons */
.btn {
  display: inline-block; font-family: var(--font); font-weight: 900;
  font-size: 15px; letter-spacing: 0.4px; padding: 14px 28px;
  border-radius: 4px; border: 0; cursor: pointer; text-align: center;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; border-color: #cfc7b6; }
.btn-gold { background: var(--gold); color: #ffffff; }
.btn-gold:hover { background: var(--gold-dark); }
.btn-navy { background: var(--navy); color: #ffffff; }
.btn-navy:hover { background: var(--navy-deep); }
.btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid #cfc7b6; }
.btn-ghost:hover { border-color: var(--navy); }
.btn-ghost-light { background: transparent; color: #ffffff; border: 1.5px solid rgba(255,255,255,0.6); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* -------------------------------------------------- hero
   The text sits in the left third on its own navy panel and the photograph
   fills the right two thirds uncovered, so nothing is read through the image
   and nothing of the image is lost behind the words. */
.hero {
  display: grid;
  grid-template-columns: 1fr 2fr;
  background: var(--navy-deep);
  align-items: stretch;
}
.hero-text {
  display: flex; align-items: center;
  padding: clamp(38px, 4.6vw, 68px) clamp(24px, 2.6vw, 46px);
}
.hero-inner { color: #ffffff; width: 100%; }
.hero-media { position: relative; min-height: clamp(340px, 44vw, 600px); overflow: hidden; }
.hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%;
}
/* A short blend at the seam only, so the panel and the photograph meet cleanly
   without washing over the picture. */
.hero-media::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(11,26,46,0.92) 0%, rgba(11,26,46,0.45) 5%, rgba(11,26,46,0) 13%);
}
.hero-eyebrow {
  display: inline-block; border: 1px solid rgba(255,255,255,0.45);
  border-radius: 999px; padding: 6px 16px; font-size: 11.5px; font-weight: 900;
  letter-spacing: 2px; text-transform: uppercase; color: #f0d9a8;
}
.hero h1 { color: #ffffff; font-size: clamp(28px, 2.9vw, 42px); margin-top: 18px; }
.hero .tagline {
  font-family: var(--display); font-size: clamp(17px, 1.5vw, 21px);
  font-style: italic; color: #f0d9a8; margin-top: 12px;
}
.hero .lead { color: #dfe5ee; font-size: clamp(15px, 1.12vw, 16.5px); margin-top: 16px; }
.hero .btn-row { margin-top: 24px; }
.hero .btn { padding: 13px 22px; font-size: 14.5px; }

/* -------------------------------------------------- fact strip */
.facts { background: var(--cream); border-bottom: 1px solid var(--line); }
.facts .wrap { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 24px; }
.fact { text-align: center; padding: 26px 12px; border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; }
.fact .num { font-family: var(--font); font-size: clamp(28px, 3.4vw, 40px); font-weight: 900; color: var(--navy); line-height: 1; }
.fact .lbl {
  font-size: 12px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted); margin-top: 9px;
}

/* -------------------------------------------------- generic grids and cards */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 26px;
}
.card h3 { font-size: 19px; }
.card p { font-size: 15.5px; color: var(--ink-soft); margin-top: 10px; }

.hour-card { border-top: 4px solid var(--gold); }
.hour-card .hrs { font-family: var(--font); font-size: 38px; font-weight: 900; color: var(--navy); line-height: 1; }
.hour-card .hrs-lbl {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--gold-dark); margin-top: 6px;
}
.hour-card h3 { margin-top: 16px; }

.why-card { border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; }

.stand {
  font-family: var(--display);
  font-size: clamp(18px, 2.1vw, 22px); font-weight: 600; color: var(--navy);
  border-left: 4px solid var(--gold); padding-left: 20px; margin: 26px 0;
}

.prose p + p { margin-top: 16px; }
.prose p { font-size: 16.5px; }

.figure { margin-top: 30px; }
.figure img { width: 100%; border-radius: 12px; object-fit: cover; }
.figure figcaption { font-size: 14px; color: var(--muted); margin-top: 12px; font-style: italic; }

/* -------------------------------------------------- key/value table */
.kv { width: 100%; border-collapse: collapse; margin-top: 22px; }
.kv th, .kv td { text-align: left; padding: 15px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.kv th {
  width: 34%; font-size: 12px; font-weight: 900; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold-dark);
}
.kv td { font-size: 16px; }
.kv td.num { text-align: right; width: 90px; font-weight: 900; color: var(--navy); }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pill {
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 18px; font-size: 14.5px; font-weight: 700; color: var(--navy);
}

/* -------------------------------------------------- curriculum */
.month { margin-top: 40px; }
.month-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.month-label {
  font-size: 12px; font-weight: 900; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--navy); background: var(--sand);
  padding: 6px 14px; border-radius: 4px;
}
.month-note { font-size: 12px; font-weight: 900; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); }
.module {
  display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line-soft);
}
.module .no {
  flex-shrink: 0; width: 62px; text-align: center;
}
.module .no strong { font-family: var(--font); display: block; font-size: 26px; font-weight: 900; color: var(--gold); line-height: 1; }
.module .no span {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted); margin-top: 5px; display: block;
}
.module h3 { font-size: 18.5px; }
.module p { font-size: 15.5px; color: var(--ink-soft); margin-top: 7px; }

/* -------------------------------------------------- assessment bars */
.bar-row { margin-top: 18px; }
.bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bar-top .k { font-size: 16px; font-weight: 700; }
.bar-top .v { font-size: 16px; font-weight: 900; color: var(--navy); }
.bar { height: 9px; background: var(--line-soft); border-radius: 999px; margin-top: 8px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--gold); border-radius: 999px; }

.steps-num { counter-reset: none; }
.cert-step { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.cert-step .n {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); color: #ffffff; font-weight: 900; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}

/* -------------------------------------------------- fees */
.fee-hero {
  background: var(--navy); color: #ffffff; border-radius: 12px;
  padding: 34px; border-top: 5px solid var(--gold);
}
.fee-hero .lbl { font-size: 12px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; color: #d9b976; }
.fee-hero .amt { font-family: var(--font); font-size: clamp(42px, 6vw, 64px); font-weight: 900; color: #ffffff; line-height: 1; margin-top: 12px; }
.fee-hero .sub { color: #dfe5ee; font-size: 16px; margin-top: 8px; }
.fee-hero .note { color: #c9d2e0; font-size: 14.5px; margin-top: 18px; }
.fee-table { width: 100%; border-collapse: collapse; }
.fee-table td { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.fee-table td:last-child { text-align: right; font-weight: 900; color: var(--navy); white-space: nowrap; }

.timeline { margin-top: 26px; border-left: 2px solid var(--line); padding-left: 26px; }
.tl-item { position: relative; padding-bottom: 26px; }
.tl-item::before {
  content: ""; position: absolute; left: -33px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--white);
}
.tl-when { font-size: 11.5px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold-dark); }
.tl-what { font-size: 19px; font-weight: 900; margin-top: 4px; }
.tl-desc { font-size: 15.5px; color: var(--ink-soft); margin-top: 5px; }

.note-line { font-size: 14.5px; color: var(--muted); font-style: italic; margin-top: 8px; }

/* -------------------------------------------------- people */
.person {
  display: flex; gap: 24px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 26px;
}
.person img { width: 170px; height: 190px; object-fit: cover; object-position: top; border-radius: 10px; flex-shrink: 0; }
.person.compact img { width: 104px; height: 118px; border-radius: 8px; }
.person h3 { font-size: 22px; }
.person.compact h3 { font-size: 19px; }
.person .role { font-size: 15.5px; color: var(--ink-soft); margin-top: 8px; }
.person .role-2 { font-size: 15px; color: var(--gold-dark); font-weight: 700; margin-top: 6px; }

.coord-card { background: var(--sand); border: 1px solid var(--line); border-radius: 12px; padding: 30px; }

/* -------------------------------------------------- forms */
.form-wrap { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: clamp(22px, 3vw, 34px); }
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 30px; }
.step-chip { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; border: 1px solid transparent; }
.step-chip.is-current { background: var(--white); border-color: var(--line); }
.step-chip .dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 12.5px; background: #e8e1d3; color: #6f6858;
}
.step-chip.is-current .dot { background: var(--navy); color: #ffffff; }
.step-chip.is-done .dot { background: var(--gold); color: #ffffff; }
.step-chip .stp { font-size: 10.5px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.step-chip .lbl { font-size: 16px; font-weight: 700; margin-top: 2px; }

.field { margin-top: 18px; }
.field label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font); font-size: 16px; color: var(--ink);
  padding: 12px 14px; border: 1px solid #cfc7b6; border-radius: 5px; background: var(--white);
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.field .hint { font-size: 13.5px; color: var(--muted); margin-top: 7px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.check { display: flex; gap: 11px; align-items: flex-start; margin-top: 20px; }
.check input { width: 18px; height: 18px; margin-top: 4px; flex-shrink: 0; }
.check label { font-size: 15px; font-weight: 400; line-height: 1.6; }

.form-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.form-nav .counter { font-size: 13.5px; font-weight: 700; color: var(--muted); }

.notice {
  display: flex; gap: 24px; align-items: flex-start;
  background: var(--cream); border: 1px solid var(--line);
  border-left: 5px solid var(--gold); border-radius: 10px;
  padding: 26px 28px;
}
.notice-amt { font-family: var(--font);
  flex-shrink: 0; font-size: clamp(32px, 4vw, 44px); font-weight: 900;
  color: var(--navy); line-height: 1; padding-top: 2px;
}
.notice h3 { font-size: 20px; }
.notice p { font-size: 15.5px; color: var(--ink-soft); margin-top: 10px; }

/* -------------------------------------------------- admissions state
   The page loads in the open state and switches only if the server says
   admissions are closed, so a slow reply never hides the form by mistake. */
/* Hiding is done with one rule that nothing can outrank. Showing an element
   means it simply carries no override, so its own styling applies untouched.
   An earlier version used a plain attribute selector, which lost to
   .announce .wrap on specificity and left the closed strip on show. */
[data-if-closed], [data-hide] { display: none !important; }

.closed-panel {
  margin-top: 30px; background: var(--cream); border: 1px solid var(--line);
  border-left: 5px solid var(--gold); border-radius: 10px;
  padding: clamp(26px, 3.4vw, 40px);
}
.closed-panel h2 { font-size: clamp(23px, 2.8vw, 30px); }
.closed-panel p { font-size: 17px; color: var(--ink-soft); margin-top: 14px; max-width: 720px; }

/* -------------------------------------------------- callout */
.callout {
  margin-top: 34px; background: var(--sand); border: 1px solid var(--line);
  border-left: 5px solid var(--navy); border-radius: 10px; padding: 24px 28px;
}
.callout h3 { font-size: 19px; }
.callout p { font-size: 15.8px; color: var(--ink-soft); margin-top: 10px; }

/* -------------------------------------------------- payment panel */
.pay-panel {
  display: flex; flex-wrap: wrap; gap: 26px 40px; align-items: center;
  justify-content: space-between; margin-top: 24px;
  background: var(--navy); border-radius: 10px; border-top: 5px solid var(--gold);
  padding: 28px 30px;
}
.pay-label {
  font-size: 11.5px; font-weight: 900; letter-spacing: 2.2px;
  text-transform: uppercase; color: #d9b976;
}
.pay-amt { font-family: var(--font); font-size: clamp(36px, 4.6vw, 52px); font-weight: 900; color: #ffffff; line-height: 1; margin-top: 8px; }
.pay-action { max-width: 460px; }
.pay-note { font-size: 14px; color: #c9d2e0; margin-top: 14px; }
html[lang="hi"] .pay-label { text-transform: none; letter-spacing: 0.2px; }
@media (max-width: 720px) {
  .pay-panel { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------- document uploads */
.subhead {
  font-size: 18px; margin-top: 34px; padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.subhead-note { font-size: 14.5px; color: var(--muted); margin-top: 6px; }
.field input[type="file"] {
  padding: 10px 12px; background: var(--white); font-size: 14.5px;
}
.field input[type="file"]::file-selector-button {
  font-family: var(--font); font-weight: 700; font-size: 13.5px;
  background: var(--sand); color: var(--navy); border: 1px solid var(--line);
  border-radius: 4px; padding: 7px 14px; margin-right: 12px; cursor: pointer;
}
.field .file-error {
  display: none; font-size: 13.5px; font-weight: 700; color: #a3261d; margin-top: 7px;
}
.field.has-error .file-error { display: block; }
.field.has-error input[type="file"] { border-color: #a3261d; }
.field .file-ok {
  display: none; font-size: 13.5px; color: #2f6b3f; font-weight: 700; margin-top: 7px;
}
.field.is-ok .file-ok { display: block; }

/* -------------------------------------------------- acknowledgement reference */
.ack-ref-line { margin-top: 20px; font-size: 15px; }
.ack-ref-line span {
  display: block; font-size: 11.5px; font-weight: 900; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--gold-dark);
}
.ack-ref-line strong { font-family: var(--font); font-size: 20px; color: var(--navy); letter-spacing: 0.5px; }
html[lang="hi"] .ack-ref-line span { text-transform: none; letter-spacing: 0.2px; }

/* -------------------------------------------------- contact and FAQ */
.contact-card {
  display: flex; gap: 16px; background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 22px;
}
.contact-card .ic {
  width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #ffffff;
  font-weight: 900; font-size: 15px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.contact-card .lbl {
  font-size: 11.5px; font-weight: 900; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--gold-dark);
}
.contact-card .val { font-size: 15.5px; margin-top: 6px; white-space: pre-line; }

.faq { border-bottom: 1px solid var(--line); }
.faq button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  background: none; border: 0; padding: 20px 0; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: 17.5px; font-weight: 700; color: var(--ink);
}
.faq .glyph { font-size: 22px; font-weight: 900; color: var(--gold); flex-shrink: 0; }
.faq .answer {
  display: none; padding-bottom: 22px; font-size: 16px;
  color: var(--ink-soft); max-width: 860px;
}
.faq.is-open .answer { display: block; }

/* -------------------------------------------------- portal */
.login-card {
  max-width: 430px; margin: 0 auto; background: var(--white);
  border: 1px solid var(--line); border-radius: 12px; padding: 34px; text-align: left;
}
.login-card img { height: 56px; width: auto; margin: 0 auto 20px; }
.login-card h1 { font-size: 26px; text-align: center; }
.login-card .sub { font-size: 15px; color: var(--ink-soft); text-align: center; margin-top: 8px; }
.login-links { display: flex; justify-content: space-between; gap: 14px; margin-top: 18px; font-size: 14px; }

.stat-tile { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 22px; }
.stat-tile .lbl {
  font-size: 11.5px; font-weight: 900; letter-spacing: 1.7px;
  text-transform: uppercase; color: var(--gold-dark);
}
.stat-tile .val { font-family: var(--font); font-size: 30px; font-weight: 900; color: var(--navy); margin-top: 8px; line-height: 1; }
.stat-tile .sub { font-size: 13.5px; color: var(--muted); margin-top: 8px; }

.mod-row { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.mod-top { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.mod-top .t { font-size: 16px; font-weight: 700; }
.mod-top .s { font-size: 13px; font-weight: 900; letter-spacing: 0.6px; }

.file-row { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.file-kind {
  flex-shrink: 0; width: 46px; height: 34px; border-radius: 5px; background: var(--navy);
  color: #ffffff; font-size: 11px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.file-row .name { font-size: 15.5px; font-weight: 700; }
.file-row .meta { font-size: 13px; color: var(--muted); margin-top: 2px; }

.session-row { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.session-row .when {
  flex-shrink: 0; width: 130px; font-size: 13px; font-weight: 900;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--gold-dark); padding-top: 3px;
}
.session-row .t { font-size: 16px; font-weight: 700; }
.session-row .w { font-size: 13.5px; color: var(--muted); margin-top: 3px; }

/* -------------------------------------------------- CTA band and footer */
.band { background: var(--navy); color: #ffffff; }
.band .wrap {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between;
  padding-top: 44px; padding-bottom: 44px;
}
.band h2 { color: #ffffff; font-size: clamp(23px, 2.8vw, 32px); }
.band p { color: #dfe5ee; font-size: 16px; margin-top: 8px; max-width: 560px; }

.footer { background: var(--navy-deep); color: #c9d2e0; font-size: 15px; }
.footer a { color: #c9d2e0; }
.footer .wrap { padding-top: 46px; padding-bottom: 30px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 34px; }
.footer h3 { color: #ffffff; font-size: 17px; }
.footer p { color: #c9d2e0; font-size: 14.8px; margin-top: 12px; max-width: 420px; }
.footer .col-title {
  font-size: 11.5px; font-weight: 900; letter-spacing: 2px;
  text-transform: uppercase; color: #d9b976; margin-bottom: 14px;
}
.footer ul { list-style: none; }
.footer li { margin-bottom: 9px; font-size: 14.8px; }
.footer-logos { display: flex; gap: 12px; margin-bottom: 18px; }
.footer-logos img { height: 48px; width: auto; background: #ffffff; border-radius: 6px; padding: 3px; }
.footer-base {
  border-top: 1px solid rgba(255,255,255,0.14); margin-top: 34px; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between;
  font-size: 13.5px; color: #9fb0c6;
}

/* -------------------------------------------------- language visibility */
[data-lang-only="hi"] { display: none; }
html[lang="hi"] [data-lang-only="hi"] { display: revert; }
html[lang="hi"] [data-lang-only="en"] { display: none; }

/* Devanagari does not take uppercase or wide tracking, so drop both in Hindi. */
html[lang="hi"] .kicker,
html[lang="hi"] .brand-city,
html[lang="hi"] .brand-join span,
html[lang="hi"] .fact .lbl,
html[lang="hi"] .hour-card .hrs-lbl,
html[lang="hi"] .month-label,
html[lang="hi"] .month-note,
html[lang="hi"] .module .no span,
html[lang="hi"] .kv th,
html[lang="hi"] .tl-when,
html[lang="hi"] .fee-hero .lbl,
html[lang="hi"] .contact-card .lbl,
html[lang="hi"] .stat-tile .lbl,
html[lang="hi"] .step-chip .stp,
html[lang="hi"] .session-row .when,
html[lang="hi"] .footer .col-title,
html[lang="hi"] .hero-eyebrow {
  text-transform: none;
  letter-spacing: 0.2px;
}
html[lang="hi"] body { line-height: 1.8; }
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3,
html[lang="hi"] .brand-name, html[lang="hi"] .stand {
  letter-spacing: 0; line-height: 1.4;
}
html[lang="hi"] .hero .tagline { font-style: normal; }

/* -------------------------------------------------- responsive */
/* Below this width the two names cannot sit side by side on one line, so the
   lock-up stacks and the names are allowed to wrap. */
@media (max-width: 980px) {
  /* Too narrow for a third and two thirds, so the panel sits above the photograph. */
  .hero { grid-template-columns: 1fr; }
  .hero-media { min-height: clamp(240px, 42vw, 360px); }
  .hero-media::before {
    background: linear-gradient(180deg,
      rgba(11,26,46,0.92) 0%, rgba(11,26,46,0.4) 4%, rgba(11,26,46,0) 12%);
  }
  .hero h1 { font-size: clamp(30px, 5vw, 44px); }
  .hero .lead { max-width: 640px; }
  .brand .wrap { flex-direction: column; text-align: center; }
  .brand-join { order: 3; }
  .brand-name { white-space: normal; font-size: 17px; }
  .brand-unit.is-right { text-align: center; justify-content: center; }
  .brand-unit.is-right .brand-text { order: 0; }

  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stepper { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .notice { flex-direction: column; gap: 12px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .facts .wrap { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(3) { border-left: 0; }
  .fact { border-top: 1px solid var(--line); }
  .fact:nth-child(-n+2) { border-top: 0; }
  .brand-unit.is-right { text-align: center; justify-content: center; }
  .mainnav .wrap { padding: 0 8px; }
  .mainnav a { padding: 13px 12px; font-size: 13.5px; }
  .person { flex-direction: column; }
  .person img, .person.compact img { width: 100%; height: 240px; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .session-row { flex-direction: column; gap: 4px; }
  .session-row .when { width: auto; }
}

@media print {
  .utility, .mainnav, .announce, .band, .lang-switch { display: none; }
  body { color: #000000; }
}

@page { margin: 14mm; }