/* SKILLGEEK — the site stylesheet.
   Tokens live in tokens.css. Nothing here should contain a literal colour or a
   literal font; if you need a new value, add a token.
   Layout is hand-written Grid/Flexbox: no framework, no page builder. */

/* ------------------------------------------------------------ base ------ */
*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--lh-head);margin:0}
h1{font-size:var(--fs-h1);letter-spacing:-.025em;font-weight:700}
h2{font-size:var(--fs-h2);letter-spacing:-.02em;font-weight:700}
h3{font-size:var(--fs-h3);letter-spacing:-.01em;font-weight:500}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
a:hover{color:var(--brand-800)}

:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm);
}
.sg-dark :focus-visible{outline-color:var(--focus-on-dark)}

.sg-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--bg);color:var(--ink);padding:var(--sp-3) var(--sp-4);
  border-radius:0 0 var(--radius) 0;font-weight:600;
}
.sg-skip:focus{left:0}

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

.sg-container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sg-narrow{max-width:var(--container-narrow);margin-inline:auto}
.sg-prose{max-width:var(--measure)}
.sg-prose p+p{margin-top:var(--sp-5)}

/* Section rhythm carries most of the "premium" weight in this redesign. The
   palette did not change; the air around the content did. --sp-10 (128px) at
   desktop is what separates an executive-education page from a busy LMS one. */
.sg-section{padding-block:var(--sp-8)}
.sg-section--tight{padding-block:var(--sp-7)}
@media(min-width:1024px){
  .sg-section{padding-block:var(--sp-10)}
  .sg-section--tight{padding-block:var(--sp-8)}
}
.sg-section--subtle{background:var(--bg-subtle)}
.sg-dark{background:var(--bg-dark);color:var(--ink-inverse)}
.sg-dark h1,.sg-dark h2,.sg-dark h3{color:var(--ink-inverse)}
.sg-dark a{color:var(--brand-300)}
/* Same specificity trap as the header buttons: `.sg-dark a` (0,1,1) beats
   `.sg-btn--onDark` (0,1,0), so the button on the dark video band rendered
   pink-on-white at 2.36:1. Re-assert with matching specificity. */
.sg-dark a.sg-btn--onDark{color:var(--n-900)}
.sg-dark a.sg-btn--onDark:hover{color:var(--n-900)}
.sg-dark a.sg-btn--primary{color:var(--ink-inverse)}

.sg-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-5);margin-bottom:var(--sp-6);flex-wrap:wrap;
}
.sg-section-head p{color:var(--ink-muted);margin-top:var(--sp-2);max-width:56ch}
.sg-dark .sg-section-head p{color:var(--n-300)}

.sg-eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-chip);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--brand-700);background:var(--brand-50);border:1px solid var(--brand-100);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-full);
}

/* --------------------------------------------------------- buttons ------ */
.sg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:48px;min-width:44px;padding:0 var(--sp-5);
  border-radius:var(--radius);border:0;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-sm);
  text-decoration:none;flex-shrink:0;white-space:nowrap;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),color var(--dur) var(--ease);
}
.sg-btn--primary{background:var(--action);color:var(--ink-inverse)}
.sg-btn--primary:hover{background:var(--action-hover);color:var(--ink-inverse);transform:translateY(-1px)}
.sg-btn--secondary{background:transparent;color:var(--brand-700);box-shadow:inset 0 0 0 1px var(--brand-600)}
.sg-btn--secondary:hover{background:var(--brand-50);color:var(--brand-800)}
.sg-btn--navy{background:var(--accent-700);color:var(--ink-inverse)}
.sg-btn--navy:hover{background:var(--accent-900);color:var(--ink-inverse)}
.sg-btn--ghost{background:transparent;color:var(--ink)}
.sg-btn--ghost:hover{background:var(--n-100)}
.sg-btn--onDark{background:var(--n-0);color:var(--n-900)}
.sg-btn--onDark:hover{background:var(--n-100);color:var(--n-900)}
.sg-btn--lg{min-height:56px;padding:0 var(--sp-6);font-size:var(--fs-base)}
.sg-btn--sm{min-height:40px;padding:0 var(--sp-4);font-size:var(--fs-sm)}
/* Outline button for a navy surface. Near-white label rather than the action
   crimson: --brand-600 on --accent-900 measures about 3.3:1, under the 4.5:1
   this size of text needs, while --n-0 on the same ground is about 18:1. */
.sg-btn--ghostOnDark{background:transparent;color:var(--n-0);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .35)}
.sg-btn--ghostOnDark:hover{background:rgb(255 255 255 / .1);color:var(--n-0)}
.sg-dark a.sg-btn--ghostOnDark{color:var(--n-0)}

/* ---------------------------------------------------------- header ------ */
/* 1px of nothing, sitting above the sticky header. When it leaves the viewport
   the header is stuck — that is the whole scroll-state mechanism, and it costs
   no scroll listener. See site.js. */
.sg-header-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}

.sg-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:var(--border);
  transition:box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .sg-header{background:var(--bg)}
}
.sg-header.is-scrolled{background:var(--bg);box-shadow:0 1px 20px -6px rgb(32 33 37 / .22)}
.sg-header-inner{
  display:flex;align-items:center;gap:var(--sp-4);min-height:72px;
  transition:min-height var(--dur) var(--ease);
}
/* Reduced height on scroll, desktop only — on a phone the bar is already
   compact and shrinking it just makes the tap targets worse. */
@media(min-width:1024px){
  .sg-header.is-scrolled .sg-header-inner{min-height:60px}
  .sg-header.is-scrolled .sg-brand img{height:30px}
}
.sg-brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.sg-brand img{height:36px;width:auto;border-radius:var(--radius-sm);
  transition:height var(--dur) var(--ease)}
.sg-brand-text{font-family:var(--font-display);font-weight:700;font-size:1.25rem;
  letter-spacing:-.02em;color:var(--ink)}

.sg-nav{display:flex;align-items:center;gap:var(--sp-4);margin-left:auto}
@media(min-width:1280px){.sg-nav{gap:var(--sp-5)}}
.sg-nav ul{display:flex;align-items:center;gap:var(--sp-4);list-style:none;margin:0;padding:0}
@media(min-width:1280px){.sg-nav ul{gap:var(--sp-5)}}
.sg-nav a{
  color:var(--ink);text-decoration:none;font-size:var(--fs-sm);font-weight:500;
  position:relative;min-height:44px;display:flex;align-items:center;white-space:nowrap;
}
.sg-nav ul a::after{
  content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;
  background:var(--brand-500);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.sg-nav ul a:hover::after,
.sg-nav ul .current-menu-item>a::after{transform:scaleX(1)}
/* `.sg-nav a` (0,1,1) outspecifies `.sg-btn--primary` (0,1,0), so the buttons in
   the header were inheriting the nav's dark ink on a crimson fill — measured at
   2.77:1 by Lighthouse, a real WCAG failure. Re-assert the button colours with
   matching specificity. */
.sg-nav a.sg-btn{text-decoration:none}
.sg-nav a.sg-btn--primary{color:var(--ink-inverse)}
.sg-nav a.sg-btn--primary:hover{color:var(--ink-inverse)}
.sg-nav a.sg-btn--secondary{color:var(--brand-700)}
.sg-nav a.sg-btn--secondary:hover{color:var(--brand-800)}
.sg-nav a.sg-btn--onDark{color:var(--n-900)}

.sg-nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;margin-left:auto;
  width:48px;height:48px;border-radius:var(--radius);
  background:transparent;border:1px solid var(--n-200);color:var(--ink);cursor:pointer;
}
@media(min-width:1024px){.sg-nav-toggle{display:none}}

@media(max-width:1023.98px){
  .sg-nav{
    position:absolute;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--bg);border-bottom:var(--border);
    padding:var(--sp-3) var(--gutter) var(--sp-6);margin-left:0;
    box-shadow:var(--shadow-modal);
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  }
  .sg-nav[data-open="true"]{transform:translateY(0);opacity:1;visibility:visible}
  .sg-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .sg-nav ul a{min-height:52px;border-bottom:var(--border)}
  .sg-nav ul a::after{display:none}
  .sg-nav .sg-btn{margin-top:var(--sp-3);width:100%}
}

/* ------------------------------------------------------------ hero ------ */
.sg-hero{padding-block:var(--sp-8) var(--sp-9)}
@media(min-width:1024px){.sg-hero{padding-block:var(--sp-9) var(--sp-10)}}
.sg-hero-grid{display:grid;gap:var(--sp-7);align-items:center}
@media(min-width:1024px){.sg-hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--sp-8)}}
.sg-hero h1{font-size:var(--fs-display);letter-spacing:-.03em;line-height:var(--lh-tight);
  margin-top:var(--sp-5)}
.sg-hero h1 em{font-style:normal;color:var(--brand-600)}
.sg-hero .sg-lede{font-size:var(--fs-lg);color:var(--ink-muted);max-width:52ch;margin-top:var(--sp-5)}
.sg-hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-7)}

.sg-stats{display:flex;flex-wrap:wrap;gap:var(--sp-7);margin-top:var(--sp-7);
  padding-top:var(--sp-6);border-top:var(--border)}
.sg-stat b{display:block;font-family:var(--font-display);font-size:var(--fs-h2);
  font-weight:700;letter-spacing:-.02em;line-height:1.1}
.sg-stat span{font-size:var(--fs-sm);color:var(--ink-muted)}

/* ------------------------------------------- photo treatment (one) ------ */
/* ONE consistent treatment across a mixed-quality, mixed-orientation source
   set. Applied entirely in CSS — source files are never edited. */
.sg-photo{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:var(--border);background:var(--n-100);
}
.sg-photo::after{
  content:"";position:absolute;inset:0;background:var(--accent-900);
  opacity:.08;mix-blend-mode:multiply;pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.sg-photo img{width:100%;height:100%;object-fit:cover;object-position:center;
  filter:saturate(1.05) contrast(1.03)}
.sg-photo:hover::after{opacity:0}
.sg-hero-photo{aspect-ratio:4/3}
@media(min-width:1024px){.sg-hero-photo{aspect-ratio:5/4}}

/* ----------------------------------------------------------- cards ------ */
.sg-grid{display:grid;gap:var(--sp-5);grid-template-columns:1fr;grid-auto-rows:1fr}
@media(min-width:768px){.sg-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.sg-grid{grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}}
.sg-grid--4{grid-template-columns:1fr}
@media(min-width:768px){.sg-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1280px){.sg-grid--4{grid-template-columns:repeat(4,1fr)}}

.sg-card{
  display:flex;flex-direction:column;position:relative;
  background:var(--bg);border:var(--border);border-radius:var(--radius);overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.sg-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--n-300)}
.sg-card:focus-within{box-shadow:var(--shadow-hover)}
.sg-card-media{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--n-100)}
.sg-card-media::after{
  content:"";position:absolute;inset:0;background:var(--accent-900);opacity:.08;
  mix-blend-mode:multiply;transition:opacity var(--dur) var(--ease);
}
.sg-card:hover .sg-card-media::after{opacity:0}
.sg-card-media img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.05) contrast(1.03);
  transition:transform var(--dur-slow) var(--ease)}
.sg-card:hover .sg-card-media img{transform:scale(1.03)}

/* Deterministic fallback so a course with no cover never renders a grey box. */
.sg-card-media--empty{
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-600),var(--accent-900));
}
.sg-card-media--empty span{
  font-family:var(--font-display);font-weight:700;font-size:3rem;
  color:var(--ink-inverse);opacity:.9;
}

.sg-card-body{display:flex;flex-direction:column;flex:1;padding:var(--sp-5);gap:var(--sp-3)}
.sg-chip{
  align-self:flex-start;max-width:100%;
  font-size:var(--fs-chip);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--n-800);background:var(--n-100);
  padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-sm);text-decoration:none;
  /* Long topic names must not turn the chip into a two-line block. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sg-card h3{
  /* Deliberately smaller than --fs-h3: cards sit in a 3-column grid that can be
     narrowed further by the catalog sidebar, and the display size clipped
     mid-word there. */
  font-size:clamp(1.0625rem,1rem + .25vw,1.25rem);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sg-card h3 a{color:var(--ink);text-decoration:none}
.sg-card h3 a::before{content:"";position:absolute;inset:0}
.sg-card-meta{font-size:var(--fs-sm);color:var(--ink-muted)}
.sg-card-foot{
  margin-top:auto;padding-top:var(--sp-3);display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-3);border-top:var(--border);flex-wrap:wrap;
}
.sg-price{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.125rem,1.05rem + .3vw,1.375rem);
  color:var(--brand-700);font-variant-numeric:tabular-nums}
.sg-price del{color:var(--n-500);font-size:var(--fs-sm);font-weight:500;margin-right:var(--sp-2)}
.sg-price ins{text-decoration:none}
.sg-card-cta{font-size:var(--fs-sm);font-weight:600;color:var(--brand-700);
  display:inline-flex;align-items:center;gap:var(--sp-1);min-height:44px}
.sg-card:hover .sg-card-cta svg{transform:translateX(3px)}
.sg-card-cta svg{transition:transform var(--dur) var(--ease)}

/* --------------------------------------------------- simple tiles ------- */
.sg-tile{
  position:relative;display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-5);border:var(--border);border-radius:var(--radius);background:var(--bg);
  text-decoration:none;color:inherit;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.sg-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--n-300)}
.sg-tile h3{font-size:var(--fs-h3)}
.sg-tile p{color:var(--ink-muted);font-size:var(--fs-sm)}
.sg-tile-count{font-size:var(--fs-sm);color:var(--ink-muted);margin-top:auto}
.sg-dark .sg-tile{background:transparent;border-color:rgb(255 255 255 / .16)}
.sg-dark .sg-tile p{color:var(--n-300)}

/* -------------------------------------------------------- services ------ */
.sg-service{
  display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);
  border:var(--border);border-radius:var(--radius);background:var(--bg);
}
.sg-service .sg-photo{aspect-ratio:16/10;margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0;
  border:0;border-radius:var(--radius) var(--radius) 0 0}
.sg-service .sg-placeholder{
  font-size:var(--fs-sm);color:var(--ink-muted);
  border:1px dashed var(--n-300);border-radius:var(--radius-sm);
  padding:var(--sp-3);background:var(--n-50);
}

/* ----------------------------------------------------------- video ------ */
/* Facade: poster + button. The YouTube iframe is injected on click, so no
   third-party request happens at page load. */
.sg-video{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  border:var(--border);background:var(--n-900);width:100%;padding:0;cursor:pointer;display:block;
}
.sg-video img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.03)}
/* The poster is the point of this block — the overlay exists to keep the play
   button and the title legible, not to hide the photograph. At .35 over an
   already-dark training photo the poster read as a black box. */
.sg-video::after{content:"";position:absolute;inset:0;background:var(--accent-900);opacity:.18;
  transition:opacity var(--dur) var(--ease)}
.sg-video:hover::after{opacity:.08}
.sg-video-play{
  position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:var(--radius-full);
  background:var(--brand-600);color:var(--ink-inverse);
  display:grid;place-items:center;z-index:2;pointer-events:none;
  transition:transform var(--dur) var(--ease);
}
.sg-video:hover .sg-video-play{transform:scale(1.06)}
.sg-video-title{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--sp-5);
  color:var(--ink-inverse);font-family:var(--font-display);font-weight:500;
  font-size:var(--fs-h3);text-align:left;
  background:linear-gradient(to top,rgb(5 10 48 / .85),transparent);
}
.sg-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --------------------------------------------------------- gallery ------ */
.sg-gallery{display:grid;gap:var(--sp-3);grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.sg-gallery{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}}
@media(min-width:1024px){.sg-gallery{grid-template-columns:repeat(4,1fr)}}
.sg-gallery .sg-photo{aspect-ratio:4/3;border-radius:var(--radius)}

/* ---------------------------------------------------- value / CTA ------- */
.sg-value{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  flex-wrap:wrap;padding:var(--sp-7);border-radius:var(--radius-lg);
  background:var(--bg-dark);color:var(--ink-inverse);
}
.sg-value p{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:500;max-width:48ch}

/* --------------------------------------------------- testimonials ------- */
.sg-quote{
  display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-5);
  border:var(--border);border-radius:var(--radius);background:var(--bg);
}
.sg-quote blockquote{margin:0;font-size:var(--fs-lg)}
.sg-quote figcaption{display:flex;align-items:center;gap:var(--sp-3);margin-top:auto}
.sg-quote img{width:48px;height:48px;border-radius:var(--radius-full);object-fit:cover}
.sg-quote cite{font-style:normal;font-weight:600}
.sg-quote small{display:block;color:var(--ink-muted)}

/* --------------------------------------------------------- catalog ------ */
.sg-catalog{display:grid;gap:var(--sp-6)}
@media(min-width:1024px){.sg-catalog{grid-template-columns:260px 1fr;gap:var(--sp-8)}}
.sg-filters{display:flex;flex-direction:column;gap:var(--sp-5)}
.sg-filters h2{font-size:var(--fs-h3)}
.sg-filter-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.sg-filter-list a{
  display:flex;justify-content:space-between;gap:var(--sp-2);align-items:center;
  min-height:44px;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);
  text-decoration:none;color:var(--ink);font-size:var(--fs-sm);
}
.sg-filter-list a:hover{background:var(--n-100)}
.sg-filter-list a[aria-current="true"]{background:var(--brand-50);color:var(--brand-700);font-weight:600}
.sg-filter-list span{color:var(--ink-muted);font-size:var(--fs-xs)}

.sg-field{display:flex;flex-direction:column;gap:var(--sp-2)}
.sg-field label{font-size:var(--fs-sm);font-weight:600}
.sg-field input,.sg-field select{
  min-height:48px;padding:0 var(--sp-3);border:var(--border-interactive);
  border-radius:var(--radius);background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-base);width:100%;
}
.sg-field input:focus-visible,.sg-field select:focus-visible{outline:3px solid var(--focus);outline-offset:1px}

.sg-toolbar{display:flex;gap:var(--sp-4);align-items:flex-end;flex-wrap:wrap;
  margin-bottom:var(--sp-5)}
.sg-result-count{color:var(--ink-muted);font-size:var(--fs-sm)}

.sg-empty{
  padding:var(--sp-8) var(--sp-5);text-align:center;border:1px dashed var(--n-300);
  border-radius:var(--radius);background:var(--bg-subtle);
}
.sg-empty h2{font-size:var(--fs-h3);margin-bottom:var(--sp-3)}

.sg-pagination{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-7);
  justify-content:center}
.sg-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 var(--sp-3);
  border:var(--border);border-radius:var(--radius-sm);text-decoration:none;color:var(--ink);
}
.sg-pagination .page-numbers:hover{background:var(--n-100)}
.sg-pagination .page-numbers.current{background:var(--action);color:var(--ink-inverse);border-color:var(--action)}

/* ---------------------------------------------------------- footer ------ */
.sg-footer{background:var(--bg-dark);color:var(--ink-inverse);padding-block:var(--sp-8)}
.sg-footer a{color:var(--n-300);text-decoration:none}
.sg-footer a:hover{color:var(--ink-inverse);text-decoration:underline}
.sg-footer-grid{display:grid;gap:var(--sp-7)}
@media(min-width:768px){.sg-footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.sg-footer h2{font-size:var(--fs-base);font-family:var(--font-body);font-weight:600;
  margin-bottom:var(--sp-4);color:var(--ink-inverse)}
.sg-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.sg-footer li a{display:inline-flex;align-items:center;min-height:44px}
.sg-footer img.sg-footer-logo{height:40px;width:auto;border-radius:var(--radius-sm)}
.sg-footer-contact{display:flex;flex-direction:column;gap:var(--sp-2);color:var(--n-300);
  font-size:var(--fs-sm);margin-top:var(--sp-4)}
.sg-socials{display:flex;gap:var(--sp-2);margin-top:var(--sp-5);flex-wrap:wrap}
.sg-socials a{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:var(--radius-sm);border:1px solid rgb(255 255 255 / .18);color:var(--n-0);
  transition:background var(--dur) var(--ease);
}
.sg-socials a:hover{background:rgb(255 255 255 / .1)}
.sg-footer-bottom{
  margin-top:var(--sp-7);padding-top:var(--sp-5);
  border-top:1px solid rgb(255 255 255 / .14);
  display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  font-size:var(--fs-sm);color:var(--n-300);
}

/* ------------------------------------------------------ page intro ------ */
.sg-page-head{padding-block:var(--sp-8) var(--sp-6)}
@media(min-width:1024px){.sg-page-head{padding-block:var(--sp-9) var(--sp-7)}}
.sg-page-head h1{max-width:20ch}
.sg-page-head p{color:var(--ink-muted);font-size:var(--fs-lg);margin-top:var(--sp-4);
  max-width:var(--measure)}

/* --------------------------------------------------------- contact ------ */
.sg-contact-grid{display:grid;gap:var(--sp-7)}
@media(min-width:1024px){.sg-contact-grid{grid-template-columns:1fr 1fr;gap:var(--sp-8)}}
.sg-contact-list{display:flex;flex-direction:column;gap:var(--sp-5)}
.sg-contact-item h2{font-size:var(--fs-h3);margin-bottom:var(--sp-2)}
.sg-contact-item a{font-size:var(--fs-lg)}
.sg-form{display:flex;flex-direction:column;gap:var(--sp-4)}
.sg-form textarea{
  min-height:150px;padding:var(--sp-3);border:var(--border-interactive);
  border-radius:var(--radius);font-family:var(--font-body);font-size:var(--fs-base);
  background:var(--bg);color:var(--ink);width:100%;
}
.sg-form textarea:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.sg-note{padding:var(--sp-4);border-radius:var(--radius);font-size:var(--fs-sm)}
.sg-note--ok{background:var(--accent-50);border:1px solid var(--accent-100);color:var(--accent-700)}
.sg-note--err{background:var(--brand-50);border:1px solid var(--brand-100);color:var(--brand-700)}

/* ======================================================================
   REDESIGN 2026-07-31 — navigation dropdowns, search, and the sections
   added for the homepage redesign. Tokens only; no literal colour or
   font below this line.
   ====================================================================== */

/* ------------------------------------------------- nav dropdowns -------- */
.sg-nav-actions{display:flex;align-items:center;gap:var(--sp-3);margin-left:var(--sp-2)}

.sg-has-submenu{position:relative;display:flex;align-items:center;gap:var(--sp-1)}

.sg-submenu-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border:0;background:transparent;
  color:var(--ink-muted);cursor:pointer;border-radius:var(--radius-sm);
}
.sg-submenu-toggle svg{transition:transform var(--dur) var(--ease)}
.sg-has-submenu[data-open="true"] > .sg-submenu-toggle svg{transform:rotate(180deg)}
.sg-submenu-toggle:hover{color:var(--ink)}

.sg-submenu{
  list-style:none;margin:0;padding:var(--sp-2);
  background:var(--bg);border:var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-modal);
}
.sg-submenu li{display:block}
.sg-submenu a{display:block;padding:var(--sp-3);border-radius:var(--radius-sm);white-space:nowrap}
.sg-submenu a:hover{background:var(--bg-subtle)}
.sg-submenu a::after{display:none}

@media(min-width:1024px){
  .sg-submenu{
    position:absolute;top:calc(100% + var(--sp-3));left:0;z-index:70;min-width:220px;
    /* Closed state is not display:none — a transition needs something to animate
       from, and visibility keeps it out of the tab order all the same. */
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility var(--dur-fast);
  }
  .sg-submenu[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0)}
  /* Bridges the gap between the parent and the panel so the pointer can cross
     it without a mouseleave firing mid-journey. */
  .sg-has-submenu[data-open="true"]::after{
    content:"";position:absolute;top:100%;left:0;right:0;height:var(--sp-3);
  }
}

@media(max-width:1023.98px){
  /* On a phone the drawer is already a vertical list, so a submenu is simply an
     indented accordion rather than a floating panel. */
  .sg-nav ul .sg-submenu{
    display:none;border:0;box-shadow:none;padding:0 0 0 var(--sp-4);
    background:var(--bg-subtle);border-radius:0;
  }
  .sg-nav ul .sg-submenu[data-open="true"]{display:block}
  .sg-has-submenu{flex-wrap:wrap;justify-content:space-between}
  .sg-has-submenu > a{flex:1}
  .sg-has-submenu > .sg-submenu{flex-basis:100%}
  .sg-submenu-toggle{width:44px;height:52px}
  .sg-nav-actions{flex-direction:column;align-items:stretch;margin-left:0;width:100%}
  .sg-nav-actions .sg-btn{width:100%}
  .sg-search-toggle{align-self:flex-start}
}

/* ------------------------------------------------------- search --------- */
.sg-search-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;background:transparent;
  color:var(--ink);cursor:pointer;border-radius:var(--radius-sm);
  transition:background var(--dur) var(--ease);
}
.sg-search-toggle:hover{background:var(--n-100)}

.sg-search-panel{border-top:var(--border);background:var(--bg);padding-block:var(--sp-4)}
.sg-search-form{display:flex;gap:var(--sp-3);max-width:640px;margin-inline:auto}
.sg-search-form input[type="search"]{
  flex:1;min-height:48px;padding:0 var(--sp-4);
  border:var(--border-interactive);border-radius:var(--radius);
  font-family:var(--font-body);font-size:var(--fs-base);
  background:var(--bg);color:var(--ink);
}
.sg-search-form input[type="search"]:focus-visible{outline:3px solid var(--focus);outline-offset:1px}

/* ------------------------------------------- hero trust indicators ------ */
.sg-trust{
  list-style:none;margin:var(--sp-6) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);
  font-size:var(--fs-sm);color:var(--ink-muted);
}
.sg-trust li{display:inline-flex;align-items:center;gap:var(--sp-2)}
.sg-trust svg{color:var(--action);flex-shrink:0}

/* ----------------------------------------------------- trusted by ------- */
.sg-trusted{background:var(--bg-subtle)}
.sg-trusted-title{
  font-family:var(--font-body);font-size:var(--fs-sm);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);
  text-align:center;margin-bottom:var(--sp-6);
}
.sg-logos{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--sp-6) var(--sp-8);
}
.sg-logos li{display:flex;align-items:center}
.sg-logos img{
  max-height:44px;width:auto;object-fit:contain;
  /* Grayscale keeps a wall of competing brand colours from fighting the page.
     Colour returns on hover so the logo is still recognisable on inspection. */
  filter:grayscale(1);opacity:.65;
  transition:filter var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.sg-logos a:hover img,.sg-logos a:focus-visible img{filter:grayscale(0);opacity:1}

/* --------------------------------------------------------- events ------- */
.sg-event-meta{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--sp-2);
  font-size:var(--fs-sm);color:var(--ink-muted);
}
.sg-event-meta li{display:flex;align-items:center;gap:var(--sp-2)}
.sg-event-meta svg{flex-shrink:0;color:var(--ink-muted)}
.sg-event-meta .is-limited{color:var(--brand-700);font-weight:600}
.sg-event-meta .is-limited svg{color:var(--brand-600)}
.sg-event-meta .is-full{color:var(--ink-muted);font-weight:600}

.sg-card-actions{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin-top:auto;padding-top:var(--sp-4);border-top:var(--border);
}
/* The card-wide ::before overlay on .sg-card h3 a makes the whole card one link.
   Real controls inside it have to be lifted above that overlay or they cannot
   be clicked at all. */
.sg-card-actions{position:relative;z-index:1}

.sg-link-arrow{
  font-size:var(--fs-sm);font-weight:600;color:var(--brand-700);text-decoration:none;
}
.sg-link-arrow:hover{text-decoration:underline}
.sg-ext{margin-left:var(--sp-1);vertical-align:-1px}

.sg-event-head{display:grid;gap:var(--sp-6);align-items:start}
@media(min-width:1024px){.sg-event-head{grid-template-columns:1.05fr .95fr;gap:var(--sp-8)}}
.sg-event-facts{
  display:grid;gap:var(--sp-4);margin:var(--sp-6) 0;padding:var(--sp-5);
  background:var(--bg-subtle);border-radius:var(--radius);
}
@media(min-width:640px){.sg-event-facts{grid-template-columns:repeat(3,auto);justify-content:start;gap:var(--sp-7)}}
.sg-event-facts dt{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:var(--sp-1);
}
.sg-event-facts dd{margin:0;font-weight:600}

.sg-breadcrumb{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;
  font-size:var(--fs-sm);color:var(--ink-muted);margin-bottom:var(--sp-4);
}
.sg-notice{
  display:inline-block;margin-top:var(--sp-4);padding:var(--sp-2) var(--sp-4);
  background:var(--n-100);border-radius:var(--radius-full);
  font-size:var(--fs-sm);color:var(--ink-muted);
}
.sg-chip-link{
  display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-4);
  border-radius:var(--radius-full);border:var(--border);
  font-size:var(--fs-sm);font-weight:600;color:var(--ink);text-decoration:none;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.sg-chip-link:hover{background:var(--bg-subtle);color:var(--ink)}
.sg-chip-link.is-current{background:var(--accent-900);border-color:var(--accent-900);color:var(--ink-inverse)}

/* ---------------------------------------------------- how it works ------ */
.sg-section-head--center{text-align:center;justify-content:center}
.sg-section-head--center p{margin-inline:auto}

.sg-steps{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--sp-6);counter-reset:sg-step;
}
@media(min-width:768px){.sg-steps{grid-template-columns:repeat(2,1fr);gap:var(--sp-7)}}
@media(min-width:1024px){.sg-steps{grid-template-columns:repeat(4,1fr)}}
.sg-step{position:relative;padding-top:var(--sp-6)}
.sg-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-full);
  background:var(--accent-900);color:var(--ink-inverse);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);
  margin-bottom:var(--sp-4);
}
.sg-step h3{font-size:var(--fs-h3);margin-bottom:var(--sp-2)}
.sg-step p{color:var(--ink-muted)}
/* The connecting rule between steps. Decorative, desktop only, and never drawn
   after the last one. */
@media(min-width:1024px){
  .sg-step::before{
    content:"";position:absolute;top:calc(var(--sp-6) + 22px);left:52px;right:calc(var(--sp-6) * -1 + 8px);
    height:1px;background:var(--n-200);
  }
  .sg-step:last-child::before{display:none}
}

/* ---------------------------------------------- corporate training ------ */
.sg-corporate-grid{display:grid;gap:var(--sp-7);align-items:center}
@media(min-width:1024px){.sg-corporate-grid{grid-template-columns:1.05fr .95fr;gap:var(--sp-9)}}
.sg-corporate .sg-lede{color:var(--n-300);font-size:var(--fs-lg);margin-top:var(--sp-4)}
.sg-ticks{list-style:none;margin:var(--sp-6) 0;padding:0;display:grid;gap:var(--sp-3)}
.sg-ticks li{display:flex;align-items:flex-start;gap:var(--sp-3);color:var(--n-100)}
.sg-ticks svg{flex-shrink:0;margin-top:3px;color:var(--brand-400)}

/* ------------------------------------------------- closing banner ------- */
.sg-closing-inner{text-align:center}
.sg-closing-inner h2{font-size:var(--fs-h1)}
.sg-closing .sg-lede{color:var(--n-300);font-size:var(--fs-lg);margin-top:var(--sp-4)}
.sg-closing .sg-hero-actions{justify-content:center;margin-top:var(--sp-7)}

/* ------------------------------------------------------------ FAQ ------- */
.sg-accordion{display:flex;flex-direction:column;gap:var(--sp-3)}
.sg-accordion-item{
  border:var(--border);border-radius:var(--radius);background:var(--bg);
  transition:border-color var(--dur) var(--ease);
}
.sg-accordion-item[open]{border-color:var(--n-300)}
.sg-accordion-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-5);cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg);
}
/* Safari draws its own disclosure triangle unless this is removed. */
.sg-accordion-item summary::-webkit-details-marker{display:none}
.sg-accordion-item summary::marker{content:""}
.sg-accordion-item summary:hover{color:var(--brand-700)}
.sg-accordion-item summary svg{flex-shrink:0;color:var(--ink-muted);transition:transform var(--dur) var(--ease)}
.sg-accordion-item[open] summary svg{transform:rotate(180deg)}
.sg-accordion-body{padding:0 var(--sp-5) var(--sp-5);color:var(--ink-muted)}
.sg-accordion-body p+p{margin-top:var(--sp-4)}

/* -------------------------------------------------------- articles ------ */
.sg-card-date{font-size:var(--fs-sm);color:var(--ink-muted);margin-top:auto}
.sg-article-card h3{font-size:var(--fs-h3)}
.sg-article-card p{color:var(--ink-muted);font-size:var(--fs-sm)}

/* ---------------------------------------------------------- rating ------ */
.sg-rating{color:var(--brand-600);letter-spacing:.1em;font-size:var(--fs-base)}

/* ------------------------------------------------- footer columns ------- */
/* The brief asked for a multi-column footer. The columns are driven by what
   actually exists — an empty menu renders no column rather than an empty
   heading, which is the same rule the homepage sections follow. */
@media(min-width:1024px){
  .sg-footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-8)}
}
.sg-footer{padding-block:var(--sp-9) var(--sp-7)}

/* ------------------------------------------------- chip filter bar ------ */
/* A horizontal row of filter chips. Deliberately NOT .sg-filters: that class is
   the Learning Hub's vertical sidebar, and borrowing it here stacked every chip
   full-width. Two different layouts should not share one class name. */
.sg-chipbar{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
  margin-top:var(--sp-6);justify-content:center;
}

/* -------------------------------------------- page-level search form ---- */
.sg-search-form--page{margin-top:var(--sp-6);max-width:none}

/* ------------------------------------------------- search results ------- */
.sg-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-5)}
.sg-results li{
  padding-bottom:var(--sp-5);border-bottom:var(--border);
  display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start;
}
.sg-results li:last-child{border-bottom:0}
.sg-results a{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:600;text-decoration:none}
.sg-results a:hover{text-decoration:underline}
.sg-results p{color:var(--ink-muted);font-size:var(--fs-sm)}

/* -------------------------------------------------- single post --------- */
.sg-post-meta{color:var(--ink-muted);font-size:var(--fs-sm);margin-top:var(--sp-4)}
.sg-post-cover{aspect-ratio:16/9;margin-bottom:var(--sp-2)}
.sg-muted-lede{color:var(--ink-muted);margin-top:var(--sp-4)}
.sg-hero-actions--center{justify-content:center;margin-top:var(--sp-6)}

/* --------------------------------------------- prose inside a page ------ */
/* Applies to the_content() on generic pages and posts, where the markup comes
   from the editor rather than from a template of ours. */
.sg-prose h2{font-size:var(--fs-h2);margin:var(--sp-7) 0 var(--sp-4)}
.sg-prose h3{font-size:var(--fs-h3);margin:var(--sp-6) 0 var(--sp-3)}
.sg-prose ul,.sg-prose ol{margin:var(--sp-4) 0;padding-left:var(--sp-5);display:grid;gap:var(--sp-2)}
.sg-prose img{border-radius:var(--radius);margin:var(--sp-5) 0}
.sg-prose blockquote{
  margin:var(--sp-6) 0;padding-left:var(--sp-5);
  border-left:3px solid var(--brand-500);font-size:var(--fs-lg);
}

/* ------------------------------------ certificate verification form ----- */
/* The [certificate_verify] shortcode emits a plain form. Left alone it rendered
   with the browser's default submit button — bright blue, square, and the only
   thing on the site not in the design system. Styled here rather than by editing
   the plugin's markup, so the shortcode stays usable anywhere. */
.sg-prose form input[type="text"],
.sg-prose form input[type="search"],
.sg-prose form input[type="email"]{
  width:100%;max-width:420px;min-height:48px;padding:0 var(--sp-4);
  border:var(--border-interactive);border-radius:var(--radius);
  font-family:var(--font-body);font-size:var(--fs-base);
  background:var(--bg);color:var(--ink);
}
.sg-prose form input:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.sg-prose form label{display:block;font-weight:600;margin-bottom:var(--sp-2)}
.sg-prose form button,
.sg-prose form input[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 var(--sp-5);margin-top:var(--sp-4);
  border-radius:var(--radius);border:0;cursor:pointer;
  background:var(--action);color:var(--ink-inverse);
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-sm);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.sg-prose form button:hover,
.sg-prose form input[type="submit"]:hover{background:var(--action-hover);transform:translateY(-1px)}

/* -------------------------------------------------- empty states -------- */
/* Extends the .sg-empty defined earlier — it already owns the dashed border and
   subtle ground; this only adds the stacking the new empty states need. */
.sg-empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}
.sg-empty p{color:var(--ink-muted);max-width:52ch}

/* ------------------------------------------------ icon sizing ----------- */
/* Inline SVGs carry width/height ATTRIBUTES, which lose to any CSS width and
   can be collapsed to 0 by a flex context. The hamburger rendered as an empty
   48px box on mobile for exactly this reason — the icon was there, measured 0
   wide. Pin every control icon in CSS and stop it shrinking. */
.sg-nav-toggle svg,
.sg-submenu-toggle svg,
.sg-search-toggle svg{flex:none;width:22px;height:22px}
.sg-submenu-toggle svg{width:16px;height:16px}
.sg-search-toggle svg{width:20px;height:20px}

/* --------------------------------------- mobile submenu tidy-up --------- */
@media(max-width:1023.98px){
  /* The drawer gives every nav link a bottom rule. Inside a submenu that
     stacked with the panel's own inset and read as a double border. */
  .sg-nav ul .sg-submenu a{border-bottom:0;border-radius:0;min-height:48px}
  .sg-nav ul .sg-submenu li:not(:last-child) a{border-bottom:var(--border)}
  .sg-has-submenu > a{border-bottom:0}
  .sg-has-submenu{border-bottom:var(--border)}
  .sg-has-submenu[data-open="true"]{border-bottom:0}
}

/* ------------------------------------------- page-head + content gap ---- */
/* A page head followed straight by a section stacked two lots of vertical
   padding and left a visible hole between the h1 and the content. */
.sg-page-head + .sg-section{padding-top:0}