/* The AI Apprentice site styles */
:root {
  /* Navy is the brand's dark. It does double duty: body text on the light
     grounds, and the ground itself on dark sections, the hero card and the
     footer. Same #1b3149 as the logo. */
  --ink: #1b3149;
  --ink-2: #3d4b5c;
  --muted: #5c6879;
  --paper: #f6f3ee;
  --paper-2: #ece7df;
  --line: #d9d3c9;
  --white: #ffffff;

  /* Surfaces and text sitting ON the navy. Kept as tokens rather than the
     hardcoded greys that were here, so the dark side moves as one set. */
  --dark-card: #24405c;
  --dark-line: #35506e;
  --dark-chip: #2c4a68;
  --on-dark: #ccd6e2;
  --on-dark-muted: #a9b7c7;
  --on-dark-faint: #8fa0b3;
  /* Signal red. Two tokens, because one cannot do both jobs: --accent is dark
     enough for white text to sit on it (6.7:1), which makes it too dark to be
     read AS text on the navy (2.0:1). Accent-coloured TEXT on a dark ground
     uses --accent-on-dark instead. The logo MARK is the exception: it keeps
     --accent on every ground, which is Charbel's decision. See CLAUDE.md. */
  --accent: #a8321f;
  --accent-dark: #8a2818;
  /* Lifted from #e8705a: on the navy ground that only reached 4.36:1, just
     under the 4.5 text needs. This clears at 5.44:1. Text only, never the mark. */
  --accent-on-dark: #f08a76;
  --max: 1120px;
  --radius: 6px;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
p { margin: 0 0 1.1em; }
/* 46ch is the right measure when a lede sits in one column of a two-column
   section. When it is a direct child of .wrap it has the full 1072px to play
   with, so 46ch leaves half the row empty and wraps short sentences for no
   reason. Those get a wider measure. balance stops the last line orphaning a
   couple of words, which is what made the wrap look like a mistake. */
.lede { font-size: 1.2rem; color: var(--ink-2); max-width: 46ch; text-wrap: balance; }
.wrap > .lede { max-width: 64ch; }
.kicker {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.75rem;
  display: block;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section--tight { padding: 56px 0; }
.section--dark { background: var(--ink); color: var(--paper); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark .lede, .section--dark p { color: var(--on-dark); }
.section--dark a { color: var(--accent-on-dark); }
/* .tag is deliberately absent: its chip stays light inside a dark section, so it
   keeps dark text. The tint belongs only where the ground behind it is dark. */
.section--dark .kicker,
.section--dark .card .icon { color: var(--accent-on-dark); }
.section--dark .stat { border-left-color: var(--accent-on-dark); }
.section--dark .pull { border-left-color: var(--accent-on-dark); }
.section--dark .checklist li::before { background: var(--accent-on-dark); }
.section--paper2 { background: var(--paper-2); }
.section--white { background: var(--white); }
.max-prose { max-width: 68ch; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 243, 238, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
/* The lockup, built to the same ratios as brand/the-ai-apprentice-logo-*.
   Everything is in em against .brand's font-size, so the mark, the gap and the
   wordmark scale together and cannot drift apart. Do not put pixel sizes here.
     mark height 1.035em   mark width 1.312em   gap 0.462em   tracking 0.01em
   The mark's viewBox is cropped to the courses ("6 14 52 41"), so its rendered
   height IS the mark height. A 0 0 64 64 box would include padding and render
   the mark about 30% small, which is what was wrong before. */
.brand {
  display: flex; align-items: center; gap: 0.462em;
  text-decoration: none; color: var(--ink);
  font-family: var(--font-head); font-weight: 500; font-size: 1.45rem;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.brand svg { width: 1.312em; height: 1.035em; flex: none; }
/* The wordmark is ONE colour, as in the artwork. Only the top course is red.
   "Apprentice" is set apart by weight, not by colour. */
.brand span { white-space: nowrap; }
.brand span b { font-weight: 700; color: inherit; }
.nav { display: flex; gap: 28px; align-items: center; }
.nav a {
  text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: 0.98rem;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.nav .btn { padding: 10px 18px; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px; cursor: pointer; color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; display: block; }

/* Buttons */
.btn {
  display: inline-block; padding: 14px 24px; border-radius: var(--radius);
  background: var(--accent); color: var(--white) !important; text-decoration: none;
  font-weight: 600; font-size: 1rem; border: 2px solid var(--accent);
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn--ghost { background: transparent; color: var(--ink) !important; border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white) !important; }
.section--dark .btn--ghost { color: var(--white) !important; border-color: var(--white); }
.section--dark .btn--ghost:hover { background: var(--white); color: var(--ink) !important; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.6rem; }

/* Hero */
.hero { padding: 96px 0 72px; position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 0.4em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-card {
  background: var(--ink); color: var(--paper); border-radius: 10px; padding: 32px;
  box-shadow: 0 24px 60px rgba(27, 49, 73, 0.20);
}
.hero-card .kicker { color: var(--accent-on-dark); }
.hero-card ul { list-style: none; padding: 0; margin: 0; }
.hero-card li {
  padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.12);
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
}
.hero-card li:first-child { border-top: 0; padding-top: 0; }
.hero-card li .num {
  font-family: var(--font-head); font-size: 1.6rem; line-height: 1; color: var(--accent-on-dark); font-weight: 700;
  min-width: 2.2ch;
}
.hero-card li strong { display: block; color: var(--white); font-weight: 600; }
.hero-card li span { color: var(--on-dark-muted); font-size: 0.95rem; }

/* Stats strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { border-left: 3px solid var(--accent); padding-left: 18px; }
.stat b {
  display: block; font-family: var(--font-head); font-size: 2.6rem; line-height: 1; font-weight: 700;
}
.stat span { color: var(--muted); font-size: 0.95rem; }
.section--dark .stat span { color: var(--on-dark-muted); }

/* Grids and cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; align-items: start; }
.grid-2--cards { align-items: stretch; gap: 28px; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 28px;
}
.card h3 { margin-top: 0.4rem; }
.card p:last-child { margin-bottom: 0; }
.card .icon {
  width: 44px; height: 44px; border-radius: 8px; background: var(--paper-2);
  display: grid; place-items: center; color: var(--accent);
}
.card .icon svg { width: 24px; height: 24px; }
.section--dark .card { background: var(--dark-card); border-color: var(--dark-line); }
.section--dark .card .icon { background: var(--dark-chip); }
.card--tag { position: relative; }
.tag {
  display: inline-block; font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.85rem; font-weight: 700; color: var(--ink); background: var(--paper-2);
  padding: 4px 10px; border-radius: 4px; margin-bottom: 10px;
}

/* Data tables. Wide content must never make the page scroll sideways, so the
   table gets its own horizontal scroll container via display:block on small
   screens. Figures are tabular-nums so columns line up. */
.data {
  width: 100%; border-collapse: collapse; margin: 0 0 1.4em;
  font-size: 0.95rem; font-variant-numeric: tabular-nums;
}
.data caption {
  text-align: left; font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase; font-family: var(--font-head); font-weight: 700;
  color: var(--muted); padding-bottom: 10px;
}
.data th, .data td {
  text-align: left; padding: 11px 14px 11px 0; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.data thead th {
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.85rem; color: var(--muted); font-weight: 700;
  border-bottom-width: 2px;
}
.data tbody th { font-weight: 600; }
.data tbody tr:last-child th, .data tbody tr:last-child td { border-bottom: 0; }
.data td:last-child { color: var(--ink); font-weight: 600; padding-right: 0; }

.section--dark .data caption,
.section--dark .data thead th { color: var(--on-dark-muted); }
.section--dark .data th,
.section--dark .data td { border-bottom-color: var(--dark-line); }
.section--dark .data td:last-child { color: var(--white); }

@media (max-width: 560px) {
  .data { display: block; overflow-x: auto; }
}

/* Session price on the services cards. Tabular figures so the three tiers
   line up when the cards sit side by side. */
.price {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 2.6rem); line-height: 1;
  color: var(--accent); margin: 0 0 0.6rem;
  font-variant-numeric: tabular-nums;
}

/* Images. Every one carries width and height in the markup so the page does not
   jump while they load, and srcset means only the size actually needed is
   fetched. The site sells a 1.7 second load, so weight matters here. */
.figure { margin: 0; }
.figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  background: var(--paper-2);
}
.figure figcaption { margin-top: 10px; font-size: 0.9rem; color: var(--muted); }
.section--dark .figure figcaption { color: var(--on-dark-muted); }
.figure--framed img { border: 1px solid var(--line); }
.figure--portrait { max-width: 320px; }

/* Comparison bars. Built from divs rather than an image so they cost nothing,
   scale with the text and can carry a proper text alternative. */
.bars { display: grid; gap: 14px; margin: 0 0 1.4em; }
.bar-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 14px; align-items: center; }
.bar-label {
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.85rem; font-weight: 700; color: var(--muted);
}
.bar-track { background: var(--paper-2); border-radius: 3px; }
.bar {
  height: 38px; border-radius: 3px; display: flex; align-items: center;
  padding: 0 12px; box-sizing: border-box; min-width: 4.5rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1.4rem;
  line-height: 1; color: var(--white); font-variant-numeric: tabular-nums;
}
.bar--before { background: var(--ink-2); }
.bar--after  { background: var(--accent); }
.section--dark .bar-track { background: var(--dark-chip); }
.section--dark .bar-label { color: var(--on-dark-muted); }

/* Steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step { position: relative; padding-top: 12px; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--font-head); font-size: 3.4rem; font-weight: 700; line-height: 1;
  color: var(--accent); display: block; margin-bottom: 10px;
}

/* Checklist */
.checklist { list-style: none; padding: 0; margin: 0 0 1.2em; }
.checklist li { padding: 8px 0 8px 32px; position: relative; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 14px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.section--dark .checklist li { border-color: var(--dark-line); }

/* Quote / pull */
.pull {
  border-left: 4px solid var(--accent); padding: 8px 0 8px 24px; margin: 2rem 0;
  font-family: var(--font-head); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; text-transform: uppercase;
}

/* Timeline (case study) */
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 28px 28px; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--paper);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline h3 { margin-bottom: 0.25em; font-size: 1.4rem; }
.timeline p { margin-bottom: 0; color: var(--ink-2); }

/* Page hero */
.page-hero { padding: 72px 0 48px; border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 16ch; }

/* Forms */
.form { display: grid; gap: 18px; }
.form label { display: grid; gap: 6px; font-weight: 500; font-size: 0.95rem; }
.form input, .form textarea, .form select {
  font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); color: var(--ink); width: 100%;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form small { color: var(--muted); }
.hidden { position: absolute; left: -9999px; }

/* CTA band */
.cta-band { background: var(--accent); color: var(--white); padding: 64px 0; }
.cta-band h2 { color: var(--white); margin-bottom: 0.3em; }
.cta-band p { color: #ffe3d2; max-width: 52ch; }
.cta-band .btn { background: var(--ink); border-color: var(--ink); }
.cta-band .btn:hover { background: #000; border-color: #000; }
.cta-band .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }

/* Footer */
.site-footer { background: var(--ink); color: var(--on-dark-muted); padding: 48px 0 32px; font-size: 0.95rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.site-footer .brand { color: var(--white); }
.site-footer .brand span b { color: var(--accent-on-dark); }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--accent-on-dark); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer h4 { color: var(--white); font-size: 1.05rem; letter-spacing: 0.08em; margin-bottom: 12px; }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid var(--dark-line); padding-top: 20px; margin-top: 12px; font-size: 0.85rem; color: var(--on-dark-faint); }

/* Responsive */
@media (max-width: 900px) {
  .hero .wrap, .grid-3, .grid-2, .steps, .stats { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .hero { padding: 64px 0 56px; }
  .section { padding: 60px 0; }
}
/* At 320px the header cannot fit the wordmark, the mark and the menu button.
   The wordmark is nowrap by design, so the lockup shrinks instead of breaking.
   Everything in .brand is in em, so the mark and gap scale with it. */
@media (max-width: 380px) {
  .brand { font-size: 1.15rem; }
}

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 68px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 16px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav a[aria-current="page"] { border-bottom: 1px solid var(--line); color: var(--accent); }
  .nav .btn { margin-top: 12px; text-align: center; border-bottom: 0; }
  .form .row { grid-template-columns: 1fr; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 20px; }
  .stat b { font-size: 2.1rem; }
}