:root {
  --ink: oklch(0.22 0.02 260);
  --ink-soft: oklch(0.42 0.02 260);
  --ink-mute: oklch(0.5 0.02 260);
  --ink-faint: oklch(0.6 0.02 260);
  --line: oklch(0.93 0.008 260);
  --line-strong: oklch(0.85 0.01 260);
  --bg: oklch(0.99 0.004 90);
  --bg-tint: oklch(0.97 0.015 230);
  --chip-bg: oklch(0.94 0.03 230);
  --accent: oklch(0.55 0.15 230);
  --accent-dark: oklch(0.4 0.16 230);
  --accent-mid: oklch(0.5 0.15 230);
  --ok: oklch(0.55 0.14 150);
  --warn: oklch(0.65 0.16 80);
  --danger: oklch(0.55 0.18 25);
  /* Horizontal breathing room used across every public website page instead
     of a hardcoded 80px, so the same markup sits full-width on laptop/
     desktop and still stays readable on tablet/phone -- see base_site.html
     and website/*.html, which use var(--gutter) anywhere they used to write
     80px for left/right padding or margin. */
  --gutter: 80px;
}

@media (max-width: 900px) { :root { --gutter: 32px; } }
@media (max-width: 560px) { :root { --gutter: 18px; } }

/* "Premium" theme -- Er Dk's real caddtc.com brand palette, colour-matched
   directly off his course-category banner artwork (red #F1181C + navy
   #0A3868 on white, sampled from the actual PNG he sent -- not eyeballed),
   applied on top of the same variable names the whole site already reads
   from. Only overrides color tokens, so layout/spacing rules never have to
   know which theme is active. base_site.html opts the PUBLIC website into
   this via <html data-theme="premium">; every panel keeps using the plain
   :root (blue) block above untouched -- that's the "backup" Er Dk asked to
   keep, restorable instantly by dropping that one attribute.
   Mapping: --accent/--accent-dark stay the "primary button / CTA" red
   family (same role they already had); --accent-mid becomes the banner's
   navy and takes over every "secondary accent / link / badge text" spot
   that already reads --accent-mid, so links, badges and stat numbers pick
   up navy without any template changes. --ink also shifts to a dark navy
   (the banner sets its body copy in navy, not black) for a consistent
   read across headings and paragraphs. */
:root[data-theme="premium"] {
  --ink: #10233f;
  --ink-soft: #33455e;
  --ink-mute: #56637a;
  --ink-faint: #7c869a;
  --line: #e3e7ee;
  --line-strong: #c7ced9;
  --bg: #ffffff;
  --bg-tint: #f5f7fb;
  --chip-bg: #eaf1fb;
  --accent: #f1181c;      /* banner red -- primary / CTA */
  --accent-dark: #b41215; /* deep red -- hover / dark accent */
  --accent-mid: #0a3868;  /* banner navy -- links / badges / secondary accent */
  --warn: #d98f1f;
  --danger: #c81e22;
}
/* A slim red -> navy accent strip under the public nav bar, echoing the
   banner's own red diagonal against navy copy. */
:root[data-theme="premium"] .site-nav {
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #f1181c, #0a3868) 1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Work Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

h1, h2, h3, .display { font-family: 'Space Grotesk', system-ui, sans-serif; }

a { color: var(--accent-mid); text-decoration: none; }
a:hover { color: var(--accent-dark); }

/* No max-width cap -- Er Dk asked for every public page to run full-width
   on laptop/desktop rather than sit in a centered column, so .container
   only ever contributes the responsive side gutter now. A page that still
   wants a narrower reading measure (About, Contact, Franchise, the one-
   software detail page) sets its own inline max-width on top of this, same
   as before. */
.container { max-width: none; margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; }

/* Reusable responsive card grid -- replaces the old fixed repeat(3)/
   repeat(4) column counts (Course Catalogue, Home's field grid, Software
   Training, the category-detail software grid), which didn't reflow at all
   on a phone-width screen. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }

/* Home page hero + stats strip -- flex row / 3-col grid on desktop,
   stacked on phones. */
.site-hero { display: flex; align-items: center; gap: 64px; }
.site-hero-art { width: 360px; height: 360px; border-radius: 24px; background: var(--accent); flex-shrink: 0; }
.site-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; }
@media (max-width: 700px) {
  .site-hero { flex-direction: column; align-items: stretch; text-align: center; gap: 32px; }
  .site-hero-art { width: 100%; height: 200px; }
  .site-stats { grid-template-columns: 1fr; }
}

/* Course-category detail page: accordion of Course Types, each holding a
   table of Course Combinations (Certificate Name / Software Used /
   Duration) -- plain <details>/<summary>, no JS library, matching the
   site's existing dependency-free component style (see .rte-editor above). */
.cd-accordion { margin-top: 22px; }
.cd-acc-item { background: white; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
.cd-acc-item summary { padding: 16px 20px; font-weight: 600; font-size: 15px; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cd-acc-item summary::-webkit-details-marker { display: none; }
.cd-acc-item summary .cd-acc-icon { color: var(--ink-faint); font-weight: 400; font-size: 20px; flex-shrink: 0; }
.cd-acc-item[open] summary .cd-acc-icon { transform: rotate(45deg); }
.cd-acc-item summary:hover { background: var(--bg-tint); }
.cd-acc-item .data { margin: 0; }
.cd-acc-count { color: var(--ink-faint); font-weight: 500; font-size: 12.5px; }
.cd-acc-empty { padding: 14px 20px; color: var(--ink-faint); font-size: 13px; border-top: 1px solid var(--line); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px;
  padding: 11px 20px; font-weight: 600; font-size: 14.5px; border: none; cursor: pointer; font-family: inherit; }
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-dark); color: white; }
.btn-secondary { background: white; color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn-secondary:hover { background: var(--bg-tint); }
.btn-danger { background: white; color: var(--danger); border: 1.5px solid oklch(0.8 0.1 25); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
/* A disabled .btn otherwise looks fully active -- .btn-primary/.btn-secondary
   set an explicit background/color that overrides the browser's own default
   disabled dimming -- so this is needed for "disabled" to actually read as
   inactive anywhere it's used (e.g. Franchise's Student Upgrade form, whose
   action fields stay disabled until a Registration No. search matches). */
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:disabled:hover { background: var(--accent); }
.btn-secondary:disabled:hover, .btn-danger:disabled:hover { background: white; }

.card { background: white; border: 1px solid var(--line); border-radius: 14px; }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-ok { background: oklch(0.94 0.05 150); color: var(--ok); }
.badge-warn { background: oklch(0.95 0.06 80); color: var(--warn); }
.badge-danger { background: oklch(0.95 0.06 25); color: var(--danger); }
.badge-mute { background: var(--chip-bg); color: var(--accent-mid); }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--ink-faint); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); }
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
table.data tr:hover td { background: var(--bg-tint); }

/* Bounded, independently-scrolling wrapper for very long/wide tables (Er Dk,
   2026-09-23: "bottom me horizontal scroll fix kijiye aur table ka header
   top me scroll krne pr") -- without this, a table with hundreds/thousands
   of rows (e.g. Company's All Students, now unpaginated per Er Dk's earlier
   request) pushes its own horizontal scrollbar to the very bottom of an
   enormous page, and its header scrolls out of view entirely. Bounding the
   wrapper's height turns it into its own scroll container, so the
   horizontal scrollbar sits right under the visible rows (always reachable)
   and the header can stick to the top of *that* box via position:sticky.
   border-collapse:separate (instead of table.data's default collapse) is
   what keeps a sticky thead th's border-bottom crisp while rows scroll
   underneath it -- collapsed borders are shared between adjacent cells and
   flicker/duplicate under position:sticky. */
.table-scroll { overflow: auto; max-height: 65vh; }
.table-scroll table.data { border-collapse: separate; border-spacing: 0; }
.table-scroll table.data thead th { position: sticky; top: 0; z-index: 2; background: var(--bg); }

.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: 9px;
  font-size: 14.5px; font-family: inherit; color: var(--ink); background: white;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--accent); }
.form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled {
  background: var(--surface-mute, #f0f1f3); color: var(--ink-faint); cursor: not-allowed; }
/* Rich-text (HTML) description field -- see partials/rich_text_field.html.
   A small dependency-free contenteditable editor, not a CDN-loaded library
   (see that file's own comment for why) -- matches the plain form input/
   textarea border so it reads as part of the same form. */
.rte-editor { border: 1.5px solid var(--line-strong); border-radius: 9px; overflow: hidden; background: white; }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 3px; padding: 6px 8px; border-bottom: 1.5px solid var(--line-strong); background: var(--bg-tint); }
.rte-toolbar button { border: 1px solid transparent; background: none; border-radius: 6px; padding: 5px 9px;
  font-size: 12.5px; font-family: inherit; color: var(--ink); cursor: pointer; }
.rte-toolbar button:hover { background: white; border-color: var(--line-strong); }
.rte-toolbar .rte-sep { width: 1px; background: var(--line-strong); margin: 3px 4px; }
.rte-surface { min-height: 130px; padding: 12px 14px; font-size: 14.5px; font-family: inherit; line-height: 1.6; }
.rte-surface:focus { outline: none; }
.rte-surface h3, .rte-surface h4 { margin: 10px 0 6px; }
.rte-surface ul, .rte-surface ol { margin: 6px 0 6px 22px; }
.form-hint { font-size: 12.5px; color: var(--ink-faint); margin-top: 5px; }
.form-error { background: oklch(0.96 0.04 25); border: 1px solid oklch(0.85 0.08 25); color: oklch(0.4 0.15 25);
  padding: 10px 14px; border-radius: 9px; font-size: 13.5px; margin-bottom: 16px; }
.form-flash-ok { background: oklch(0.96 0.04 150); border: 1px solid oklch(0.85 0.08 150); color: oklch(0.35 0.1 150);
  padding: 10px 14px; border-radius: 9px; font-size: 13.5px; margin-bottom: 16px; }

/* Public site header/footer */
.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter); border-bottom: 1px solid var(--line); background: white; position: relative; }
.site-nav .links { display: flex; align-items: center; gap: 30px; font-size: 14.5px; font-weight: 500; }
.site-nav .links a { color: var(--ink); }
.brand { display: flex; align-items: center; gap: 10px; font-family: 'Space Grotesk'; font-weight: 700;
  font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
.site-footer { padding: 56px var(--gutter) 0; background: white; border-top: 1px solid var(--line); }
.site-footer .bottom { padding: 18px 0; margin-top: 40px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-faint); }
/* Website footer (Er Dk 2026-10-21 redesign): dark navy, brand red line on top, 4 columns + trust row + bottom bar. */
.site-footer.sf { position: relative; padding: 64px var(--gutter) 0; border-top: 0; color: rgba(255,255,255,.72);
  background: radial-gradient(700px 320px at 0% 0%, rgba(241,24,28,.14), transparent 60%), linear-gradient(180deg, #0b2a4f 0%, #071b33 100%); }
.site-footer.sf::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #F1181C, #B3121F 40%, #5E0A14); }
.sf a { color: rgba(255,255,255,.78); text-decoration: none; transition: color .15s; }
.sf a:hover { color: #fff; }
.sf-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 48px; max-width: 1200px; margin: 0 auto; }
.sf-logo { display: inline-block; background: #fff; border-radius: 12px; padding: 8px 12px; }
.sf-logo img { height: 40px; width: auto; display: block; }
.sf-tag { margin: 18px 0 18px; font-size: 14.5px; line-height: 1.7; max-width: 380px; color: rgba(255,255,255,.75); }
.sf-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 14px; }
.sf-contact li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; }
.sf-contact svg { width: 18px; height: 18px; flex: none; margin-top: 2px; fill: none; stroke: #ff8a8c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 22px; }
.sf a.sf-btn { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 10px; background: #F1181C; color: #fff; font-weight: 600; font-size: 14.5px; }
.sf a.sf-btn:hover { background: #c81519; }
.sf a.sf-social { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); color: #fff; }
.sf a.sf-social:hover { background: rgba(255,255,255,.1); }
.sf-social svg { width: 18px; height: 18px; }
.sf-col { display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.sf-col h4 { margin: 0 0 6px; color: #fff; font-size: 15px; letter-spacing: .01em; font-family: 'Space Grotesk', system-ui, sans-serif; }
.sf-col h4::after { content: ""; display: block; width: 28px; height: 3px; border-radius: 3px; background: #F1181C; margin-top: 10px; }
.sf a.sf-all { color: #ff8a8c; font-weight: 600; } .sf a.sf-all:hover { color: #fff; }
.sf-trust { max-width: 1200px; margin: 48px auto 0; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: center; }
.sf-trust span { font-size: 12.5px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.sf-trust b { color: #fff; font-weight: 600; }
.sf-trust-h { width: 100%; text-align: center; border: 0 !important; background: none !important; padding: 0 !important; font-size: 12px !important;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.sf-logos { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sf-logos a, .sf-logos span { display: grid; place-items: center; height: 58px; padding: 8px 16px; border-radius: 12px; background: #fff; }
.sf-logos img { max-height: 42px; max-width: 170px; object-fit: contain; display: block; }
.sf-bottom { max-width: 1200px; margin: 0 auto; padding: 20px 0 26px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; font-size: 13px; color: rgba(255,255,255,.5); }
/* 2026-10-28 footer redesign: the policies in their own centred row (no separators -> clean when it wraps), copyright under it */
.sf-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; }
.sf-legal a { color: rgba(255,255,255,.7); font-size: 13.5px; line-height: 1.4; }
.sf-legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sf-copy { font-size: 12.5px; }
@media (max-width: 1000px) { .sf-top { grid-template-columns: 1fr 1fr; gap: 36px; } .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .site-footer.sf { padding-top: 48px; }
  .sf-top { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .sf-col[aria-label="Companies and partners"] { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 18px; }
  .sf-col[aria-label="Companies and partners"] h4 { grid-column: 1 / -1; }
  .sf-legal { gap: 8px 18px; } .sf-legal a { font-size: 13px; }
  .sf-trust span { font-size: 12px; padding: 6px 12px; }
}

/* Mobile menu toggle -- hidden on desktop, the .links list becomes a
   dropdown under the bar once it's collapsed into this button. */
.nav-toggle { display: none; background: none; border: none; padding: 6px; margin: 0; color: var(--ink); cursor: pointer; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-nav .links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 0; background: white;
    padding: 6px var(--gutter) 14px; border-bottom: 1px solid var(--line); box-shadow: 0 10px 18px rgba(20, 25, 40, 0.08);
  }
  .site-nav .links.open { display: flex; }
  .site-nav .links a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .site-nav .links a:last-child { border-bottom: none; }
  .site-nav .links .btn { margin-top: 10px; align-self: flex-start; }
}

/* Authenticated panel shell */
.panel-shell { display: flex; min-height: 100vh; }
.panel-sidebar { width: 250px; background: white; border-right: 1px solid var(--line); flex-shrink: 0;
  display: flex; flex-direction: column; }
.panel-sidebar .brand { padding: 20px 22px; border-bottom: 1px solid var(--line); }
.panel-sidebar nav { padding: 14px; flex: 1; }
.panel-sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px;
  color: var(--ink-soft); font-size: 14.5px; font-weight: 500; margin-bottom: 2px; }
.panel-sidebar nav a:hover { background: var(--bg-tint); color: var(--ink); }
.panel-sidebar nav a.active { background: var(--chip-bg); color: var(--accent-dark); font-weight: 600; }
.panel-sidebar nav details summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 9px; color: var(--ink-soft); font-size: 14.5px; font-weight: 500; margin-bottom: 2px;
  cursor: pointer; list-style: none; }
.panel-sidebar nav details summary::-webkit-details-marker { display: none; }
.panel-sidebar nav details summary:hover { background: var(--bg-tint); color: var(--ink); }
.panel-sidebar nav details[open] summary { color: var(--ink); font-weight: 600; }
.panel-sidebar nav details .sub-links { display: flex; flex-direction: column; padding-left: 14px; }
.panel-sidebar nav details .sub-links a { font-size: 13.5px; }
.panel-sidebar .role-tag { margin: 14px 14px 0; padding: 8px 12px; background: var(--bg-tint); border-radius: 9px;
  font-size: 12px; font-weight: 600; color: var(--accent-mid); text-transform: uppercase; letter-spacing: 0.03em; }
.panel-main { flex: 1; min-width: 0; }
.panel-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px;
  background: white; border-bottom: 1px solid var(--line); }
.panel-content { padding: 28px 32px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat-card { padding: 20px; }
.stat-card .num { font-family: 'Space Grotesk'; font-size: 28px; font-weight: 700; color: var(--accent-mid); }
.stat-card .label { font-size: 13px; color: var(--ink-faint); margin-top: 4px; }

.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-tint); padding: 24px; }
.auth-card { width: 100%; max-width: 420px; padding: 36px 34px; }

/* Software Training page: category filter dropdown + software cards.
   Er Dk's real category list runs 27+ deep -- a pill row that long wraps
   across several lines and swamps the page, so a single compact dropdown
   replaces it (was a row of pill buttons; kept out of the shared card-grid
   styling below since it's specific to this one filter control). */
.st-filter-wrap { display: flex; flex-direction: column; gap: 6px; max-width: 340px; margin-bottom: 30px; }
.st-filter-wrap label { font-size: 12.5px; font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .04em; }
.st-filter-wrap select { appearance: none; -webkit-appearance: none; width: 100%; padding: 11px 40px 11px 16px;
  border: 1.5px solid var(--line-strong); border-radius: 10px; font-size: 14.5px; font-weight: 600;
  font-family: inherit; color: var(--ink); background: white
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2356637a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  cursor: pointer; transition: border-color .15s ease; }
.st-filter-wrap select:hover, .st-filter-wrap select:focus { outline: none; border-color: var(--accent); }

/* Premium software card -- Er Dk asked for the image to fill almost the
   whole card, leaving only a small info strip at the bottom (name, a short
   description, duration and an Enquire Now button). The image half is a
   plain <a> to the software's detail page; Enquire Now is its own link
   (straight to signup), so the two can't be nested inside one anchor. */
.sw-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; position: relative;
  background: linear-gradient(165deg, #ffffff 0%, var(--bg-tint) 100%);
  box-shadow: 0 1px 3px rgba(20, 16, 8, 0.06);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.sw-card:hover { box-shadow: 0 14px 28px rgba(20, 16, 8, 0.14); transform: translateY(-3px); border-color: var(--accent); }
.sw-card-media-link { display: block; }
.sw-card-media { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); overflow: hidden; }
.sw-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.sw-card:hover .sw-card-media img { transform: scale(1.05); }
.sw-card-media-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: white; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; text-align: center;
  line-height: 1.25; padding: 16px; }
.sw-card-duration-badge { position: absolute; right: 10px; bottom: 10px; background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(2px); color: white; font-size: 11.5px; font-weight: 600; padding: 4px 11px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); }
/* Permanent bottom vignette -- transparent at the top, fading to a soft
   black shadow at the bottom -- so the duration badge always sits on a
   readable dark patch regardless of the photo behind it, and the card
   reads as premium even before any hover. Deepens further + spreads
   upward on hover, both to dim the image and to surface the "View" pill
   so the card visibly invites a click before Enquire Now even comes into view. */
.sw-card-media-scrim { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 5, 4, 0.62) 0%, rgba(6, 5, 4, 0.22) 32%, rgba(6, 5, 4, 0) 60%);
  transition: background .18s ease; }
.sw-card:hover .sw-card-media-scrim {
  background: linear-gradient(to top, rgba(6, 5, 4, 0.78) 0%, rgba(6, 5, 4, 0.52) 45%, rgba(6, 5, 4, 0.16) 100%); }
.sw-card-view { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.9);
  background: rgba(255, 255, 255, 0.94); color: var(--accent-mid); font-size: 12.5px; font-weight: 700;
  padding: 8px 20px; border-radius: 999px; opacity: 0; letter-spacing: .02em; white-space: nowrap;
  transition: opacity .18s ease, transform .18s ease, background .18s ease, color .18s ease; }
.sw-card:hover .sw-card-view { opacity: 1; transform: translate(-50%, -50%) scale(1); background: var(--accent); color: #fff; }
.sw-card-info { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sw-card-name { font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink); text-decoration: none; }
.sw-card-desc { font-size: 12.5px; color: var(--ink-mute); line-height: 1.45; margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw-card-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-card-enquire { align-self: flex-start; margin-top: 2px; }

/* Software Training's own grid -- capped at 5 per row on desktop (plain
   .card-grid elsewhere has no cap), stepping down on smaller screens. */
.sw-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 1240px) { .sw-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 980px)  { .sw-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .sw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .sw-grid { grid-template-columns: 1fr; } }

/* WEBSITE ACCOUNT MENU (2026-10-23): signed-in person -> round photo + first name, menu with My dashboard / Log out */
.su { position: relative; }
.su-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line, #e4e4e7); border-radius: 999px;
  background: #fff; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink, #14213d); }
.su-btn:hover { border-color: #c9cfd9; box-shadow: 0 2px 8px rgba(16, 35, 63, .08); }
.su-btn:focus-visible { outline: 2px solid #2459a8; outline-offset: 2px; }
.su-av { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, #0A3868, #5E0A14); color: #fff; font: 700 12.5px "Space Grotesk", sans-serif; letter-spacing: .02em; }
.su-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.su-av.big { width: 44px; height: 44px; font-size: 15px; }
.su-n { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 901px) and (max-width: 1439px) { .su-n { display: none; } .su-btn { padding-right: 6px; } }
.su-car { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: #778; }
.su-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 260px; background: #fff; border: 1px solid #e6e8ee; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(16, 35, 63, .16); padding: 8px; }
.su-who { display: flex; gap: 10px; align-items: center; padding: 8px 8px 12px; border-bottom: 1px solid #eef0f4; margin-bottom: 6px; }
.su-who div { min-width: 0; } .su-who b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-who small { color: #6b7080; font-size: 12px; }
.site-nav .links .su-menu a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 9px; font-size: 14px; color: var(--ink, #14213d); border: 0; }
.site-nav .links .su-menu a:hover { background: #f4f6fa; }
.su-menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: #556; }
.site-nav .links .su-menu a.su-go { font-weight: 700; color: #B3121F; } .su-go svg { color: #B3121F; }
@media (max-width: 900px) {
  .site-nav .links .su { margin-top: 10px; width: 100%; }
  .su-menu { position: static; width: auto; box-shadow: none; margin-top: 8px; }
}

/* PAGE BAND (2026-10-28): the navy title band of every inner website page (templates/website/_band.html). */
.pb-band { position: relative; overflow: hidden; color: #fff; padding: 46px var(--gutter) 42px;
  background: radial-gradient(760px 380px at 95% -20%, rgba(241, 24, 28, .3), transparent 60%), linear-gradient(135deg, #072747 0%, #0A3868 62%, #0e4a86 100%); }
.pb-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); }
.pb-in { position: relative; max-width: 1200px; margin: 0 auto; }
.pb-narrow .pb-in { max-width: 860px; }
.pb-crumbs { display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: 13px; color: rgba(255,255,255,.62); margin-bottom: 14px; }
.pb-crumbs a { color: rgba(255,255,255,.82); text-decoration: none; } .pb-crumbs a:hover { color: #fff; text-decoration: underline; }
.pb-row { display: flex; gap: 20px; align-items: center; }
.pb-icon { width: 72px; height: 72px; border-radius: 16px; background: #fff; object-fit: contain; padding: 6px; flex: none; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.pb-kicker { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffb3b5; margin-bottom: 8px; }
.pb-band h1 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.02em; margin: 0; color: #fff; }
.pb-sub { margin: 10px 0 0; max-width: 720px; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.84); }
.pb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pb-actions a, .pb-actions button { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 11px; font: inherit; font-size: 14.5px; font-weight: 600;
  text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); cursor: pointer; }
.pb-actions a:hover { background: rgba(255,255,255,.18); color: #fff; }
.pb-actions a.pb-primary { background: #F1181C; border-color: #F1181C; } .pb-actions a.pb-primary:hover { background: #c81519; }
@media (max-width: 560px) { .pb-band { padding: 32px var(--gutter) 30px; } .pb-sub { font-size: 15px; } .pb-icon { width: 56px; height: 56px; } .pb-row { gap: 14px; } }

/* MENU GROUPS (Er Dk 2026-10-29): "Career" and "Tools" (CV / Resume Maker, plugins ...) -- base_site.html. Hover or tap opens. */
.site-nav .nd { position: relative; }
.nd-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--ink); cursor: pointer; }
.nd-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: #778; transition: transform .15s; }
.nd-menu { display: none; position: absolute; left: -14px; top: 100%; z-index: 60; min-width: 270px; padding: 8px; margin-top: 10px; background: #fff;
  border: 1px solid #e6e8ee; border-radius: 14px; box-shadow: 0 16px 40px rgba(16, 35, 63, .16); }
.nd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }      /* hover bridge */
.site-nav .links .nd-menu a { display: block; padding: 9px 10px; border-radius: 9px; border: 0; }
.site-nav .links .nd-menu a:hover, .site-nav .links .nd-menu a:focus { background: #f4f6fa; }
.nd-menu b { display: block; font-size: 14px; font-weight: 600; color: var(--ink, #14213d); } .nd-menu small { display: block; font-size: 12px; color: #6b7080; font-weight: 400; margin-top: 1px; }
.nd-menu .nd-h { display: block; padding: 10px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b4232a; }
.nd-menu .nd-h:not(:first-child) { margin-top: 4px; border-top: 1px solid #eef0f4; padding-top: 12px; }
.nd.on .nd-menu { display: block; } .nd.on .nd-btn svg { transform: rotate(180deg); }
@media (hover: hover) and (min-width: 901px) { .nd:hover .nd-menu, .nd:focus-within .nd-menu { display: block; } .nd:hover .nd-btn svg { transform: rotate(180deg); } }
@media (max-width: 900px) {
  .site-nav .nd { border-bottom: 1px solid var(--line); }
  .nd-btn { width: 100%; justify-content: space-between; padding: 12px 0; }
  .nd-menu { position: static; display: none; min-width: 0; margin: 0 0 8px; padding: 0 0 0 12px; border: 0; border-left: 2px solid #f1d2d4; border-radius: 0; box-shadow: none; }
  .site-nav .links .nd-menu a { padding: 9px 0; }
}