/* ============================================================
   TOKENS — Compliance Academy Georgia brandbook
   Navy base, brand blue as the single interactive accent, and the five
   pinwheel colours (red, orange, blue, teal, slate) as the direction palette.
   Light theme uses the brandbook's "on light" set, dark theme the brighter
   "on navy" set, exactly as the logo itself switches.
   Geometric identity, so the radius scale is tight: 4 / 6 / 10px.
   ============================================================ */
:root{
  /* Raw brand palette (brandbook p.8). */
  --b-red:#c90200;   --b-red-2:#ea0000;
  --b-orange:#df8800;--b-orange-2:#fe971a;
  --b-blue:#0d69bc;  --b-blue-2:#0f77ea;
  --b-teal:#00b294;  --b-teal-2:#00f5d2;
  --b-slate:#466f97;
  --b-navy:#000033;  --b-navy-2:#141c54;
  /* Logo mark fills, swapped per background. */
  --m-red:var(--b-red);--m-orange:var(--b-orange);--m-blue:var(--b-blue);--m-teal:var(--b-teal);--m-slate:var(--b-slate);
  --stripe:linear-gradient(90deg,var(--b-red) 0 20%,var(--b-orange) 20% 40%,var(--b-blue) 40% 60%,var(--b-teal) 60% 80%,var(--b-slate) 80% 100%);

  --paper:#f5f8fd;
  --surface:#ffffff;
  --surface-glass:rgba(255,255,255,.86);
  --surface-2:#ebf1fa;
  --surface-3:#dbe4f2;
  --ink:#0a0d33;
  --ink-2:#464b6c;
  --ink-3:#757a97;
  --line:#e1e7f1;
  --line-2:#c6cfe0;
  --accent:#0d69bc;
  --accent-hover:#0a5699;
  --accent-ink:#ffffff;
  --accent-soft:#e7f0fb;
  --accent-line:#a8c7ec;
  --accent-rgb:13,105,188;
  /* Deep brand navy. Carries the hero, the corporate band and any dark surface. */
  --deep:#000033;
  --deep-rgb:0,0,51;
  --bad:#c90200;
  --bad-soft:#fde9e8;
  --warn:#a35f00;
  /* Secondary brand colour: orange. Text-safe shade on light. */
  --gold:#a86400;
  --gold-hover:#8a5200;
  --gold-soft:#fdf2e2;
  --gold-line:#f0c88d;
  /* Ink used on top of a direction colour (tags, step numbers, pressed chips). */
  --tag-ink:#ffffff;
  /* Direction palette: one brand colour per training direction, used across
     badges, catalogue tags, filter chips and calendar marks. Text-safe shades. */
  --dir-fin:#0d69bc;   --dir-fin-soft:#e7f0fb;   --dir-fin-line:#a8c7ec;
  --dir-data:#00806b;  --dir-data-soft:#e0f6f1;  --dir-data-line:#8dd8c9;
  --dir-labor:#a86400; --dir-labor-soft:#fdf2e2; --dir-labor-line:#f0c88d;
  --dir-tax:#466f97;   --dir-tax-soft:#e9f0f6;   --dir-tax-line:#b3c6da;
  --dir-audit:#1f2a78; --dir-audit-soft:#e8eaf7; --dir-audit-line:#b3b8e2;
  --dir-cyber:#c90200; --dir-cyber-soft:#fde9e8; --dir-cyber-line:#f2aba9;
  --r-sm:4px;
  --r:6px;
  --r-lg:10px;
  --r-pill:999px;
  --wrap:1240px;
  --gut:24px;
  --shadow:0 1px 2px rgba(10,13,51,.05), 0 3px 10px -3px rgba(10,13,51,.08);
  --shadow-md:0 4px 14px -4px rgba(10,13,51,.11), 0 14px 34px -14px rgba(10,13,51,.16);
  --shadow-lg:0 8px 24px -8px rgba(10,13,51,.15), 0 34px 68px -26px rgba(10,13,51,.30);
  --sans:"Poppins", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display:"Poppins", "Noto Sans Georgian", system-ui, sans-serif;
  /* Figures use the brand face with tabular numerals; no separate mono family. */
  --mono:"Poppins", "Noto Sans Georgian", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --m-red:var(--b-red-2);--m-orange:var(--b-orange-2);--m-blue:var(--b-blue-2);--m-teal:var(--b-teal-2);
    --stripe:linear-gradient(90deg,var(--b-red-2) 0 20%,var(--b-orange-2) 20% 40%,var(--b-blue-2) 40% 60%,var(--b-teal-2) 60% 80%,var(--b-slate) 80% 100%);
    --paper:#03052a; --surface:#0a0e3a; --surface-2:#131a4c; --surface-3:#1d255d;
    --ink:#eef1fb; --ink-2:#a9afd0; --ink-3:#7b82a8;
    --line:#1d2457; --line-2:#2d356e;
    --accent:#4a9cf4; --accent-hover:#6eb0f7; --accent-ink:#00002a;
    --accent-soft:#0e1f5a; --accent-line:#264a9a; --accent-rgb:74,156,244;
    --bad:#ff6a62; --bad-soft:#3a0f1a; --warn:#fe971a;
    --gold:#fe971a; --gold-hover:#ffad4d; --gold-soft:#33230b; --gold-line:#6e4a17;
    --tag-ink:#00002a;
    --dir-fin:#4a9cf4;   --dir-fin-soft:#0e1f5a;   --dir-fin-line:#264a9a;
    --dir-data:#00f5d2;  --dir-data-soft:#06303a;  --dir-data-line:#0f6b66;
    --dir-labor:#fe971a; --dir-labor-soft:#33230b; --dir-labor-line:#6e4a17;
    --dir-tax:#8fb0d2;   --dir-tax-soft:#15264a;   --dir-tax-line:#34507a;
    --dir-audit:#aab2f2; --dir-audit-soft:#191f55; --dir-audit-line:#3c4594;
    --dir-cyber:#ff6a62; --dir-cyber-soft:#3a0f1a; --dir-cyber-line:#7a2630;
    --surface-glass:rgba(10,14,58,.86);
    --deep:#00001f; --deep-rgb:0,0,31;
    --shadow:0 1px 2px rgba(0,0,0,.44), 0 3px 10px -3px rgba(0,0,0,.6);
    --shadow-md:0 4px 14px -4px rgba(0,0,0,.6), 0 14px 34px -14px rgba(0,0,0,.72);
    --shadow-lg:0 8px 24px -8px rgba(0,0,0,.66), 0 34px 68px -26px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --m-red:var(--b-red-2);--m-orange:var(--b-orange-2);--m-blue:var(--b-blue-2);--m-teal:var(--b-teal-2);
  --stripe:linear-gradient(90deg,var(--b-red-2) 0 20%,var(--b-orange-2) 20% 40%,var(--b-blue-2) 40% 60%,var(--b-teal-2) 60% 80%,var(--b-slate) 80% 100%);
  --paper:#03052a; --surface:#0a0e3a; --surface-2:#131a4c; --surface-3:#1d255d;
  --ink:#eef1fb; --ink-2:#a9afd0; --ink-3:#7b82a8;
  --line:#1d2457; --line-2:#2d356e;
  --accent:#4a9cf4; --accent-hover:#6eb0f7; --accent-ink:#00002a;
  --accent-soft:#0e1f5a; --accent-line:#264a9a; --accent-rgb:74,156,244;
  --bad:#ff6a62; --bad-soft:#3a0f1a; --warn:#fe971a;
  --gold:#fe971a; --gold-hover:#ffad4d; --gold-soft:#33230b; --gold-line:#6e4a17;
  --tag-ink:#00002a;
  --dir-fin:#4a9cf4;   --dir-fin-soft:#0e1f5a;   --dir-fin-line:#264a9a;
  --dir-data:#00f5d2;  --dir-data-soft:#06303a;  --dir-data-line:#0f6b66;
  --dir-labor:#fe971a; --dir-labor-soft:#33230b; --dir-labor-line:#6e4a17;
  --dir-tax:#8fb0d2;   --dir-tax-soft:#15264a;   --dir-tax-line:#34507a;
  --dir-audit:#aab2f2; --dir-audit-soft:#191f55; --dir-audit-line:#3c4594;
  --dir-cyber:#ff6a62; --dir-cyber-soft:#3a0f1a; --dir-cyber-line:#7a2630;
  --surface-glass:rgba(10,14,58,.86);
  --deep:#00001f; --deep-rgb:0,0,31;
  --shadow:0 1px 2px rgba(0,0,0,.44), 0 3px 10px -3px rgba(0,0,0,.6);
  --shadow-md:0 4px 14px -4px rgba(0,0,0,.6), 0 14px 34px -14px rgba(0,0,0,.72);
  --shadow-lg:0 8px 24px -8px rgba(0,0,0,.66), 0 34px 68px -26px rgba(0,0,0,.8);
}

/* ============================================================ RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;line-height:1.18;letter-spacing:-.012em;font-weight:700;font-family:var(--display)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* Photography renders in full colour. The class stays as the single hook for
   image treatment, so swapping in the brand shoot is a one-line change. */
.gph{background:var(--surface-2)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .gph{filter:brightness(.93) saturate(1.03)}
}
:root[data-theme="dark"] .gph{filter:brightness(.93) saturate(1.03)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
/* Sections separate by space and tinted bands rather than by hairlines. */
.sec{padding:104px 0}
.sec.tint{background:var(--accent-soft)}
.sec.tint-gold{background:var(--surface-2)}
@media (max-width:860px){.sec{padding:62px 0}}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--accent-ink);padding:12px 18px}
.skip:focus{left:8px;top:8px}

main{position:relative}
#topSentinel{position:absolute;top:0;left:0;width:1px;height:56px;pointer-events:none}

/* ============================================================ TYPE */
.d1{font-size:clamp(2.1rem,4vw,3.4rem);font-weight:700;letter-spacing:-.022em;line-height:1.1}
.d2{font-size:clamp(1.75rem,2.8vw,2.45rem);font-weight:700;letter-spacing:-.018em;line-height:1.15}
.d3{font-size:clamp(1.2rem,1.7vw,1.45rem);font-weight:600;letter-spacing:-.012em}
.d4{font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
.lead{font-size:1.08rem;font-weight:300;color:var(--ink-2);line-height:1.66;max-width:56ch}
.body{color:var(--ink-2);line-height:1.68;max-width:66ch}
.small{font-size:.875rem;color:var(--ink-2)}
.tiny{font-size:.8rem;color:var(--ink-3)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.eyebrow{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin-bottom:14px}
.sec-head{max-width:62ch;margin-bottom:54px}
.sec-head::before{content:"";display:block;width:64px;height:4px;background:var(--rule,var(--accent));margin-bottom:24px}
.sec.tint .sec-head{--rule:var(--b-orange)}
.sec.tint-gold .sec-head{--rule:var(--b-teal)}
.sec-head .body{margin-top:14px}
.acc{color:var(--accent)}

/* ============================================================ BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:48px;padding:0 24px;border:1px solid transparent;border-radius:var(--r);
  font-size:.92rem;font-weight:500;letter-spacing:0;white-space:nowrap;
  cursor:pointer;background:none;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease,
             box-shadow .24s ease, transform .16s cubic-bezier(.16,1,.3,1);
}
/* The arrow leads the eye on hover. */
.btn .ph-arrow-right{transition:transform .24s cubic-bezier(.16,1,.3,1)}
.btn:hover:not([disabled]) .ph-arrow-right{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 2px rgba(var(--accent-rgb),.22), 0 10px 22px -12px rgba(var(--accent-rgb),.55)}
.btn-primary:hover:not([disabled]){background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 2px 5px rgba(var(--accent-rgb),.26), 0 16px 30px -14px rgba(var(--accent-rgb),.62)}
.btn-ghost{border-color:var(--line-2);color:var(--ink);background:var(--surface)}
.btn-ghost:hover:not([disabled]){border-color:var(--ink-3);background:var(--surface-2);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-quiet{background:var(--surface-2);color:var(--ink)}
.btn-quiet:hover:not([disabled]){background:var(--surface-3)}
.btn-sm{height:38px;padding:0 15px;font-size:.86rem}
.btn-xs{height:31px;padding:0 11px;font-size:.79rem;font-weight:500}
.btn-block{width:100%}
.btn-link{padding:0;height:auto;color:var(--accent);font-weight:600;border-bottom:1px solid var(--accent-line);border-radius:0}
.btn-link:hover{border-bottom-color:var(--accent)}
.btn svg{flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ============================================================ CHROME */
.hdr{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:1px solid var(--line);
  transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease}
.hdr-in{display:flex;align-items:center;gap:24px;height:76px}
/* Once the page is scrolled the bar frosts over the content beneath it. */
@supports (backdrop-filter: blur(10px)){
  body:not(.at-top) .hdr{background:var(--surface-glass);backdrop-filter:blur(14px) saturate(1.6);box-shadow:var(--shadow)}
}
@media (prefers-reduced-transparency: reduce){
  body:not(.at-top) .hdr{background:var(--surface);backdrop-filter:none}
}

/* On the home page the bar sits transparent over the hero photograph and
   resolves to the solid bar as soon as the page moves. */
body.hero-mode.at-top .hdr{background:transparent;border-bottom-color:transparent;box-shadow:none}
body.hero-mode.at-top .hdr .brand-txt b{color:#fff}
body.hero-mode.at-top .hdr .brand-txt span{color:#fff}
body.hero-mode.at-top .hdr .brand-rule{background:rgba(255,255,255,.7)}
body.hero-mode.at-top .hdr .brand-mark{--m-red:var(--b-red-2);--m-orange:var(--b-orange-2);--m-blue:var(--b-blue-2);--m-teal:var(--b-teal-2)}
body.hero-mode.at-top .nav a{color:rgba(255,255,255,.84)}
body.hero-mode.at-top .nav a:hover{color:#fff;background:rgba(255,255,255,.13)}
body.hero-mode.at-top .nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.17)}
body.hero-mode.at-top .lang{border-color:rgba(255,255,255,.3)}
body.hero-mode.at-top .lang button{background:transparent;color:rgba(255,255,255,.72)}
body.hero-mode.at-top .lang button[aria-pressed="true"]{background:#fff;color:var(--deep)}
body.hero-mode.at-top .icon-btn{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.28);color:#fff}
body.hero-mode.at-top .icon-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.44);color:#fff}
body.hero-mode.at-top .btn-acct{background:#fff;color:var(--deep);border-color:transparent;box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
body.hero-mode.at-top .btn-acct:hover{background:#e6ecf8}
body.hero-mode.at-top .mobnav{background:var(--surface)}
.brand{display:flex;align-items:center;gap:11px;min-width:0;max-width:100%}
.hdr .brand{flex:none;margin-right:auto}
/* Logo lockup (brandbook "alternative logotype"): pinwheel mark, hairline
   rule, two-line wordmark in Poppins. The wordmark stays English in both
   languages because it is the registered logo, not translatable copy. */
.brand-mark{width:40px;height:42px;flex:none;display:block;overflow:visible}
.brand-mark .m1{fill:var(--m-blue)} .brand-mark .m2{fill:var(--m-teal)} .brand-mark .m3{fill:var(--m-slate)}
.brand-mark .m4{fill:var(--m-red)}  .brand-mark .m5{fill:var(--m-orange)}
.brand-rule{width:1px;align-self:stretch;margin:2px 1px;background:var(--b-navy-2);flex:none;transition:background-color .3s ease}
.brand-txt{display:flex;flex-direction:column;line-height:1.08;min-width:0;font-family:"Poppins",sans-serif}
.brand-txt b{font-size:.98rem;font-weight:700;letter-spacing:-.005em;transition:color .3s ease}
.hdr .brand-txt b{white-space:nowrap}
.brand-txt span{font-size:.98rem;font-weight:300;color:var(--ink);letter-spacing:0;transition:color .3s ease}
.hdr .brand-txt span{white-space:nowrap}
.brand-legal{font-size:.78rem;color:var(--ink-3);margin-top:12px;line-height:1.5}
.nav{display:flex;align-items:center;gap:2px}
.nav a{padding:9px 11px;border-radius:var(--r);font-size:.875rem;font-weight:500;color:var(--ink-2);white-space:nowrap;transition:color .16s ease,background-color .16s ease}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600;background:var(--surface-2)}
.util{display:flex;align-items:center;gap:8px;flex:none}
.lang{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lang button{padding:7px 10px;font-size:.77rem;font-weight:600;background:var(--surface);color:var(--ink-3);border:0;cursor:pointer;transition:background-color .16s ease,color .16s ease}
.lang button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:border-color .16s ease,color .16s ease}
.icon-btn:hover{border-color:var(--ink-3);color:var(--ink)}
.burger{display:none}
@media (max-width:1210px){ .nav{display:none} .burger{display:grid} }
@media (max-width:520px){ .util .btn-acct span{display:none} .util .btn-acct{padding:0 12px} }
.mobnav{border-top:1px solid var(--line);background:var(--surface);padding:8px 0 18px}
.mobnav a{display:block;padding:13px 4px;border-bottom:1px solid var(--line);font-weight:500}
.mobnav a:last-of-type{border-bottom:0}


.switch{position:relative;width:40px;height:22px;flex:none;border:0;padding:0;border-radius:var(--r-pill);background:var(--surface-3);cursor:pointer;transition:background-color .18s ease}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .18s ease}
.switch[aria-checked="true"]{background:var(--accent)}
.switch[aria-checked="true"]::after{transform:translateX(18px)}


/* ============================================================ REVEAL */
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1 !important;transform:none !important;transition:none}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* ============================================================ HERO
   One full-bleed photograph carries the section. A layered scrim keeps the
   copy at AAA contrast on the left while the image stays readable on the
   right. Max 4 text elements, headline under 2 lines, CTAs above the fold. */
.hero{
  position:relative;isolation:isolate;border-top:0;overflow:hidden;
  min-height:min(660px,86vh);
  display:flex;align-items:center;
  padding:132px 0 104px;

  margin-top:-76px;                 /* slides under the transparent header */
}
.hero > .wrap{width:100%}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--deep)}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(0,0,51,.97) 0%, rgba(0,0,51,.9) 38%, rgba(0,0,51,.66) 68%, rgba(0,0,51,.5) 100%),
    linear-gradient(0deg, rgba(0,0,51,.6) 0%, transparent 40%);
}
.hero-copy{position:relative;max-width:48rem}
.hero-copy .d1{color:#fff;margin-bottom:22px;max-width:21ch;text-wrap:balance}
.hero-copy .lead{color:rgba(255,255,255,.85);margin-bottom:36px;max-width:50ch}
.hero .btn{padding:0 22px}
.hero .btn-primary{background:#fff;color:var(--deep);box-shadow:0 12px 32px -14px rgba(0,0,0,.6)}
.hero .btn-primary:hover:not([disabled]){background:#e6ecf8;box-shadow:0 16px 38px -14px rgba(0,0,0,.66)}
.hero .btn-ghost{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.36);color:#fff}
.hero .btn-ghost:hover:not([disabled]){background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.52);color:#fff;box-shadow:none}
.hero .btn-quiet{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.92)}
.hero .btn-quiet:hover:not([disabled]){background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.34);color:#fff}
@media (max-width:1000px){
  .hero{min-height:min(580px,82vh);padding:118px 0 76px}
  .hero-copy .d1{max-width:100%}
}
@media (max-width:620px){
  .hero{min-height:auto;padding:110px 0 64px}
  .hero-bg img{object-position:56% 44%}
  .hero-bg::after{background:linear-gradient(168deg, rgba(0,0,51,.93) 0%, rgba(0,0,51,.78) 46%, rgba(0,0,51,.93) 100%)}
}

/* ============================================================ LOGO WALL */
.logos{padding:34px 0;border-top:1px solid var(--line);background:var(--surface)}
.logo-row{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;align-items:center}
.logo-row a{display:flex;align-items:center;justify-content:center;gap:9px;
  color:var(--lg,var(--ink-3));opacity:.82;transition:opacity .18s ease}
.logo-row a:hover{opacity:1}
/* Client marks carry their own colour, the way a real logo wall would. */
.logo-row a:nth-child(1){--lg:var(--dir-fin)}
.logo-row a:nth-child(2){--lg:var(--dir-data)}
.logo-row a:nth-child(3){--lg:var(--dir-labor)}
.logo-row a:nth-child(4){--lg:var(--dir-audit)}
.logo-row a:nth-child(5){--lg:var(--dir-cyber)}
.logo-row a:nth-child(6){--lg:var(--dir-tax)}
.logo-row svg{flex:none}
.logo-row b{font-size:.86rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
@media (max-width:900px){.logo-row{grid-template-columns:repeat(3,1fr);gap:22px 14px}}
@media (max-width:460px){.logo-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.logo-row b{white-space:normal}}

/* ============================================================ BENTO */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,auto);gap:18px}
.bento .cell{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--shadow);
  transition:border-color .24s ease, transform .34s cubic-bezier(.16,1,.3,1), box-shadow .34s ease;
}
.bento .cell:hover{border-color:var(--accent-line);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.cell-wide{grid-column:span 2}
.cell-media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden}
.cell-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.bento .cell:hover .cell-media img{transform:scale(1.05)}
.cell-wide .cell-media{aspect-ratio:16/7}
.cell-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.cell-body .d4{letter-spacing:-.022em}
.cell-foot{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cell-tint{background:var(--accent-soft);border-color:var(--accent-line)}
.cell-dark{background:var(--surface-2)}
@media (max-width:960px){.bento{grid-template-columns:repeat(2,1fr)}.cell-wide{grid-column:span 2}}
@media (max-width:620px){.bento{grid-template-columns:1fr}.cell-wide{grid-column:span 1}}

/* ============================================================ META / BADGES */
.meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.79rem;color:var(--ink-3)}
.meta .sep{width:1px;height:11px;background:var(--line-2)}
.badge{
  display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--r-sm);
  font-size:.72rem;font-weight:600;letter-spacing:.02em;background:var(--surface-2);color:var(--ink-2);
}
.badge-acc{background:var(--accent-soft);color:var(--accent)}
.badge-out{background:transparent;border:1px solid var(--line-2);color:var(--ink-3)}
.badge-low{background:var(--bad-soft);color:var(--bad)}
.price{font-family:var(--mono);font-size:1.02rem;font-weight:500;letter-spacing:-.02em}
.seats-low{color:var(--bad);font-weight:600}

/* ============================================================ CATALOG */
.cat-layout{display:grid;grid-template-columns:264px 1fr;gap:40px;align-items:start}
.filters{position:sticky;top:100px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:20px;box-shadow:var(--shadow)}
.filters h4{font-size:.79rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);font-weight:600;margin-bottom:12px}
.fgroup{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.fgroup:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:0}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  height:32px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);
  font-size:.8rem;font-weight:500;color:var(--ink-2);cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease,color .16s ease;
}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.check{display:flex;align-items:center;gap:9px;padding:6px 0;cursor:pointer;font-size:.88rem;color:var(--ink-2)}
.check input{width:16px;height:16px;accent-color:var(--accent);flex:none}
.check:hover{color:var(--ink)}
.range-out{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.8rem;color:var(--ink-2);margin-top:6px}
input[type="range"]{width:100%;accent-color:var(--accent)}
.cat-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.search{position:relative;flex:1;min-width:220px}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
.search input{width:100%;height:46px;padding:0 14px 0 40px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface)}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.cat-count{font-size:.86rem;color:var(--ink-2);margin-bottom:16px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{
  display:flex;flex-direction:column;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  transition:border-color .24s ease, transform .34s cubic-bezier(.16,1,.3,1), box-shadow .34s ease;
}
.card:hover{border-color:var(--accent-line);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card-media{display:block;aspect-ratio:16/9;overflow:hidden;position:relative}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.card:hover .card-media img{transform:scale(1.05)}
.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
@media (max-width:1080px){.cat-layout{grid-template-columns:1fr}.filters{position:static}}
@media (max-width:700px){.cards{grid-template-columns:1fr}}

/* skeletons + empty state */
.sk{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.sk-media{aspect-ratio:16/9;background:var(--surface-2)}
.sk-line{height:12px;border-radius:var(--r);background:var(--surface-2);margin:14px 20px}
.sk-line.w60{width:60%}
.sk-line.w40{width:40%}
@media (prefers-reduced-motion: no-preference){
  .sk-media,.sk-line{animation:shimmer 1.4s ease-in-out infinite}
  @keyframes shimmer{0%,100%{opacity:1}50%{opacity:.5}}
}
.empty{
  grid-column:1/-1;text-align:center;padding:56px 28px;border:1px dashed var(--line-2);
  border-radius:var(--r-lg);background:var(--surface);
}
.empty svg{color:var(--ink-3);margin:0 auto 16px}

/* ============================================================ CALENDAR */
.cal-layout{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.cal{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:20px;box-shadow:var(--shadow)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-head b{font-size:1rem;font-weight:700;letter-spacing:-.02em}
.cal-nav{display:flex;gap:6px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);text-align:center;padding:6px 0}
.cal-day{
  position:relative;aspect-ratio:1;border:1px solid transparent;border-radius:var(--r);
  background:transparent;font-family:var(--mono);font-size:.82rem;color:var(--ink-2);cursor:default;
  display:grid;place-items:center;transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.cal-day.out{color:var(--ink-3);opacity:.4}
.cal-day.has{cursor:pointer;background:var(--d-soft,var(--surface-2));color:var(--ink);font-weight:500}
.cal-day.has:hover{border-color:var(--d-line,var(--accent-line))}
.cal-day.has::after{content:"";position:absolute;bottom:5px;width:16px;height:2px;border-radius:1px;background:var(--d,var(--accent))}
.cal-day.sel{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.cal-day.sel::after{background:var(--accent-ink)}
.cal-day.today{border-color:var(--ink-3)}
.cal-legend{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink-3)}
.sessions{display:flex;flex-direction:column}
.session{
  display:grid;grid-template-columns:66px 1fr auto;gap:18px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.session:last-child{border-bottom:0}
.session-date{text-align:center;font-family:var(--mono)}
.session-date b{display:block;font-size:1.45rem;font-weight:500;letter-spacing:-.03em;line-height:1}
.session-date span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
@media (max-width:960px){.cal-layout{grid-template-columns:1fr;gap:32px}}
@media (max-width:520px){.session{grid-template-columns:52px 1fr;gap:14px}.session>.btn{grid-column:2}}

/* ============================================================ ACCESS TABLE (guest vs registered) */
.access{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.access-col{border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;background:var(--surface);box-shadow:var(--shadow)}
.access-col.pri{border-color:var(--accent-line);background:linear-gradient(158deg,var(--accent-soft),var(--surface) 76%)}
.access-col h3{margin-bottom:6px}
.access-col ul{margin-top:18px;display:flex;flex-direction:column;gap:11px}
.access-col li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.access-col li svg{flex:none;margin-top:3px}
.access-col li.no{color:var(--ink-3)}
@media (max-width:760px){.access{grid-template-columns:1fr}}

/* ============================================================ STEPS (booking flow) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{
  position:relative;padding:26px 24px 26px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  transition:transform .34s cubic-bezier(.16,1,.3,1), box-shadow .34s ease;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
/* A colour per step, so the flow reads as four stages rather than four boxes. */
.step:nth-child(1){--sc:var(--dir-fin)}
.step:nth-child(2){--sc:var(--dir-audit)}
.step:nth-child(3){--sc:var(--dir-labor)}
.step:nth-child(4){--sc:var(--dir-tax)}
.step-n{
  display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-pill);
  background:var(--sc,var(--accent));color:var(--tag-ink);
  font-family:var(--mono);font-size:.84rem;font-weight:600;margin-bottom:16px;
}
.step h4{margin-bottom:7px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ============================================================ CORPORATE BAND */
.band{position:relative;overflow:hidden;border-radius:var(--r-lg);isolation:isolate;box-shadow:var(--shadow-md)}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg, rgba(0,0,51,.96) 0%, rgba(20,28,84,.88) 50%, rgba(20,28,84,.72) 100%)}
.band-in{padding:66px 56px;max-width:640px;color:#f2f5f4}
.band-in .d2{color:#fff;margin-bottom:16px}
.band-in p{color:rgba(242,245,244,.82);margin-bottom:26px;max-width:52ch;line-height:1.65}
.band .btn-ghost{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.band .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.band .btn-primary{background:#fff;color:var(--b-navy)}
.band .btn-primary:hover{background:#e6ecf8}
@media (max-width:760px){.band-in{padding:44px 26px}}

/* ============================================================ VERIFY */
.verify-panel{max-width:660px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:38px;box-shadow:var(--shadow-md)}
.verify-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.verify-actions{display:flex;gap:10px;flex:none}
.verify-form .field{flex:1;min-width:200px}
.verify-result{margin-top:24px;padding:22px;border-radius:var(--r);border:1px solid var(--line)}
.verify-result.ok{border-color:var(--accent-line);background:var(--accent-soft)}
.verify-result.err{border-color:var(--bad);background:var(--bad-soft)}
.verify-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-top:18px}
.verify-grid dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);margin-bottom:3px}
.verify-grid dd{margin:0;font-size:.94rem;font-weight:600}
@media (max-width:560px){.verify-grid{grid-template-columns:1fr}.verify-panel{padding:24px 20px}}

/* ============================================================ TRAINERS RAIL */
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;
  margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);
  padding-left:var(--gut);padding-right:var(--gut)}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.trainer{scroll-snap-align:start;flex:none;width:262px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .34s cubic-bezier(.16,1,.3,1), box-shadow .34s ease}
.trainer:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.trainer img{width:100%;aspect-ratio:1;object-fit:cover}
.trainer-body{padding:16px 18px 18px}
.trainer-body b{display:block;font-size:.98rem;letter-spacing:-.02em}
.trainer-body .tiny{margin-top:3px}
.trainer-body p{margin-top:10px;font-size:.84rem;color:var(--ink-2);line-height:1.55}

/* ============================================================ EDITORIAL / BLOG */
.editorial{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:start}
.post-lead img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);margin-bottom:22px;box-shadow:var(--shadow)}
.post-list{display:flex;flex-direction:column}
.post-row{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;cursor:pointer}
.post-row:first-child{padding-top:0}
.post-row:last-child{border-bottom:0}
.post-row img{width:96px;height:72px;object-fit:cover;border-radius:var(--r)}
.post-row b{font-size:.96rem;font-weight:600;letter-spacing:-.02em;display:block;margin-bottom:6px}
.post-row:hover b{color:var(--accent)}
@media (max-width:900px){.editorial{grid-template-columns:1fr;gap:34px}}

/* ============================================================ ACCORDION */
.acdn{border-top:1px solid var(--line)}
.acdn-item{border-bottom:1px solid var(--line)}
.acdn-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;background:none;border:0;cursor:pointer;text-align:left;
  font-size:1.02rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);
}
.acdn-btn:hover{color:var(--accent)}
.acdn-btn svg{flex:none;color:var(--ink-3);transition:transform .22s ease}
.acdn-btn[aria-expanded="true"] svg{transform:rotate(45deg);color:var(--accent)}
.acdn-panel{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.16,1,.3,1)}
.acdn-panel > div{padding:0 0 24px;max-width:70ch;color:var(--ink-2);line-height:1.68}

/* ============================================================ FORMS */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field > label{font-size:.83rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.field .req{color:var(--bad)}
.field .hint{font-size:.78rem;color:var(--ink-3)}
.field input,.field select,.field textarea{
  height:46px;padding:0 13px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--surface);color:var(--ink);width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field textarea{height:auto;min-height:118px;padding:12px 13px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.field .err{display:none;font-size:.79rem;color:var(--bad);font-weight:500}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--bad)}
.field.invalid .err{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
@media (max-width:700px){.grid2,.grid3{grid-template-columns:1fr}}
.form-panel{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:36px;box-shadow:var(--shadow)}
@media (max-width:560px){.form-panel{padding:22px 18px}}
.form-note{margin-top:16px;font-size:.8rem;color:var(--ink-3);line-height:1.55}
.success{
  padding:30px;border:1px solid var(--accent-line);border-radius:var(--r-lg);
  background:var(--accent-soft);text-align:center;
}
.success svg{color:var(--accent);margin:0 auto 14px}
.radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.radio-card{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;background:var(--surface);transition:border-color .16s ease,background-color .16s ease}
.radio-card:hover{border-color:var(--ink-3)}
.radio-card input{width:17px;height:17px;accent-color:var(--accent);flex:none;margin-top:2px;height:17px}
.radio-card:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.radio-card b{display:block;font-size:.92rem;letter-spacing:-.015em}
.radio-card span{font-size:.8rem;color:var(--ink-2);line-height:1.5}
@media (max-width:620px){.radio-cards{grid-template-columns:1fr}}

/* ============================================================ CHECKOUT */
.co-layout{display:grid;grid-template-columns:1fr 372px;gap:40px;align-items:start}
.co-steps{display:flex;align-items:center;gap:0;margin-bottom:34px;flex-wrap:wrap}
.co-step{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--ink-3);font-weight:500}
.co-step i{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--line-2);font-family:var(--mono);font-size:.75rem;font-style:normal;
}
.co-step.on{color:var(--ink);font-weight:600}
.co-step.on i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.co-step.done i{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.co-arrow{width:34px;height:1px;background:var(--line-2);margin:0 12px}
@media (max-width:700px){.co-arrow{width:14px;margin:0 7px}.co-step span{display:none}.co-step.on span{display:inline}}
.summary{position:sticky;top:100px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-md)}
.summary-media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.summary-body{padding:22px}
.sum-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:.89rem;color:var(--ink-2)}
.sum-row b{color:var(--ink);font-weight:600;text-align:right}
.sum-total{margin-top:12px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline}
.sum-total b{font-family:var(--mono);font-size:1.4rem;font-weight:500;letter-spacing:-.03em}
.qty{display:flex;align-items:center;gap:0;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;width:fit-content}
.qty button{width:40px;height:42px;background:var(--surface);border:0;cursor:pointer;color:var(--ink-2);font-size:1.1rem;transition:background-color .16s ease}
.qty button:hover:not([disabled]){background:var(--surface-2);color:var(--ink)}
.qty button[disabled]{opacity:.35;cursor:not-allowed}
.qty output{width:52px;text-align:center;font-family:var(--mono);font-size:.98rem;border-left:1px solid var(--line);border-right:1px solid var(--line);height:42px;line-height:42px}
.flitt{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--accent-line);border-radius:var(--r);background:var(--accent-soft);margin-bottom:22px}
.flitt-mark{width:38px;height:38px;border-radius:var(--r);background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:none;font-weight:700;font-size:.9rem}
@media (max-width:980px){.co-layout{grid-template-columns:1fr}.summary{position:static}}

.spinner{width:17px;height:17px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block}
@media (prefers-reduced-motion: no-preference){.spinner{animation:spin .7s linear infinite}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================ CABINET */
.cab-layout{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:start}
.cab-side{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;position:sticky;top:100px;box-shadow:var(--shadow)}
.cab-user{padding:22px;border-bottom:1px solid var(--line);display:flex;gap:13px;align-items:center}
.cab-user > div{min-width:0}
.cab-user b,.cab-user span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cab-user img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.cab-user b{display:block;font-size:.92rem;letter-spacing:-.02em}
.cab-tabs{padding:8px}
.cab-tab{
  width:100%;display:flex;align-items:center;gap:11px;padding:11px 13px;border:0;border-radius:var(--r);
  background:none;cursor:pointer;text-align:left;font-size:.89rem;font-weight:500;color:var(--ink-2);
  transition:background-color .16s ease,color .16s ease;
}
.cab-tab:hover{background:var(--surface-2);color:var(--ink)}
.cab-tab[aria-selected="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.cab-tab svg{flex:none}
.cab-tab .dot{margin-left:auto;font-family:var(--mono);font-size:.72rem;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-pill);padding:1px 7px}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);margin-bottom:28px}
.stat{padding:22px 20px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--mono);font-size:1.7rem;font-weight:500;letter-spacing:-.035em;line-height:1.1;color:var(--sc,var(--accent))}
.stat:nth-child(1){--sc:var(--dir-fin)}
.stat:nth-child(2){--sc:var(--dir-data)}
.stat:nth-child(3){--sc:var(--dir-labor)}
.stat:nth-child(4){--sc:var(--dir-tax)}
.stat span{font-size:.79rem;color:var(--ink-3)}
@media (max-width:820px){.stat-row{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.list{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.list-row{display:flex;align-items:center;gap:18px;padding:18px 22px;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:0}
.list-row img{width:64px;height:48px;object-fit:cover;border-radius:var(--r);flex:none}
.list-main{flex:1;min-width:0}
.list-main b{display:block;font-size:.94rem;letter-spacing:-.02em;margin-bottom:4px}
.list-actions{display:flex;gap:8px;flex:none;flex-wrap:wrap}
@media (max-width:1080px){.cab-layout{grid-template-columns:1fr}.cab-side{position:static}}
@media (max-width:620px){
  .list-row{flex-wrap:wrap}
  .list-row img{width:100%;height:130px}
  .list-actions{width:100%}
}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}
table.tbl{width:100%;border-collapse:collapse;min-width:560px}
table.tbl th{
  text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);
  font-weight:600;padding:14px 20px;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.tbl td{padding:15px 20px;font-size:.89rem;border-bottom:1px solid var(--line)}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td.num{font-family:var(--mono);white-space:nowrap}

/* ============================================================ MODAL */
.ovl{position:fixed;inset:0;z-index:100;background:rgba(10,14,16,.62);display:grid;place-items:center;padding:20px;overflow-y:auto}
@supports (backdrop-filter: blur(4px)){.ovl{backdrop-filter:blur(3px)}}
.modal{
  width:100%;max-width:452px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:30px;margin:auto;
}
.modal-wide{max-width:640px}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}
.tabs2{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:24px}
.tabs2 button{flex:1;padding:11px;background:var(--surface);border:0;cursor:pointer;font-size:.89rem;font-weight:600;color:var(--ink-3);transition:background-color .16s ease,color .16s ease}
.tabs2 button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
@media (prefers-reduced-motion: no-preference){
  .modal{animation:pop .24s cubic-bezier(.16,1,.3,1)}
  @keyframes pop{from{opacity:0;transform:translateY(12px) scale(.985)}}
}

/* ============================================================ TOAST */
.toasts{position:fixed;right:16px;bottom:16px;z-index:120;display:flex;flex-direction:column;gap:9px;max-width:calc(100vw - 32px);pointer-events:none}
.toast{
  display:flex;gap:11px;align-items:flex-start;width:344px;max-width:100%;padding:14px 16px;
  background:var(--ink);color:var(--paper);border-radius:var(--r);box-shadow:var(--shadow-lg);
  font-size:.85rem;line-height:1.5;pointer-events:auto;
}
.toast svg{flex:none;margin-top:2px;color:var(--accent)}
.toast b{display:block;font-weight:600;margin-bottom:2px}
@media (prefers-reduced-motion: no-preference){
  .toast{animation:slidein .26s cubic-bezier(.16,1,.3,1)}
  @keyframes slidein{from{opacity:0;transform:translateX(20px)}}
}

/* ============================================================ PAGES / DETAIL */
.crumb{display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--ink-3);padding:22px 0}
.crumb button{background:none;border:0;padding:0;cursor:pointer;color:var(--ink-3)}
.crumb button:hover{color:var(--accent)}
.page-head{padding:38px 0 40px;border-bottom:1px solid var(--line)}
.page-head .d2{max-width:24ch}
.page-head .lead{margin-top:16px}

.detail{display:grid;grid-template-columns:1fr 372px;gap:44px;align-items:start;padding:34px 0 0}
.detail-hero img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:var(--r-lg);margin-bottom:28px;box-shadow:var(--shadow)}
.detail-body h3{margin:34px 0 14px}
.detail-body ul.ticks{display:flex;flex-direction:column;gap:11px;max-width:66ch}
.detail-body ul.ticks li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-2);line-height:1.6}
.detail-body ul.ticks svg{flex:none;margin-top:4px;color:var(--accent)}
.book-box{position:sticky;top:100px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:28px;box-shadow:var(--shadow-md)}
.book-price{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.book-price b{font-family:var(--mono);font-size:2rem;font-weight:500;letter-spacing:-.04em}
.book-meta{margin:20px 0;display:flex;flex-direction:column;gap:0}
.book-meta div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.87rem}
.book-meta div:last-child{border-bottom:0}
.book-meta span{color:var(--ink-3)}
.book-meta b{font-weight:600;text-align:right}
.trainer-mini{display:flex;gap:12px;align-items:center;padding:16px 0 0;margin-top:16px;border-top:1px solid var(--line)}
.trainer-mini img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
@media (max-width:980px){.detail{grid-template-columns:1fr;gap:32px}.book-box{position:static}}

.prose p{margin-bottom:18px;color:var(--ink-2);line-height:1.75;max-width:70ch}
.prose h3{margin:32px 0 12px}
.prose ul{display:flex;flex-direction:column;gap:9px;margin-bottom:20px;max-width:70ch}
.prose ul li{padding-left:18px;position:relative;color:var(--ink-2);line-height:1.65}
.prose ul li::before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--accent-line)}
.prose blockquote{margin:26px 0;padding:0 0 0 22px;border-left:2px solid var(--accent);font-size:1.06rem;line-height:1.6;color:var(--ink)}

/* ============================================================ SERVICES */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.svc > div{background:var(--surface);padding:30px}
.svc-n{font-family:var(--mono);font-size:.78rem;color:var(--accent);margin-bottom:14px}
.svc h3{margin-bottom:10px}
.svc ul{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.svc ul li{font-size:.87rem;color:var(--ink-2);padding-left:16px;position:relative;line-height:1.55}
.svc ul li::before{content:"";position:absolute;left:1px;top:10px;width:6px;height:1px;background:var(--accent)}
@media (max-width:760px){.svc{grid-template-columns:1fr}}

/* ============================================================ FOOTER */
.ftr{position:relative;background:var(--surface);padding:70px 0 78px}
/* Five-colour brand stripe, as on the brochure and certificate edges. */
.ftr::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--stripe)}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:44px;padding-bottom:44px;border-bottom:1px solid var(--line)}
.ftr h5{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);font-weight:600;margin-bottom:16px}
.ftr ul{display:flex;flex-direction:column;gap:10px}
.ftr ul a,.ftr ul button{font-size:.88rem;color:var(--ink-2);background:none;border:0;padding:0;cursor:pointer;text-align:left;transition:color .16s ease}
.ftr ul a:hover,.ftr ul button:hover{color:var(--accent)}
.ftr-bottom{padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.socials{display:flex;gap:8px}
.nl{display:flex;gap:8px;margin-top:14px}
.nl{flex-wrap:wrap}
.nl input{flex:1 1 0;width:0;min-width:0;height:42px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface)}
.nl input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
@media (max-width:940px){.ftr-grid{grid-template-columns:1fr 1fr;gap:34px}}
@media (max-width:560px){.ftr-grid{grid-template-columns:1fr}}

/* ============================================================ MOBILE HEADER
   The wordmark is allowed to wrap and the strapline drops, so the header can
   shrink below the width its desktop nowrap would otherwise force. */
@media (max-width:760px){
  :root{--gut:18px}
  .hdr-in{gap:12px;height:auto;min-height:64px;padding:9px 0}
  .brand-txt b,.brand-txt span{font-size:.86rem}
  /* The wordmark yields to the controls instead of pushing the header wider. */
  .hdr .brand{flex:1 1 auto;min-width:0;margin-right:8px}
  .hdr .brand-txt{min-width:0}
  .brand-mark{width:32px !important;height:34px !important}
  .util{gap:6px}
  .lang button{padding:7px 8px;font-size:.72rem}
  .icon-btn{width:34px;height:34px}
  .util .btn-sm{height:34px;padding:0 11px}
}
@media (max-width:420px){
  .btn{padding:0 16px;font-size:.88rem}
  .band-in{padding:34px 18px}
  .cal{padding:14px}
  .form-panel{padding:20px 16px}
  .verify-panel{padding:20px 16px}
}
@media (max-width:400px){
  :root{--gut:14px}
  .hdr .brand-rule{display:none}
  .brand-txt b,.brand-txt span{font-size:.8rem}
}

/* ============================================================ GRID HELPERS
   Fixed-column grids that collapse on smaller screens. */
.cards-3{grid-template-columns:repeat(3,1fr)}
.grid-aside{display:grid;grid-template-columns:1fr 400px;gap:52px;align-items:start}
.grid-aside.narrow{grid-template-columns:1fr 380px}
.about-cols{display:grid;grid-template-columns:1fr 1fr;gap:44px}
@media (max-width:1040px){ .cards-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:980px){ .grid-aside,.grid-aside.narrow{grid-template-columns:1fr;gap:36px} }
@media (max-width:820px){ .about-cols{grid-template-columns:1fr;gap:30px} }
@media (max-width:700px){ .cards-3{grid-template-columns:1fr} }

/* ============================================================ ICONS
   Phosphor web font, one family, one visual weight across the page. */
i[class^="ph"],i[class*=" ph"]{font-size:1.15em;line-height:1;flex:none;display:inline-block}
.btn i,.icon-btn i{font-size:1.05rem}
.btn-xs i,.btn-sm i{font-size:.98rem}
.icon-btn i{font-size:1.15rem}
.i-lg{font-size:1.55rem !important}
.i-xl{font-size:2.1rem !important}
.i-24{font-size:1.5rem !important}
.i-32{font-size:2rem !important}
.i-40{font-size:2.5rem !important}
.empty i{font-size:2.4rem;color:var(--ink-3);display:block;margin-bottom:14px}
.success i{font-size:2.4rem;color:var(--accent);display:block;margin-bottom:12px}
.toast i{font-size:1.2rem;margin-top:1px;color:var(--accent)}
.acdn-btn i{transition:transform .22s ease;color:var(--ink-3);font-size:1.25rem}
.acdn-btn[aria-expanded="true"] i{transform:rotate(45deg);color:var(--accent)}
.crumb i{font-size:.95rem}
.svc-ico{color:var(--sc,var(--accent));font-size:1.7rem;display:block;margin-bottom:14px}
.svc > div:nth-child(1){--sc:var(--dir-fin)}
.svc > div:nth-child(2){--sc:var(--dir-data)}
.svc > div:nth-child(3){--sc:var(--dir-labor)}
.svc > div:nth-child(4){--sc:var(--dir-audit)}
.access-col li i{color:var(--accent);font-size:1.05rem;margin-top:3px}
.access-col li.no i{color:var(--ink-3)}
.ticks i{color:var(--accent)}

/* ============================================================ DIRECTION COLOUR
   One hue per training direction. `data-dir` on any container hands the hue
   down as --d / --d-soft / --d-line, so badges, tags, chips and calendar
   marks all pick it up without extra classes.
   ============================================================ */
[data-dir="fin"]  {--d:var(--dir-fin);  --d-soft:var(--dir-fin-soft);  --d-line:var(--dir-fin-line)}
[data-dir="data"] {--d:var(--dir-data); --d-soft:var(--dir-data-soft); --d-line:var(--dir-data-line)}
[data-dir="labor"]{--d:var(--dir-labor);--d-soft:var(--dir-labor-soft);--d-line:var(--dir-labor-line)}
[data-dir="tax"]  {--d:var(--dir-tax);  --d-soft:var(--dir-tax-soft);  --d-line:var(--dir-tax-line)}
[data-dir="audit"]{--d:var(--dir-audit);--d-soft:var(--dir-audit-soft);--d-line:var(--dir-audit-line)}
[data-dir="cyber"]{--d:var(--dir-cyber);--d-soft:var(--dir-cyber-soft);--d-line:var(--dir-cyber-line)}

.badge-dir{background:var(--d-soft,var(--accent-soft));color:var(--d,var(--accent))}
/* Catalogue tag sitting on the photograph. */
.media-tag{
  position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;
  height:25px;padding:0 10px;border-radius:var(--r);
  background:var(--d,var(--accent));color:var(--tag-ink);
  font-size:.72rem;font-weight:600;letter-spacing:.01em;
  box-shadow:0 2px 10px rgba(12,16,14,.34);
}
.card[data-dir]:hover{border-color:var(--d-line,var(--line-2))}
.cell[data-dir]:hover{border-color:var(--d-line,var(--line-2))}
.chip[data-dir][aria-pressed="true"]{background:var(--d,var(--accent));border-color:var(--d,var(--accent));color:var(--tag-ink)}
.trainer[data-dir] .trainer-body .tiny{color:var(--d,var(--accent));font-weight:600}
.card[data-dir] > .card-body > .tiny{color:var(--d,var(--accent));font-weight:600}

/* Tinted sections. A section either sits on paper or on one soft wash; the
   two never mix inside a single band. */

.eyebrow.gold{color:var(--gold)}

/* ============================================================ BRAND MOTIFS
   From the CAG brandbook: outline pinwheel pattern on navy surfaces, the
   five-colour stripe as an edge, and the pinwheel as a large hero graphic. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--stripe);z-index:1}
.hero-mark{position:absolute;z-index:-1;right:max(-60px,calc(50% - 760px));top:50%;transform:translateY(-46%);
  width:min(560px,46vw);height:auto;opacity:.9;pointer-events:none}
.hero-mark path{fill:none;stroke-width:2.2;vector-effect:non-scaling-stroke}
.hero-mark .m1{stroke:var(--b-blue-2)} .hero-mark .m2{stroke:var(--b-teal-2)} .hero-mark .m3{stroke:var(--b-slate)}
.hero-mark .m4{stroke:var(--b-red-2)}  .hero-mark .m5{stroke:var(--b-orange-2)}
@media (max-width:860px){.hero-mark{opacity:.35;width:420px;right:-120px}}
.band::after{content:"";position:absolute;right:-40px;top:-30px;width:380px;height:400px;z-index:-1;opacity:.85;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 254 268' fill='none' stroke-width='1.6'%3E%3Cpath stroke='%230f77ea' d='M66 35 125 2v123L66 93z'/%3E%3Cpath stroke='%2300f5d2' d='m130 97 73-40 49 30-100 53-22-12z'/%3E%3Cpath stroke='%23466f97' d='m130 135 80 43v67l-80-44z'/%3E%3Cpath stroke='%23ea0000' d='m2 201 123-69v63L2 265z'/%3E%3Cpath stroke='%23fe971a' d='m3 65 117 63-60 34-57-31z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:760px){.band::after{opacity:.3}}
.modal{border-top:0;position:relative;overflow:hidden}
.modal::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--stripe)}
.book-box{border-top:0;position:relative;overflow:hidden}
.book-box::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--stripe)}
.verify-result.ok{position:relative;overflow:hidden}
/* In dark the hairline beside the wordmark lifts off navy. */
:root[data-theme="dark"] .brand-rule{background:var(--ink-3)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand-rule{background:var(--ink-3)}}
:root[data-theme="dark"] .brand-mark .m3{fill:#5f87b0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand-mark .m3{fill:#5f87b0}}