/* ============================================================
   LSTC – Legal Services and Training Center L.L.C.
   Design system — navy & gold
   ============================================================ */

:root {
  --navy-900: #0b1c33;
  --navy-800: #10263f;
  --navy-700: #16324f;
  --navy-600: #1e4066;
  --navy-100: #e8eef5;
  --navy-50:  #f4f7fb;
  --gold-500: #B28A45;
  --gold-400: #C6A05C;
  --gold-100: #F2EAD9;
  --gold-700: #7F6128;  /* bronze: small gold text on light backgrounds (>=4.5:1) */
  --ink:      #1d2733;
  --ink-soft: #4a5a6d;
  --line:     #E6E2D9;
  --white:    #ffffff;
  --bg:       #FDFCFA;
  --success:  #1e7d4f;
  --error:    #b3372f;
  --radius:   10px;
  --shadow-sm: 0 1px 2px rgba(11, 28, 51, 0.06);
  --shadow-md: 0 4px 16px rgba(11, 28, 51, 0.08);
  --shadow-lg: 0 16px 48px rgba(11, 28, 51, 0.12);
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --maxw: 1160px;
  /* LexTower (lextower.io) monochrome palette – used only by the "Services for the United States" link */
  --lt-black: #0c0c0c;
  --lt-ink: #101010;
  --lt-paper-on-dark: #f4f2ec;
  --lt-gray: #e4e2dc;  /* resting state of that link: a slight warm grey inside LSTC's white panel */
}

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

html { scroll-padding-top: 100px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

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

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

a { color: var(--navy-600); text-decoration: none; }
a:hover { color: var(--gold-700); }

/* ---------- Language switching ----------
   Every translatable element exists twice: .lang-en and .lang-sq.
   <html data-lang="sq"> shows Albanian (the default); data-lang="en" shows English. */
[data-lang="en"] .lang-sq { display: none !important; }
[data-lang="sq"] .lang-en { display: none !important; }

/* ---------- Typography ---------- */
h1, h2, .display { font-family: var(--font-display); color: var(--navy-800); line-height: 1.2; }
h1 { font-size: clamp(2.1rem, 4.5vw, 3.3rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-family: var(--font-body); color: var(--navy-800); line-height: 1.2; font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; }
.lead { font-size: 1.15rem; color: var(--ink-soft); }

main p { max-width: 72ch; }
.section-head.center p, .center p { margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 0.75rem;
}
/* Lighter gold is reserved for dark surfaces */
.hero .eyebrow, .cta-band .eyebrow, .vision-panel .eyebrow { color: var(--gold-400); }

/* ---------- Layout ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { padding: 60px 0; }
section.tight { padding: 48px 0; }
.section-head { max-width: 720px; margin-bottom: 2.6rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 86px; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand-logo { height: 64px; width: auto; display: block; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 8px;
  background: var(--navy-800);
  color: var(--gold-400);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.brand-text { line-height: 1.15; }
.brand-text .brand-name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.15rem; color: var(--navy-800);
}
.brand-text .brand-sub { font-size: 0.68rem; color: var(--ink-soft); letter-spacing: 0.06em; text-transform: uppercase; }

.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav a { font-weight: 500; font-size: 0.95rem; color: var(--navy-800); white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { color: var(--gold-700); }

.nav-cta {
  background: var(--navy-800); color: var(--white) !important;
  padding: 10px 22px; border-radius: 8px; font-weight: 600;
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--navy-600); }

.lang-toggle {
  display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
}
.lang-toggle button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
  padding: 7px 13px; color: var(--ink-soft);
}
.lang-toggle button.active { background: var(--navy-800); color: var(--gold-400); }
/* keyboard focus ring drawn inside the button: the rounded pill clips anything outside it (12 Oct 2026) */
.lang-toggle button:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

.nav-burger { display: none; border: 0; background: none; cursor: pointer; padding: 9px 11px; margin: 0 -3px; } /* 44 × 44 px tap target; the -3 px margins keep the icon and SQ | EN exactly where they were */
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--navy-800); margin: 5px 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    linear-gradient(100deg, rgba(11, 28, 51, 0.93) 0%, rgba(11, 28, 51, 0.85) 40%, rgba(11, 28, 51, 0.45) 72%, rgba(11, 28, 51, 0.18) 100%),
    url("../img/hero-home.jpg") center/cover no-repeat,
    var(--navy-800);
  color: var(--white);
  padding: 110px 0 120px;
}
.hero h1 { color: var(--white); max-width: 760px; }
.training-hero h1 { text-wrap: balance; max-width: 700px; }
.training-hero h1 .gold { display: inline-block; }
.hero h1 .gold { color: var(--gold-400); }
.hero .lead { color: rgba(255, 255, 255, 0.85); max-width: 640px; margin: 1.4rem 0 2.2rem; }
/* Home page only: the intro paragraph under the title is set smaller */
.hero:not(.inner) .lead { font-size: 1rem; max-width: 600px; }
.hero-motto {
  font-family: var(--font-display); font-style: italic; font-size: 0.95rem;
  color: var(--gold-700); margin-bottom: 1rem; display: block;
}
.hero .hero-motto { color: var(--gold-400); }
.hero h1, .hero .lead, .hero .eyebrow, .hero .hero-motto { text-shadow: 0 1px 2px rgba(11, 28, 51, 0.45); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.center .hero-actions { justify-content: center; }

.hero.inner { padding: 84px 0 88px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; border-radius: 8px; font-weight: 600; font-size: 0.98rem;
  padding: 13px 30px; cursor: pointer; transition: all 0.2s; border: 2px solid transparent;
  font-family: var(--font-body);
}
.btn-gold { background: var(--gold-500); color: var(--navy-900); }
.btn-gold:hover { background: var(--gold-400); color: var(--navy-900); }
.btn-outline-light { border-color: rgba(255,255,255,0.55); color: var(--white); background: transparent; }
.btn-outline-light:hover { border-color: var(--gold-400); color: var(--gold-400); }
.btn-navy { background: var(--navy-800); color: var(--white); }
.btn-navy:hover { background: var(--navy-600); color: var(--white); }
.btn-outline { border-color: var(--navy-800); color: var(--navy-800); background: transparent; }
.btn-outline:hover { border-color: var(--gold-700); color: var(--gold-700); }
.btn-lg { padding: 16px 38px; font-size: 1.05rem; }

/* ---------- Cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; box-shadow: var(--shadow-sm); transition: box-shadow 0.25s, transform 0.25s;
}
a.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card h3 { margin: 0.9rem 0 0.6rem; }
.card p, .card li { color: var(--ink-soft); font-size: 0.95rem; }

.card-icon {
  width: 46px; height: 46px; border-radius: 10px;
  background: transparent; border: 1px solid var(--line); color: var(--navy-700);
  display: flex; align-items: center; justify-content: center;
}
.card-icon svg, .v-icon svg { width: 22px; height: 22px; display: block; }
.v-icon { color: var(--gold-500); }
/* Cards whose body is a list (the five service areas on services.html, 24 Sep 2026): the icon sits a little
   further into the top-left corner, clear of the first bullet */
.card-list .card-icon { margin: -10px 0 18px -10px; }

.alt-band { background: #F7F5F0; }

/* ---------- Lists ---------- */
.check-list { list-style: none; }
.check-list li {
  position: relative; padding-left: 30px; margin-bottom: 0.7rem; color: var(--ink-soft);
}
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  content: "✓" / ""; /* decorative: screen readers skip it (older browsers keep the line above) */
  color: var(--gold-500); font-weight: 700;
}

.bullet-list { list-style: none; }
.bullet-list li { position: relative; padding-left: 24px; margin-bottom: 0.65rem; color: var(--ink-soft); }
.bullet-list li::before {
  content: ""; position: absolute; left: 4px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--gold-500);
}

/* ---------- Values grid ---------- */
.value-chip {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 18px; text-align: center; font-weight: 600; color: var(--navy-800);
  box-shadow: var(--shadow-sm); font-size: 0.95rem;
}
.value-chip .v-icon { font-size: 1.4rem; display: block; margin-bottom: 8px; color: var(--gold-500); }

/* ---------- Methodology flow ----------
   <ol class="method-flow"><li><span class="step">…</span></li>…</ol>
   The connector is generated on every item after the first, so an arrow can
   never be separated from its step when the row wraps. */
.method-flow {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--navy-800);
}
.method-flow li { display: flex; align-items: center; }
.method-flow li + li::before {
  content: "\2192"; content: "\2192" / ""; flex: 0 0 auto; padding: 0 12px;
  font-family: var(--font-body); font-size: 1.2rem; line-height: 1; color: var(--gold-500);
}
.method-flow .step {
  background: var(--white); border: 1.5px solid var(--gold-500); border-radius: 8px;
  padding: 10px 22px; white-space: nowrap;
}

/* ---------- Trainers ----------
   .trainer-avatar is the portrait slot. It holds initials or a glyph until the
   team sends photographs; then drop in <img src="…" alt="Name"> (4:5 crop,
   at least 400×500px) and the styles below crop it consistently.
   Text hierarchy: .t-name (name) > .t-role (position) > .t-field (subject) > .t-note (biography). */
.trainer-card {
  display: flex; gap: 22px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm);
}
#trainers .grid-2 { align-items: stretch; }
.trainer-avatar {
  flex: 0 0 auto; width: 96px; height: 120px; border-radius: 12px; overflow: hidden;
  background: var(--navy-800); color: var(--gold-400);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
}
.trainer-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.trainer-avatar svg { width: 36px; height: 36px; }
.trainer-card .t-body { min-width: 0; }
.trainer-card .t-name { font-family: var(--font-display); font-weight: 700; color: var(--navy-800); font-size: 1.15rem; line-height: 1.25; letter-spacing: 0; margin: 0; }
.trainer-card .t-role { color: var(--navy-800); font-weight: 500; font-size: 0.9rem; margin-top: 3px; }
.trainer-card .t-field { color: var(--gold-700); font-weight: 600; font-size: 0.9rem; margin-top: 8px; }
.trainer-card .t-note { color: var(--ink-soft); font-size: 0.92rem; margin-top: 10px; }

/* ---------- Info strip / badges ---------- */
.info-strip {
  display: flex; flex-wrap: wrap; gap: 12px 14px; justify-content: flex-start;
}
.center .info-strip { justify-content: center; }
.info-strip .pill {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
  color: var(--white); border-radius: 999px; padding: 10px 22px; font-size: 0.92rem; font-weight: 600;
}
.info-strip .pill strong { color: var(--gold-400); }

/* ---------- CTA band (inset panel) ---------- */
.cta-band { text-align: center; }
.cta-band .container {
  max-width: min(var(--maxw), calc(100% - 48px));
  background:
    linear-gradient(110deg, rgba(11, 28, 51, 0.96), rgba(30, 64, 102, 0.9)),
    url("../img/apply-banner.jpg") center/cover no-repeat,
    var(--navy-800);
  color: var(--white); border-radius: 16px; padding: 72px 48px;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 620px; margin: 1rem auto 2rem; }

/* ---------- Forms ---------- */
.form-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-md); padding: 42px; max-width: 780px; margin: 0 auto;
  container: form-card / inline-size;
}
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
/* Stack the fields whenever the form card itself is narrow (e.g. beside the sidebar on small desktops) */
@container form-card (max-width: 560px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-card button[type="submit"] { width: 100%; }
}
.form-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.form-field.full { grid-column: 1 / -1; }
.form-field label, .form-field .form-label { font-weight: 600; font-size: 0.9rem; color: var(--navy-800); }
.form-field .req { color: var(--error); }
/* Text-like controls only: radios and checkboxes keep their native box (see .radio-row input) */
.form-field input:not([type="radio"]):not([type="checkbox"]), .form-field select, .form-field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink); /* >=16px: no auto-zoom on iOS */
  border: 1.5px solid var(--line); border-radius: 8px; padding: 12px 14px;
  background: var(--navy-50); transition: border-color 0.2s, background 0.2s;
  width: 100%; max-width: 100%; min-width: 0;
}
.form-field input:not([type="radio"]):not([type="checkbox"]):focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--gold-500); background: var(--white);
}
.form-field input:not([type="radio"]):not([type="checkbox"]):focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible {
  outline: 2px solid var(--gold-500); outline-offset: 2px;
}
.form-field textarea { resize: vertical; min-height: 110px; }
.radio-row { display: flex; gap: 22px; flex-wrap: wrap; padding-top: 4px; }
.radio-row label { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; color: var(--ink-soft); cursor: pointer; }
.radio-row input { flex: 0 0 auto; width: 1.05em; height: 1.05em; margin: 0.35em 0 0; accent-color: var(--navy-800); }
.radio-row input:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.radio-stack { flex-direction: column; align-items: flex-start; gap: 10px; }
.form-note { font-size: 0.85rem; color: var(--ink-soft); }
.form-notice {
  background: var(--gold-100); border-left: 3px solid var(--gold-500); border-radius: 6px;
  padding: 12px 14px; font-size: 0.9rem; font-weight: 500; color: var(--ink); max-width: none;
}
.form-status [hidden] { display: none; }
.form-status { display: none; margin-top: 18px; padding: 14px 18px; border-radius: 8px; font-weight: 600; }
.form-status.ok { display: block; background: #e8f5ee; color: var(--success); }
.form-status.err { display: block; background: #fbecea; color: var(--error); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,0.78); padding: 64px 0 0; }
.footer-logo { display: inline-block; margin-bottom: 16px; }
.footer-logo img {
  height: 80px; width: auto; display: block; opacity: 0.92;
}
.site-footer h3 {
  font-family: var(--font-display); color: var(--white); font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 44px; }
.site-footer a { color: rgba(255,255,255,0.78); }
.site-footer a:hover { color: var(--gold-400); }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.55rem; font-size: 0.92rem; }
.footer-motto { font-family: var(--font-display); font-style: italic; color: var(--gold-400); font-size: 0.98rem; }
.footer-motto-band {
  border-top: 1px solid rgba(255,255,255,0.12); padding: 22px 0; text-align: center;
}
.footer-motto-band .footer-motto { white-space: nowrap; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12); padding: 20px 0; font-size: 0.85rem;
  display: flex; justify-content: center; text-align: center; gap: 12px; flex-wrap: wrap;
}

/* ---------- Page hero variants (inner pages) ---------- */
.hero.services-hero {
  background:
    linear-gradient(100deg, rgba(11, 28, 51, 0.93) 0%, rgba(11, 28, 51, 0.85) 40%, rgba(11, 28, 51, 0.45) 72%, rgba(11, 28, 51, 0.18) 100%),
    url("../img/services.jpg") center/cover no-repeat, var(--navy-800);
}
.hero.training-hero {
  background:
    linear-gradient(100deg, rgba(11, 28, 51, 0.93) 0%, rgba(11, 28, 51, 0.85) 40%, rgba(11, 28, 51, 0.45) 72%, rgba(11, 28, 51, 0.18) 100%),
    url("../img/training-hero.jpg") center/cover no-repeat, var(--navy-800);
}
.hero.apply-hero {
  background:
    linear-gradient(100deg, rgba(11, 28, 51, 0.93) 0%, rgba(11, 28, 51, 0.85) 40%, rgba(11, 28, 51, 0.45) 72%, rgba(11, 28, 51, 0.18) 100%),
    url("../img/apply-banner.jpg") center/cover no-repeat, var(--navy-800);
}
.hero.apply-hero-compact, .apply-hero-compact { padding: 52px 0 56px; }

/* ---------- Split & panel layouts ---------- */
.about-split { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.grid-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.vision-panel {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #fff; border-radius: 16px; padding: 72px 56px; text-align: center;
}
.vision-panel h2 { color: #fff; }
.vision-panel .gold-rule { margin-left: auto; margin-right: auto; }
.vision-panel p {
  color: rgba(255,255,255,0.88); font-family: var(--font-display);
  font-size: 1.25rem; line-height: 1.65; max-width: 60ch; margin: 1.4rem auto 0;
}

.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.value-grid .value-chip {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px 16px; box-shadow: none; font-size: 0.92rem;
}
.value-grid .value-chip .v-icon { display: flex; align-items: center; margin-bottom: 0; }
.value-grid .v-icon svg { width: 20px; height: 20px; }

.commitment-split { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
.commitment-split img { border-radius: 14px; width: 100%; height: 100%; min-height: 340px; object-fit: cover; }

.apply-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.apply-aside { position: sticky; top: 110px; }
.apply-aside h2 { font-size: 1.4rem; }

/* ---------- Key facts strip (training + registration sidebar) ----------
   Mirrors the client's "Kohëzgjatja · Orari · Ora · Çmimi" graphic: icon, bold label, value, gold dividers. */
.facts-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; text-align: center;
}
.fact { padding: 28px 18px 26px; }
.fact + .fact { border-left: 1px solid rgba(178, 138, 69, 0.45); }
.fact-icon { width: 48px; height: 48px; margin: 0 auto 12px; color: var(--navy-700); display: flex; align-items: center; justify-content: center; }
.fact-icon svg { width: 34px; height: 34px; display: block; }
.fact-label { font-family: var(--font-display); font-weight: 700; color: var(--navy-800); font-size: 1.15rem; line-height: 1.2; }
.fact-value { color: var(--navy-800); font-size: 1.15rem; margin-top: 4px; }
.fact-sub { color: var(--ink-soft); font-size: 0.82rem; margin-top: 2px; }
.facts-strip.facts-aside { grid-template-columns: 1fr 1fr; }
.facts-strip.facts-aside .fact { padding: 20px 12px 18px; }
.facts-strip.facts-aside .fact:nth-child(even) { border-left: 1px solid rgba(178, 138, 69, 0.45); }
.facts-strip.facts-aside .fact:nth-child(odd) { border-left: 0; }
.facts-strip.facts-aside .fact:nth-child(n+3) { border-top: 1px solid rgba(178, 138, 69, 0.45); }
.facts-strip.facts-aside .fact-label, .facts-strip.facts-aside .fact-value { font-size: 1.02rem; }
.facts-strip.facts-aside .fact-icon svg { width: 28px; height: 28px; }

/* ---------- Training content cards (civil · criminal · oral) ---------- */
.content-cards { align-items: stretch; }
.content-cards .card-icon { margin: 0 auto; }
.content-cards .card p { margin-top: 0.4rem; }

/* ---------- Trainer / staff extras ---------- */
.trainer-card .t-links { margin-top: 12px; }
.trainer-card .t-cv {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--navy-800); color: var(--navy-800); border-radius: 8px;
  padding: 6px 14px; font-size: 0.86rem; font-weight: 600;
}
.trainer-card .t-cv:hover { border-color: var(--gold-700); color: var(--gold-700); }
.trainer-card button.t-cv { background: transparent; font-family: inherit; line-height: inherit; cursor: pointer; }
#staff .grid-2 { align-items: stretch; }

/* ---------- Staff biography dialog ("Read more" on staff.html; main.js opens / closes it) ----------
   .bio-dialog > .bio-head (photo, .bio-name, .bio-role, .bio-meta, .bio-close) + .bio-body (scrolls) + .bio-foot */
.bio-dialog {
  width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  margin: auto; /* the global reset sets margin: 0, which would pin the modal to the top-left corner */
  padding: 0; border: 0; border-radius: 14px; background: var(--white); color: var(--ink);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.bio-dialog[open] { display: flex; flex-direction: column; }
.bio-dialog::backdrop { background: rgba(11, 28, 51, 0.62); }
html:has(.bio-dialog[open]) { overflow: hidden; }
.bio-head {
  position: relative; flex: 0 0 auto; display: flex; gap: 22px; align-items: center;
  padding: 26px 76px 26px 30px; background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); color: #fff;
}
.bio-photo { flex: 0 0 auto; width: 96px; height: 120px; object-fit: cover; border-radius: 12px; border: 2px solid var(--gold-500); }
.bio-name { color: #fff; font-size: 1.55rem; margin: 0; }
.bio-role { color: var(--gold-400); font-weight: 600; font-size: 0.95rem; margin-top: 6px; }
.bio-meta { color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; margin-top: 4px; }
.bio-meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; } /* on the navy header */
.bio-meta a:hover { color: var(--gold-400); }
.bio-close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff;
  font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.bio-close:hover { border-color: var(--gold-400); color: var(--gold-400); }
.bio-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 30px 26px; }
.bio-body h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--navy-800);
  margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--gold-100);
}
.bio-body h4 { font-size: 1rem; font-weight: 700; color: var(--navy-800); margin: 22px 0 10px; }
.bio-body h5 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-700); margin: 16px 0 8px; }
.bio-body p { color: var(--ink-soft); margin-bottom: 0.8rem; }
.bio-body p, .bio-body li { overflow-wrap: break-word; } /* the CV's long web addresses (verbatim) wrap on phones */
.bio-body .bio-lead-in { color: var(--navy-800); font-weight: 600; margin-bottom: 0.6rem; }
.bio-body .bullet-list li { font-size: 0.95rem; }
.bio-body .bullet-list li strong { color: var(--navy-800); font-weight: 600; }
.bio-detail { display: block; margin-top: 2px; }
.bio-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; padding: 14px 30px; border-top: 1px solid var(--line); background: var(--bg); }
@media (max-width: 600px) {
  .bio-dialog { width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .bio-head { gap: 16px; padding: 20px 64px 20px 20px; }
  .bio-photo { width: 72px; height: 90px; }
  .bio-name { font-size: 1.25rem; }
  .bio-close { top: 10px; right: 10px; }
  .bio-body { padding: 4px 20px 20px; }
  .bio-foot { padding: 12px 20px; }
  .bio-foot .btn { width: 100%; text-align: center; }
}
/* short screens (phones held sideways, big zoom): the whole window scrolls instead of a one-line CV area,
   and the Close button stays at the bottom. Must come after the rules above. (12 Oct 2026) */
@media (max-height: 500px) {
  .bio-dialog[open] { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .bio-body { overflow: visible; }
  .bio-foot { position: sticky; bottom: 0; }
}
.bio-body:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; } /* inset: the dialog clips outer rings */
.hero.staff-hero {
  background:
    linear-gradient(100deg, rgba(11, 28, 51, 0.93) 0%, rgba(11, 28, 51, 0.85) 40%, rgba(11, 28, 51, 0.45) 72%, rgba(11, 28, 51, 0.18) 100%),
    url("../img/services.jpg") center/cover no-repeat, var(--navy-800);
}

/* ---------- LSTC AI panel + "coming soon" badge ----------
   The panel left the home page on 30 Sep 2026 (photos took its place); the styles stay because .ai-features
   and .badge-soon are still used (ltc-ai.html, services.html#ltc-ai). */
.ai-panel {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #fff; border-radius: 16px; padding: 56px;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center;
}
.ai-panel .eyebrow { color: var(--gold-400); }
.ai-panel h2 { color: #fff; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ai-panel p { color: rgba(255,255,255,0.86); margin-top: 0.9rem; }
.ai-features { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ai-features li {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px;
  padding: 14px 16px; font-size: 0.92rem; font-weight: 600; color: #fff;
}
.ai-features svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--gold-400); }
.badge-soon {
  display: inline-block; vertical-align: middle;
  background: var(--gold-400); color: var(--navy-900); border-radius: 999px;
  padding: 3px 11px; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5;
}
.section-head h2 .badge-soon { position: relative; top: -2px; }

/* ---------- Trainers at the top of the training page (trainers → key facts → buttons) ---------- */
.trainers-top .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.trainers-top .hero-actions .btn { margin: 0; }

/* ---------- Training phases (23 Sep 2026) ----------
   Phase 1 = this training, written exam only (solid navy); Phase 2 = oral part, separate application
   (dashed gold outline). Under the key facts on training.html and above the form on apply.html. */
.phase-note { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
.phase { border-radius: var(--radius); padding: 22px 26px; text-align: left; }
.phase-current { background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); color: #fff; box-shadow: var(--shadow-md); }
.phase-next { background: var(--white); border: 1.5px dashed rgba(178, 138, 69, 0.75); }
.phase-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-700); }
.phase-current .phase-label { color: var(--gold-400); }
.phase-title { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1.25; color: var(--navy-800); }
.phase-current .phase-title { color: #fff; }
.phase p { margin-top: 6px; font-size: 0.95rem; color: var(--ink-soft); }
.phase-current p { color: rgba(255, 255, 255, 0.88); }
.phase-current strong { color: var(--gold-400); }
.phase-arrow { display: flex; align-items: center; justify-content: center; padding: 0 14px; font-size: 1.5rem; line-height: 1; color: var(--gold-500); }
.badge-phase {
  display: inline-block; margin-bottom: 0.2rem;
  background: var(--gold-100); color: var(--gold-700); border: 1px solid rgba(178, 138, 69, 0.55); border-radius: 999px;
  padding: 3px 11px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5;
}
@media (max-width: 640px) {
  .phase-note { grid-template-columns: minmax(0, 1fr); }
  .phase { padding: 20px 22px; }
  .phase-arrow { padding: 6px 0; transform: rotate(90deg); }
}

/* ---------- Utilities ---------- */
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.6rem; } .mt-4 { margin-top: 2.4rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.6rem; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.gold-rule {
  width: 64px; height: 3px; background: var(--gold-500); border: 0; border-radius: 2px; margin: 1.1rem 0;
}
.center .gold-rule { margin-left: auto; margin-right: auto; }

/* ---------- Responsive ---------- */
/* Desktop: the home hero keeps the photo's 16:9 proportions so the full image is visible (no crop) */
@media (min-width: 961px) {
  .hero:not(.inner) { min-height: 46vw; display: flex; align-items: center; padding: 64px 0; background-position: center bottom; }
  .hero:not(.inner) > .container { width: 100%; }
}
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .facts-strip { grid-template-columns: 1fr 1fr; }
  .content-cards > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fact:nth-child(even) { border-left: 1px solid rgba(178, 138, 69, 0.45); }
  .fact:nth-child(odd) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid rgba(178, 138, 69, 0.45); }
  .ai-panel { grid-template-columns: 1fr; padding: 48px 40px; }
  #staff .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .about-split, .commitment-split, .apply-layout { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .apply-aside { position: static; }
  #trainers .grid-2 { grid-template-columns: 1fr; }
  /* Narrow screens: the text column spans the photo, so add a flat navy veil under it */
  .hero::before { content: ""; position: absolute; inset: 0; background: rgba(11, 28, 51, 0.55); pointer-events: none; }
  .hero > .container { position: relative; }
  .hero .lead { color: rgba(255, 255, 255, 0.95); }
}
@media (min-width: 761px) and (max-width: 960px) {
  .method-flow { font-size: 0.92rem; }
  .method-flow .step { padding: 8px 14px; }
  .method-flow li + li::before { padding: 0 8px; font-size: 1.05rem; }
}
@media (max-width: 860px) {
  .nav-wrap { gap: 14px; }
  .main-nav { gap: 18px; }
  .nav-cta { padding: 10px 16px; }
}
/* Home hero below the desktop break (no manual <br>): keep the gold phrase on one line, balance the rest;
   under 400px scale the type with the viewport so the phrase still fits */
@media (max-width: 760px) {
  .hero:not(.inner) h1 { text-wrap: balance; }
  .hero:not(.inner) h1 .gold { display: inline-block; }
  .training-hero h1 { max-width: 560px; } /* two lines once the desktop <br> is hidden */
}
@media (max-width: 399px) {
  .hero:not(.inner) h1 { font-size: clamp(1.6rem, 7.4vw, 1.9rem); }
}
@media (max-width: 760px) {
  .br-desktop { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2x2 { grid-template-columns: 1fr; }
  .ai-panel { padding: 44px 26px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-card button[type="submit"] { width: 100%; }
  .cta-band .container { padding: 56px 28px; }
  .vision-panel { padding: 56px 28px; }
  .footer-motto-band .footer-motto { white-space: normal; }
  section { padding: 56px 0; }
  .hero { padding: 80px 0 84px; }
  .method-flow { flex-direction: column; align-items: stretch; row-gap: 0; max-width: 300px; margin-left: auto; margin-right: auto; }
  .method-flow li { flex-direction: column; align-items: stretch; }
  .method-flow li + li::before { content: "\2193"; content: "\2193" / ""; padding: 6px 0; text-align: center; }
  .method-flow .step { text-align: center; white-space: normal; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    flex-direction: column; padding: 18px 24px; gap: 16px; align-items: flex-start;
    box-shadow: var(--shadow-md);
  }
  .main-nav.open { display: flex; }
  .nav-burger { display: block; }
}
@media (max-width: 560px) {
  html { scroll-padding-top: 90px; }
  /* Phone type scale: smaller, airier text so sections do not feel crowded */
  body { font-size: 15.5px; }
  h1 { font-size: clamp(1.7rem, 7.6vw, 2rem); }
  h2 { font-size: 1.45rem; }
  h3 { font-size: 1rem; }
  .lead { font-size: 1.02rem; }
  .hero:not(.inner) .lead { font-size: 0.92rem; }
  .eyebrow { font-size: 0.72rem; margin-bottom: 0.6rem; }
  .hero-motto { font-size: 0.88rem; }
  .hero { padding: 64px 0 68px; }
  .hero .lead { margin: 1rem 0 1.6rem; }
  section { padding: 48px 0; }
  .section-head { margin-bottom: 2rem; }
  .card { padding: 26px 22px; }
  .card-list .card-icon { margin: -8px 0 16px -8px; }
  .card p, .card li { font-size: 0.92rem; }
  .btn { padding: 12px 22px; font-size: 0.94rem; }
  .btn-lg { padding: 14px 28px; font-size: 0.98rem; }
  .vision-panel { padding: 44px 22px; }
  .vision-panel p { font-size: 1.08rem; }
  .cta-band .container { padding: 44px 22px; }
  .value-chip { padding: 12px 14px; font-size: 0.9rem; }
  .info-strip .pill { padding: 8px 16px; font-size: 0.86rem; }
  /* Home hero on phones: calmer stack — title, paragraph, full-width buttons, motto last; fills the screen */
  .hero:not(.inner) { min-height: min(calc(100svh - 76px), 760px); display: flex; align-items: stretch; padding: 36px 0 44px; }
  .hero:not(.inner) > .container { display: flex; flex-direction: column; justify-content: space-between; width: 100%; }
  .hero:not(.inner) .hero-tagline { order: 4; }
  .hero:not(.inner) .eyebrow { display: block; margin: 0 0 0.45rem; }
  .hero:not(.inner) h1 { order: 1; }
  .hero:not(.inner) .lead { order: 2; margin: 0; }
  .hero:not(.inner) .hero-actions { order: 3; gap: 10px; }
  .hero:not(.inner) .hero-actions .btn { width: 100%; text-align: center; }
  .hero:not(.inner) .hero-motto { margin: 0; font-size: 0.85rem; opacity: 0.85; }
  /* About / Commitment on phones: close the gap between heading and text */
  .about-split, .commitment-split { gap: 18px; }
  .about-split .section-head { margin-bottom: 0; }
  .about-split .gold-rule { margin-bottom: 0.4rem; }
  .nav-wrap { height: 76px; }
  .brand-logo { height: 56px; }
  .grid-4 { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .trainer-card { flex-direction: column; }
  .form-card { padding: 26px 20px; }
  .fact { padding: 20px 10px 18px; }
  .fact-label, .fact-value { font-size: 1rem; }
  .fact-icon svg { width: 28px; height: 28px; }
  .ai-features { grid-template-columns: 1fr; }
  .ai-panel { padding: 40px 22px; }
}

/* ---------- LSTC AI nav tab ---------- */
/* "AI" in bronze; hover/active colour comes from .main-nav a. The tab leads to the "coming soon" page ltc-ai.html. */
.nav-ai-accent { color: var(--gold-700); }
/* The full nav does not fit next to the logo and language toggle below 1201 px (Albanian labels; since
   30 Sep 2026 with "Kontakti" and "Cakto Takim"; up to 960 px before), so the burger menu runs up to 1200 px.
   Same rules as the <=760 px menu above. */
@media (min-width: 761px) and (max-width: 1200px) {
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    flex-direction: column; padding: 18px 24px; gap: 16px; align-items: flex-start;
    box-shadow: var(--shadow-md);
  }
  .main-nav.open { display: flex; }
  .nav-burger { display: block; }
  .lang-toggle { margin-left: auto; } /* keep SQ | EN next to the burger instead of floating mid-header */
}

/* ---------- Services dropdown (23 Sep 2026) ----------
   "Shërbimet / Services" is a toggle button with two destinations:
   · Shërbime në Kosovë / Services in Kosovo → services.html (LSTC colours)
   · Services for the United States → https://lextower.io/ (LexTower's black & paper palette and white logo)
   Desktop (>=1201 px): opens on mouse hover, or with the button (click / tap / keyboard – main.js sets
   .open + aria-expanded). Burger menu (<=1200 px): the two links unfold under the button. */
.nav-group-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; line-height: inherit;
  color: var(--navy-800); white-space: nowrap;
}
.nav-group-toggle:hover, .nav-group-toggle.active, .nav-group.open .nav-group-toggle { color: var(--gold-700); }
.nav-group-toggle:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; border-radius: 4px; }
.nav-caret {
  width: 10px; height: 10px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.nav-group.open .nav-caret { transform: rotate(180deg); }

.nav-sub { display: grid; gap: 6px; }
.main-nav .nav-sub-link {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 10px; white-space: normal;
  transition: background 0.2s ease, color 0.2s ease;
}
.main-nav .nav-sub-link:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.nav-sub-text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.nav-sub-title { font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.nav-sub-meta { font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0.02em; }

/* Kosovo – LSTC navy & gold, with the outline of Kosovo */
.main-nav .nav-sub-ks { color: var(--navy-800); }
.main-nav .nav-sub-ks:hover { background: var(--navy-50); color: var(--navy-800); }
.main-nav .nav-sub-ks[aria-current="page"] .nav-sub-title { color: var(--gold-700); }
.nav-sub-icon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
  background: var(--navy-800); color: var(--gold-400);
  display: flex; align-items: center; justify-content: center;
}
.nav-sub-icon svg { width: 26px; height: 26px; fill: rgba(198, 160, 92, 0.22); stroke: currentColor; stroke-linejoin: round; }
.nav-sub-icon path { stroke-width: 1.4px; vector-effect: non-scaling-stroke; }

/* United States – at rest a pale grey with dark text and the LexTower logo inverted to black, so it blends into
   LSTC's white panel; on hover / keyboard focus it turns LexTower black with the white logo, and the arrow slides
   like LexTower's buttons */
.main-nav .nav-sub-us { background: var(--lt-gray); color: var(--lt-ink); }
.main-nav .nav-sub-us:hover, .main-nav .nav-sub-us:focus-visible { background: var(--lt-black); color: var(--lt-paper-on-dark); }
.main-nav .nav-sub-us:focus-visible { outline-color: var(--lt-black); }
.nav-sub-us .nav-sub-title { letter-spacing: 0.01em; }
.nav-sub-logo { /* no stretch in the flex column */
  align-self: flex-start; height: 17px; width: auto; margin-top: 5px;
  filter: invert(1); opacity: 0.85; transition: filter 0.2s ease, opacity 0.2s ease;
}
.nav-sub-us:hover .nav-sub-logo, .nav-sub-us:focus-visible .nav-sub-logo { filter: none; opacity: 0.9; }
.nav-sub-arrow { flex: 0 0 auto; font-size: 1.1rem; line-height: 1; opacity: 0.5; transition: transform 0.25s ease, opacity 0.25s ease; }
.nav-sub-us:hover .nav-sub-arrow, .nav-sub-us:focus-visible .nav-sub-arrow { transform: translateX(4px); opacity: 1; }

/* With "Kontakti" and "Cakto Takim" (30 Sep 2026) the Albanian menu no longer fits the 1160 px page container with
   its 26 px spacing, so the header row alone may be 1280 px wide; just above the burger break (1201–1279 px) the
   links sit 20 px apart. SQ | EN never shrinks (a squeezed toggle clipped "EN"). */
.nav-wrap { max-width: 1280px; }
.lang-toggle { flex-shrink: 0; }
@media (min-width: 1201px) and (max-width: 1279px) {
  .main-nav { gap: 20px; }
}
@media (min-width: 1201px) {
  /* the group spans the header height, so the panel hangs just below the header */
  .main-nav { align-self: stretch; }
  .nav-group { position: relative; align-self: stretch; display: flex; align-items: center; }
  .nav-sub {
    position: absolute; top: 100%; left: 50%; z-index: 10;
    width: 352px; margin-top: 10px; padding: 8px;
    background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
    /* closing waits 80 ms, so a pointer that briefly slips off does not snap the panel shut */
    transition: opacity 0.18s ease 0.08s, transform 0.18s ease 0.08s, visibility 0s linear 0.26s;
  }
  .nav-sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; } /* hover bridge over the gap */
  .nav-sub::after {
    content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px;
    background: var(--white); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
    transform: translateX(-50%) rotate(45deg);
  }
  .nav-group.open .nav-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
}
/* hover opens it only for a real mouse; on touch screens the button does (no "sticky" hover) */
@media (min-width: 1201px) and (hover: hover) and (pointer: fine) {
  .nav-group:not(.hover-off):hover .nav-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  .nav-group:not(.hover-off):hover .nav-group-toggle { color: var(--gold-700); }
  .nav-group:not(.hover-off):hover .nav-caret { transform: rotate(180deg); }
}
@media (max-width: 1200px) {
  .nav-group { width: 100%; }
  .nav-sub { display: none; width: 100%; max-width: 440px; margin-top: 12px; }
  .nav-group.open .nav-sub { display: grid; }
  .main-nav .nav-sub-ks { background: var(--navy-50); }
}

/* ---------- Skip link + burger-menu usability (24 Sep 2026) ----------
   · Skip link: the first element of every page, off-screen until it gets keyboard focus; it jumps to <main id="main">.
   · Burger menu (<=1200 px): scrolls inside itself when it is taller than the screen. It hangs from the header's
     padding box, so it starts 86 px from the top (76 px on phones). main.js also closes it on a tap outside the
     header and when the window reaches desktop width. */
.skip-link {
  position: fixed; top: 10px; left: 16px; z-index: 200;
  padding: 12px 18px; border-radius: 8px;
  background: var(--navy-800); color: var(--white); font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:hover, .skip-link:focus { color: var(--white); }
.skip-link:focus { transform: none; }
@media (max-width: 1200px) {
  .main-nav { max-height: calc(100vh - 86px); max-height: calc(100dvh - 86px); overflow-y: auto; overscroll-behavior-y: contain; }
}
@media (max-width: 560px) {
  .main-nav { max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); }
}

/* ---------- LSTC AI – "coming soon" page (ltc-ai.html, 23 Sep 2026) ----------
   Every LSTC AI link (nav tab, services area 05, footer) leads here: the platform is
   in development, so the page only announces it. All motion is decorative and stops under
   prefers-reduced-motion. */
.ai-soon {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center;
  min-height: calc(100vh - 87px); min-height: calc(100svh - 87px);
  padding: 44px 0 52px; text-align: center; color: #fff;
  background: radial-gradient(120% 85% at 50% 0%, var(--navy-600) 0%, var(--navy-800) 45%, var(--navy-900) 100%);
}
.ai-soon > .container { position: relative; width: 100%; }
.ai-soon-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ai-soon-bg::before { /* dotted grid, fading out towards the edges */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(198, 160, 92, 0.3) 1px, transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(55% 60% at 50% 40%, #000 0%, transparent 100%);
  mask-image: radial-gradient(55% 60% at 50% 40%, #000 0%, transparent 100%);
}
.ai-soon-bg::after { /* soft gold glow behind the emblem */
  content: ""; position: absolute; left: 50%; top: 28%; width: 760px; height: 760px;
  background: radial-gradient(circle, rgba(198, 160, 92, 0.26) 0%, rgba(198, 160, 92, 0.07) 38%, transparent 66%);
  transform: translate(-50%, -50%);
  animation: ai-breathe 7s ease-in-out infinite alternate;
}
/* emblem: the scales of justice in a glass disc, two orbits with travelling points, a slow pulse */
.ai-soon-emblem { position: relative; width: 168px; height: 168px; margin: 0 auto 22px; }
.ai-soon-orbit {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(198, 160, 92, 0.38);
  animation: ai-spin 26s linear infinite;
}
.ai-soon-orbit::before {
  content: ""; position: absolute; top: -4px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-400); box-shadow: 0 0 14px 3px rgba(198, 160, 92, 0.75);
}
.ai-soon-orbit + .ai-soon-orbit {
  inset: 20px; border-style: dashed; border-color: rgba(255, 255, 255, 0.2);
  animation-duration: 17s; animation-direction: reverse;
}
.ai-soon-orbit + .ai-soon-orbit::before {
  top: -3px; left: calc(50% - 3px); width: 6px; height: 6px;
  background: #fff; box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.55);
}
.ai-soon-core {
  position: absolute; inset: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--gold-400);
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 72%), var(--navy-800);
  border: 1px solid rgba(198, 160, 92, 0.55);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 0 26px rgba(198, 160, 92, 0.16);
}
.ai-soon-core::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(198, 160, 92, 0.65);
  animation: ai-pulse 3.2s ease-out infinite;
}
.ai-soon-core svg { width: 40px; height: 40px; }
.ai-soon .eyebrow { color: var(--gold-400); }
.ai-soon-title { margin: 0; color: #fff; font-size: clamp(3.4rem, 9vw, 6.2rem); line-height: 1; letter-spacing: -0.01em; }
.ai-soon-accent {
  background: linear-gradient(100deg, var(--gold-500) 0%, #f6e3b8 42%, var(--gold-400) 58%, var(--gold-500) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: ai-shimmer 5s ease-in-out infinite alternate;
}
.ai-soon-word {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 16px auto 0; font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.2; color: var(--gold-100);
}
.ai-soon-word::before, .ai-soon-word::after {
  content: ""; flex: 0 0 auto; width: clamp(28px, 7vw, 84px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400));
}
.ai-soon-word::after { transform: scaleX(-1); }
.ai-soon-lead { max-width: 62ch; margin: 22px auto 0; color: rgba(255, 255, 255, 0.86); font-size: 1.08rem; }
.ai-soon .ai-features { max-width: 1000px; margin: 28px auto 0; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: left; }
.ai-soon .hero-actions { justify-content: center; margin-top: 30px; }
.ai-soon-note { max-width: 60ch; margin: 22px auto 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.62); }
@media (prefers-reduced-motion: no-preference) {
  .ai-soon-rise { animation: ai-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--d, 0) * 90ms); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-soon-orbit, .ai-soon-core::after, .ai-soon-bg::after, .ai-soon-accent { animation: none; }
}
@keyframes ai-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-pulse { from { transform: scale(1); opacity: 0.85; } to { transform: scale(1.85); opacity: 0; } }
@keyframes ai-breathe { from { opacity: 0.6; transform: translate(-50%, -50%) scale(0.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes ai-shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (max-width: 960px) {
  .ai-soon .ai-features { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
}
@media (max-width: 560px) {
  .ai-soon { min-height: calc(100vh - 77px); min-height: calc(100svh - 77px); padding: 36px 0 44px; }
  .ai-soon-emblem { width: 140px; height: 140px; margin-bottom: 20px; }
  .ai-soon-orbit + .ai-soon-orbit { inset: 17px; }
  .ai-soon-core { inset: 36px; }
  .ai-soon-core svg { width: 32px; height: 32px; }
  .ai-soon-bg::after { width: 520px; height: 520px; }
  .ai-soon-lead { font-size: 1rem; }
  .ai-soon .ai-features { grid-template-columns: 1fr; margin-top: 26px; }
  .ai-soon .hero-actions .btn { width: 100%; text-align: center; }
}

/* ---------- Home photo band (30 Sep 2026) ----------
   Took the place of the LSTC AI panel on the home page. Each .photo-slot holds a .photo-placeholder until the
   client's photos arrive; then an <img> replaces the placeholder and is cropped to the slot (4:3). */
.photo-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.photo-slot { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.photo-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--navy-50); border: 1.5px dashed rgba(178, 138, 69, 0.6); border-radius: var(--radius);
  color: var(--ink-soft); font-size: 0.88rem; font-weight: 600;
}
.photo-placeholder svg { width: 34px; height: 34px; color: var(--gold-500); }
@media (max-width: 560px) {
  .photo-band { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ---------- Consent-gated embeds: location map (home #location) + booking calendar (appointments.html), 30 Sep 2026 ----------
   Google Maps and Calendly set cookies, so the box ([data-embed-src]) first shows .embed-consent (text + "Show …" +
   "Open in …"); main.js adds the <iframe> and .loaded after cookie consent or a click on [data-embed-load].
   The booking box shows .booking-soon instead while it has no Calendly link (data-embed-src not starting with http). */
.map-embed, .booking-embed {
  position: relative; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
}
.map-embed { aspect-ratio: 16 / 7; min-height: 320px; }
/* below 780 px the ratio would turn min-height into a 731 px minimum width (sideways scroll at 561–778 px) */
@media (max-width: 779px) { .map-embed { aspect-ratio: auto; } }
.booking-embed { min-height: 420px; }
.booking-embed.loaded { height: 760px; background: var(--white); }
.map-embed iframe, .booking-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-consent, .booking-soon {
  position: absolute; inset: 0; padding: 32px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; color: #fff;
}
.loaded .embed-consent { display: none; }
.booking-embed:not([data-embed-src^="http"]) .embed-consent,
.booking-embed[data-embed-src^="http"] .booking-soon { display: none; }
.embed-icon { width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(198, 160, 92, 0.55); color: var(--gold-400); display: flex; align-items: center; justify-content: center; }
.embed-icon svg { width: 26px; height: 26px; }
.embed-consent p, .booking-soon p { color: rgba(255, 255, 255, 0.86); font-size: 0.95rem; max-width: 56ch; }
.booking-soon .booking-soon-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: #fff; }
.embed-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.embed-policy { color: var(--gold-400); font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; }
.embed-policy:hover { color: #fff; }
@media (max-width: 560px) {
  .map-embed { aspect-ratio: auto; min-height: 400px; }
  .booking-embed { min-height: 460px; }
  .booking-embed.loaded { height: 1000px; }
  .embed-actions { flex-direction: column; align-self: stretch; }
  .embed-actions .btn { text-align: center; }
}

/* ---------- Footer: social icons + cookie links (30 Sep 2026) ---------- */
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.site-footer .footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.78);
  transition: border-color 0.2s, color 0.2s;
}
.site-footer .footer-social a:hover, .site-footer .footer-social a:focus-visible { border-color: var(--gold-400); color: var(--gold-400); }
.footer-social svg { width: 18px; height: 18px; display: block; }
.footer-bottom { column-gap: 28px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; }
.footer-link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: rgba(255, 255, 255, 0.78);
}
.footer-link-btn:hover { color: var(--gold-400); }

/* ---------- Cookie banner (every page, 30 Sep 2026) ----------
   Fixed at the bottom until the visitor presses Accept / Decline (main.js); the footer's "Cookie Settings" reopens it. */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 150;
  max-width: 980px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px 28px;
  padding: 20px 24px; border-radius: 14px;
  background: var(--navy-900); color: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(198, 160, 92, 0.35); box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; /* never taller than the window (big zoom) */
}
.cookie-banner[hidden] { display: none; }
/* while the banner is open (12 Oct 2026): the open burger menu is not covered by it, the footer can scroll clear of it,
   and things the page scrolls to (form messages, focused fields) stop above it */
body:has(.main-nav.open) .cookie-banner { display: none; }
body:has(#cookie-banner:not([hidden])) .site-footer { padding-bottom: 170px; }
html:has(#cookie-banner:not([hidden])) { scroll-padding-bottom: 180px; }
.cookie-text { flex: 1 1 auto; min-width: 0; }
.cookie-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; margin-bottom: 4px; }
.cookie-text p:not(.cookie-title) { font-size: 0.9rem; line-height: 1.55; }
.cookie-text a { color: var(--gold-400); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cookie-text a:hover { color: #fff; }
.cookie-actions { flex: 0 0 auto; display: flex; gap: 10px; }
.cookie-actions .btn { padding: 10px 22px; font-size: 0.92rem; }
@media (max-width: 760px) {
  .cookie-banner { flex-direction: column; align-items: stretch; left: 12px; right: 12px; bottom: 12px; padding: 18px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  body:has(#cookie-banner:not([hidden])) .site-footer { padding-bottom: 310px; }
  html:has(#cookie-banner:not([hidden])) { scroll-padding-bottom: 300px; }
  .cookie-actions .btn { flex: 1 1 0; text-align: center; }
}

/* ---------- Announcement bar (every page, above the header; 30 Sep 2026) ----------
   One link to training.html. It scrolls away with the page; the sticky header stays. */
.announce-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px;
  padding: 9px 16px; background: var(--navy-900); color: #fff;
  font-size: 0.88rem; font-weight: 500; line-height: 1.4; text-align: center;
}
.announce-bar:hover, .announce-bar:focus-visible { color: var(--gold-400); }
.announce-bar:focus-visible { outline: 2px solid var(--gold-400); outline-offset: -4px; }
.announce-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-400); border: 1px solid rgba(198, 160, 92, 0.55); border-radius: 999px; padding: 2px 10px;
}
.announce-arrow { color: var(--gold-400); transition: transform 0.2s ease; }
.announce-bar:hover .announce-arrow, .announce-bar:focus-visible .announce-arrow { transform: translateX(3px); }
/* the burger menu hangs from the header, which sits below the bar at the top of the page
   (room for the bar on two rows: it wraps on narrow tablets; three lines on 320 px phones) */
@media (max-width: 1200px) {
  body:has(.announce-bar) .main-nav { max-height: calc(100vh - 86px - 64px); max-height: calc(100dvh - 86px - 64px); }
}
@media (max-width: 560px) {
  /* one flowing paragraph (label, text, arrow) instead of three stacked rows */
  .announce-bar { display: block; font-size: 0.82rem; padding: 8px 14px; }
  .announce-label { display: inline-block; margin-right: 8px; }
  .announce-arrow { display: inline-block; margin-left: 6px; }
  body:has(.announce-bar) .main-nav { max-height: calc(100vh - 76px - 76px); max-height: calc(100dvh - 76px - 76px); }
}

/* Price line in the Phase 1 box (training + registration) */
.phase .phase-price { margin-top: 10px; font-weight: 600; }

/* ---------- "I'm human" check (apply.html, Cloudflare Turnstile) ---------- */
.human-check { min-height: 65px; } /* room for the widget, so the form does not jump when it appears */

/* ---------- Cookie policy page (cookies.html, 30 Sep 2026) ---------- */
.policy { max-width: 780px; margin: 0 auto; }
.policy-updated { font-size: 0.85rem; font-weight: 600; color: var(--gold-700); margin-bottom: 1.4rem; }
.policy h2 { font-size: 1.4rem; margin: 2.2rem 0 0.7rem; }
.policy p { color: var(--ink-soft); margin-bottom: 0.9rem; }
.policy p a, .policy-items a { text-decoration: underline; text-underline-offset: 3px; }
.policy-items { list-style: none; display: grid; gap: 14px; margin: 1rem 0 1.2rem; }
.policy-items li {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; box-shadow: var(--shadow-sm);
}
.policy-items h3 { font-size: 1rem; }
.policy-items h3 code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
.policy-meta { display: block; margin-top: 3px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--gold-700); }
.policy-items p { margin: 8px 0 0; font-size: 0.94rem; }

/* ---------- Print ---------- */
@media print {
  .skip-link, .site-header, .lang-toggle, .nav-burger, .hero-actions, .cta-band, .form-card button, .cookie-banner, .embed-actions, .footer-social, .footer-legal, .announce-bar { display: none !important; }
  .hero, .hero.services-hero, .hero.training-hero, .hero.apply-hero, .hero.staff-hero, .vision-panel, .ai-panel, .ai-soon, .cta-band .container { background: none !important; color: var(--navy-800) !important; padding: 24px 0 !important; }
  .hero::before { display: none; }
  .hero h1, .hero .lead, .hero .eyebrow, .hero .hero-motto, .vision-panel h2, .vision-panel p, .ai-panel, .ai-panel h2, .ai-panel p, .ai-features li, .ai-soon-title, .ai-soon-lead, .ai-soon-note { color: var(--navy-800) !important; text-shadow: none !important; }
  .hero h1 .gold, .ai-panel .eyebrow, .vision-panel .eyebrow, .ai-soon .eyebrow, .ai-soon-word { color: var(--gold-700) !important; }
  .ai-features li { background: none; border-color: var(--line); }
  .ai-soon { min-height: 0 !important; }
  .ai-soon-bg, .ai-soon-emblem { display: none !important; }
  .ai-soon-accent { background: none !important; -webkit-text-fill-color: currentColor; color: var(--gold-700) !important; }
  .phase-current { background: none !important; border: 1.5px solid var(--navy-800); box-shadow: none; }
  .phase-current .phase-title, .phase-current p, .phase-current strong { color: var(--navy-800) !important; }
  .phase-current .phase-label { color: var(--gold-700) !important; }
  .info-strip .pill { color: var(--navy-800); border-color: var(--navy-800); background: none; }
  .info-strip .pill strong { color: var(--gold-700); }
  .site-footer { background: none; color: var(--ink); }
  .site-footer a, .site-footer h3 { color: var(--navy-800); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* Windows High Contrast / forced colours: the burger lines and the active SQ | EN button stay visible (12 Oct 2026) */
@media (forced-colors: active) {
  .nav-burger span { background: CanvasText; }
  .lang-toggle button.active { text-decoration: underline; }
}