/* ==========================================================================
   app-extra.css — styles for pages added to the original Syo Technol frontend.
   Uses only the design tokens defined in style.css (:root). Do not restyle
   anything that style.css already covers.
   ========================================================================== */

:root {
  --danger: #b42318;
  --danger-bg: #fdecea;
  --warning: #8a5a00;
  --warning-bg: #fff4d6;
  --success: #116b3a;
  --success-bg: #e3f8e9;
  --info: #04556a;
  --info-bg: #dcf3f8;
  --sidebar-w: 264px;
}

/* ============ Generic helpers ============ */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.muted { color: var(--muted); }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 36px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.vstack-sm > * + * { margin-top: 8px; }
.vstack > * + * { margin-top: 16px; }
.vstack-lg > * + * { margin-top: 28px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.prose { line-height: 1.75; color: var(--ink); }
.prose p, .prose ul, .prose ol { margin-bottom: 14px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--green); text-decoration: underline; }
.prose h2, .prose h3 { margin: 22px 0 10px; }
.pre-wrap { white-space: pre-wrap; word-break: break-word; }

/* Small buttons + extra variants (same pill style as .btn) */
.btn-sm { padding: 9px 16px; font-size: 14px; @media (max-width: 768px) { font-size: 18px; }  }
.btn-dark {
  background: var(--green);
  color: var(--text-on-dark);
}
.btn-dark:hover {
  background: var(--green-3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn-danger {
  background: var(--danger);
  color: var(--white);
}
.btn-danger:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(180, 35, 24, 0.25); }
.btn-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--green);
  font-weight: 700;
  font-size: 15px;
  @media (max-width: 768px) { font-size: 18px; }
  text-decoration: underline;
  cursor: pointer;
}
.btn[disabled], .btn.is-disabled { opacity: 0.55; pointer-events: none; }
.inline-form { display: inline; }

/* ============ Page hero for inner pages ============ */
.page-hero {
  position: relative;
  background: var(--green);
  color: var(--text-on-dark);
  padding-block: clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.page-hero-inner { position: relative; max-width: 760px; }
.page-hero .eyebrow { color: var(--lime); }
.page-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
}
.page-hero p { margin-top: 16px; color: var(--muted-on-dark); font-size: 17px; @media (max-width: 768px) { font-size: 18px; }  }
.page-section { padding-block: clamp(48px, 7vw, 88px); }

/* ============ Alerts / flash ============ */
.alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 600;
}
.alert ul { list-style: disc; padding-left: 18px; font-weight: 500; }
.alert-success { background: var(--success-bg); color: var(--success); border-color: rgba(17, 107, 58, 0.18); }
.alert-error { background: var(--danger-bg); color: var(--danger); border-color: rgba(180, 35, 24, 0.18); }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(138, 90, 0, 0.18); }
.alert-info { background: var(--info-bg); color: var(--info); border-color: rgba(4, 85, 106, 0.18); }

/* ============ Forms ============ */
/* minmax(0, 1fr): the form's column never grows past the form (a long label or button inside a
   narrow side panel used to push it off-screen). Its buttons may wrap to a second line there. */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.form > .btn { white-space: normal; text-align: center; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.fieldset { display: grid; gap: 12px; margin: 0; padding: 18px; border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.fieldset legend { padding: 0 6px; font-weight: 700; font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  }
.fieldset > .hint { margin: 0; font-size: 14.5px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.55; color: var(--muted); }
.copy-field { display: flex; gap: 10px; align-items: center; }
.copy-field .input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 14px; @media (max-width: 768px) { font-size: 18px; }  }
.copy-field .btn { flex-shrink: 0; }
.reset-link-panel { border-color: rgba(4, 85, 106, 0.25); background: var(--info-bg); }
.form-grid .span-2 { grid-column: 1 / -1; }
/* min-width: 0 lets a field (and a select with long options) shrink to a narrow column instead of
   pushing the layout wider than the screen; the select text is truncated, never the page. */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.field label, .field .label {
  font-size: 14.5px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  color: var(--ink);
}
.field .hint { font-size: 13.5px; color: var(--muted); }
.field .error { font-size: 14px; @media (max-width: 768px) { font-size: 18px; }  color: var(--danger); font-weight: 600; }
.input, .select, .textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(0, 11, 110, 0.2);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.textarea.code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14.5px; @media (max-width: 768px) { font-size: 18px; }  }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%), linear-gradient(135deg, var(--green) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(7, 166, 207, 0.55);
}
.is-invalid { border-color: var(--danger) !important; }
.input[type="file"] { padding: 10px; background: var(--offwhite); }
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  cursor: pointer;
}
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--green); flex-shrink: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Role picker on the register page */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid rgba(0, 11, 110, 0.2);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.choice input { position: absolute; opacity: 0; }
.choice strong { font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  }
.choice span { font-size: 14px; @media (max-width: 768px) { font-size: 18px; }  color: var(--muted); line-height: 1.5; }
.choice:has(input:checked) { border-color: var(--green); background: rgba(7, 166, 207, 0.18); box-shadow: inset 0 0 0 1px var(--green); }
.choice:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 3px; }
/* A fieldset used as a .field: drop the browser's grey frame so the legend reads like any other field label */
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 7px; }
/* Choice cards are <label>s inside .field, so undo the bold field-label style for their description */
.field .choice { font-weight: 400; }
.field .choice strong { font-weight: 700; color: var(--ink); }

/* ============ Auth pages ============ */
.auth-section {
  background: var(--offwhite);
  padding-block: clamp(48px, 8vw, 96px);
}
.auth-card {
  max-width: 500px;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(28px, 5vw, 44px);
}
.auth-card.wide { max-width: 640px; }
.auth-card h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; }
.auth-card .lead { color: var(--muted); margin-top: 8px; margin-bottom: 26px; font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  }
.auth-foot { margin-top: 22px; font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  color: var(--muted); text-align: center; }
.auth-foot a, .link { color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* Auth card (register etc.): no underline at rest, like the login page links; bold weight keeps them distinguishable */
.auth-card .link, .auth-foot a { text-decoration: none; }
.auth-card .link:hover, .auth-card .link:focus-visible,
.auth-foot a:hover, .auth-foot a:focus-visible { text-decoration: underline; }
.qr-box { display: inline-block; padding: 14px; background: var(--white); border: 1px solid var(--border); border-radius: 14px; }
.qr-box svg { width: 190px; height: 190px; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 15px; @media (max-width: 768px) { font-size: 18px; }  background: var(--offwhite); padding: 16px; border-radius: 12px; }

/* ============ Cards / panels ============ */
.panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
}
.panel + .panel { margin-top: 24px; }
/* Grid gaps already space panels; the stacking margin would push later columns down */
:is(.grid-2, .grid-3, .grid-4) > .panel + .panel { margin-top: 0; }

/* Compact activity lists inside panels (admin overview) */
.feed-list { list-style: none; margin: 0; padding: 0; }
.feed-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.feed-item:first-child { border-top: 0; padding-top: 4px; }
.feed-item:last-child { padding-bottom: 0; }
.feed-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.35; }
.feed-main .link { align-self: flex-start; font-weight: 700; text-decoration: none; }
.feed-main .link:hover, .feed-main .link:focus-visible { text-decoration: underline; }
.feed-meta { font-size: 14.5px; @media (max-width: 768px) { font-size: 18px; }  color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-item > :last-child { flex-shrink: 0; }
.feed-meta-wrap { white-space: normal; }

/* Admin user detail */
.user-detail { align-items: start; }
.user-actions { display: grid; gap: 18px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.user-danger { display: grid; gap: 10px; }
.table-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.table-actions form { margin: 0; }
.user-danger .panel-sub { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.activity-when { font-size: 14.5px; @media (max-width: 768px) { font-size: 18px; }  text-align: right; white-space: nowrap; }
.link-quiet { font-size: 14.5px; @media (max-width: 768px) { font-size: 18px; }  text-decoration: none; }
.link-quiet:hover, .link-quiet:focus-visible { text-decoration: underline; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.panel-title { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; }
.panel-sub { font-size: 14.5px; @media (max-width: 768px) { font-size: 18px; }  color: var(--muted); }
.panel.offwhite { background: var(--offwhite); }
.panel.dark { border-color: var(--border-dark); }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  }
.dl dt { color: var(--muted); font-weight: 600; }
.dl dd { font-weight: 600; word-break: break-word; }

/* Stat tiles (dashboard overviews) */
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--white);
}
.stat-label { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.stat-value { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--green); line-height: 1.1; }
.stat-note { font-size: 14px; @media (max-width: 768px) { font-size: 18px; }  color: var(--muted); }
.stat.lime { background: var(--lime); border-color: transparent; }
.stat.lime .stat-label, .stat.lime .stat-note { color: rgba(0, 8, 75, 0.7); }
.stat.dark { background: var(--green); border-color: var(--border-dark); }
.stat.dark .stat-value { color: var(--lime); }
.stat.dark .stat-label, .stat.dark .stat-note { color: var(--muted-on-dark); }

/* Course / catalogue cards — same surface language as .case-card */
.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.course-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.course-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.course-thumb { aspect-ratio: 16 / 9; background: linear-gradient(140deg, var(--green) 0%, var(--green-3) 100%); position: relative; overflow: hidden; }
.course-thumb img { width: 100%; height: 100%; object-fit: cover; }
.course-thumb .thumb-mark { position: absolute; inset: 0; display: grid; place-items: center; color: var(--lime); }
.course-thumb .thumb-mark .icon { width: 46px; height: 46px; }
.course-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1; }
.course-body h3 { font-size: 1.15rem; font-weight: 800; }
.course-body p { font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  color: var(--muted); }
.course-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.course-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price { font-size: 1.15rem; font-weight: 800; color: var(--green); }
.price-lg { font-size: 2rem; font-weight: 800; color: var(--green); letter-spacing: -0.02em; }

/* Filters bar */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 28px;
}
.filters .field { min-width: 160px; flex: 1; }
.filters .field.grow { flex: 2; }

/* Curriculum list (course detail + player sidebar) */
.curriculum { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--white); }
.curriculum-section + .curriculum-section { border-top: 1px solid var(--border); }
.curriculum-section h3 { font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 800; padding: 14px 18px; background: var(--offwhite); }
.curriculum-section ol { counter-reset: none; }
.lesson-item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  border-top: 1px solid var(--border); }
.lesson-item:first-child { border-top: 0; }
.lesson-item .grow { flex: 1; min-width: 0; }
.lesson-item a { font-weight: 600; }
.lesson-item a:hover { color: var(--green); text-decoration: underline; }
.lesson-item.current { background: rgba(7, 166, 207, 0.2); box-shadow: inset 3px 0 0 var(--green); }
.lesson-tick {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 11, 110, 0.3);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: var(--green);
}
.lesson-tick.done { background: var(--lime); border-color: var(--lime); }
.lesson-type { font-size: 13px; color: var(--muted); }

/* Admin activity log */
.activity-table td { vertical-align: top; }
.activity-table .badge { white-space: nowrap; }
.activity-table .link { text-decoration: none; }
.activity-table .link:hover, .activity-table .link:focus-visible { text-decoration: underline; }
.activity-sub { display: block; font-size: 13.5px; color: var(--muted); }
.activity-details { min-width: 200px; max-width: 340px; font-size: 14.5px; @media (max-width: 768px) { font-size: 18px; }  }
.activity-detail { display: block; line-height: 1.45; word-break: break-word; }
.activity-detail + .activity-detail { margin-top: 2px; }
.lesson-item > .lesson-type { white-space: nowrap; }
.grow { overflow-wrap: anywhere; }

/* ============ Badges ============ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--offwhite);
  color: var(--green);
}
.badge-lime { background: var(--lime); border-color: transparent; color: var(--green); }
.badge-dark { background: var(--green); border-color: transparent; color: var(--lime); }
.badge-success { background: var(--success-bg); color: var(--success); border-color: transparent; }
.badge-warning { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
.badge-danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.badge-info { background: var(--info-bg); color: var(--info); border-color: transparent; }
.badge-muted { background: #f1f1f7; color: var(--muted); border-color: transparent; }

/* ============ Progress bar ============ */
.progress { display: flex; align-items: center; gap: 10px; }
.progress-track { flex: 1; height: 8px; border-radius: 999px; background: rgba(0, 11, 110, 0.1); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), #07a6cf); }
.progress-fill.done { background: var(--lime); }
.progress-label { font-size: 14px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 700; color: var(--green); min-width: 42px; text-align: right; }

/* ============ Tables ============ */
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--white); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; @media (max-width: 768px) { font-size: 18px; }  }
.table th, .table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--offwhite); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: rgba(246, 247, 250, 0.7); }
.table .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.table td.strong, .table .strong { font-weight: 700; }
.empty {
  text-align: center;
  padding: 38px 18px;
  color: var(--muted);
  border: 1px dashed rgba(0, 11, 110, 0.2);
  border-radius: 16px;
  background: var(--white);
}
.empty strong { display: block; color: var(--ink); font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  margin-bottom: 4px; }

/* ============ Pagination ============ */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; align-items: center; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--border);
  font-size: 15px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 700; color: var(--green); background: var(--white);
}
.pagination a:hover { border-color: var(--green); }
.pagination .active { background: var(--green); border-color: var(--green); color: var(--lime); }
.pagination .disabled { opacity: 0.45; }

/* ============ Tabs (in-page navigation) ============ */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.tabs a { padding: 10px 14px; font-size: 15px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--green); }
.tabs a.active { color: var(--green); border-color: var(--lime); }

/* ============ Timeline (service order status) ============ */
.timeline { display: grid; gap: 0; }
.timeline-step { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
.timeline-step::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: rgba(0, 11, 110, 0.14); }
.timeline-step:last-child::before { display: none; }
.timeline-dot { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; border: 2px solid rgba(0, 11, 110, 0.25); background: var(--white); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--green); z-index: 1; }
.timeline-step.done .timeline-dot { background: var(--lime); border-color: var(--lime); }
.timeline-step.current .timeline-dot { background: var(--green); border-color: var(--green); color: var(--lime); }
.timeline-step.cancelled .timeline-dot { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.timeline-body strong { display: block; font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  }
.timeline-body span { font-size: 14px; @media (max-width: 768px) { font-size: 18px; }  color: var(--muted); }

/* ============ Message thread (tickets) ============ */
.thread { display: grid; gap: 14px; }
.message { border: 1px solid var(--border); border-radius: 16px; background: var(--white); padding: 16px 18px; }
.message.staff { background: var(--offwhite); }
.message.note { background: var(--warning-bg); border-color: rgba(138, 90, 0, 0.25); }
.message-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 14px; @media (max-width: 768px) { font-size: 18px; }  color: var(--muted); margin-bottom: 8px; }
.message-head strong { color: var(--ink); }
.attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.attachments a { font-size: 14px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 700; color: var(--green); text-decoration: underline; }

/* ============ Dashboard layout ============ */
.dash-body { background: var(--offwhite); }
.dash { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.dash-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--green);
  color: var(--text-on-dark);
  padding: 22px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  z-index: 1150;
}
.dash-sidebar .logo { padding: 2px 8px 10px; }
.dash-sidebar .logo-mark { width: 38px; height: 38px; }
.dash-nav-group { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-title { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime); padding: 8px 12px 6px; }
.dash-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 600;
  color: rgba(237, 238, 245, 0.8);
  transition: background 0.2s ease, color 0.2s ease;
}
.dash-link .icon { width: 19px; height: 19px; flex-shrink: 0; }
.dash-link:hover { background: rgba(237, 238, 245, 0.07); color: var(--white); }
.dash-link.active { background: rgba(7, 166, 207, 0.14); color: var(--lime); box-shadow: inset 3px 0 0 var(--lime); }
.dash-link .count { margin-left: auto; font-size: 12.5px; background: var(--lime); color: var(--green); border-radius: 999px; padding: 1px 8px; font-weight: 800; }
.dash-sidebar-foot { margin-top: auto; font-size: 13.5px; color: var(--muted-on-dark); padding: 0 12px; }

.dash-main { display: flex; flex-direction: column; min-width: 0; }
.dash-topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 70px;
  padding: 12px clamp(16px, 3vw, 36px);
  background: var(--white); /* opaque: content scrolling underneath must not show through */
  border-bottom: 1px solid var(--border);
}
.dash-topbar h1 { margin: 0; font-size: 1.2rem; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-user { position: relative; flex-shrink: 0; font-size: 15px; @media (max-width: 768px) { font-size: 18px; }  }
.dash-user-btn { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 10px 4px 4px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.2s ease; }
.dash-user-btn:hover, .dash-user.is-open .dash-user-btn { background: var(--offwhite); }
.dash-user-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.dash-user-chevron { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); transition: transform 0.2s ease; }
.dash-user.is-open .dash-user-chevron { transform: rotate(180deg); }
.dash-user-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1300; display: grid; gap: 2px; width: min(280px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--white); box-shadow: 0 20px 44px rgba(0, 11, 110, 0.14); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; }
.dash-user.is-open .dash-user-menu { opacity: 1; visibility: visible; transform: none; }
.dash-user-menu form { margin: 0; }
.dash-user-who { display: grid; gap: 2px; margin: 0 0 6px; padding: 8px 10px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; line-height: 1.35; @media (max-width: 768px) { font-size: 16px; }  }
.dash-user-who strong { color: var(--ink); font-size: 15px; font-weight: 700; @media (max-width: 768px) { font-size: 18px; }  }
.dash-user-who span { color: var(--muted); overflow-wrap: anywhere; }
.dash-user-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; transition: background-color 0.15s ease; }
.dash-user-item .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); }
.dash-user-item:hover { background: var(--offwhite); color: var(--ink); }
.dash-user-item:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .dash-user-btn, .dash-user-chevron, .dash-user-menu, .dash-user-item { transition: none; }
}
/* Ring keeps white/transparent avatars visible against the white topbar */
.dash-user .avatar-sm { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--green); color: var(--lime); display: grid; place-items: center; font-size: 14px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 800; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.12); }
.dash-user .avatar-sm.has-photo { position: relative; background: var(--white); }
.dash-user .avatar-sm.has-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 30%; border-radius: inherit; }
.dash-user-meta { display: flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.2; }
.dash-user-name { font-weight: 700; line-height: 1.2; white-space: nowrap; }
.dash-user-role { font-size: 13px; line-height: 1.2; color: var(--muted); }
.dash-toggle { display: none; border-color: var(--border); }
.dash-toggle span { background: var(--green); }
.dash-content { padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: 24px; }
.dash-content > .alert { margin-bottom: 0; }
.dash-backdrop { display: none; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.page-actions h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; }

/* Sortable lists (drag-and-drop reorder) */
.sortable { display: grid; gap: 8px; }
.sortable-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--white); }
.sortable-item.dragging { opacity: 0.5; border-style: dashed; }
.sortable-item.drag-over { border-color: var(--green); box-shadow: 0 0 0 2px var(--lime); }
.drag-handle { cursor: grab; color: var(--muted); font-size: 18px; line-height: 1; user-select: none; padding: 2px 4px; }
.sortable-item .grow { flex: 1; min-width: 0; }
.section-block { border: 1px solid var(--border); border-radius: 16px; padding: 16px; background: var(--offwhite); }
.section-block + .section-block { margin-top: 14px; }
/* Grid items default to min-width: auto, which let a lesson row's buttons push the block past the panel on phones */
.sortable > * { min-width: 0; }
@media (max-width: 560px) {
  .section-block { padding: 12px; }
  /* Lesson rows: title takes the full line, the ↑ ↓ Edit buttons wrap underneath it */
  .sortable-item { flex-wrap: wrap; gap: 8px 10px; padding: 12px; }
  .sortable-item .grow { flex: 1 1 calc(100% - 48px); }
  .sortable-item > .btn:first-of-type { margin-left: 22px; }
}

/* ============ Lesson player ============ */
.player-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.player-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.player-frame iframe, .player-frame #ytPlayer { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-side { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; }
.player-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.player-status { font-size: 14.5px; @media (max-width: 768px) { font-size: 18px; }  color: var(--muted); }

/* ============ Chart (admin revenue) ============ */
.chart { width: 100%; height: auto; display: block; }
.chart .bar { fill: var(--green); }
.chart .bar:hover { fill: #07a6cf; }
.chart .bar.current { fill: var(--lime); }
.chart text { font-family: var(--font); font-size: 12px; fill: var(--muted); }
.chart .grid-line { stroke: rgba(0, 11, 110, 0.1); stroke-width: 1; }

/* ============ Slot picker ============ */
.slot-day { margin-bottom: 18px; }
.slot-day h3 { font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 800; margin-bottom: 10px; }
.slot-list { display: flex; flex-wrap: wrap; gap: 8px; }
.slot { position: relative; }
.slot input { position: absolute; opacity: 0; }
.slot span { display: inline-block; padding: 9px 14px; border: 1px solid rgba(0, 11, 110, 0.22); border-radius: 999px; font-size: 15px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 700; cursor: pointer; background: var(--white); }
.slot input:checked + span { background: var(--green); border-color: var(--green); color: var(--lime); }
.slot input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }

/* ============ Package cards ============ */
.package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.package-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
.package-card.featured { background: var(--green); color: var(--text-on-dark); border-color: var(--border-dark); }
.package-card.featured .price-lg { color: var(--lime); }
.package-card.featured .muted { color: var(--muted-on-dark); }
.package-card h3 { font-size: 1.2rem; font-weight: 800; }
.feature-list { display: grid; gap: 8px; font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  }
.feature-list li { display: flex; gap: 8px; }
.feature-list li::before { content: "✓"; color: var(--green); font-weight: 800; }
.package-card.featured .feature-list li::before { color: var(--lime); }
.package-card .btn { margin-top: auto; }

/* Verify page result */
.verify-result { text-align: center; }
.verify-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; font-size: 34px; font-weight: 800; }
.verify-icon.valid { background: var(--lime); color: var(--green); }
.verify-icon.revoked { background: var(--danger-bg); color: var(--danger); }
.verify-icon.missing { background: #f1f1f7; color: var(--muted); }

/* Contact page */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.contact-aside .contact-chips { justify-content: flex-start; }

/* Error pages */
.error-code { font-size: clamp(4rem, 12vw, 7rem); font-weight: 800; letter-spacing: -0.04em; color: var(--lime); line-height: 1; }
/* 500 page: the support reference, on the navy hero (light text, monospace code) */
.error-detail { margin-top: 10px; font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  color: rgba(237, 238, 245, 0.85); }
.error-ref { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0.04em; color: var(--white); }

/* ============ Responsive ============ */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player-layout { grid-template-columns: 1fr; }
  .player-side { position: static; max-height: none; }
}

@media (max-width: 992px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 86vw);
    transform: translateX(-102%);
    transition: transform 0.3s ease;
  }
  .dash.menu-open .dash-sidebar { transform: translateX(0); box-shadow: var(--shadow); }
  .dash.menu-open .dash-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 6, 60, 0.45); z-index: 1100; }
  .dash-toggle { display: flex; }
  .course-grid, .grid-3, .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4, .course-grid, .package-grid, .form-grid, .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-user-meta { display: none; }
  .dl { grid-template-columns: 1fr; gap: 2px 0; }
  .dl dd { margin-bottom: 10px; }
  .table th, .table td { padding: 11px 12px; }
  .codes { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .course-card, .dash-sidebar { transition: none; }
}

@media print {
  .dash-sidebar, .dash-topbar, .dash-backdrop, .form-actions, .announce, .header, .footer, .back-top { display: none !important; }
  .dash { display: block; }
  .dash-body, .dash-content { background: #fff; padding: 0; }
  .panel { border: 0; }
}

/* ============ Confirmation dialog ============ */
.confirm-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  max-width: min(440px, 92vw);
  margin: auto; /* the original CSS reset zeroes the margin <dialog> needs for centring */
  box-shadow: var(--shadow);
  color: var(--ink);
}
.confirm-dialog::backdrop { background: rgba(0, 6, 60, 0.5); }
.confirm-dialog .confirm-text { font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 700; margin-bottom: 20px; }
.confirm-dialog .form-actions { justify-content: flex-end; }

/* Whole home-page service card is clickable (link on the title). */
.service-card { position: relative; }
.stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

/* Two-column page layouts with custom column widths (set inline) stack on tablets and phones. */
@media (max-width: 992px) {
  .grid-2[style*="grid-template-columns"],
  .player-layout[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Long button labels wrap instead of pushing the page sideways on small phones (new pages only). */
@media (max-width: 620px) {
  .dash-content .btn,
  .auth-card .btn,
  .page-section .panel .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
  .input[type="file"] { min-width: 0; max-width: 100%; }
}

/* Nav actions: Log in link beside the "Let's Talk" button (announcement bar removed) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

/* Syo Technol logo image (replaces the original SVG mark + text wordmark) */
.logo-img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
}
.footer .logo-img { height: 46px; }
.dash-sidebar .logo-img { height: 34px; }
@media (max-width: 480px) {
  .header .logo-img { height: 34px; }
}

/* ============ Hero (refined layout) ============
   Same tokens as style.css; tighter type scale so the hero fits one screen. */
.hero--refined {
  padding-block: clamp(64px, 9vh, 104px) clamp(64px, 9vh, 96px);
}

.hero--refined .hero-title {
  font-size: clamp(2.35rem, 4.2vw, 3.7rem);
  line-height: 1.04;
  max-width: 11.5em;
  text-wrap: balance;
  margin-bottom: 22px;
}

.hero--refined .hero-sub {
  max-width: 46ch;
  color: rgba(237, 238, 245, 0.8);
  margin-bottom: 32px;
}

.hero--refined .hero-cta {
  margin-bottom: 40px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 0;
  margin: 0;
  padding-top: 26px;
  border-top: 1px solid rgba(237, 238, 245, 0.12);
}

.hero-stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end; /* reversed column: keeps the figures top-aligned */
  gap: 4px;
  padding-inline: 28px;
  border-left: 1px solid rgba(237, 238, 245, 0.12);
}

.hero-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.hero-stat dd {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--lime);
}

.hero-stat dt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237, 238, 245, 0.6);
}

.hero--refined .hero-img-wrap img {
  height: clamp(420px, 62vh, 560px);
}

@media (max-width: 620px) {
  .hero--refined { padding-block: 56px 64px; }
  .hero-stat { padding-inline: 16px; }
  .hero-stat dd { font-size: 22px; }
  .hero-stat dt { font-size: 12px; letter-spacing: 0.06em; }
  .hero--refined .hero-img-wrap img { height: 360px; }
}

/* ============ Syo Technol brand finish ============
   Palette: primary #07a6cf (--lime token), secondary #000b6e (--green token).
   Token names are kept from the original design so every component follows. */
:root {
  --brand-gradient: linear-gradient(135deg, #07a6cf 0%, #41bbda 100%);
  --navy-gradient: linear-gradient(160deg, #000b6e 0%, #00084e 62%, #00063b 100%);
}

/* Deep navy surfaces with a soft blue light source */
.hero,
.page-hero {
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(7, 166, 207, 0.3), transparent 62%),
    radial-gradient(700px 480px at -6% 108%, rgba(6, 138, 172, 0.22), transparent 60%),
    var(--navy-gradient);
}

.dark,
.dash-sidebar {
  background:
    radial-gradient(800px 420px at 100% 0%, rgba(7, 166, 207, 0.16), transparent 60%),
    var(--navy-gradient);
}

.footer {
  background:
    radial-gradient(700px 360px at 0% 0%, rgba(7, 166, 207, 0.1), transparent 60%),
    #00063b;
}

/* Glassy sticky header */
.header {
  background: rgba(0, 11, 110, 0.97);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}

/* Gradient highlight word */
.hero-title .hl,
.cta-title .hl {
  background: linear-gradient(90deg, #07a6cf 0%, #7fd1e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Primary buttons: see "Buttons" below (flat fill, white label). */

.btn-primary:focus-visible,
.btn:focus-visible {
  outline: 3px solid #7fd1e6;
  outline-offset: 3px;
}

/* Feature card in the brand colour */
.card-lime {
  background: var(--brand-gradient);
  box-shadow: 0 24px 50px rgba(7, 166, 207, 0.28);
}

.card-lime .feature-icon {
  background: var(--green);
}

/* Cards: crisper edges and blue-tinted depth on hover */
.feature-card,
.service-card,
.case-card,
.info-card,
.course-card,
.package-card,
.panel {
  border-color: rgba(0, 11, 110, 0.08);
}

.service-card:hover,
.case-card:hover,
.feature-card:hover {
  box-shadow: 0 24px 54px rgba(0, 11, 110, 0.12);
}

::selection {
  background: rgba(7, 166, 207, 0.3);
  color: inherit;
}

/* Icons whose shapes had no fill set rendered black: tint them with the current colour */
.trust-stars .star,
.quote-mark {
  fill: currentColor;
}

#i-chip rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* Contact chips: keep the icon on the same line as its text */
.contact-chips li > a,
.contact-chips li > span,
.footer-contact li > a,
.footer-contact li > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-contact li > span { align-items: flex-start; }
.footer-contact li > span .icon { margin-top: 3px; flex-shrink: 0; }

/* ============ About (bento layout) ============ */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.about-copy .section-title {
  max-width: 13em;
  text-wrap: balance;
  margin-bottom: 18px;
}

.about-text {
  max-width: 46ch;
  font-size: 16.5px;
  @media (max-width: 768px) { font-size: 18px; }
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 26px;
}

.about-list {
  display: grid;
  gap: 14px;
  margin-bottom: 32px;
}

.about-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  line-height: 1.55;
  color: var(--muted);
}

.about-list strong {
  color: var(--ink);
  font-weight: 700;
}

.about-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 1px;
  border-radius: 8px;
  background: rgba(7, 166, 207, 0.14);
  color: var(--green);
}

.about-check .icon {
  width: 14px;
  height: 14px;
}

.about-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.bento-media {
  position: relative;
  grid-column: 1 / -1;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 30px 60px rgba(0, 11, 110, 0.16);
}

.bento-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.bento-media:hover img {
  transform: scale(1.04);
}

.bento-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 14px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  color: var(--green);
  box-shadow: var(--shadow-sm);
}

.bento-badge .icon {
  width: 16px;
  height: 16px;
  color: var(--lime);
}

.bento-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border-radius: var(--radius);
  min-height: 100%;
}

.bento-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.bento-card p {
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  line-height: 1.65;
}

.bento-card--navy {
  background:
    radial-gradient(320px 200px at 100% 0%, rgba(7, 166, 207, 0.25), transparent 70%),
    var(--green);
  color: var(--text-on-dark);
}

.bento-card--navy h3 { color: var(--white); }
.bento-card--navy p { color: var(--muted-on-dark); }

.bento-card--blue {
  background: var(--brand-gradient);
  color: var(--green);
}

.bento-card--blue p { color: rgba(0, 11, 110, 0.82); }

.bento-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 13px;
}

.bento-card--navy .bento-icon { background: rgba(7, 166, 207, 0.18); color: var(--lime); }
.bento-card--blue .bento-icon { background: var(--green); color: var(--lime); }

.bento-icon .icon { width: 22px; height: 22px; }

@media (max-width: 992px) {
  .about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .about-bento { grid-template-columns: 1fr; }
  .bento-media { aspect-ratio: 4 / 3; }
}

#i-compass circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* ============ CTA (split layout) ============ */
.cta--split {
  text-align: left;
}

.cta-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.cta--split .cta-title {
  max-width: 12em;
  text-wrap: balance;
}

.cta--split .cta-text {
  max-width: 46ch;
  margin-bottom: 32px;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.cta-buttons .btn-outline-light .icon {
  width: 19px;
  height: 19px;
}

.cta-card {
  padding: clamp(26px, 3vw, 36px);
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(237, 238, 245, 0.14);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px rgba(0, 6, 60, 0.45);
}

.cta-card-title {
  font-size: 14px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin-bottom: 18px;
}

.cta-contact {
  display: grid;
}

.cta-contact li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-block: 16px;
  border-top: 1px solid rgba(237, 238, 245, 0.1);
}

.cta-contact li:first-child {
  border-top: 0;
  padding-top: 0;
}

.cta-contact-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 13px;
  background: rgba(7, 166, 207, 0.16);
  color: var(--lime);
}

.cta-contact-icon .icon {
  width: 20px;
  height: 20px;
}

.cta-contact-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  line-height: 1.5;
  color: var(--white);
  overflow-wrap: anywhere;
}

.cta-contact-body a:hover {
  color: var(--lime);
}

.cta-contact-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}

.cta-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(7, 166, 207, 0.12);
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  color: var(--lime);
  transition: background 0.25s ease;
}

.cta-card-link:hover {
  background: rgba(7, 166, 207, 0.2);
}

@media (max-width: 992px) {
  .cta-split { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .cta-buttons .btn { width: 100%; justify-content: center; }
}

/* ============ Why choose us (reasons grid) ============ */
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.why-intro {
  position: sticky;
  top: 120px;
}

.why-intro .section-title {
  max-width: 11em;
  text-wrap: balance;
  margin-bottom: 18px;
}

.why-text {
  max-width: 44ch;
  font-size: 16.5px;
  @media (max-width: 768px) { font-size: 18px; }
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 30px;
}

.why-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 11, 110, 0.08);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0, 11, 110, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}

/* Brand gradient bar that grows on hover */
.why-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 100%;
  background: var(--brand-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.why-card:hover {
  transform: translateY(-6px);
  border-color: rgba(7, 166, 207, 0.35);
  box-shadow: 0 24px 50px rgba(0, 11, 110, 0.12);
}

.why-card:hover::after {
  transform: scaleX(1);
}

.why-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.why-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(7, 166, 207, 0.12);
  color: var(--green);
  transition: background 0.3s ease, color 0.3s ease;
}

.why-card:hover .why-icon {
  background: var(--green);
  color: var(--lime);
}

.why-icon .icon {
  width: 24px;
  height: 24px;
}

.why-num {
  font-size: 14px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(0, 11, 110, 0.28);
}

.why-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.why-card p {
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  line-height: 1.65;
  color: var(--muted);
}

@media (max-width: 992px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-intro { position: static; }
}

@media (max-width: 560px) {
  .why-cards { grid-template-columns: 1fr; }
}

/* ============ Services (rich cards, navy on hover) ============ */
.svc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.svc-head .section-title {
  max-width: 13em;
  text-wrap: balance;
  margin-bottom: 14px;
}

.svc-intro {
  max-width: 52ch;
  font-size: 16.5px;
  @media (max-width: 768px) { font-size: 18px; }
  line-height: 1.7;
  color: var(--muted);
}

.svc-head .btn {
  flex-shrink: 0;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(26px, 3vw, 36px);
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid rgba(0, 11, 110, 0.08);
  background: var(--white);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}

/* Navy layer that fades in on hover */
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(420px 240px at 100% 0%, rgba(7, 166, 207, 0.3), transparent 70%),
    var(--green);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.svc-card:hover,
.svc-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0, 11, 110, 0.22);
}

.svc-card:hover::before,
.svc-card:focus-within::before {
  opacity: 1;
}

.svc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.svc-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--brand-gradient);
  color: var(--green);
  box-shadow: 0 12px 26px rgba(7, 166, 207, 0.3);
}

.svc-icon .icon {
  width: 26px;
  height: 26px;
}

.svc-num {
  font-size: 15px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(0, 11, 110, 0.25);
  transition: color 0.35s ease;
}

.svc-card h3 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color 0.35s ease;
}

.svc-card p {
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  line-height: 1.65;
  color: var(--muted);
  transition: color 0.35s ease;
}

.svc-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 11, 110, 0.08);
  transition: border-color 0.35s ease;
}

.svc-price {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(7, 166, 207, 0.12);
  font-size: 14px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 800;
  color: var(--green);
  transition: background 0.35s ease, color 0.35s ease;
}

.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  color: var(--green);
  transition: color 0.35s ease, gap 0.35s ease;
}

.svc-card:hover h3,
.svc-card:focus-within h3 { color: var(--white); }
.svc-card:hover p,
.svc-card:focus-within p { color: var(--muted-on-dark); }
.svc-card:hover .svc-num,
.svc-card:focus-within .svc-num { color: rgba(237, 238, 245, 0.4); }
.svc-card:hover .svc-card-foot,
.svc-card:focus-within .svc-card-foot { border-color: rgba(237, 238, 245, 0.14); }
.svc-card:hover .svc-price,
.svc-card:focus-within .svc-price { background: rgba(7, 166, 207, 0.2); color: var(--lime); }
.svc-card:hover .svc-link,
.svc-card:focus-within .svc-link { color: var(--lime); gap: 12px; }

@media (max-width: 760px) {
  .svc-head { flex-direction: column; align-items: flex-start; }
  .svc-grid { grid-template-columns: 1fr; }
}

/* ============ Portfolio (bento gallery) ============ */
.folio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(220px, 22vw, 290px);
  gap: 20px;
}

.folio-tile {
  position: relative;
  margin: 0;
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  background: var(--green);
  box-shadow: 0 18px 40px rgba(0, 11, 110, 0.1);
}

.folio-tile--tall {
  grid-row: span 2;
}

.folio-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.folio-tile:hover img {
  transform: scale(1.05);
}

.folio-tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 60px 22px 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 6, 60, 0.85) 100%);
  color: var(--white);
}

.folio-tile figcaption strong {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.folio-tag {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--lime);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}

.folio-web {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 34px);
  background:
    radial-gradient(480px 260px at 100% 0%, rgba(7, 166, 207, 0.3), transparent 70%),
    var(--navy-gradient);
  color: var(--text-on-dark);
}

.folio-web-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.folio-web-count {
  font-size: 14.5px;
  @media (max-width: 768px) { font-size: 18px; }
  color: var(--muted-on-dark);
}

.folio-web-count strong {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--lime);
  margin-right: 4px;
}

.folio-web h3 {
  max-width: 28ch;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--white);
}

.folio-web-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.folio-web-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(237, 238, 245, 0.18);
  background: rgba(255, 255, 255, 0.04);
  font-size: 14.5px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  color: var(--white);
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.folio-web-links a:hover {
  border-color: var(--lime);
  background: rgba(7, 166, 207, 0.14);
  color: var(--lime);
}

.folio-web-links .icon {
  width: 14px;
  height: 14px;
  color: var(--lime);
}

@media (max-width: 992px) {
  .folio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 260px; }
  .folio-web { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .folio-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .folio-tile { aspect-ratio: 4 / 3; }
  .folio-tile--tall { grid-row: auto; }
  .folio-web { grid-column: auto; aspect-ratio: auto; }
}

/* ============ Clients: editorial index ============
   Client names set as large type with slash separators; a chip filter dims other industries. */
.cx-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(0, 11, 110, 0.1);
}

.cx-head .section-title {
  max-width: 12em;
  text-wrap: balance;
}

.cx-stats {
  display: flex;
  gap: clamp(28px, 4vw, 56px);
  margin: 0;
}

.cx-stats > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 6px;
}

.cx-stats dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--green);
}

.cx-stats dt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cx-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: clamp(28px, 4vw, 40px);
}

.cx-chip {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(0, 11, 110, 0.14);
  background: var(--white);
  font: inherit;
  font-size: 14.5px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cx-chip:hover {
  border-color: var(--green);
  color: var(--green);
}

.cx-chip[aria-pressed="true"] {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.cx-chip:focus-visible {
  outline: 3px solid #7fd1e6;
  outline-offset: 2px;
}

.cx-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(0, 11, 110, 0.1);
}

.cx-foot p {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700;
  color: var(--ink);
}

@media (max-width: 760px) {
  .cx-head { flex-direction: column; align-items: flex-start; }

}

@media (prefers-reduced-motion: reduce) {
  .cl-tile a, .cl-site .icon { transition: none; }
}

/* ============ Orbit background: rings, grain and soft light ============
   Shared by every dark navy hero-style surface (home hero, inner-page heroes,
   the home CTA and error pages). Replaces the generic square grid.
   Move the ring centre per section with --orbit-x / --orbit-y. */
.orbit-bg {
  --orbit-x: 72%;
  --orbit-y: 46%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(1100px 700px at var(--orbit-x) var(--orbit-y), rgba(7, 166, 207, 0.55), transparent 65%),
    radial-gradient(900px 600px at 0% 100%, rgba(15, 25, 119, 0.6), transparent 60%),
    linear-gradient(165deg, #061071 0%, #000958 55%, #00063c 100%);
}

.orbit-bg .hero-grid,
.orbit-bg .cta-grid-bg {
  display: none;
}

.orbit-bg > .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Concentric orbit rings, fading out from the focal point */
.orbit-bg > .hero-bg::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background: repeating-radial-gradient(
    circle at var(--orbit-x) var(--orbit-y),
    rgba(127, 209, 230, 0.11) 0 1px,
    transparent 1.5px 72px
  );
  -webkit-mask-image: radial-gradient(circle at var(--orbit-x) var(--orbit-y), #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 62%);
  mask-image: radial-gradient(circle at var(--orbit-x) var(--orbit-y), #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 62%);
}

/* Fine film grain for depth */
.orbit-bg > .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hairline brand gradient along the bottom edge */
.orbit-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(7, 166, 207, 0.6) 50%, transparent 100%);
  z-index: 1;
}

/* Ring centre per surface */
.page-hero.orbit-bg { --orbit-x: 88%; --orbit-y: 40%; }
.cta.orbit-bg { --orbit-x: 76%; --orbit-y: 50%; }

/* Home hero: one focused light behind the photo, one deep pool bottom-left */
.hero--refined .glow-1 {
  width: 620px;
  height: 620px;
  top: 2%;
  right: 4%;
  background: rgba(7, 166, 207, 0.22);
  filter: blur(120px);
}

.hero--refined .glow-2 {
  width: 520px;
  height: 520px;
  bottom: -220px;
  left: -160px;
  background: rgba(7, 166, 207, 0.18);
  filter: blur(120px);
}

/* Photo: offset outline frame, hairline edge, deeper and softer shadow */
.hero--refined .hero-visual {
  isolation: isolate;
}

.hero--refined .hero-visual::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  z-index: -1;
  border: 1px solid rgba(127, 209, 230, 0.28);
  border-radius: 30px;
}

.hero--refined .hero-img-wrap {
  border-radius: 28px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 50px 100px -20px rgba(0, 5, 48, 0.75),
    0 30px 60px -30px rgba(7, 166, 207, 0.35);
}

/* Cleaner divider under the CTA row */
.hero--refined .hero-stats {
  border-top-color: rgba(127, 209, 230, 0.14);
}

.hero--refined .hero-stat {
  border-left-color: rgba(127, 209, 230, 0.14);
}

@media (max-width: 992px) {
  .hero--refined.orbit-bg { --orbit-x: 50%; --orbit-y: 78%; }
  .page-hero.orbit-bg { --orbit-x: 92%; --orbit-y: 30%; }
  .cta.orbit-bg { --orbit-x: 50%; --orbit-y: 78%; }
  .hero--refined .hero-visual::before { inset: 16px -12px -16px 12px; }
}

/* Hero headline: title case (no forced capitals) and extra weight.
   Manrope stops at 800, so a hairline stroke in the text colour adds weight without faux bold. */
.hero--refined .hero-title {
  text-transform: none;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  -webkit-text-stroke: 1.2px currentColor;
  paint-order: stroke fill;
}

.hero--refined .hero-title .hl {
  -webkit-text-stroke: 1.2px #41bbda;
}

/* ============ Buttons ============
   One shape across the project: 8px corners, flat fill, heavy label.
   Primary uses a deeper shade of the brand blue so white text stays readable (4.8:1). */
.btn {
  border-radius: 8px;
  padding: 14px 24px;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 800;
  letter-spacing: -0.005em;
}

.btn-lg {
  padding: 17px 30px;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
}

.btn-sm {
  padding: 9px 15px;
  font-size: 14px;
  @media (max-width: 768px) { font-size: 18px; }
  border-radius: 7px;
}

/* Same 44px height as the cart and account circles beside it */
.btn-nav {
  min-height: 44px;
  padding: 14px 22px;
  font-size: 14.5px;
  @media (max-width: 768px) { font-size: 18px; }
}

.btn-primary {
  background: #057c9a;
  color: var(--white);
  box-shadow: none;
}

.btn-primary:hover {
  background: #046a84;
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(5, 124, 154, 0.3);
}

.btn-dark:hover,
.btn-outline-dark:hover,
.btn-outline-light:hover,
.btn-danger:hover {
  transform: translateY(-1px);
}

.btn-outline-dark {
  border-color: rgba(0, 11, 110, 0.22);
}

.btn:focus-visible {
  outline: 3px solid #7fd1e6;
  outline-offset: 2px;
}

/* Three-sentence headline: sized so each sentence sits on its own line */
.hero--refined .hero-title {
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  max-width: none;
}

/* Headline line spacing: a little more air between the three sentences */
.hero--refined .hero-title {
  line-height: 1.16;
}

/* ============ Heading typeface: Raleway (Google Fonts), Cygre / General Sans as fallbacks ============
   Headings and big numbers; body text, buttons and forms use --font.
   Cygre (RandomMaerks, licensed via Gumroad) is self-hosted from public/assets/fonts/cygre/
   because it is not on Google Fonts and the CSP only allows fonts from self and
   fonts.gstatic.com. Until those files are added, headings fall back to General Sans
   (self-hosted, ITF Free Font License, public/assets/fonts/general-sans/). */
@font-face {
  font-family: "Cygre";
  src: url("../fonts/cygre/Cygre-Medium.woff2") format("woff2"),
       url("../fonts/cygre/Cygre-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cygre";
  src: url("../fonts/cygre/Cygre-SemiBold.woff2") format("woff2"),
       url("../fonts/cygre/Cygre-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cygre";
  src: url("../fonts/cygre/Cygre-Bold.woff2") format("woff2"),
       url("../fonts/cygre/Cygre-Bold.ttf") format("truetype");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans/GeneralSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans/GeneralSans-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  /* also serves 800: General Sans stops at 700 */
  src: url("../fonts/general-sans/GeneralSans-Bold.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-heading: "Raleway", "Cygre", "General Sans", "Mulish", ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.section-title,
.hero-title,
.cta-title,
.page-hero h1,
.panel-title,
.error-code,
.fc-num,
.hero-stat dd,
.clients-stats dd,
.folio-web-count strong,
.stat-value,
.price-lg {
  font-family: var(--font-heading);
  /* Raleway defaults to old-style figures; keep numbers at cap height */
  font-variant-numeric: lining-nums;
}

/* Headings are set tighter than body text: tighten tracking a touch */
.section-title,
.cta-title,
.page-hero h1 {
  letter-spacing: -0.025em;
}

/* Hero headline: the 800 weight is strong on its own, so drop the stroke trick */
.hero--refined .hero-title {
  font-weight: 800;
  letter-spacing: -0.03em;
  -webkit-text-stroke: 0;
}

.hero--refined .hero-title .hl {
  -webkit-text-stroke: 0;
}

/* ============ Consultation booking (guided steps + sticky summary) ============ */
.cs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.cs-steps {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.cs-step {
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid rgba(0, 11, 110, 0.08);
  background: var(--white);
}

.cs-step-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.cs-step-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--green);
  color: var(--lime);
  font-family: var(--font-heading);
  font-weight: 800;
}

.cs-step-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cs-step-sub {
  margin-top: 4px;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  color: var(--muted);
}

/* Day strip (shown once JS is running; without JS every day's times are listed) */
.cs-days {
  display: none;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 22px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.cs-js .cs-days { display: flex; }

.cs-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 78px;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0, 11, 110, 0.12);
  background: var(--offwhite);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  scroll-snap-align: start;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cs-day:hover { border-color: var(--green); }

.cs-day-dow,
.cs-day-mon {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cs-day-num {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
}

.cs-day-count {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #057c9a;
}

.cs-day[aria-selected="true"] {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.cs-day[aria-selected="true"] .cs-day-dow,
.cs-day[aria-selected="true"] .cs-day-mon { color: rgba(237, 238, 245, 0.7); }
.cs-day[aria-selected="true"] .cs-day-count { color: var(--lime); }

.cs-day:focus-visible {
  outline: 3px solid #7fd1e6;
  outline-offset: 2px;
}

/* Times */
.cs-times {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.cs-time-group + .cs-time-group { margin-top: 20px; }
.cs-js .cs-time-group { display: none; margin-top: 0; }
.cs-js .cs-time-group.is-active { display: block; }

.cs-time-day {
  margin-bottom: 12px;
  font-size: 15px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  color: var(--muted);
}

.cs-time-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}

.slot.cs-slot { display: block; }

.slot.cs-slot span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0, 11, 110, 0.14);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.slot.cs-slot strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}

.slot.cs-slot small {
  font-size: 13.5px;
  color: var(--muted);
}

.slot.cs-slot span:hover { border-color: #057c9a; }

.slot.cs-slot input:checked + span {
  background: rgba(7, 166, 207, 0.1);
  border-color: #057c9a;
  box-shadow: inset 0 0 0 1px #057c9a;
  color: inherit;
}

.slot.cs-slot input:checked + span strong { color: var(--green); }

.slot.cs-slot input:focus-visible + span {
  outline: 3px solid #7fd1e6;
  outline-offset: 2px;
}

.slot.cs-slot input:disabled + span {
  cursor: default;
  background: var(--offwhite);
}

.cs-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--offwhite);
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  color: var(--muted);
}

.cs-locked .icon { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; }

/* Summary */
.cs-summary {
  position: sticky;
  top: 100px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: calc(var(--radius) + 4px);
  background:
    radial-gradient(360px 220px at 100% 0%, rgba(7, 166, 207, 0.28), transparent 70%),
    var(--navy-gradient);
  color: var(--text-on-dark);
  box-shadow: 0 30px 60px rgba(0, 11, 110, 0.22);
}

.cs-summary-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}

.cs-summary-title {
  margin: 8px 0 20px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
}

.cs-summary-list {
  display: grid;
  margin: 0 0 22px;
}

.cs-summary-list > div {
  display: grid;
  gap: 4px;
  padding-block: 14px;
  border-top: 1px solid rgba(237, 238, 245, 0.12);
}

.cs-summary-list dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}

.cs-summary-list dt .icon { width: 16px; height: 16px; color: var(--lime); }

.cs-summary-list dd {
  margin: 0;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  color: var(--white);
}

.cs-summary-list dd.is-empty { color: rgba(237, 238, 245, 0.55); font-weight: 600; }

.cs-summary-fee dd {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.cs-how {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(237, 238, 245, 0.12);
  counter-reset: cs;
}

.cs-how li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  @media (max-width: 768px) { font-size: 18px; }
  line-height: 1.5;
  color: var(--muted-on-dark);
  counter-increment: cs;
}

.cs-how li::before {
  content: counter(cs);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 6px;
  background: rgba(7, 166, 207, 0.18);
  font-size: 12px;
  font-weight: 800;
  color: var(--lime);
}

@media (max-width: 992px) {
  .cs-layout { grid-template-columns: minmax(0, 1fr); }
  .cs-summary { position: static; }
}

/* ============ Academy catalogue ============ */
.ac-hero { padding-block: clamp(64px, 9vw, 104px) clamp(56px, 7vw, 84px); }

.ac-hero-inner {
  position: relative;
  max-width: 820px;
  text-align: center;
}

.ac-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  text-wrap: balance;
}

.ac-hero p {
  max-width: 56ch;
  margin-inline: auto;
}

.ac-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 640px;
  margin: 32px auto 0;
  padding: 8px 8px 8px 18px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 24px 50px rgba(0, 6, 60, 0.35);
}

.ac-search > .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--muted);
}

.ac-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  color: var(--ink);
}

.ac-search:focus-within {
  box-shadow: 0 0 0 3px #7fd1e6, 0 24px 50px rgba(0, 6, 60, 0.35);
}

.ac-perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 26px;
}

.ac-perks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 600;
  color: var(--muted-on-dark);
}

.ac-perks .icon { width: 17px; height: 17px; color: var(--lime); }

/* Category tabs */
.ac-section { padding-top: clamp(36px, 5vw, 56px); }

.ac-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(0, 11, 110, 0.1);
  scrollbar-width: none;
}

.ac-tab {
  position: relative;
  padding: 12px 16px;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.2s ease;
}

.ac-tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: #057c9a;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.ac-tab:hover { color: var(--ink); }
.ac-tab.is-active { color: var(--green); }
.ac-tab.is-active::after { transform: scaleX(1); }

/* Toolbar: count + chips */
.ac-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 22px 0 28px;
}

.ac-count { font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  color: var(--muted); }
.ac-count strong { color: var(--ink); font-weight: 800; }

.ac-chipsets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ac-chips {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  border-radius: 10px;
  border: 1px solid rgba(0, 11, 110, 0.1);
  background: var(--white);
}

.ac-chip {
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 14px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  white-space: nowrap;
  color: var(--muted);
  transition: background 0.2s ease, color 0.2s ease;
}

.ac-chip:hover { color: var(--ink); }
.ac-chip.is-active { background: var(--green); color: var(--white); }

.ac-tab:focus-visible,
.ac-chip:focus-visible {
  outline: 3px solid #7fd1e6;
  outline-offset: 2px;
}

/* Course grid and cards */
.ac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 24px;
}

.ac-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid rgba(0, 11, 110, 0.08);
  background: var(--white);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ac-card:hover {
  transform: translateY(-6px);
  border-color: rgba(7, 166, 207, 0.35);
  box-shadow: 0 26px 54px rgba(0, 11, 110, 0.13);
}

.ac-cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.ac-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Generated cover art: category tint + orbit rings + large icon */
.ac-cover-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-image: repeating-radial-gradient(circle at 78% 30%, rgba(255, 255, 255, 0.09) 0 1px, transparent 1.5px 36px);
}

.ac-cover-art .icon {
  width: 64px;
  height: 64px;
  color: rgba(255, 255, 255, 0.92);
  transition: transform 0.4s ease;
}

.ac-card:hover .ac-cover-art .icon { transform: scale(1.08) rotate(-4deg); }

.ac-tone-0 { background: linear-gradient(140deg, #000b6e 0%, #057c9a 100%); }
.ac-tone-1 { background: linear-gradient(140deg, #17217b 0%, #07a6cf 100%); }
.ac-tone-2 { background: linear-gradient(140deg, #00063b 0%, #057c9a 100%); }
.ac-tone-3 { background: linear-gradient(140deg, #000b6e 0%, #0690b3 100%); }

.ac-cover-tags {
  position: absolute;
  left: 14px;
  top: 14px;
  right: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ac-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--green);
}

.ac-tag-live { background: #fff; color: #b42318; }

.ac-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.2);
}

.ac-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 22px 22px 20px;
}

.ac-body h3 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.ac-body h3 a { color: var(--ink); }
.ac-body h3 a:hover { color: var(--green); }

.ac-body p {
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  line-height: 1.6;
  color: var(--muted);
}

.ac-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 2px;
}

.ac-meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 600;
  color: var(--muted);
}

.ac-meta .icon { width: 15px; height: 15px; color: #057c9a; }

.ac-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 11, 110, 0.08);
}

.ac-price {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.ac-price.is-free {
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(7, 166, 207, 0.14);
  font-size: 1rem;
  color: var(--green);
}

.ac-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  color: var(--green);
}

.ac-card:hover .ac-link .btn-arrow { transform: translateX(4px); }

@media (max-width: 560px) {
  .ac-search { padding-left: 14px; }
  .ac-search .btn { padding-inline: 16px; }
  .ac-toolbar { flex-direction: column; align-items: flex-start; }
  .ac-chipsets { width: 100%; }
  .ac-chips { max-width: 100%; overflow-x: auto; }
}

/* ============ Contact page ============ */
.ct-hero { padding-block: clamp(64px, 9vw, 100px) clamp(110px, 12vw, 140px); }
.ct-hero-inner { position: relative; max-width: 760px; text-align: center; }
.ct-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.ct-hero p { max-width: 56ch; margin-inline: auto; }

/* Channel cards overlap the hero */
.ct-channels {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: -64px;
}

.ct-channel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid rgba(0, 11, 110, 0.08);
  background: var(--white);
  box-shadow: 0 24px 50px rgba(0, 11, 110, 0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ct-channel:hover {
  transform: translateY(-4px);
  border-color: rgba(7, 166, 207, 0.4);
  box-shadow: 0 30px 60px rgba(0, 11, 110, 0.18);
}

.ct-channel:focus-visible { outline: 3px solid #7fd1e6; outline-offset: 3px; }

.ct-channel-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--green);
  color: var(--lime);
}

.ct-channel-icon .icon { width: 22px; height: 22px; }
.ct-channel-icon.ct-wa { background: #1fa855; color: #fff; }

.ct-channel-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.ct-channel-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ct-channel-text strong {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.ct-channel .btn-arrow { color: #057c9a; flex-shrink: 0; }
.ct-channel:hover .btn-arrow { transform: translateX(4px); }

/* Main layout */
.ct-section { padding-top: clamp(40px, 5vw, 64px); }

.ct-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.ct-form-card {
  padding: clamp(24px, 3.5vw, 40px);
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid rgba(0, 11, 110, 0.08);
  background: var(--white);
}

.ct-title {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.ct-sub {
  margin: 6px 0 26px;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  color: var(--muted);
}

/* Topic chips */
.ct-topics {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  min-width: 0;
}

.ct-topics legend {
  margin-bottom: 10px;
  font-size: 15px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  color: var(--ink);
}

.ct-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ct-topic { position: relative; }
.ct-topic input { position: absolute; opacity: 0; pointer-events: none; }

.ct-topic span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0, 11, 110, 0.14);
  background: var(--white);
  font-size: 15px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ct-topic span .icon { width: 16px; height: 16px; }
.ct-topic span:hover { border-color: #057c9a; color: var(--ink); }

.ct-topic input:checked + span {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.ct-topic input:checked + span .icon { color: var(--lime); }
.ct-topic input:focus-visible + span { outline: 3px solid #7fd1e6; outline-offset: 2px; }

.ct-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 11, 110, 0.08);
}

.ct-form-foot p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  @media (max-width: 768px) { font-size: 18px; }
  color: var(--muted);
}

.ct-form-foot p .icon { width: 16px; height: 16px; color: #057c9a; }

/* Side cards */
.ct-side { display: grid; gap: 18px; }

.ct-card {
  padding: 26px;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid rgba(0, 11, 110, 0.08);
  background: var(--white);
}

.ct-card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(7, 166, 207, 0.14);
  color: var(--green);
}

.ct-card-icon .icon { width: 21px; height: 21px; }

.ct-card h2 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.ct-card p {
  margin: 8px 0 16px;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  line-height: 1.6;
  color: var(--muted);
}

.ct-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  color: #057c9a;
}

.ct-card-link .icon { width: 14px; height: 14px; }
.ct-card-link:hover { color: var(--green); }

.ct-card-dark {
  border-color: transparent;
  background:
    radial-gradient(300px 200px at 100% 0%, rgba(7, 166, 207, 0.28), transparent 70%),
    var(--navy-gradient);
}

.ct-card-dark h2 { color: var(--white); }
.ct-card-dark p { color: var(--muted-on-dark); }
.ct-card-dark .ct-card-icon { background: rgba(7, 166, 207, 0.18); color: var(--lime); }

.ct-social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid rgba(0, 11, 110, 0.08);
  background: var(--white);
}

.ct-social > span { font-size: 15px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 700; color: var(--ink); }
.ct-social .social-link { color: var(--green); border-color: rgba(0, 11, 110, 0.14); }
.ct-social .social-link:hover { background: var(--green); color: var(--white); }

@media (max-width: 992px) {
  .ct-channels { grid-template-columns: 1fr; gap: 12px; }
  .ct-layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .ct-form-foot { flex-direction: column; align-items: stretch; }
  .ct-form-foot .btn { width: 100%; }
}

/* ============ Clients: friendly tile grid ============ */
.cl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.cl-tile[hidden] { display: none; }

.cl-tile a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "avatar name"
    "avatar type"
    "site site";
  grid-template-rows: auto auto 1fr;
  column-gap: 14px;
  row-gap: 2px;
  height: 100%;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(0, 11, 110, 0.08);
  background: var(--white);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cl-tile a:hover {
  transform: translateY(-4px);
  border-color: rgba(7, 166, 207, 0.4);
  box-shadow: 0 18px 40px rgba(0, 11, 110, 0.1);
}

.cl-tile a:focus-visible { outline: 3px solid #7fd1e6; outline-offset: 2px; }

.cl-avatar {
  grid-area: avatar;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cl-schools { background: rgba(7, 166, 207, 0.14); color: #04657e; }
.cl-ngo { background: rgba(31, 168, 85, 0.13); color: #12753a; }
.cl-media { background: rgba(7, 166, 207, 0.13); color: #04657e; }

.cl-name {
  grid-area: name;
  align-self: end;
  font-family: var(--font-heading);
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.cl-type {
  grid-area: type;
  align-self: start;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.cl-site {
  grid-area: site;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0, 11, 110, 0.12);
  font-size: 14px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 600;
  color: #057c9a;
}

.cl-site .icon {
  width: 13px;
  height: 13px;
  margin-left: auto;
  opacity: 0.6;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.cl-tile a:hover .cl-site .icon { opacity: 1; transform: translate(2px, -2px); }

@media (max-width: 560px) {
  .cl-grid { grid-template-columns: 1fr; gap: 8px; }
  /* Phones: compact one-line rows; the whole tile is the link */
  .cl-tile a {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "avatar name site"
      "avatar type site";
    padding: 12px 14px;
  }
  .cl-avatar { width: 40px; height: 40px; font-size: 15px; @media (max-width: 768px) { font-size: 18px; }  }
  .cl-site { margin: 0; padding: 0; border: 0; align-self: center; font-size: 0; }
  .cl-site .icon { width: 15px; height: 15px; margin: 0; }
}

/* Client logos: white badge with a hairline so every logo sits on the same ground */
.cl-avatar.cl-logo {
  background: var(--white);
  border: 1px solid rgba(0, 11, 110, 0.1);
  padding: 4px;
}

.cl-avatar.cl-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 561px) {
  .cl-avatar { width: 52px; height: 52px; }
}

/* Hero headline in uppercase */
.hero--refined .hero-title {
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.75rem, 2.75vw, 2.6rem);
  line-height: 1.2;
}

.hero--refined .hero-content {
  max-width: 620px;
}

/* ============ Login (one compact card on a brand gradient) ============
   Page: four close blue tones, no rings or texture. Card: logo + back link, then the form. */
.lx-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: linear-gradient(135deg, #000b6e 0%, #1c267e 38%, #057c9a 70%, #057c9a 100%);
}
.lx { width: 100%; display: grid; place-items: center; }
.lx-card {
  width: min(420px, 100%);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 32px 72px rgba(0, 5, 52, 0.38);
}

.lx-form { padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 34px); }
.lx-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}
.lx-logo img { display: block; height: 30px; width: auto; }
.lx-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.lx-back .icon { width: 14px; height: 14px; transform: rotate(180deg); }
.lx-back:hover { color: var(--green); }
.lx-form h1 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--green);
  margin: 0 0 4px;
}
.lx-sub { margin: 0 0 20px; font-size: 15px; @media (max-width: 768px) { font-size: 18px; }  color: var(--muted); }
.lx-fields .field { margin-bottom: 14px; }
.lx-fields .field label { font-size: 14.5px; @media (max-width: 768px) { font-size: 18px; }  }
.lx-fields .input { height: 46px; border-radius: 10px; font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  background: var(--white); }
.lx-fields .si-eye { top: 28px; width: 38px; height: 38px; }
.lx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 0 20px;
  font-size: 14.5px;
  @media (max-width: 768px) { font-size: 18px; }
}
.lx-link { font-weight: 700; color: #057c9a; }
.lx-link:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.lx-fields .btn-lg { padding: 14px 24px; font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  }
.lx-foot { margin: 20px 0 0; text-align: center; font-size: 15px; @media (max-width: 768px) { font-size: 18px; }  color: var(--muted); }

/* Show / hide password (eye button inside the field) */
.si-password { position: relative; }
.si-password .input { padding-right: 52px; }

.si-eye {
  position: absolute;
  right: 6px;
  top: 31px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.si-eye:hover { color: var(--green); background: rgba(0, 11, 110, 0.05); }
.si-eye[aria-pressed="true"] { color: #057c9a; }
.si-eye:focus-visible { outline: 3px solid #7fd1e6; outline-offset: 1px; }
.si-eye .icon { width: 20px; height: 20px; }


/* ============ Body typeface: TT Norms, Mulish as fallback ============
   Body text, buttons and forms use TT Norms (TypeType, commercial licence); headings use
   Raleway (--font-heading). TT Norms is not on Google Fonts, so it is self-hosted from
   public/assets/fonts/tt-norms/ (the CSP only allows fonts from self and fonts.gstatic.com).
   Until the licensed files are added there, body text falls back to Mulish (Google Fonts,
   loaded in the layouts). */
@font-face {
  font-family: "TT Norms";
  src: url("../fonts/tt-norms/TTNorms-Regular.woff2") format("woff2"),
       url("../fonts/tt-norms/TTNorms-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TT Norms";
  src: url("../fonts/tt-norms/TTNorms-Medium.woff2") format("woff2"),
       url("../fonts/tt-norms/TTNorms-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TT Norms";
  src: url("../fonts/tt-norms/TTNorms-Bold.woff2") format("woff2"),
       url("../fonts/tt-norms/TTNorms-Bold.woff") format("woff");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TT Norms";
  src: url("../fonts/tt-norms/TTNorms-ExtraBold.woff2") format("woff2"),
       url("../fonts/tt-norms/TTNorms-ExtraBold.woff") format("woff");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --font: "TT Norms", "Mulish", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ============ Landing page refresh (2026-10) ============
   Flat, balanced surfaces: navy (--green) and cyan (--lime) alternate with white and
   off-white; no glows, grain or orbit rings. One corner scale for the whole site:
   chips/tags 8px, buttons 10px, cards 16px. New home sections use the .lp- prefix. */
:root {
  --r-chip: 8px;
  --r-btn: 10px;
  --r-card: 16px;
}

/* Page side margins 30% smaller (2026-10-28). The white space each side of the content was
   (100vw - 1200px) / 2 + 40px; with a max width of 30vw + 840px and gutters at 70% it becomes
   exactly 70% of that at every width (1440px screen: 160px -> 112px; 1920px: 400px -> 280px).
   16px stays the floor so phones keep a comfortable edge. */
.container {
  max-width: calc(30vw + 840px);
  padding-inline: clamp(16px, 2.52vw, 28px);
}

/* Buttons, tags and chips on the shared scale */
.btn { border-radius: var(--r-btn); }
.btn-sm { border-radius: var(--r-chip); }
.pill,
.folio-tag { border-radius: var(--r-chip); }

/* ---------- Header: white bar, dark text ---------- */
.header {
  background: var(--white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--border);
}
.header.scrolled { box-shadow: 0 8px 24px rgba(0, 11, 110, 0.08); }

/* ~8% taller bar; logo 31px (38px, then less 10% twice, owner requests 2026-10-29) */
.header .nav { min-height: 90px; }
.header.scrolled .nav { min-height: 76px; }
.header .logo-img { height: 31px; }
@media (max-width: 480px) {
  .header .logo-img { height: 32px; }
}
/* Phones: the header shows the phone logo (swapped in by <picture> in partials/logo); sized by height so it keeps its shape */
@media (max-width: 768px) {
  .header .logo picture { display: block; }
  .header .logo-img { width: auto; height: 32px; }
}

/* Menu: bold (700) slate links; hover turns them brand blue (the Book A Service shade, 4.8:1 on white),
   the current page is deep navy. No boxes, no underline. */
.header .nav-links { gap: 4px; }
.header .nav-link {
  padding: 9px 14px;
  border-radius: var(--r-chip);
  font-weight: 700;
  color: #454d95;
  transition: color 0.2s ease;
}
.header .nav-link::after { display: none; }
.header .nav-link:hover { background: none; color: #057c9a; }
.header .nav-link.active { color: var(--green); }
.header .nav-link.active:hover { color: #057c9a; }

/* Outlined brand button (secondary actions next to a solid primary, e.g. "Ask a question") */
.btn-outline-brand {
  background: transparent;
  border: 1px solid #057c9a;
  color: #057c9a;
}
.btn-outline-brand:hover {
  background: rgba(5, 124, 154, 0.08);
  border-color: #046a84;
  color: #046a84;
  transform: translateY(-1px);
}
.header .nav-actions { gap: 12px; }

/* Account menu: circular profile icon + dropdown card with pill actions */
.nav-account { position: relative; }
.nav-account-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--green);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.nav-account-btn .icon { width: 20px; height: 20px; }
.nav-account-btn:hover,
.nav-account.is-open .nav-account-btn { background: rgba(7, 166, 207, 0.12); border-color: rgba(5, 124, 154, 0.45); }
.nav-account-btn:focus-visible { outline: 3px solid #7fd1e6; outline-offset: 2px; }
.nav-account-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 1300;
  display: grid;
  gap: 10px;
  width: 240px;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 20px 44px rgba(0, 11, 110, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
/* Invisible bridge so the menu stays open while the pointer crosses the gap */
.nav-account-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-account.is-open .nav-account-menu { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
  .nav-account:hover .nav-account-menu { opacity: 1; visibility: visible; transform: none; }
}
.nav-account-who { display: grid; gap: 2px; padding-bottom: 12px; margin: 0 0 2px; border-bottom: 1px solid var(--border); font-size: 14px; @media (max-width: 768px) { font-size: 18px; }  }
.nav-account-who strong { color: var(--ink); font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  }
.nav-account-who span { color: var(--muted); word-break: break-all; }
.nav-account-menu form { margin: 0; }
.nav-pill {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s ease;
}
.nav-pill--dark { background: var(--green); color: var(--white); }
.nav-pill--dark:hover { background: var(--green-3); color: var(--white); }
.nav-pill--light { background: #f1f1f7; color: var(--ink); }
.nav-pill--light:hover { background: #e5e6f0; color: var(--ink); }
.nav-pill:focus-visible { outline: 3px solid #7fd1e6; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .nav-account-menu { transition: none; }
}
/* Once the hamburger takes over, its menu carries the same account actions */
@media (max-width: 992px) {
  .nav-account { display: none; }
}
.header .hamburger { border-color: var(--border); }
.header .hamburger span { background: var(--green); }
.header .hamburger:focus-visible,
.header .nav-link:focus-visible {
  outline: 3px solid #7fd1e6;
  outline-offset: 3px;
}

/* Programme menu: nav item with a dropdown card (same card as the account menu) */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 600;
  line-height: inherit;
  cursor: pointer;
}
.nav-drop-caret { width: 12px; height: 12px; transition: transform 0.2s ease; }
.nav-drop.is-open .nav-drop-caret { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 1300;
  display: grid;
  gap: 4px;
  width: 300px;
  padding: 8px;
  margin: 0;
  list-style: none;
  border-radius: var(--r-card);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 20px 44px rgba(0, 11, 110, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
/* Invisible bridge so the menu stays open while the pointer crosses the gap */
.nav-drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-drop.is-open .nav-drop-menu { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
  .nav-drop:hover .nav-drop-menu { opacity: 1; visibility: visible; transform: none; }
  .nav-drop:hover .nav-drop-caret { transform: rotate(180deg); }
}
/* Each pathway: icon tile + title/description */
.nav-drop-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: var(--r-chip);
  color: var(--ink);
  transition: background 0.2s ease;
}
.nav-drop-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(7, 166, 207, 0.1);
  color: #212b81;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.nav-drop-icon .icon { width: 22px; height: 22px; }
.nav-drop-text { display: grid; gap: 2px; min-width: 0; }
.nav-drop-text strong { font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 700; }
.nav-drop-text span { font-size: 14px; @media (max-width: 768px) { font-size: 18px; }  color: var(--muted); }
.nav-drop-link:hover,
.nav-drop-link.is-active { background: rgba(7, 166, 207, 0.08); color: var(--green); }
.nav-drop-link:hover .nav-drop-icon,
.nav-drop-link.is-active .nav-drop-icon { background: #212b81; color: var(--white); transform: scale(1.04); }
.nav-drop-link:focus-visible { outline: 3px solid #7fd1e6; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .nav-drop-menu, .nav-drop-caret, .nav-drop-icon { transition: none; }
}

/* ---------- Mobile menu: a white panel that drops down from the header over a dimmed page ----------
   Replaces the old full-screen navy overlay. The header (z-index 1200) stays on top with the
   hamburger turned into a close button; --mm-top is the header's bottom edge, set by script.js. */
.mobile-menu {
  display: block;
  inset: 0;
  padding: 0;
  background: none;
  z-index: 1100;
  opacity: 1; /* the panel and backdrop fade themselves; visibility waits for them on close */
  transition: visibility 0.25s ease;
}
.mm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 8, 75, 0.42);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mm-panel {
  position: absolute;
  top: var(--mm-top, 76px);
  left: 0;
  right: 0;
  max-height: calc(100dvh - var(--mm-top, 76px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 20px 22px;
  background: var(--white);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 24px 48px rgba(0, 11, 110, 0.18);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Visible at once when opening (so focus can move in); the 0.25s delay only applies on close */
.mobile-menu.open { transition: none; }
.mobile-menu.open .mm-backdrop { opacity: 1; }
.mobile-menu.open .mm-panel { opacity: 1; transform: none; }

/* Page links: tidy rows with a chevron; the current page gets a cyan bar and tint */
.mobile-menu .mm-list { display: block; list-style: none; margin: 0; padding: 0; text-align: left; }
.mm-list li + li { border-top: 1px solid var(--border); }
.mobile-menu .mm-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}
.mm-chevron { width: 14px; height: 14px; flex: none; color: var(--muted); transition: transform 0.2s ease, color 0.2s ease; }
.mobile-menu .mm-link:hover { color: #057c9a; }
.mobile-menu .mm-link:hover .mm-chevron { transform: translateX(3px); color: #057c9a; }
.mobile-menu .mm-link.is-current { background: #e3f5fa; color: var(--green); }
.mobile-menu .mm-link.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--lime);
}
.mm-list li:has(.is-current) + li,
.mm-list li:has(+ li .is-current) + li { border-top-color: transparent; }

/* Programmes: two compact cards (same icons and wording as the desktop dropdown) */
.mm-label {
  margin: 18px 12px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.mm-programmes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mobile-menu .mm-prog {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--offwhite);
  color: var(--ink);
  letter-spacing: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.mobile-menu .mm-prog:hover,
.mobile-menu .mm-prog.is-current { border-color: var(--lime); background: #e3f5fa; }
.mm-prog-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(90deg, #026f8e 0%, #08b5e0 100%);
  color: var(--white);
}
.mm-prog-icon .icon { width: 18px; height: 18px; }
.mm-prog-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mm-prog-text strong { font-size: 15px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 700; }
.mm-prog-text span { font-size: 13px; color: var(--muted); }

/* Footer: account actions side by side, the main call to action, a phone line */
.mm-footer { display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.mm-auth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mm-footer .btn { justify-content: center; min-height: 48px; }
.mm-logout { display: grid; margin: 0; }
.mm-contact { margin: 4px 0 0; text-align: center; font-size: 14px; @media (max-width: 768px) { font-size: 18px; }  color: var(--muted); }
.mm-contact a { color: var(--green); font-weight: 700; }
.mobile-menu a:focus-visible { outline: 3px solid #7fd1e6; outline-offset: 2px; }

/* Phones: programme cards stack as full-width rows, so title and line each fit on one line */
@media (max-width: 420px) {
  .mm-programmes { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mobile-menu .mm-prog { padding: 10px 12px; }
  .mm-prog-text { flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 8px; }
}
/* The panel only exists below the desktop breakpoint */
@media (min-width: 993px) {
  .mobile-menu { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-backdrop, .mm-panel, .mm-chevron, .mobile-menu .mm-prog { transition: none; }
  .mm-panel { transform: none; }
}

/* ---------- Shared pieces ---------- */
.lp-circle {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--lime);
  color: var(--green);
}
.lp-circle .icon { width: 22px; height: 22px; }

.lp-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 24px clamp(32px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.lp-head .section-title { max-width: 14em; text-wrap: balance; }
.lp-head-side { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.lp-head-side p { color: var(--muted); font-size: 16.5px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.7; max-width: 46ch; }
.dark .lp-head-side p { color: var(--muted-on-dark); }

/* ---------- 1. Hero: photo slideshow under a navy → cyan left-to-right gradient ---------- */
.lp-hero {
  background: #000855;
  color: var(--text-on-dark);
  min-height: 550px;
  display: flex;
  align-items: center;
  padding-block: clamp(48px, 5vw, 64px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.lp-hero-inner { width: 100%; text-align: left; position: relative; z-index: 1; }

/* Background slideshow */
.lp-hero-slides { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lp-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.6s ease, transform 7s ease-out;
}
.lp-hero-slide.is-active { opacity: 1; transform: scale(1); }
/* Brand gradient, left to right: solid navy behind the copy (white text stays above 12:1),
   blending through navy/cyan to a light cyan wash so the photo reads clearly on the right */
.lp-hero-slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-blend);
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero-slide { transition: none; transform: none; }
}
.lp-hero-title {
  max-width: 17em;
  font-size: clamp(2rem, 4.6vw, 3.7rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--white);
  text-wrap: balance;
  margin-bottom: 24px;
}
/* Light sky tint: the brand cyan is too dark against the deep hero colour */
.lp-hero-title .hl {
  color: #92d8ea;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.lp-hero-sub {
  max-width: 60ch;
  font-size: clamp(16px, 1.6vw, 18.5px);
  @media (max-width: 768px) { font-size: 18px; }
  line-height: 1.7;
  color: rgba(244, 244, 249, 0.88);
  margin-bottom: 36px;
}
.lp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- 2. Track record: copy + half-width cyan stats block ---------- */
.lp-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.lp-stats-copy .section-title { margin-bottom: 16px; text-wrap: balance; }
.lp-stats-copy p { color: var(--muted); font-size: 16.5px; line-height: 1.7; max-width: 44ch; }
.lp-stats-block {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px);
  border-radius: var(--r-card);
  background: #eaf8fb;
  border: 1px solid rgba(7, 166, 207, 0.28);
  color: var(--green);
}
.lp-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-inline: clamp(12px, 2vw, 24px);
  border-left: 1px solid rgba(0, 11, 110, 0.12);
}
.lp-stat:first-child { border-left: 0; padding-left: 0; }
.lp-stat dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.lp-stat dt {
  order: 2;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4c5499;
}

/* ---------- 3. Why choose us: deep blue band; intro + accordion left, photo composition right ---------- */
.lp-why {
  background: linear-gradient(160deg, #000b6e 0%, #051071 55%, #151f7a 100%);
}
.lp-why .why-text { color: var(--muted-on-dark); max-width: 52ch; margin-bottom: 28px; }
.lp-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.lp-why-copy { display: flex; flex-direction: column; align-items: flex-start; }
.lp-why-copy .section-title { margin-bottom: 14px; }

/* Accordion: one open at a time (<details name>); opens smoothly where the browser supports it */
.lp-acc { display: grid; gap: 12px; width: 100%; margin-bottom: 30px; interpolate-size: allow-keywords; }
.lp-acc-item {
  border: 1px solid transparent;
  border-radius: var(--r-card);
  background: var(--white);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.lp-acc-item[open] { border-color: var(--lime); box-shadow: 0 18px 40px rgba(0, 4, 40, 0.35); }
.lp-acc-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px 14px 14px;
  list-style: none;
  cursor: pointer;
  border-radius: var(--r-card);
}
.lp-acc-item summary::-webkit-details-marker { display: none; }
.lp-acc-item summary:focus-visible { outline: 3px solid #7fd1e6; outline-offset: 2px; }
.lp-acc-item .lp-circle { width: 44px; height: 44px; background: var(--green); color: var(--white); transition: background 0.25s ease; }
.lp-acc-item .lp-circle .icon { width: 20px; height: 20px; }
.lp-acc-item[open] .lp-circle,
.lp-acc-item summary:hover .lp-circle { background: #057c9a; }
.lp-acc-title { flex: 1; font-family: var(--font-heading); font-size: 1.08rem; font-weight: 700; color: var(--ink); }
.lp-acc-chevron {
  width: 28px;
  height: 28px;
  padding: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--offwhite);
  color: var(--green);
  transition: transform 0.3s ease, background 0.25s ease;
}
.lp-acc-item[open] .lp-acc-chevron { transform: rotate(180deg); background: rgba(7, 166, 207, 0.16); }
.lp-acc-item p { padding: 0 20px 18px 74px; color: var(--muted); font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.65; }
.lp-acc-item::details-content { height: 0; overflow: hidden; transition: height 0.3s ease, content-visibility 0.3s allow-discrete; }
.lp-acc-item[open]::details-content { height: auto; }

/* Photo composition: two-layer stacked layout */
.lp-why-media {
  position: relative;
  height: 100%;
}
.lp-why-stack {
  position: relative;
  width: min(100%, 460px);
  margin-left: auto;
  aspect-ratio: 4 / 5;
}
.lp-why-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(0, 4, 40, 0.45);
  z-index: 1;
}
.lp-why-photo-sm {
  position: absolute;
  left: clamp(-24px, -4vw, -12px);
  bottom: clamp(-24px, -4vw, -12px);
  width: min(46%, 220px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(0, 4, 40, 0.5);
  z-index: 2;
}

@media (max-width: 992px) {
  .lp-why-grid { grid-template-columns: 1fr; align-items: start; }
  .lp-why-media { max-width: 620px; width: 100%; justify-self: center; margin-top: 12px; }
  .lp-why-stack { margin-inline: auto; }
  .lp-why-photo-sm { width: min(44%, 200px); left: -10px; bottom: -16px; }
}
@media (max-width: 560px) {
  .lp-why-stack { width: min(100%, 340px); }
  .lp-why-photo-sm { width: min(44%, 150px); left: -8px; bottom: -14px; }
  .lp-acc-item p { padding-left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-acc-item::details-content,
  .lp-acc-chevron { transition: none; }
}

/* ---------- 4. Who we are: two-row grid, circular icons ---------- */
.lp-about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.lp-tile {
  padding: 28px;
  border-radius: var(--r-card);
  background: var(--offwhite);
  border: 1px solid transparent;
}
.lp-tile .lp-circle { margin-bottom: 18px; }
.lp-tile h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.lp-tile p { color: var(--muted); font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.65; }
.lp-tile--navy { background: var(--green); border-color: var(--green); }
.lp-tile--navy h3 { color: var(--white); }
.lp-tile--navy p { color: var(--muted-on-dark); }
/* Vision: a deeper brand blue so pure white text passes contrast (4.8:1; white on the cyan is only 2.9:1) */
.lp-tile--blue { background: #057c9a; border-color: #057c9a; }
.lp-tile--blue .lp-circle { background: var(--white); color: #057c9a; }
.lp-tile--blue h3,
.lp-tile--blue p { color: var(--white); }
.lp-about-media {
  margin: 0;
  min-height: 240px;
  border-radius: var(--r-card);
  overflow: hidden;
}
.lp-about-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 5. Services (2026-10-28): white cards that fill navy from the bottom on hover ----------
   Head reuses .lp-head (eyebrow + title left, intro + "View All Services" right). Each card is a
   single link: the title's ::after covers the whole card, so the footer arrow is decorative. */
.svx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.svx-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: 30px 28px 26px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0, 11, 110, 0.04);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
/* Navy fill that rises on hover, with a soft cyan glow in the top-right corner */
.svx-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(7, 166, 207, 0.35), transparent 60%),
    linear-gradient(160deg, #000b6e 0%, #00084e 100%);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.svx-card:hover,
.svx-card:focus-within {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 28px 56px rgba(0, 11, 110, 0.22);
}
.svx-card:hover::before,
.svx-card:focus-within::before { transform: scaleY(1); }

.svx-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 28px;
  border-radius: 16px;
  background: var(--green);
  color: var(--lime);
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.svx-icon .icon { width: 26px; height: 26px; }
.svx-title {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 1.6vw, 1.45rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--green);
  transition: color 0.35s ease;
}
.svx-link { color: inherit; }
.svx-link:hover { text-decoration: none; }
.svx-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.svx-link:focus-visible { outline: none; }
.svx-card:has(.svx-link:focus-visible) { outline: 3px solid #7fd1e6; outline-offset: 3px; }
.svx-text {
  margin: 0 0 20px;
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
  line-height: 1.7;
  color: var(--muted);
  transition: color 0.35s ease;
}
.svx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.svx-tags li {
  padding: 6px 12px;
  border: 1px solid rgba(0, 11, 110, 0.14);
  border-radius: 8px;
  background: #f1f1f7;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green);
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.svx-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 800;
  color: var(--green);
  transition: color 0.35s ease, border-color 0.35s ease;
}
.svx-go {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  transform: rotate(-45deg);
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}

/* Hover / keyboard focus: everything flips to the navy theme */
.svx-card:hover .svx-icon,
.svx-card:focus-within .svx-icon { background: var(--lime); color: var(--green); transform: rotate(-6deg) scale(1.05); }
.svx-card:hover .svx-title,
.svx-card:focus-within .svx-title { color: var(--white); }
.svx-card:hover .svx-text,
.svx-card:focus-within .svx-text { color: var(--muted-on-dark); }
.svx-card:hover .svx-tags li,
.svx-card:focus-within .svx-tags li { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: var(--text-on-dark); }
.svx-card:hover .svx-foot,
.svx-card:focus-within .svx-foot { color: var(--white); border-color: var(--border-dark); }
.svx-card:hover .svx-go,
.svx-card:focus-within .svx-go { transform: none; background: var(--lime); color: var(--green); }

@media (max-width: 620px) {
  .svx-grid { grid-template-columns: 1fr; }
  .svx-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .svx-card,
  .svx-card::before,
  .svx-icon,
  .svx-go { transition: none; }
  .svx-card:hover,
  .svx-card:focus-within,
  .svx-card:hover .svx-icon,
  .svx-card:focus-within .svx-icon { transform: none; }
}

/* ---------- 6. Tech stack: three light cards on white (the dark variant below is unused since 2026-10-28) ---------- */
.lp-stack { background: var(--white); }
.lp-stack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.lp-stack-card {
  padding: 28px;
  border-radius: var(--r-card);
  background: var(--offwhite);
  border: 1px solid var(--border);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.lp-stack-card:hover { border-color: var(--lime); background: var(--white); }
.lp-stack-card .lp-circle { margin-bottom: 20px; }
.lp-stack-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.lp-stack-card p { font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.6; color: var(--muted); margin-bottom: 20px; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.lp-chips li {
  padding: 7px 12px;
  border-radius: var(--r-chip);
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--green);
  font-size: 14.5px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 600;
}

/* Tech stack on deep navy (alternates with the light services canvas above and the off-white portfolio below) */
.lp-stack--dark { background: linear-gradient(160deg, #000b6e 0%, #051071 55%, #151f7a 100%); }
.lp-stack--dark .lp-stack-head p { color: var(--muted-on-dark); }
.lp-stack--dark .lp-stack-card { background: rgba(255, 255, 255, 0.05); border-color: var(--border-dark); }
.lp-stack--dark .lp-stack-card:hover { background: rgba(7, 166, 207, 0.08); border-color: var(--lime); }
.lp-stack--dark .lp-stack-card h3 { color: var(--white); }
.lp-stack--dark .lp-stack-card p { color: var(--muted-on-dark); }
.lp-stack--dark .lp-chips li { background: rgba(237, 238, 245, 0.08); border-color: var(--border-dark); color: var(--text-on-dark); }

/* ---------- 7. Clients: logo + domain only, four per row ---------- */
.lp-client-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.lp-client {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 28px 16px 22px;
  border-radius: var(--r-card);
  background: var(--offwhite);
  border: 1px solid transparent;
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.lp-client img { width: 72px; height: 72px; object-fit: contain; }
.lp-client span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
}
.lp-client span .icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); }
.lp-client:hover,
.lp-client:focus-visible {
  transform: translateY(-3px);
  background: var(--white);
  border-color: var(--lime);
}
.lp-client:hover span { color: var(--green); }

/* ---------- 8. Final CTA: cyan block with photo, contact card below ---------- */
/* Azure gradient one step brighter than the hero and two steps from the navy footer.
   White text: 5:1 on #057c9a, 7.5:1 on #045c73 (WCAG AA for body text throughout). */
.lp-cta {
  background: linear-gradient(135deg, #057c9a 0%, #046a84 50%, #045c73 100%);
  color: var(--white);
}
.lp-cta .eyebrow { color: #c4eaf4; }
.lp-cta .section-title { color: var(--white); text-wrap: balance; margin-bottom: 18px; }
.lp-cta-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.lp-cta-copy p { font-size: 17px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.7; color: rgba(255, 255, 255, 0.9); max-width: 48ch; margin-bottom: 30px; }
.lp-cta-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
/* Primary action inverts to white with a navy label; WhatsApp stays an outline */
.btn-white { background: var(--white); color: var(--green); }
.btn-white:hover { background: #e3f5fa; color: var(--green); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 11, 110, 0.25); }
.lp-cta .btn-outline-light { border-color: rgba(255, 255, 255, 0.6); color: var(--white); }
.lp-cta .btn-outline-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.1); }
.lp-cta .btn:focus-visible { outline-color: var(--white); }
.lp-cta-media {
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 50px rgba(0, 10, 97, 0.3);
}
.lp-cta-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* "Reach us directly" card: intro + consultation button on the left, three clickable action
   tiles on the right. Tiles are top-aligned so a two-line address never shifts the others.
   Cyan #057c9a text on white is 5:1 (AA). */
.reach-card {
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: 0 24px 50px rgba(0, 10, 97, 0.18);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.15fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: stretch;
  color: var(--ink);
}
.reach-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.reach-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #057c9a; }
.reach-title { margin: 0; font-family: var(--font-heading); font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 800; line-height: 1.15; color: var(--ink); }
.reach-text { margin: 0; font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.65; color: var(--muted); max-width: 34ch; }
.reach-btn { margin-top: auto; }
.reach-btn:hover .btn-arrow { transform: translateX(4px); }

.reach-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.reach-tiles li { display: flex; min-width: 0; }
.reach-tile {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--offwhite);
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.reach-tile:hover {
  border-color: var(--lime);
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 11, 110, 0.1);
}
.reach-tile:focus-visible { outline: 3px solid #7fd1e6; outline-offset: 2px; }
.reach-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(7, 166, 207, 0.14);
  color: var(--green);
}
.reach-icon .icon { width: 20px; height: 20px; }
.reach-label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.reach-value { font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.reach-action {
  margin-top: auto;
  padding-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  color: #057c9a;
}
.reach-action .btn-arrow { width: 16px; height: 16px; transition: transform 0.2s ease; }
.reach-tile:hover .reach-action .btn-arrow { transform: translateX(4px); }

@media (max-width: 1080px) {
  .reach-card { grid-template-columns: 1fr; }
  .reach-text { max-width: 60ch; }
  .reach-btn { margin-top: 6px; }
}
/* Phones: tiles become full-width rows, icon on the left */
@media (max-width: 760px) {
  .reach-tiles { grid-template-columns: 1fr; gap: 10px; }
  .reach-tile {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 2px;
    padding: 16px;
  }
  .reach-icon { grid-row: 1 / span 3; margin-bottom: 0; align-self: start; }
  .reach-action { padding-top: 6px; }
  .reach-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .reach-tile, .reach-action .btn-arrow { transition: none; }
  .reach-tile:hover { transform: none; }
}

/* Tech stack heading: one straight line at every width (size follows the viewport instead of wrapping) */
.lp-stack-head { margin-bottom: clamp(32px, 4vw, 48px); }
.lp-stack-head .lp-oneline {
  white-space: nowrap;
  font-size: clamp(1.15rem, 5.4vw, 3rem);
  margin-bottom: 14px;
}
.lp-stack-head p { color: var(--muted); font-size: 16.5px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.7; max-width: 60ch; }

/* Home CTA with three standalone touchpoint cards: shorter band, cards close to the footer */
.lp-cta--cards { padding-block: clamp(64px, 8vw, 96px) clamp(36px, 4vw, 48px); }
.lp-touch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: clamp(36px, 4vw, 52px) 0 0;
}
.lp-touch-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  height: 100%;
  padding: 24px;
  border-radius: var(--r-card);
  background: var(--white);
  color: var(--ink);
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.lp-touch-card .lp-circle { width: 46px; height: 46px; margin-bottom: 12px; }
.lp-touch-card .lp-circle .icon { width: 20px; height: 20px; }
.lp-touch-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lp-touch-card strong { font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 700; color: var(--green); line-height: 1.5; word-break: break-word; }
.lp-touch-action {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  color: #057c9a;
}
.lp-touch-card:hover,
.lp-touch-card:focus-visible {
  transform: translateY(-4px);
  border-color: #92d8ea;
  box-shadow: 0 20px 40px rgba(0, 10, 97, 0.3);
}
.lp-touch-card:hover .btn-arrow { transform: translateX(4px); }
.lp-touch-card:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .lp-client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
  .lp-head,
  .lp-stats-grid,
  .lp-cta-main { grid-template-columns: 1fr; }
  .lp-head { align-items: start; }
  .lp-about-grid,
  .lp-stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-about-media { grid-column: 1 / -1; aspect-ratio: 16 / 7; min-height: 0; }
  .lp-touch { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .lp-about-grid,
  .lp-stack-grid { grid-template-columns: 1fr; }
  .lp-client-grid { gap: 12px; }
  .lp-client { padding: 22px 10px 18px; }
  .lp-client img { width: 56px; height: 56px; }
  .lp-client span { font-size: 13px; }
  .lp-client span .icon { display: none; }
  .lp-stats-block { padding: 24px 16px; }
  .lp-stat { padding-inline: 10px; }
  .lp-stat dt { font-size: 12px; letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-client { transition: none; }
  .lp-client:hover { transform: none; }
}

/* ============ Inner pages refresh (About, Services, Academy, Contact) ============
   Same single flat colour as the home hero (no gradient), copy aligned with the logo, no glows.
   Prefixes: ab- (about), sv- (services), acx- (academy header), ctx- (contact header). */
.ab-hero,
.sv-hero,
.acx-hero,
.ctx-hero {
  background: #000855;
  color: var(--text-on-dark);
}
.ab-hero .eyebrow,
.sv-hero .eyebrow,
.acx-hero .eyebrow,
.ctx-hero .eyebrow { color: #92d8ea; }
.ab-hero h1,
.sv-hero h1,
.acx-hero h1,
.ctx-hero h1 {
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  line-height: 1.1;
  color: var(--white);
  text-wrap: balance;
  margin-bottom: 18px;
}
.ab-hero p,
.sv-hero p,
.acx-hero p,
.ctx-hero p { font-size: clamp(16px, 1.5vw, 18px); @media (max-width: 768px) { font-size: 18px; }  line-height: 1.7; color: rgba(244, 244, 249, 0.86); max-width: 58ch; }

.ab-section-head { margin-bottom: clamp(32px, 4vw, 48px); }
.ab-section-head .section-title { text-wrap: balance; }

/* ---------- About ---------- */
/* Photo header (About, Services, Programmes): the photo fills the header under one flat
   colour overlay, the same treatment as the home hero (no gradient). Set the photo with
   style="--hero-photo: url(...)" and optionally --hero-photo-pos to choose the focal point. */
.hero-photo { position: relative; isolation: isolate; overflow: hidden; }
.hero-photo::before,
.hero-photo::after { content: ""; position: absolute; pointer-events: none; }
.hero-photo::before {
  inset: 0;
  z-index: -2;
  background: var(--hero-photo) var(--hero-photo-pos, center) / cover no-repeat;
}
.hero-photo::after {
  inset: 0;
  z-index: -1;
  background: var(--hero-blend);
}

/* Compact headers, same height as the Portfolio benchmark */
.ab-hero,
.sv-hero,
.acx-hero { padding-block: clamp(56px, 8vw, 96px); }
.ab-hero-copy,
.acx-hero-copy { max-width: 640px; }
.ab-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.ab-story-media,
.ab-caps-media { margin: 0; border-radius: var(--r-card); overflow: hidden; }
.ab-story-media img,
.ab-caps-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ab-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ab-story-media { aspect-ratio: 1 / 1; }
.ab-story-copy .section-title { margin-bottom: 20px; text-wrap: balance; }
.ab-story-copy p { color: var(--muted); font-size: 16.5px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.75; margin-bottom: 16px; max-width: 60ch; }

.ab-purpose { background: linear-gradient(160deg, #000b6e 0%, #051071 55%, #151f7a 100%); color: var(--text-on-dark); }
.ab-purpose .section-title { color: var(--white); }
.ab-purpose .eyebrow { color: #92d8ea; }
.ab-purpose-head { margin-bottom: clamp(32px, 4vw, 48px); }
.ab-purpose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ab-purpose-card {
  padding: clamp(28px, 3.5vw, 44px);
  border-radius: var(--r-card);
  background: #057c9a;
  color: var(--white);
}
.ab-purpose-card .lp-circle { background: var(--white); color: #057c9a; margin-bottom: 22px; }
.ab-purpose-label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 10px;
}
.ab-purpose-card p { font-family: var(--font-heading); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.4; font-weight: 600; }
.ab-purpose-card--light { background: #eaf8fb; color: var(--green); }
.ab-purpose-card--light .lp-circle { background: var(--green); color: #92d8ea; }
.ab-purpose-card--light .ab-purpose-label { color: #4c5499; }

.ab-values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ab-value {
  padding: 28px;
  border-radius: var(--r-card);
  background: var(--white);
  border: 1px solid var(--border);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.ab-value:hover { transform: translateY(-4px); border-color: var(--lime); box-shadow: 0 18px 40px rgba(0, 11, 110, 0.1); }
.ab-value .lp-circle { margin-bottom: 18px; }
.ab-value h3 { font-size: 1.15rem; color: var(--ink); margin-bottom: 8px; }
.ab-value p { color: var(--muted); font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.65; }

.ab-caps-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.ab-caps-intro .section-title { margin-bottom: 16px; text-wrap: balance; }
.ab-caps-intro p { color: var(--muted); font-size: 16.5px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.7; margin-bottom: 24px; max-width: 46ch; }
.ab-caps-media { aspect-ratio: 3 / 2; }
.ab-caps-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ab-cap {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border-radius: var(--r-card);
  background: var(--offwhite);
  border: 1px solid transparent;
  color: var(--ink);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.ab-cap-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ab-cap-text strong { font-family: var(--font-heading); font-size: 1.1rem; color: var(--green); }
.ab-cap-text span { color: var(--muted); font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.55; }
.ab-cap > .btn-arrow { color: #057c9a; }
.ab-cap:hover { background: var(--white); border-color: var(--lime); }
.ab-cap:hover > .btn-arrow { transform: translateX(4px); }

.ab-process { background: var(--white); }
.ab-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.ab-step {
  position: relative;
  padding: 26px 24px;
  border-radius: var(--r-card);
  background: var(--offwhite);
  border-top: 3px solid var(--lime);
}
.sv-process .ab-step { background: var(--white); }
.ab-step-num {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 16px;
}
.ab-step h3 { font-size: 1.1rem; color: var(--ink); margin-bottom: 6px; }
.ab-step p { color: var(--muted); font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.6; }

.ab-close {
  background: linear-gradient(135deg, #057c9a 0%, #046a84 50%, #045c73 100%);
  color: var(--white);
  padding-block: clamp(48px, 6vw, 72px);
}
.ab-close-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  flex-wrap: wrap;
}
.ab-close h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--white); margin-bottom: 8px; text-wrap: balance; }
.ab-close p { color: rgba(255, 255, 255, 0.9); max-width: 52ch; }
.ab-close-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.ab-close .btn-outline-light { border-color: rgba(255, 255, 255, 0.6); color: var(--white); }
.ab-close .btn-outline-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.1); }

/* ---------- Services ---------- */
.sv-hero-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}
.sv-hero-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-chip);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 15px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 600;
  color: var(--white);
}
.sv-hero-list .icon { width: 17px; height: 17px; color: #92d8ea; }

.sv-list .container { display: grid; gap: clamp(28px, 4vw, 48px); }
.sv-block {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  border-radius: var(--r-card);
  background: var(--white);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.sv-block:hover { border-color: rgba(7, 166, 207, 0.5); box-shadow: 0 24px 50px rgba(0, 11, 110, 0.1); }
.sv-block:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.sv-block:nth-child(even) .sv-block-media { order: 2; }
.sv-block-media { position: relative; min-height: 280px; background: var(--offwhite); }
.sv-block-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-block-badge {
  position: absolute;
  left: 20px;
  top: 20px;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--white);
  color: #057c9a;
  box-shadow: 0 10px 24px rgba(0, 11, 110, 0.2);
}
.sv-block-body { padding: clamp(24px, 3.5vw, 44px); }
.sv-block-body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--green); margin-bottom: 8px; }
.sv-block-body h2 a { color: inherit; }
.sv-block-body h2 a:hover { text-decoration: underline; text-underline-offset: 5px; }
.sv-block-lead { color: var(--muted); font-size: 16.5px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.7; margin-bottom: 22px; }
.sv-block-body h3 {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4c5499;
  margin: 0 0 12px;
}
.sv-block-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; margin-bottom: 22px; }
.sv-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sv-checks li { position: relative; padding-left: 26px; font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.5; color: var(--ink); }
.sv-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #057c9a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.sv-chips { margin-bottom: 22px; }
.sv-packages { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.sv-packages li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-radius: var(--r-chip);
  background: var(--offwhite);
  font-size: 16px;
  @media (max-width: 768px) { font-size: 18px; }
}
.sv-packages strong { color: var(--green); }
.sv-packages span { color: var(--muted); text-align: right; }
.sv-block-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Academy header + topics ---------- */
/* Highlights: three light cards under the course grid, same surface as the course cards.
   Navy-to-cyan icon tile carries the brand colour; white icon on it is 7:1+ at the navy end. */
.acx-perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  list-style: none;
  padding: 0;
  margin: clamp(36px, 4.5vw, 56px) 0 0;
}
.acx-perk {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--white);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.acx-perk:hover {
  border-color: rgba(7, 166, 207, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 11, 110, 0.08);
}
.acx-perk-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(90deg, #026f8e 0%, #08b5e0 100%);
  box-shadow: 0 8px 18px rgba(2, 111, 142, 0.22);
  color: var(--white);
}
.acx-perk-icon .icon { width: 21px; height: 21px; }
.acx-perk-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acx-perk-title { font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 700; line-height: 1.3; color: var(--ink); }
.acx-perk-text { font-size: 15px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.55; color: var(--muted); }
/* Tablets: three narrow cards, so the icon sits above the text instead of beside it */
@media (min-width: 621px) and (max-width: 992px) {
  .acx-perk { flex-direction: column; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .acx-perk { transition: none; }
  .acx-perk:hover { transform: none; }
}

/* Programme list heading sits in the toolbar, opposite the Online / Physical switch */
.acx-programmes-head { margin: 0; }

/* ---------- Contact header + touchpoints ---------- */
.ctx-hero { padding-block: clamp(56px, 7vw, 88px) clamp(112px, 12vw, 140px); }
.ctx-channels {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: -72px;
}
.ctx-channel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 24px;
  border-radius: var(--r-card);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(0, 11, 110, 0.1);
  color: var(--ink);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ctx-channel-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--white);
  margin-bottom: 12px;
}
.ctx-channel-icon .icon { width: 21px; height: 21px; }
.ctx-channel-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ctx-channel strong { font-size: 16.5px; color: var(--green); word-break: break-word; }
.ctx-channel-action { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 700; color: #057c9a; }
.ctx-channel:hover,
.ctx-channel:focus-visible { transform: translateY(-4px); border-color: var(--lime); box-shadow: 0 24px 48px rgba(0, 11, 110, 0.16); }
.ctx-channel:hover .btn-arrow { transform: translateX(4px); }
/* WhatsApp keeps its own green so it is recognisable at a glance */
.ctx-channel--wa .ctx-channel-icon { background: #25d366; }
.ctx-channel--wa .ctx-channel-action { color: #128c4b; }
.ctx-channel--wa:hover { border-color: #25d366; }

/* ---------- Inner pages: responsive ---------- */
@media (max-width: 992px) {
  .ab-story-grid,
  .ab-caps-grid { grid-template-columns: 1fr; }
  .ab-values-grid,
  .ab-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-story-media { aspect-ratio: 16 / 9; }
  .sv-block,
  .sv-block:nth-child(even) { grid-template-columns: 1fr; }
  .sv-block:nth-child(even) .sv-block-media { order: 0; }
  .sv-block-media { min-height: 220px; }
  .ctx-channels { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .acx-perks { grid-template-columns: 1fr; gap: 10px; }
  .ab-purpose-grid,
  .ab-values-grid,
  .ab-steps,
  .sv-block-cols { grid-template-columns: 1fr; }
  .ab-hero-cta .btn,
  .ab-close-actions .btn { width: 100%; }
  .sv-packages li { flex-direction: column; gap: 2px; }
  .sv-packages span { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-value,
  .ctx-channel { transition: none; }
}
.ctx-channels-band { background: var(--offwhite); }

/* Page hero without the orbit rings, glow and grain (flat colour, same as the home and inner-page heroes) */
.page-hero--plain { background: #000855; }

/* ============ Landing refinements (2026-10-28) ============ */

/* Section headings 10% smaller (was clamp(1.9rem, 3.6vw, 3rem)) */
.section-title { font-size: clamp(1.71rem, 3.24vw, 2.7rem); }
.lp-stack-head .lp-oneline { font-size: clamp(1.04rem, 4.86vw, 2.7rem); }

/* Hero headline: a little smaller */
.lp-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 4.2vw, 3.3rem);
  letter-spacing: -0.02em;
}

/* Secondary buttons on the hero and final CTA: deep brand fill + white text on hover */
.lp-hero .btn-outline-light:hover,
.lp-cta .btn-outline-light:hover,
.lp-cta .btn-white:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

/* Deep brand button ("View All Services"): black on hover */
.btn-deep { background: var(--green); color: var(--white); }
.btn-deep:hover { background: #000000; color: var(--white); transform: translateY(-1px); }

/* No drop shadows on button hover, site-wide */
.btn:hover,
.btn:focus-visible { box-shadow: none; }

/* Header "Book A Service": accent blue at rest, deep brand on hover */
.btn-nav:hover,
.btn-nav:focus-visible { background: var(--green); border-color: var(--green); color: var(--white); }

/* "Start a Project" on the navy Why Choose Us band: white fill on hover */
.lp-why .btn-primary:hover,
.lp-why .btn-primary:focus-visible { background: var(--white); border-color: var(--white); color: var(--green); }

/* ---------- Track record: capsule layout ---------- */
.lp-proof { padding-block: clamp(56px, 7vw, 96px); }
/* Left-aligned like the other home section heads (tech stack, services, who we are) */
.lp-proof-head { text-align: left; margin: 0 0 clamp(28px, 5vw, 48px); }
/* Heading 53px and intro 19px on desktop (owner's sizes); both scale down on small screens */
.lp-proof-head .section-title { margin: 0; font-size: clamp(2rem, 6vw, 53px); }
.lp-proof-head p { color: var(--muted); font-size: clamp(16px, 2.6vw, 19px); @media (max-width: 768px) { font-size: 18px; }  line-height: 1.6; max-width: 860px; margin: 12px 0 0; }
.lp-proof-capsules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 24px);
  align-items: stretch;
}
.lp-proof-capsule {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 18px);
  border-radius: 999px;
  background: var(--white);
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: clamp(10px, 1.6vw, 12px) clamp(18px, 4vw, 28px);
  box-shadow: none;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.lp-proof-capsule:hover {
  transform: translateY(-2px);
  border-color: rgba(5, 124, 154, 0.4);
}
.lp-proof-capsule-icon {
  width: clamp(56px, 7vw, 68px);
  height: clamp(56px, 7vw, 68px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lp-proof-capsule-icon .icon { width: clamp(26px, 3vw, 30px); height: clamp(26px, 3vw, 30px); color: var(--white); }
.lp-proof-capsule-icon--blue { background: #057c9a; }
.lp-proof-capsule-icon--navy { background: #000b6e; }
.lp-proof-capsule-icon--globe { background: #057c9a; }
.lp-proof-capsule-content { display: flex; flex-direction: column; gap: 2px; }
.lp-proof-capsule-num {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #000000;
  font-variant-numeric: lining-nums tabular-nums;
}
.lp-proof-capsule-label {
  font-size: clamp(12px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.7);
}

/* ---------- Who we are: head on the card grid; button starts at the third card ---------- */
.lp-head--cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
}
.lp-head--cols .lp-head-title { grid-column: 1 / span 2; }
.lp-head--cols .lp-head-action { grid-column: 3; justify-self: end; align-self: end; }

/* ---------- Portfolio: head on the bento grid; one-line title over two tiles, button starts at the third ---------- */
.folio-head {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 20px;
  align-items: end;
}
/* :first-child only: the action wrapper is a div too, and "> div" used to pull it under the title, mid-page */
.folio-head > div:first-child { grid-column: 1 / span 2; }
.folio-head-action { grid-column: 3; justify-self: end; align-self: end; }
/* Head with only a button on the right (Our Clients): end it on the right edge like the others */
.lp-head-side--end { align-items: flex-end; }
.folio-head .section-title {
  max-width: none;
  margin-bottom: 0;
  white-space: nowrap;
  font-size: clamp(1.2rem, 5.4vw, 2.7rem);
}
.folio-head > .btn { grid-column: 3; justify-self: end; }

/* ---------- Services: View All Services in deep brand ---------- */
/* (card colours live in section 5 above) */

/* ---------- Tech stack: white icons in the circles ---------- */
.lp-stack-card .lp-circle { background: var(--green); color: var(--white); }

/* ---------- Reach us directly: standalone section above the footer ---------- */
.lp-reach { padding-block: clamp(56px, 7vw, 88px); }
.lp-reach-head { margin-bottom: clamp(28px, 4vw, 40px); }
.lp-reach .lp-touch { margin: 0; }
.lp-reach .lp-touch-card { border-color: var(--border); }
.lp-reach .lp-touch-card:hover,
.lp-reach .lp-touch-card:focus-visible { border-color: var(--lime); box-shadow: 0 20px 40px rgba(0, 11, 110, 0.12); }
.lp-reach .lp-touch-card:focus-visible { outline: 3px solid #7fd1e6; }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .lp-proof-capsules { grid-template-columns: 1fr; }
  .lp-head--cols .lp-head-action,
  .folio-head-action { justify-self: start; }
  .lp-head--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-head--cols .lp-head-title { grid-column: 1 / -1; }
  /* Without this the button keeps grid-column: 3, which adds implicit columns and pushes it off-screen on phones */
  .lp-head--cols .lp-head-action,
  .lp-head--cols .lp-head-action-wrap { grid-column: 1; }
  .folio-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folio-head > div:first-child { grid-column: 1 / -1; }
  .folio-head-action { grid-column: 1; }
  .lp-head-side--end { align-items: flex-start; }
}
@media (max-width: 620px) {
  .lp-head--cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .folio-head { grid-template-columns: 1fr; }
  .folio-head-action { grid-column: 1; justify-self: start; }
}
@media (max-width: 1080px) {
  .lp-proof-capsules { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lp-proof-capsule { flex-direction: column; text-align: center; padding: 16px 18px; }
  .lp-proof-capsule-content { align-items: center; }
}
@media (max-width: 480px) {
  .lp-proof-capsules { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-proof-stat { transition: none; }
}

/* ============ Course cart (header badge, slide-out drawer, /cart page) ============ */
.nav-cart {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--green);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.nav-cart .icon { width: 20px; height: 20px; }
.nav-cart:hover { background: rgba(7, 166, 207, 0.12); border-color: rgba(5, 124, 154, 0.45); }
.nav-cart:focus-visible { outline: 3px solid #7fd1e6; outline-offset: 2px; }
.nav-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  border: 2px solid var(--white);
  background: #057c9a;
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.nav-cart-count[hidden] { display: none; }
.nav-cart-count.is-bumped { animation: cart-bump 0.35s ease; }
@keyframes cart-bump { 50% { transform: scale(1.3); } }

/* "Added to cart" toasts: top right, below the sticky header (z-index 1200) */
.cart-toasts {
  position: fixed;
  top: 96px;
  right: 20px;
  z-index: 1300;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100% - 32px));
  pointer-events: none;
}
.cart-toast {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid #057c9a;
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: 0 18px 44px rgba(0, 5, 52, 0.18);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cart-toast.is-in { opacity: 1; transform: none; }
.cart-toast.is-error { border-left-color: var(--danger); }
.cart-toast-media { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--offwhite); }
.cart-toast-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.cart-toast-tick {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--success);
  color: var(--white);
}
.cart-toast-media:not(:has(img)) .cart-toast-tick { position: static; width: 32px; height: 32px; border: 0; }
.cart-toast.is-error .cart-toast-tick { background: var(--danger); }
.cart-toast-tick .icon { width: 12px; height: 12px; }
.cart-toast-media:not(:has(img)) .cart-toast-tick .icon { width: 16px; height: 16px; }
.cart-toast-body p { font-size: 15px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 700; line-height: 1.4; color: var(--ink); }
.cart-toast-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14.5px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 800; color: #057c9a; }
.cart-toast-link:hover { color: var(--green); }
.cart-toast-link:hover .btn-arrow { transform: translateX(3px); }
.cart-toast-close {
  align-self: start;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.cart-toast-close .icon { width: 14px; height: 14px; }
.cart-toast-close:hover { background: var(--offwhite); color: var(--ink); }
.cart-toast-close:focus-visible,
.cart-toast-link:focus-visible { outline: 3px solid #7fd1e6; outline-offset: 2px; }

/* Cart page: courses + promo on the left, order summary on the right */
.cart-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 700; color: var(--green); }
.cart-back .icon { width: 16px; height: 16px; transform: rotate(180deg); transition: transform 0.2s ease; }
.cart-back:hover { color: #057c9a; }
.cart-back:hover .icon { transform: rotate(180deg) translateX(3px); }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.cart-main { display: grid; gap: 20px; }
.cart-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.cart-count-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(7, 166, 207, 0.14);
  color: var(--green);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: lining-nums;
}
.cart-remove-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14.5px;
  @media (max-width: 768px) { font-size: 18px; }
  font-weight: 700;
  cursor: pointer;
}
.cart-remove-text .icon { width: 14px; height: 14px; }
.cart-remove-text:hover { background: var(--danger-bg); color: var(--danger); }
.cart-remove-text:focus-visible { outline: 3px solid #7fd1e6; outline-offset: 1px; }
.cart-summary { position: sticky; top: 104px; display: grid; gap: 16px; }
.cart-summary .cart-heading { margin-bottom: 0; }
.cart-summary .cart-totals { padding-top: 0; border-top: 0; }
.cart-summary .cart-note { margin: 0; }
.cart-checkout .btn .icon { width: 16px; height: 16px; }
.page-section .alert { margin-bottom: 20px; }
.cart-loading { color: var(--muted); font-size: 15px; @media (max-width: 768px) { font-size: 18px; }  }

.cart { display: flex; flex-direction: column; gap: 18px; }
.cart > .alert { margin: 0; }
.cart-items { display: grid; gap: 12px; }
.cart-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--white);
}
.cart-thumb {
  display: grid;
  place-items: center;
  width: 72px;
  height: 56px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--offwhite);
  color: var(--green);
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-thumb .icon { width: 22px; height: 22px; }
.cart-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-item-mode { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #057c9a; }
.cart-item-title { font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  font-weight: 700; line-height: 1.35; color: var(--ink); }
.cart-item-title:hover { color: var(--green); }
.cart-item-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 15px; @media (max-width: 768px) { font-size: 18px; }  }
.cart-item-price strong { color: var(--green); font-variant-numeric: lining-nums; }
.cart-item-price s { color: var(--muted); font-size: 13.5px; }
.cart-remove {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.cart-remove .icon { width: 18px; height: 18px; }
.cart-remove:hover { background: var(--danger-bg); color: var(--danger); }
.cart-remove:focus-visible { outline: 3px solid #7fd1e6; outline-offset: 1px; }

.cart-coupon-form { display: flex; gap: 10px; }
.cart-coupon-form .input { flex: 1; min-width: 0; height: 46px; text-transform: uppercase; }
.cart-coupon-form .btn { flex-shrink: 0; }
.cart-coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed rgba(17, 107, 58, 0.4);
  border-radius: var(--r-chip);
  background: var(--success-bg);
  color: var(--success);
  font-size: 15px;
  @media (max-width: 768px) { font-size: 18px; }
}
.cart-coupon-applied span { display: inline-flex; align-items: center; gap: 8px; }
.cart-coupon-applied .icon { width: 16px; height: 16px; }
.cart-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--success); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.cart-totals { display: grid; gap: 8px; margin: 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  }
.cart-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cart-totals dt { color: var(--muted); }
.cart-totals dd { margin: 0; font-weight: 700; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.cart-discount dd { color: var(--success); }
.cart-total { padding-top: 8px; border-top: 1px dashed var(--border); }
.cart-total dt { color: var(--ink); font-weight: 800; }
.cart-total dd { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; color: var(--green); }
.cart-note { margin: -6px 0 0; font-size: 14px; @media (max-width: 768px) { font-size: 18px; }  line-height: 1.55; color: var(--muted); text-align: center; }
.cart-note--error { margin: 8px 0 0; color: var(--danger); text-align: left; }

.cart-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 8px; text-align: center; }
.cart-empty-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(7, 166, 207, 0.12); color: #057c9a; }
.cart-empty-icon .icon { width: 28px; height: 28px; }
.cart-empty h2,
.cart-empty h3 { font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.cart-empty p { color: var(--muted); font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  margin-bottom: 8px; }

.cart-page-card { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--white); }

/* "Add to Cart" on course cards and the course page */
.ac-body .cart-add { margin-top: 4px; }
.cart-add .btn .icon { width: 17px; height: 17px; }
.cart-add .btn.is-in-cart { background: var(--white); border-color: #057c9a; color: #057c9a; }
.cart-add .btn.is-in-cart:hover { background: rgba(7, 166, 207, 0.1); color: var(--green); border-color: var(--green); }

/* Discounted price with the original struck through */
.ac-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-variant-numeric: lining-nums; }
.ac-price-was,
.price-was {
  font-family: var(--font);
  font-weight: 600;
  color: var(--muted);
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(180, 35, 24, 0.7);
}
.ac-price-was { font-size: 1rem; }
.price-lg { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.price-was { font-size: 1.05rem; }
.ac-tag-mode { background: var(--green); color: var(--white); }

@media (max-width: 560px) {
  .cart-toasts { top: 84px; right: 16px; }
  .cart-item { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 10px; }
  .cart-thumb { width: 60px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .cart-toast { transition: none; }
  .nav-cart-count.is-bumped { animation: none; }
}

/* ============ Inner pages: tighter rhythm and one low photo header ============ */
/* About, Services, Programmes, Portfolio, Contact and Cart share the photo-overlay header,
   about 30% lower than before; section padding on inner pages is about 30% tighter. */
.ab-hero,
.sv-hero,
.acx-hero,
.ctx-hero { padding-block: clamp(40px, 5.6vw, 68px); }
.is-inner .section { padding-block: clamp(59px, 7.7vw, 92px); }
.is-inner .page-section { padding-block: clamp(34px, 4.9vw, 62px); }

/* Contact: the touchpoint cards sit below the header instead of overlapping it */
.ctx-channels-band { padding-top: clamp(28px, 4vw, 44px); }
.ctx-channels { margin-top: 0; }
.ctx-channels-band + .page-section { padding-top: clamp(24px, 3vw, 36px); }

@media (max-width: 768px) {
  .is-inner .section { padding-block: 50px; }
}

/* ============ Landing refinements 2 (2026-10-28) ============ */

/* Clients: heading breaks exactly after "partners," (the <br>), not at the 14em cap */
.lp-clients .lp-head .section-title { max-width: none; text-wrap: wrap; }

/* Portfolio web tile: all client pills on one row from tablet up */
@media (min-width: 768px) {
  .folio-web-links { flex-wrap: nowrap; gap: 8px; }
  .folio-web-links a { padding: 8px 12px; font-size: 14px; @media (max-width: 768px) { font-size: 18px; }  white-space: nowrap; }
}
.ac-section .ac-toolbar { margin-top: 0; }
@media (max-width: 992px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}

/* Programme pages (Physical / Online / all): heading 30% smaller than the shared inner-page
   size of clamp(2rem, 4.2vw, 3.3rem), and kept to 10 words or fewer in the view */
.acx-hero--programmes h1 { font-size: clamp(1.4rem, 2.94vw, 2.31rem); }

/* ============ Hero: brand gradient + photo storytelling (2026-10-28) ============
   One left-to-right blend of the two brand colours over every hero photo (home slideshow
   and the inner-page photo headers): solid navy #000B6E behind the copy, through a
   navy/cyan mix, to a light #07A6CF wash so the photo's subject reads clearly on the right.
   The copy column stays at 0.93+ navy, so white text is above 12:1 over any photo.
   On small screens the copy spans the full width, so the blend stays deeper throughout. */
:root {
  --hero-blend: linear-gradient(90deg,
    rgba(0, 11, 110, 0.97) 0%,
    rgba(0, 11, 110, 0.93) 46%,
    rgba(0, 11, 110, 0.76) 62%,
    rgba(4, 89, 159, 0.48) 76%,
    rgba(7, 166, 207, 0.26) 90%,
    rgba(7, 166, 207, 0.16) 100%);
}
@media (max-width: 768px) {
  :root {
    --hero-blend: linear-gradient(90deg,
      rgba(0, 11, 110, 0.95) 0%,
      rgba(0, 11, 110, 0.88) 55%,
      rgba(4, 89, 159, 0.84) 100%);
  }
}
.lp-hero-slide { object-position: center right; }

/* "Now showing" card: names the service in the current photo and links to it */
/* Same line as the hero buttons: the showcase is a zero-height flex box in the buttons' row, so the
   card overflows evenly above and below and its centre sits on the buttons' centre line; the dots
   hang below the card and the buttons do not move */
.lp-hero-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.lp-hero-showcase {
  flex: 0 0 352px;
  height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lp-hero-showcase-box { position: relative; }
.lp-hero-showcase .lp-hero-dots { position: absolute; top: 100%; left: 0; }
.lp-hero-cap {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "kicker go" "title go" "line go";
  align-items: center;
  column-gap: 14px;
  padding: 16px 18px;
  border: 1px solid #07a6cf;
  border-radius: 16px;
  background: rgba(0, 11, 110, 0.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0, 6, 60, 0.35);
  color: var(--white);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.lp-hero-cap[hidden] { display: none; }
.lp-hero-cap.is-active { animation: lp-cap-in 0.5s ease both; }
@keyframes lp-cap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lp-hero-cap:hover,
.lp-hero-cap:focus-visible { background: #057c9a; transform: translateY(-2px); }
.lp-hero-cap:hover .lp-hero-cap-line,
.lp-hero-cap:focus-visible .lp-hero-cap-line { color: rgba(255, 255, 255, 0.92); }
.lp-hero-cap:focus-visible { outline: 3px solid #7fd1e6; outline-offset: 3px; }
.lp-hero-cap-kicker {
  grid-area: kicker;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7fd1e6;
}
.lp-hero-cap strong { grid-area: title; margin-top: 4px; font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.25; }
.lp-hero-cap-line { grid-area: line; margin-top: 2px; font-size: 14.5px; @media (max-width: 768px) { font-size: 18px; }  color: var(--muted-on-dark); }
.lp-hero-cap-go {
  grid-area: go;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white);
  color: var(--green);
}

/* Slide dots: each is a bar that fills over the 6s the slide is shown */
.lp-hero-dots { display: flex; gap: 8px; margin-top: 12px; padding-left: 4px; }
.lp-hero-dot {
  position: relative;
  width: 36px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.lp-hero-dot span {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.3);
}
.lp-hero-dot span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: #07a6cf;
}
.lp-hero-dot.is-active span::after { transform: scaleX(1); }
.lp-hero-dot.is-running span::after { animation: lp-dot-fill 6s linear both; }
.lp-hero-showcase.is-paused .lp-hero-dot.is-running span::after { animation-play-state: paused; }
@keyframes lp-dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lp-hero-dot:hover span { background: rgba(255, 255, 255, 0.5); }
.lp-hero-dot:focus-visible { outline: 3px solid #7fd1e6; outline-offset: 2px; border-radius: 4px; }

@media (max-width: 992px) {
  .lp-hero-actions { flex-direction: column; align-items: flex-start; gap: 32px; }
  .lp-hero-actions .lp-hero-cta { align-self: stretch; }
  .lp-hero-showcase { flex: none; height: auto; width: min(100%, 340px); }
  .lp-hero-showcase .lp-hero-dots { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero-cap.is-active { animation: none; }
  .lp-hero-cap:hover, .lp-hero-cap:focus-visible { transform: none; }
}

/* Home book showcase (replaces the stat capsules): widths, gaps, shadow, hover and scroll speed
   copied from the 1syotechnol landing page (heights changed to 4:3, see below). The covers are rendered twice, so -50% is exactly
   one set; 4s per cover keeps the original speed (10 cards in 20s) whatever the cover count. */
.book-showcase-track { width: 100%; overflow: hidden; padding: 12px 0; }
.book-showcase-strip {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  width: max-content;
  animation: book-showcase-scroll calc(var(--book-count, 10) * 4s) linear infinite;
}
.book-showcase-strip:hover { animation-play-state: paused; }
/* Every card is the same 4:3 box (closest to the covers, which range 1:1 to 3:2); each image
   fills it with object-fit: cover, scaled proportionally and centred, so no card shows blank bands. */
.book-showcase-card {
  flex-shrink: 0;
  width: 400px;
  height: 300px;
  background: #f1f1f7;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}
.book-showcase-card:hover { transform: scale(1.03); }
.book-showcase-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@keyframes book-showcase-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 1rem)); }
}
@media (max-width: 768px) {
  .book-showcase-strip { gap: 1.5rem; }
  .book-showcase-card { width: 320px; height: 240px; }
  @keyframes book-showcase-scroll { 100% { transform: translateX(calc(-50% - 0.75rem)); } }
}
@media (max-width: 480px) {
  .book-showcase-strip { gap: 1rem; }
  .book-showcase-card { width: 280px; height: 210px; }
  @keyframes book-showcase-scroll { 100% { transform: translateX(calc(-50% - 0.5rem)); } }
}

/* ============ Phones & touch screens: responsive audit fixes ============
   1. Form fields at 16px: iOS Safari zooms the whole page when a field under 16px is tapped.
   2. Text links in lists get a 24px+ tap area (WCAG 2.5.8). The padding is cancelled by an equal
      negative margin, so nothing moves on screen; only the touchable area grows. */
@media (max-width: 767px) {
  .input, .select, .textarea,
  .lx-fields .input,
  .textarea.code { font-size: 16px; @media (max-width: 768px) { font-size: 18px; }  }
}
@media (max-width: 767px), (pointer: coarse) {
  .footer-grid ul a,
  .footer-legal a,
  .lesson-item .grow a,
  .lx-back, .lx-link, .auth-foot a,
  .feed-main a.link,
  .dash-content > p > a.link,
  .panel-head a.link {
    display: inline-block;
    padding-block: 4px;
    margin-block: -4px;
  }
}

/* ============ Hero on phones (2026-10-29) ============
   Kept last so it wins over the earlier hero rules. Short paragraph, 42px headline (owner request),
   buttons stacked but only as wide as the wider of the two, not the full screen. */
.lp-hero-sub-short { display: none; }
@media (max-width: 620px) {
  .lp-hero-sub-full { display: none; }
  .lp-hero-sub-short { display: inline; }
  .lp-hero-title { font-size: 42px; }
  .lp-hero-actions .lp-hero-cta { display: inline-grid; align-self: flex-start; }
}

/* "What We Do · 01/03" line removed from the hero card (owner request 2026-10-29): title and line only */
.lp-hero-cap { grid-template-areas: "title go" "line go"; }
.lp-hero-cap strong { margin-top: 0; }

/* Hero headline in Montserrat (owner request 2026-11-02; loaded on the home page only) */
.lp-hero-title { font-family: "Montserrat", var(--font-heading); }

/* Admin courses list: filters and table in one card, each course on a single row (owner request 2026-11-02).
   Navy for text and the main action, cyan for "Published". Under 700px of card width each course becomes a small card. */
.cl-panel {
  container-type: inline-size;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.filters.cl-filters {
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.cl-filters label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cl-filters .input,
.cl-filters .select,
.cl-filters .btn { height: 40px; border-radius: 10px; font-size: 14px; }
.cl-filters .input,
.cl-filters .select { padding-block: 0; }
.cl-filters .btn { padding: 0 20px; }

.table-wrap.cl-wrap { border: 0; border-radius: 0; background: none; }
.cl-table th {
  padding: 10px 12px;
  font-size: 11px;
  letter-spacing: 0.07em;
}
.cl-table td {
  padding: 11px 12px;
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
}
.cl-table th:first-child, .cl-table td:first-child { padding-left: 18px; }
.cl-table th:last-child, .cl-table td:last-child { padding-right: 18px; }
.cl-table tbody tr { transition: background-color 0.15s ease; }
.cl-table tbody tr:hover { background: var(--offwhite); }

/* Takes all the spare width. Titles are never cut short: the code at the end, e.g. (SBPB), identifies the course */
.cl-table td.cl-course { width: 100%; max-width: 0; white-space: normal; }
.cl-title,
.cl-meta { display: block; }
.cl-title { font-size: 14px; font-weight: 700; color: var(--ink); }
a.cl-title:hover { color: #057c9a; }
a.cl-title:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 4px; }
.cl-meta { margin-top: 2px; font-size: 12.5px; }
.cl-table td.cl-price { font-weight: 600; color: var(--ink); }
.cl-count { font-variant-numeric: tabular-nums; }

.cl-status .badge { padding: 3px 10px; font-size: 12px; font-weight: 600; }
.cl-status .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cl-status .badge-success { background: rgba(7, 166, 207, 0.12); color: #046a84; }
.cl-status .badge-warning { background: rgba(0, 11, 110, 0.07); color: var(--green); }

.cl-table .actions { flex-wrap: nowrap; gap: 6px; }
.cl-table .btn-sm { padding: 6px 12px; font-size: 13px; line-height: 1.4; }

@container (max-width: 700px) {
  .cl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cl-table,
  .cl-table tbody { display: block; }
  .cl-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
  }
  .cl-table tbody tr:last-child { border-bottom: 0; }
  .cl-table td,
  .cl-table td:first-child,
  .cl-table td:last-child { display: block; padding: 0; border: 0; }
  .cl-table td.cl-course { flex-basis: 100%; width: auto; max-width: none; }
  .cl-status { order: -1; flex-basis: 100%; }
  .cl-count::before { content: attr(data-label) " "; }
  .cl-table td.cl-actions { flex-basis: 100%; margin-top: 6px; }
  .cl-table .actions { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .cl-filters .input,
  .cl-filters .select,
  .cl-filters .btn { height: 46px; font-size: 18px; }
  .cl-filters .btn { width: 100%; }
  .cl-table td,
  .cl-title { font-size: 18px; }
  .cl-meta { font-size: 16px; }
  .cl-status .badge { font-size: 14px; }
  .cl-table .actions .btn { flex: 1; padding: 10px 14px; font-size: 18px; }
}

/* Admin categories: the add form and the table each get a full-width section (owner request 2026-11-02).
   Subgrid lines the button up with the inputs, even when a field shows an error under it. */
.form.cat-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 7px 16px; align-items: stretch; }
.cat-form .field { grid-row: span 3; display: grid; grid-template-rows: subgrid; gap: inherit; }
.cat-form > .btn { grid-column: 3; grid-row: 2; white-space: nowrap; }
.cat-table td:nth-child(2) { overflow-wrap: anywhere; }
.cat-table th:last-child { text-align: right; }
.cat-table .actions { flex-wrap: nowrap; }
.cat-count { font-variant-numeric: tabular-nums; }
.cat-count-word { display: none; }
@media (max-width: 720px) {
  .form.cat-form { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 18px; }
  .cat-form .field { grid-row: auto; display: flex; gap: 7px; }
  .cat-form > .btn { grid-column: auto; grid-row: auto; }
  .table-wrap.cat-wrap { overflow: visible; border: 0; border-radius: 0; background: none; }
  .cat-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cat-table, .cat-table tbody { display: block; }
  .cat-table tbody tr { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--border); }
  .cat-table tbody tr:first-child { padding-top: 0; }
  .cat-table tbody tr:last-child { padding-bottom: 0; border-bottom: 0; }
  .cat-table tbody tr:hover { background: none; }
  .cat-table td { display: block; padding: 0; border: 0; }
  .cat-count-word { display: inline; }
  .cat-table .actions { justify-content: flex-start; margin-top: 8px; }
  .cat-table .actions > * { flex: 1; }
  .cat-table .actions .btn { width: 100%; }
}

/* Admin overview figures: one quiet block in navy ink instead of six coloured tiles (owner request 2026-11-02).
   Cyan appears once only: the small dot on figures waiting for action. */
.ov-metrics {
  container-type: inline-size;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.ov-metrics-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr)); }
.ov-metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 22px;
  color: var(--green);
  border-left: 1px solid var(--border);
  transition: background-color 0.2s ease;
}
.ov-metric:first-child { border-left: 0; }
.ov-metric:hover { background: var(--offwhite); }
.ov-metric:focus-visible { outline: 2px solid var(--green); outline-offset: -4px; border-radius: 12px; }
.ov-metric-label { font-size: 15px; font-weight: 600; }
.ov-metric-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--lime);
  vertical-align: 2px;
}
.ov-metric-value {
  margin-top: auto;
  font-family: var(--font-heading);
  font-variant-numeric: lining-nums;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ov-metric-note { font-size: 14px; color: var(--muted); }
.ov-metric--lead { padding-left: 28px; }
.ov-metric--lead .ov-metric-value { font-size: 38px; }

/* Sized by the block's own width, because the sidebar changes how much room it gets */
@container (max-width: 1150px) {
  .ov-metrics-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ov-metric--lead { grid-column: 1 / -1; border-bottom: 1px solid var(--border); }
  .ov-metric:nth-child(2) { padding-left: 28px; border-left: 0; }
}
@container (max-width: 680px) {
  .ov-metrics-grid { grid-template-columns: minmax(0, 1fr); }
  .ov-metric--lead { padding-left: 22px; }
  .ov-metric:not(.ov-metric--lead) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 16px;
    align-items: center;
    padding: 16px 22px;
    border-left: 0;
    border-bottom: 1px solid var(--border);
  }
  .ov-metric:last-child { border-bottom: 0 !important; }
  .ov-metric:not(.ov-metric--lead) .ov-metric-value { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; font-size: 26px; }
  .ov-metric:not(.ov-metric--lead) .ov-metric-note { grid-column: 1; }
  .ov-metric-label { font-size: 16px; }
  .ov-metric-note { font-size: 15px; }
}