/* ==========================================================================
   Jobjila IT Services — design system
   Reference: a technical specification sheet. Precise rules, tabular figures,
   stated terms. Deliberately not the gradient-hero edtech look — the whole
   credibility problem is that training sites look like marketing, so this
   one is built to read like documentation.
   ========================================================================== */

:root {
  /* ---- neutrals: cool, biased slightly toward the teal accent ---- */
  --ink:        #12181f;
  --ink-2:      #2b3640;
  --slate:      #55616d;
  --slate-2:    #838e99;
  --rule:       #dde2e3;
  --rule-soft:  #eaeeee;
  --paper:      #f6f8f8;
  --card:       #ffffff;
  --sunk:       #eff3f3;

  /* ---- accents, one per training track ---- */
  --teal:       #0f6e5c;
  --teal-2:     #0b5546;
  --teal-bg:    #e6f1ee;
  --indigo:     #3b4e9b;
  --indigo-bg:  #eaedf7;
  --steel:      #46596a;
  --steel-bg:   #eceff2;
  --ochre:      #a9691f;
  --ochre-bg:   #f9f1e5;
  --plum:       #7a3e6b;
  --plum-bg:    #f5ecf3;

  --signal:     var(--teal);
  --signal-2:   var(--teal-2);
  --signal-bg:  var(--teal-bg);
  --wa:         #128c4a;
  --wa-2:       #0f7a40;

  /* ---- type ---- */
  --f-sans:  "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  --f-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --f-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --s--1: .8125rem;
  --s-0:  1rem;
  --s-1:  1.1875rem;
  --s-2:  1.4375rem;
  --s-3:  1.8125rem;
  --s-4:  2.375rem;
  --s-5:  clamp(2.25rem, 6vw, 3.5rem);

  --measure: 66ch;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --max: 74rem;

  --shadow: 0 1px 2px rgba(18, 24, 31, .04), 0 8px 24px rgba(18, 24, 31, .05);
  --shadow-lift: 0 2px 4px rgba(18, 24, 31, .05), 0 16px 40px rgba(18, 24, 31, .09);

  /* Fixed dark navy for panels that are always dark with white text
     (.page-hero, .honest), regardless of light/dark theme. Deliberately
     NOT redefined in the dark-mode blocks below — --ink flips to a light
     color there (it means "the ink/text color", which is light on a dark
     theme), so a panel using var(--ink) as a *background* would render as
     a near-white box behind hardcoded white text. */
  --navy: #10151c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:        #eef1f2;
    --ink-2:      #c4ccd2;
    --slate:      #99a4ad;
    --slate-2:    #6e7a84;
    --rule:       #29333c;
    --rule-soft:  #1d252c;
    --paper:      #0c1115;
    --card:       #131a20;
    --sunk:       #10171c;

    --teal:       #38bda0;
    --teal-2:     #55d6b9;
    --teal-bg:    #0f2621;
    --indigo:     #8ea0e8;
    --indigo-bg:  #171c33;
    --steel:      #9db0c1;
    --steel-bg:   #18202a;
    --ochre:      #dda155;
    --ochre-bg:   #251a0c;
    --plum:       #d18cbe;
    --plum-bg:    #2a1826;

    --wa:         #2fbc6d;
    --wa-2:       #46d183;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.42);
  }
}

:root[data-theme="dark"] {
  --ink:        #eef1f2;
  --ink-2:      #c4ccd2;
  --slate:      #99a4ad;
  --slate-2:    #6e7a84;
  --rule:       #29333c;
  --rule-soft:  #1d252c;
  --paper:      #0c1115;
  --card:       #131a20;
  --sunk:       #10171c;

  --teal:       #38bda0;
  --teal-2:     #55d6b9;
  --teal-bg:    #0f2621;
  --indigo:     #8ea0e8;
  --indigo-bg:  #171c33;
  --steel:      #9db0c1;
  --steel-bg:   #18202a;
  --ochre:      #dda155;
  --ochre-bg:   #251a0c;
  --plum:       #d18cbe;
  --plum-bg:    #2a1826;

  --wa:         #2fbc6d;
  --wa-2:       #46d183;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.42);
}

/* track accent mapping — set on any container */
[data-track="cloud"]   { --signal: var(--teal);   --signal-bg: var(--teal-bg); }
[data-track="itsm"]    { --signal: var(--indigo); --signal-bg: var(--indigo-bg); }
[data-track="infra"]   { --signal: var(--steel);  --signal-bg: var(--steel-bg); }
[data-track="consult"] { --signal: var(--ochre);  --signal-bg: var(--ochre-bg); }
[data-track="data"]    { --signal: var(--plum);   --signal-bg: var(--plum-bg); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-serif);
  font-size: var(--s-0);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--f-sans);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.018em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: var(--s-5); letter-spacing: -.03em; }
h2 { font-size: var(--s-3); }
h3 { font-size: var(--s-1); }

p { margin: 0; max-width: var(--measure); }
a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--signal-2, var(--signal)); }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.narrow { max-width: 52rem; }

.lede { font-size: var(--s-1); color: var(--ink-2); }
.muted { color: var(--slate); }
.small { font-size: var(--s--1); }
.tnum { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

section { border-top: 1px solid var(--rule); }
section > .wrap { padding-block: clamp(3rem, 7vw, 5rem); }
.sunk { background: var(--sunk); }

.head { display: grid; gap: .875rem; margin-bottom: 2.5rem; max-width: var(--measure); }

.eyebrow {
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
}

.stack { display: grid; gap: 1rem; }
.stack-lg { display: grid; gap: 2rem; }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: .5rem; z-index: 200;
  background: var(--signal); color: #fff; padding: .625rem 1rem;
  font-family: var(--f-sans); font-weight: 600; border-radius: 2px;
}
.skip:focus { left: .75rem; color: #fff; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4rem;
}
.logo {
  font-family: var(--f-sans); font-weight: 700; font-size: 1.1875rem;
  letter-spacing: -.03em; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: .5rem; white-space: nowrap;
}
/* the wordmark is one flex item so the gap never splits "Job" from "jila" */
.logo em { font-style: normal; white-space: nowrap; }
.logo b { color: var(--teal); font-weight: 700; }
.logo span {
  font-family: var(--f-mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
}
.site-nav { display: flex; gap: 1.375rem; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--f-sans); font-size: var(--s--1); font-weight: 500;
  color: var(--slate); text-decoration: none;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--teal); }
.bar-actions { display: flex; align-items: center; gap: .625rem; }

.nav-toggle {
  display: none; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid var(--rule); border-radius: 2px;
  background: var(--card); cursor: pointer; place-items: center;
}
.nav-toggle i { display: block; width: 1rem; height: 1.5px; background: var(--ink); position: relative; }
.nav-toggle i::before, .nav-toggle i::after {
  content: ""; position: absolute; left: 0; width: 1rem; height: 1.5px; background: var(--ink);
}
.nav-toggle i::before { top: -5px; }
.nav-toggle i::after { top: 5px; }

.mobile-nav { display: none; border-top: 1px solid var(--rule); padding-block: .5rem 1rem; }
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block; padding: .75rem .25rem; font-family: var(--f-sans);
  font-size: var(--s-0); font-weight: 500; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--rule-soft);
}

@media (max-width: 62rem) {
  .site-nav { display: none; }
  .nav-toggle { display: grid; }
}
@media (max-width: 30rem) { .logo span { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--f-sans); font-size: var(--s--1); font-weight: 600;
  padding: .6875rem 1.125rem; border: 1px solid transparent; border-radius: 2px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-2); color: #fff; }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--signal); color: #fff; }
.btn-line { border-color: var(--rule); color: var(--ink); background: var(--card); }
.btn-line:hover { border-color: var(--signal); color: var(--signal); }
.btn-ondark { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-ondark:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn-lg { padding: .875rem 1.5rem; font-size: var(--s-0); }
.btn-block { width: 100%; }
.btns { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---------- hero ---------- */
.hero { border-top: 0; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60rem 26rem at 88% -12%, var(--teal-bg), transparent 68%),
    radial-gradient(44rem 22rem at -6% 8%, var(--indigo-bg), transparent 66%);
  opacity: .85; pointer-events: none;
}
.hero > .wrap { position: relative; padding-block: clamp(3.5rem, 9vw, 6rem); }
.hero h1 { max-width: 19ch; }
.hero h1 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--teal); }
.hero .lede { margin-top: 1.5rem; max-width: 56ch; }
.hero .btns { margin-top: 2.25rem; }

.pillars {
  margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid var(--rule);
  display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.pillars h3 {
  font-family: var(--f-mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.pillars p { margin-top: .5rem; font-size: var(--s--1); color: var(--slate); }
.pillars a { text-decoration: none; color: inherit; display: block; }
.pillars a:hover h3 { color: var(--teal); }

/* ---------- page hero (inner pages) ---------- */
.page-hero { background: var(--navy); border-top: 0; }
.page-hero > .wrap { padding-block: clamp(2.5rem, 6vw, 4rem); }
.page-hero h1 { color: #fff; max-width: 22ch; font-size: var(--s-4); }
.page-hero p { color: rgba(255,255,255,.72); margin-top: 1rem; max-width: 56ch; }
.page-hero .eyebrow { color: var(--teal-2); }
.page-hero .btns { margin-top: 1.75rem; }
.page-hero .crumb, .page-hero .crumb a { color: rgba(255,255,255,.55); }
.page-hero .crumb a:hover { color: #fff; }

/* ---------- breadcrumb ---------- */
.crumb { font-family: var(--f-mono); font-size: .75rem; color: var(--slate); margin-bottom: 1.25rem; }
.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.crumb li::after { content: "/"; margin-left: .5rem; opacity: .5; }
.crumb li:last-child::after { content: ""; }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* ---------- grids and cells ---------- */
.grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.cell { background: var(--card); padding: 1.75rem; display: grid; gap: .75rem; align-content: start; }
.cell p { font-size: var(--s--1); color: var(--slate); }
.cell ul { margin: 0; padding-left: 1.05rem; font-size: var(--s--1); color: var(--slate); }
.cell li { margin-bottom: .3rem; }
.cell li::marker { color: var(--signal); }

/* ---------- course cards ---------- */
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr)); }
.course-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: var(--shadow); text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
.course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--signal); color: inherit; }
.course-card .strip { height: 3px; background: var(--signal); }
.course-card .body { padding: 1.5rem; display: flex; flex-direction: column; gap: .625rem; flex: 1; }
.course-card h3 { font-size: var(--s-1); }
.course-card .desc { font-size: var(--s--1); color: var(--slate); flex: 1; }
.course-card .foot {
  margin-top: .5rem; padding-top: .875rem; border-top: 1px solid var(--rule-soft);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.course-card .fee { font-family: var(--f-mono); font-weight: 600; font-size: var(--s-1); color: var(--ink); font-variant-numeric: tabular-nums; }
.course-card .dur { font-family: var(--f-mono); font-size: var(--s--1); color: var(--slate); }

.chip {
  display: inline-flex; align-items: center; gap: .375rem;
  font-family: var(--f-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .5rem; border-radius: 2px;
  background: var(--signal-bg); color: var(--signal);
}
.chip-line { background: transparent; border: 1px solid var(--rule); color: var(--slate); }
.chips { display: flex; flex-wrap: wrap; gap: .375rem; }

/* ---------- trust ladder ---------- */
.ladder { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.rung {
  background: var(--card); padding: 1.5rem 1.75rem;
  display: grid; gap: .5rem 1.5rem; grid-template-columns: 7.5rem 1fr; align-items: start;
}
.rung .amt {
  font-family: var(--f-mono); font-size: var(--s-2); font-weight: 600;
  color: var(--teal); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.rung .amt small {
  display: block; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate-2); font-weight: 500; margin-top: .2rem;
}
.rung h3 { font-size: var(--s-0); }
.rung p { font-size: var(--s--1); color: var(--slate); }
@media (max-width: 34rem) { .rung { grid-template-columns: 1fr; } }

/* ---------- tables ---------- */
.scroll { overflow-x: auto; border: 1px solid var(--rule); background: var(--card); border-radius: 3px; }
table { width: 100%; border-collapse: collapse; min-width: 34rem; }
caption { text-align: left; padding: 1rem 1.25rem; font-size: var(--s--1); color: var(--slate); border-bottom: 1px solid var(--rule); }
th, td { text-align: left; padding: .875rem 1.25rem; border-bottom: 1px solid var(--rule-soft); font-size: var(--s--1); }
thead th {
  font-family: var(--f-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
  border-bottom: 1px solid var(--rule);
}
tbody th { font-family: var(--f-sans); font-weight: 600; color: var(--ink); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--sunk); }
td a, th a { text-decoration: none; }
td a:hover, th a:hover { text-decoration: underline; }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- course detail ---------- */
.layout { display: grid; grid-template-columns: minmax(0,1fr) 20rem; gap: 3rem; align-items: start; }
.aside { position: sticky; top: 5.5rem; display: grid; gap: 1rem; }
@media (max-width: 62rem) {
  .layout { grid-template-columns: 1fr; gap: 2rem; }
  .aside { position: static; }
}

.panel { border: 1px solid var(--rule); background: var(--card); border-radius: 3px; padding: 1.5rem; display: grid; gap: 1rem; }
.panel h3 { font-size: var(--s-0); }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: flex; justify-content: space-between; gap: 1rem; padding: .625rem 0;
  border-bottom: 1px solid var(--rule-soft); font-size: var(--s--1);
}
.facts li:last-child { border-bottom: 0; }
.facts dt, .facts .k { color: var(--slate); }
.facts b { font-family: var(--f-sans); font-weight: 600; text-align: right; }

.modules { display: grid; gap: .75rem; counter-reset: m; }
.module {
  border: 1px solid var(--rule); background: var(--card); border-radius: 3px;
  padding: 1.125rem 1.375rem; display: grid; gap: .375rem;
}
.module h3 { font-size: var(--s-0); display: flex; gap: .75rem; align-items: baseline; }
.module h3::before {
  counter-increment: m; content: counter(m, decimal-leading-zero);
  font-family: var(--f-mono); font-size: .75rem; font-weight: 600;
  color: var(--signal); flex: none;
}
.module p { font-size: var(--s--1); color: var(--slate); }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.checks li { display: grid; grid-template-columns: 1.125rem 1fr; gap: .625rem; font-size: var(--s--1); color: var(--ink-2); }
.checks li::before { content: "→"; color: var(--signal); font-family: var(--f-mono); }

/* ---------- FAQ ---------- */
.faq { border: 1px solid var(--rule); background: var(--card); border-radius: 3px; overflow: hidden; }
.faq details { border-bottom: 1px solid var(--rule-soft); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  padding: 1.125rem 1.375rem; cursor: pointer; list-style: none;
  font-family: var(--f-sans); font-weight: 600; font-size: var(--s-0);
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); color: var(--signal); font-size: var(--s-1); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq .ans { padding: 0 1.375rem 1.25rem; }
.faq .ans p { font-size: var(--s--1); color: var(--slate); }

/* ---------- the honest block ---------- */
.honest { background: var(--navy); border-top: 1px solid var(--navy); }
.honest > .wrap { padding-block: clamp(3rem, 7vw, 4.5rem); }
.honest .eyebrow { color: var(--teal-2); }
.honest h2 { color: #fff; max-width: 20ch; }
.honest > .wrap > p { color: rgba(255,255,255,.72); max-width: 52ch; margin-top: 1rem; }
.honest .list { margin-top: 2rem; display: grid; max-width: 46rem; }
.honest .list > div {
  padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.14);
  display: grid; grid-template-columns: 1.75rem 1fr; gap: .875rem; align-items: start;
}
.honest .list > div:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.honest .mark { font-family: var(--f-mono); color: var(--teal-2); font-size: var(--s-0); line-height: 1.55; }
.honest b { font-family: var(--f-sans); font-weight: 600; color: #fff; }
.honest .list p { font-size: var(--s--1); color: rgba(255,255,255,.66); margin-top: .2rem; }

/* ---------- callout ---------- */
.callout {
  border: 1px solid var(--rule); border-left: 3px solid var(--signal);
  background: var(--card); padding: 1.25rem 1.5rem; border-radius: 3px;
  display: grid; gap: .5rem;
}
.callout h3 { font-size: var(--s-0); }
.callout p { font-size: var(--s--1); color: var(--slate); }

/* ---------- CTA band ---------- */
.band {
  border: 1px solid var(--rule); background: var(--card); border-radius: 3px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between;
  box-shadow: var(--shadow);
}
.band h2 { font-size: var(--s-2); }
.band p { color: var(--slate); font-size: var(--s--1); margin-top: .375rem; max-width: 46ch; }

/* ---------- prose ---------- */
.prose { max-width: var(--measure); display: grid; gap: 1.125rem; }
.prose h2 { margin-top: 1.5rem; font-size: var(--s-2); }
.prose h3 { margin-top: 1rem; }
.prose ul, .prose ol { margin: 0; padding-left: 1.25rem; color: var(--ink-2); }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--signal); }

/* ---------- people ---------- */
.person { border: 1px solid var(--rule); background: var(--card); border-radius: 3px; padding: 1.75rem; display: grid; gap: 1rem; }
.person .who { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.person h3 { font-size: var(--s-2); }
.person .role { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }

/* ---------- contact ---------- */
.contact { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.contact > div { background: var(--card); padding: 1.5rem 1.625rem; }
.contact dt { font-family: var(--f-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.contact dd { margin: .5rem 0 0; font-family: var(--f-sans); font-weight: 500; font-size: var(--s-1); }
.contact dd a { text-decoration: none; }

/* ---------- share ---------- */
.share {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem; padding: 1.5rem; margin-top: 2.5rem;
  border: 1px solid var(--rule); background: var(--card); border-radius: 3px;
}
.share h2 { font-size: var(--s-0); }
.share p { font-size: var(--s--1); color: var(--slate); margin-top: .25rem; }
.share .btns .btn { padding: .5rem .875rem; font-size: var(--s--1); }
.is-copied { border-color: var(--teal) !important; color: var(--teal) !important; }

/* ---------- floating WhatsApp ---------- */
.wa-float {
  position: fixed; left: 1.125rem; bottom: 1.125rem; z-index: 150;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .875rem 1.125rem; border-radius: 2px;
  background: var(--wa); color: #fff; text-decoration: none;
  font-family: var(--f-sans); font-weight: 600; font-size: var(--s--1);
  box-shadow: var(--shadow-lift);
  transition: background .15s ease, opacity .2s ease;
}
.wa-float:hover { background: var(--wa-2); color: #fff; }
@media (max-width: 62rem) { .wa-float { left: auto; right: 1.125rem; } }
@media (max-width: 30rem) { .wa-float span { display: none; } .wa-float { padding: .875rem; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--rule); background: var(--card); }
.site-footer > .wrap { padding-block: 2.75rem 2rem; display: grid; gap: 2rem; }
.fgrid { display: grid; gap: 2rem; grid-template-columns: 1.5fr repeat(3, 1fr); }
@media (max-width: 52rem) { .fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .fgrid { grid-template-columns: 1fr; } }
.site-footer h4 {
  font-family: var(--f-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--slate); margin-bottom: .875rem;
}
.flist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.flist a { font-family: var(--f-sans); font-size: var(--s--1); color: var(--ink-2); text-decoration: none; }
.flist a:hover { color: var(--teal); }
.fine { font-size: var(--s--1); color: var(--slate); max-width: var(--measure); }
.fbot { border-top: 1px solid var(--rule); padding-top: 1.25rem; display: grid; gap: .75rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Desktop visual upgrade
   The base design is deliberately documentary. These additions add depth and
   visual rhythm on larger screens, where there is room for it, without
   turning the page into the marketing-brochure look the positioning avoids.
   ========================================================================== */

/* ---------- hero: layered depth + a technical grid ---------- */
.hero {
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--sunk) 100%);
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  /* a faint engineering grid — on-subject for infrastructure work */
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(70% 60% at 78% 22%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(70% 60% at 78% 22%, #000 0%, transparent 72%);
  opacity: .55;
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }

@media (min-width: 62rem) {
  .hero h1 { font-size: clamp(3rem, 4.6vw, 4.25rem); }
  .hero .lede { font-size: 1.25rem; }
}

/* ---------- hero stat strip ---------- */
.hero-stats {
  margin-top: 2.5rem;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.hero-stats div { background: var(--card); padding: 1.125rem 1.25rem; }
.hero-stats b {
  display: block; font-family: var(--f-mono); font-size: var(--s-2);
  font-weight: 600; color: var(--teal); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.hero-stats span {
  display: block; margin-top: .2rem; font-size: .75rem;
  font-family: var(--f-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate);
}

/* ---------- pillars become real cards on desktop ---------- */
@media (min-width: 62rem) {
  .pillars {
    gap: 1px; background: var(--rule);
    border: 1px solid var(--rule); border-radius: 3px;
    padding-top: 0; border-top: 1px solid var(--rule); overflow: hidden;
  }
  .pillars > div { background: var(--card); transition: background .18s ease; }
  .pillars > div:hover { background: var(--signal-bg); }
  .pillars a { padding: 1.5rem 1.5rem 1.625rem; height: 100%; }
  .pillars h3 { color: var(--teal); }
  .pillars p { margin-top: .625rem; }
}

/* ---------- course cards: more presence ---------- */
.course-card .strip { height: 4px; background: linear-gradient(90deg, var(--signal), color-mix(in srgb, var(--signal) 45%, transparent)); }
.course-card h3 a { color: inherit; text-decoration: none; }
.course-card h3 a:hover { color: var(--signal); }
.course-card .body { gap: .5rem; }
.course-card .card-cta {
  display: flex; gap: .5rem; margin-top: 1rem;
}
.course-card .card-cta .btn { flex: 1; padding: .5625rem .75rem; font-size: var(--s--1); }
.course-card .foot { margin-top: .75rem; }

@media (min-width: 62rem) {
  .course-card:hover { transform: translateY(-3px); }
  .cards { gap: 1.5rem; }
}

/* ---------- section headings get a rule on desktop ---------- */
@media (min-width: 62rem) {
  .head { position: relative; padding-top: 1.5rem; }
  .head::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 2.5rem; height: 3px; background: var(--signal);
  }
}

/* ---------- ladder: numbered rail on desktop ---------- */
@media (min-width: 62rem) {
  .ladder { counter-reset: rung; }
  .rung { grid-template-columns: 3rem 8rem 1fr; padding: 1.75rem 2rem; }
  .rung::before {
    counter-increment: rung; content: counter(rung, decimal-leading-zero);
    font-family: var(--f-mono); font-size: .75rem; font-weight: 600;
    color: var(--slate-2); padding-top: .35rem;
  }
  .rung .amt { font-size: var(--s-3); }
}

/* ---------- panels lift ---------- */
.panel { box-shadow: var(--shadow); }
@media (min-width: 62rem) {
  .grid { border-radius: 3px; overflow: hidden; box-shadow: var(--shadow); }
  .cell { padding: 2rem; transition: background .18s ease; }
  .cell:hover { background: var(--sunk); }
}

/* ---------- honest block: sharper on desktop ---------- */
@media (min-width: 62rem) {
  .honest { position: relative; overflow: hidden; }
  .honest::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: radial-gradient(60% 70% at 88% 30%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(60% 70% at 88% 30%, #000 0%, transparent 70%);
    pointer-events: none;
  }
  .honest > .wrap { position: relative; z-index: 1; }
  .honest .list > div { grid-template-columns: 2.5rem 1fr; padding: 1.25rem 0; }
  .honest .mark { font-size: var(--s-1); font-weight: 600; }
}

/* ---------- scroll reveal (progressive, no-JS safe) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); }
  .reveal.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
}

/* ---------- mobile nav: make the open state unmistakable ---------- */
.nav-toggle[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); }
.nav-toggle[aria-expanded="true"] i { background: transparent; }
.nav-toggle[aria-expanded="true"] i::before { top: 0; transform: rotate(45deg); background: var(--paper); }
.nav-toggle[aria-expanded="true"] i::after  { top: 0; transform: rotate(-45deg); background: var(--paper); }
.nav-toggle i, .nav-toggle i::before, .nav-toggle i::after { transition: transform .18s ease, top .18s ease, background .18s ease; }
.mobile-nav a:last-child { border-bottom: 0; }

/* ==========================================================================
   Blog / guides
   Added with the SEO pass. The site had no informational pages and no <img>
   anywhere, so these are the first two things fixed: article layout, and a
   real image on every guide.
   ========================================================================== */

/* Visually hidden, but present in the document outline and for screen
   readers. Used where a heading is needed for structure but a visible one
   would change the design (e.g. the home page's h1 -> h3 jump). */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.wrap-narrow { max-width: 52rem; }

/* ---------- article header ---------- */
.article-head { background: var(--sunk); border-bottom: 1px solid var(--rule); }
.article-head > .wrap { padding-block: clamp(2.5rem, 6vw, 4rem); }
.article-head h1 { max-width: 22ch; margin-top: .5rem; }
.article-head .lede { margin-top: 1rem; max-width: 54ch; }

.byline {
  margin-top: 1.5rem; padding-top: 1.125rem;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: var(--s--1);
  color: var(--slate); display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
}
.byline a { color: var(--ink-2); }

/* ---------- article body ---------- */
.article-figure { margin: 0 0 .5rem; }
.article-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--sunk);
}

.article-section { scroll-margin-top: 5rem; }
.prose .article-section { display: grid; gap: 1.125rem; }
.prose .article-section h2 { margin-top: 2rem; }
.prose .article-section table { margin: 0; }

.toc {
  border: 1px solid var(--rule); border-left: 3px solid var(--signal);
  background: var(--card); border-radius: 3px;
  padding: 1.25rem 1.5rem; margin-top: .5rem;
}
.toc h2 {
  margin: 0 0 .75rem; font-family: var(--f-mono); font-weight: 500;
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
}
.toc ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .375rem; }
.toc li { margin: 0; font-size: var(--s--1); }
.toc li::marker { color: var(--slate-2); font-family: var(--f-mono); }

.callout-sm { border-left-color: var(--slate-2); padding: 1rem 1.25rem; }
.callout-sm p { font-size: var(--s--1); color: var(--slate); }

/* ---------- post cards ---------- */
.posts {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.post-card {
  border: 1px solid var(--rule); background: var(--card); border-radius: 3px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.post-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--slate-2); }
.post-card .thumb { display: block; aspect-ratio: 1200 / 630; background: var(--sunk); border-bottom: 1px solid var(--rule); }
.post-card .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-card .body { padding: 1.25rem 1.375rem 1.5rem; display: grid; gap: .625rem; align-content: start; flex: 1; }
.post-card h3 { font-size: var(--s-1); line-height: 1.25; }
.post-card h3 a { text-decoration: none; color: inherit; }
.post-card h3 a:hover { color: var(--signal); }
.post-card .desc { font-size: var(--s--1); color: var(--slate); }
.post-card .fine { margin-top: auto; padding-top: .25rem; }

/* ---------- link list ---------- */
.linklist { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.linklist li { border-bottom: 1px solid var(--rule); }
.linklist a {
  display: grid; gap: .3rem; padding: 1.125rem .25rem;
  text-decoration: none; color: inherit;
}
.linklist a:hover b { color: var(--signal); }
.linklist b { font-family: var(--f-sans); font-weight: 600; font-size: var(--s-0); }
.linklist span { font-size: var(--s--1); color: var(--slate); }

/* ---------- footer logo mark ---------- */
.logo-mark { display: inline-flex; align-items: center; gap: .625rem; }
.logo-mark img { display: block; width: 32px; height: 32px; border-radius: 8px; }

.panel .who { display: flex; align-items: baseline; gap: .625rem; flex-wrap: wrap; }
.panel .who h4 { font-family: var(--f-sans); font-weight: 600; font-size: var(--s-0); }
.panel .who .role { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }

/* ---------- review cards ---------- */
.reviews-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.review-card {
  border: 1px solid var(--rule); background: var(--card); border-radius: 3px;
  padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.review-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--slate-2); }
.review-stars {
  font-size: 1.25rem; color: #ffa500; font-weight: 600; letter-spacing: .15em;
}
.review-text {
  font-size: var(--s--1); color: var(--ink); line-height: 1.5; margin: 0;
  font-style: italic;
}
.review-author {
  font-size: var(--s--1); margin: 0; margin-top: auto;
  color: var(--ink-2); font-weight: 500;
}
.review-author .muted { display: block; color: var(--slate); font-style: normal; margin-top: .25rem; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .article-figure img,
  :root:not([data-theme="light"]) .post-card .thumb img { opacity: .92; }
}
:root[data-theme="dark"] .article-figure img,
:root[data-theme="dark"] .post-card .thumb img { opacity: .92; }