/* ==========================================================================
   Phoniglot Academy — landing page styles
   --------------------------------------------------------------------------
   Contents
     1.  Fonts
     2.  Design tokens
     3.  Reset & base
     4.  Utilities (container, section, buttons, icons, skip link)
     5.  Header
     6.  Hero (layered media composition)
     7.  Challenges
     8.  Curriculum
     9.  Audience
     10. Trainer
     11. Pricing
     12. Footer
     13. Responsive overrides
     14. Motion preferences

   Values marked "mockup" were measured from the design board
   (design/Board.jpg) so the build stays true to the original artwork.
   ========================================================================== */

/* ==========================================================================
   1. Fonts — self hosted, no third-party requests at runtime
   ========================================================================== */

/* Cairo — variable Arabic + Latin, the family used for all UI text. */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB,
    U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F,
    U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42,
    U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B,
    U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77,
    U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9,
    U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/cairo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Serif — only used for the Latin wordmark in the header. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Design tokens
   ========================================================================== */

:root {
  /* --- Colour: the four brand swatches come from assets/color_palette.svg --- */
  --color-navy: #072e51;
  --color-green: #18c16d;
  --color-green-deep: #14ad61; /* hover shade of --color-green */
  --color-green-soft: #5ce3a7; /* green for text/icons ON navy: 8.6:1 vs 5.8:1 */
  --color-tint: #dbeff4;
  --color-paper: #fcfeff;

  /* --- Ink: headings and icons are neutral black in the mockup, body copy is
         a desaturated slate. Navy is reserved for panels and buttons. --- */
  --color-ink: #05121c;
  --color-ink-soft: #22303a;
  --color-on-navy: #b9d7ee;
  --color-hairline: rgb(7 46 81 / 14%);

  /* --- Type --- */
  --font-arabic: 'Cairo', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-wordmark: 'Instrument Serif', 'Times New Roman', Georgia, serif;

  /* Fluid sizes: the max values match the mockup at a 1440px viewport. */
  --fs-h1: clamp(1.75rem, 1.05rem + 2.2vw, 2.5rem);      /* 40px */
  --fs-h2: clamp(1.5rem, 1rem + 1.6vw, 2.125rem);        /* 34px */
  --fs-lead: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);    /* 17px */
  --fs-body: 1rem;
  --fs-card: 1rem;                                       /* mockup: 16px */
  --fs-small: 0.875rem;
  --fs-price: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);   /* 40px */

  /* Arabic needs generous leading; headings in the mockup are set tight. */
  --lh-heading: 1.2;
  --lh-body: 1.75;
  --lh-card: 1.55;

  /* --- Space & shape --- */
  /* --- Content grid -------------------------------------------------------
     One shared width for the header, the footer and the widest bands, so their
     edges line up at every viewport. The two narrower bands below keep the
     mockup's tighter measures and stay centred inside that edge. */
  --container: 1196px;
  --measure-curriculum: 870px;
  --measure-pricing: 1044px;

  /* --- Fluid scale ---------------------------------------------------------
     Spacing and component sizes interpolate between the phone and 1440px
     values with clamp(min, preferred, max), so every screen size gets a
     deliberate proportion instead of jumping at breakpoints. Each preferred
     value is the straight line through (390px → min) and (1440px → max). */
  --gutter: clamp(1.125rem, 0.9rem + 0.9vw, 1.5rem);
  --space-section: clamp(2.5rem, 2rem + 1.7vw, 3.75rem);
  --space-title: clamp(1.75rem, 1.15rem + 1.7vw, 2.75rem); /* heading → content */
  --space-block: clamp(2rem, 1.4rem + 1.9vw, 3.5rem);      /* content → content */
  --header-height: clamp(3.75rem, 3.29rem + 1.9vw, 5rem);
  --icon-challenge: clamp(2.5rem, 2.13rem + 1.52vw, 3.5rem);
  --icon-audience: clamp(2.25rem, 2.06rem + 0.76vw, 2.75rem);
  --hero-inset-start: clamp(1.5rem, 0.5rem + 4vw, 4.0625rem);
  --hero-inset-end: clamp(1.5rem, 0.4rem + 6.9vw, 6.375rem);
  --trainer-inset-start: clamp(1.25rem, 1rem + 0.95vw, 1.875rem);
  --trainer-inset-end: clamp(1.5rem, 0.2rem + 5.33vw, 5rem);
  --hero-pad-block: clamp(2.5rem, 2rem + 3vw, 4rem);
  --card-pad-y: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --card-pad-x: clamp(1rem, 0.8rem + 0.7vw, 1.75rem);
  --shadow-cast: 0 6px 16px rgb(3 15 27 / 30%);
  --shadow-plate: 0 1px 3px rgb(3 15 27 / 16%);
  --radius-card: 8px;
  --radius-button: 6px;
  --radius-panel: 6px;

  --shadow-card: 0 1px 2px rgb(7 46 81 / 6%), 0 4px 12px rgb(7 46 81 / 4%);
  /* Header separation: on by default, deepened once the page scrolls. */
  --shadow-header: 0 1px 0 rgb(3 15 27 / 8%), 0 4px 14px rgb(3 15 27 / 20%);
  --shadow-header-scrolled: 0 2px 6px rgb(3 15 27 / 14%), 0 12px 28px rgb(3 15 27 / 28%);
}

/* ==========================================================================
   3. Reset & base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-ink-soft);
  font-family: var(--font-arabic);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* Cairo has no italic or connected-script letter-spacing behaviour we want:
     never letter-space Arabic — it breaks the joins. */
  overflow-wrap: break-word;
}

h1,
h2,
p,
figure,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
}

/* Visible focus for every interactive element, in both colour contexts. */
:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
  border-radius: 2px;
}

.hero :focus-visible,
.trainer :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-green);
}

/* In-page jumps move focus to the section they land on (see script.js). The
   scroll itself is the orientation cue, so no full-width ring is drawn. */
[tabindex='-1']:focus-visible {
  outline: none;
}

/* ==========================================================================
   4. Utilities
   ========================================================================== */

/* The sprite itself must never render; symbols are referenced via <use>. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The two bands that the mockup draws narrower than the shared grid. */
.curriculum .container {
  max-width: calc(var(--measure-curriculum) + 2 * var(--gutter));
}

.pricing .container {
  max-width: calc(var(--measure-pricing) + 2 * var(--gutter));
}

.section {
  padding-block: var(--space-section);
}

/* Tinted band: shared background for a run of sections. */
.section--tint,
.band--tint {
  background-color: var(--color-tint);
}

.section__title {
  color: var(--color-ink);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-heading);
  text-align: center;
  /* Mockup: the longest section heading wraps after its second clause, which
     puts the measure at roughly 34rem. */
  max-width: 34rem;
  margin-inline: auto;
}

.icon {
  display: block;
  width: 1em;
  height: 1em;
  color: currentcolor;
}

.btn {
  display: inline-block;
  padding: 0.8125rem 1.875rem; /* mockup: 48px tall CTA buttons */
  border: 0;
  border-radius: var(--radius-button);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

/* White text on #18c16d only reaches 2.4:1, so the primary button uses the
   brand navy on the brand green instead: 5.8:1, which passes WCAG AA. */
.btn--primary {
  background-color: var(--color-green);
  color: var(--color-navy);
}

.btn--primary:hover {
  background-color: var(--color-green-deep);
}

.btn--primary:active {
  transform: translateY(1px);
}

/* Anchored sections must clear the sticky header when jumped to. */
:target,
main section {
  scroll-margin-block-start: calc(var(--header-height) + 1rem);
}

.skip-link {
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(50%) translateY(-150%);
  z-index: 20;
  padding: 0.75rem 1.25rem;
  background-color: var(--color-green);
  color: var(--color-navy);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius-button) var(--radius-button);
}

.skip-link:focus-visible {
  transform: translateX(50%) translateY(0);
  outline-offset: -4px;
}

/* ==========================================================================
   5. Header
   ========================================================================== */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  background-color: var(--color-navy);
  /* Drops onto the band below so the bar reads as a separate layer. */
  box-shadow: var(--shadow-header);
}

/* Deepened by script.js once the page scrolls. */
.site-header.is-elevated {
  box-shadow: var(--shadow-header-scrolled);
}

.site-header__inner {
  /* Header and footer use the same content edges as the widest band, so the
     wordmark, the nav and the blocks below all line up. */
  display: flex;
  /* row-reverse puts the wordmark on the visual LEFT and the menu on the right,
     matching the mockup (RTL flow would otherwise start at the right). */
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  min-height: var(--header-height);
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header__brand {
  text-decoration: none;
}

.site-header__wordmark {
  display: block;
  font-family: var(--font-wordmark);
  /* Mockup: ~35px at 1440 with generous tracking (325px wide for 17 caps). */
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2.1875rem);
  line-height: 1.1;
  letter-spacing: 0.06em; /* Latin only — never applied to Arabic */
  color: var(--color-green-soft); /* lighter green: 8.6:1 on navy, see tokens */
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.75rem;
}

.site-nav__link {
  display: block;
  padding-block: 0.5rem;
  color: var(--color-paper);
  font-size: 1.0625rem; /* mockup: nav labels are ~17px and bold */
  font-weight: 700;
  text-decoration: none;
}

/* The aria-current one is set by script.js for the section in view. */
.site-nav__link:hover,
.site-nav__link[aria-current] {
  color: var(--color-green-soft);
}

/* --- Mobile menu button ---------------------------------------------------
   Ships with the `hidden` attribute; script.js reveals it and adds
   `.is-enhanced` to the header, so with JavaScript disabled the two links stay
   visible in the bar instead of hiding behind a dead button. */
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgb(252 254 255 / 24%);
  border-radius: var(--radius-button);
  background-color: transparent;
  color: var(--color-paper);
  cursor: pointer;
}

.site-nav__toggle:hover {
  border-color: var(--color-green-soft);
  color: var(--color-green-soft);
}

.site-nav__toggle .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* One icon per state, keyed off aria-expanded — nothing extra to keep in sync. */
.site-nav__toggle-icon-close,
.site-nav__toggle[aria-expanded='true'] .site-nav__toggle-icon-menu {
  display: none;
}

.site-nav__toggle[aria-expanded='true'] .site-nav__toggle-icon-close {
  display: block;
}

/* The button is a phone affordance only; the desktop bar always shows links. */
@media (min-width: 768px) {
  .site-nav__toggle {
    display: none;
  }
}

/* ==========================================================================
   6. Hero — layered media composition
   --------------------------------------------------------------------------
   Bottom to top, at every viewport width:
     0. .hero__photo           office photo
     1. .hero-card--back       ("18,000 egp / راتب") — tucked behind the subject
     2. .hero__subject-shadow  the subject's cast shadow, so his silhouette
                               darkens the card he overlaps
     3. .hero__subject         masked copy of the same photo, so the card
                               reappears behind the person instead of on top
     4. .hero-card--front      ("فرصة توظيف …") — in front, with its own drop
                               shadow on the photo
   Both photo layers use the same file and the same cover geometry, so they
   stay pixel-locked at every viewport width.
   ========================================================================== */

.hero {
  background-color: var(--color-navy);
}

.hero__inner {
  display: grid;
  /* Full-bleed split: media 46.4% (mockup: 668px) with the copy panel beside it. */
  grid-template-columns: 1fr;
}

.hero__content {
  max-width: 38rem;
  margin-inline: auto;
  padding: var(--hero-pad-block) var(--gutter) calc(var(--hero-pad-block) + 1rem);
}

.hero__title {
  color: #fff;
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-heading);
}

.hero__title-sub {
  display: block;
  margin-block-start: 0.35em;
  font-size: 0.72em;
}

.hero__title-brand {
  font-size: 1.39em; /* keeps "Call Center" at the full h1 size */
  white-space: nowrap; /* the brand term should never break across lines */
}

.hero__lead {
  margin-block-start: 1.25rem;
  color: var(--color-on-navy);
  font-size: var(--fs-lead);
  line-height: 1.7;
}

.hero__cta {
  margin-block-start: 2.75rem;
}

.hero__note {
  margin-block-start: 1rem;
  color: var(--color-on-navy);
  font-size: var(--fs-small);
}

/* ---- The media board ---------------------------------------------------- */

.hero__media {
  position: relative;
  /* align-self: start keeps the aspect-ratio in charge of the height; without it
     the stretched grid row would fight the ratio and push the board wider than
     its track (which overflows the viewport). */
  align-self: start;
  aspect-ratio: 668 / 449; /* mockup: 668 x 449 media box */
  container-type: inline-size; /* lets the floating cards scale with the board */
  /* The subject's cast shadow is nudged off-centre on purpose; clipping it to
     the board keeps that offset out of the page's scroll area. */
  overflow: hidden;
  /* While the hero is stacked, the board would otherwise grow with the viewport
     and swallow a tablet screen (at 1119px it reached 1119x752). width:100% +
     a cap keeps it bounded; justify-self centres it, since auto margins would
     collapse the grid item to its (empty) content instead. */
  width: 100%;
  max-width: 40rem;
  justify-self: center;
}

.hero__layers {
  position: absolute;
  inset: 0;
}

/* The stacking order that produces the front/back effect. .hero__media is a
   stacking context (container-type: inline-size implies contain: layout), so
   these five values are the whole composition:
     photo 0 → back card 1 → subject shadow 2 → subject 3 → front card 4 */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The subject is cut out of the same photo with an alpha mask (see README →
   "Hero composition"). Its twin below is the same mask filled dark, blurred and
   nudged: because it paints above the back card and under the subject, it reads
   as the shadow the person casts onto the card he is standing in front of. */
.hero__subject,
.hero__subject-shadow {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url('../img/hero-subject-mask.png');
  mask-image: url('../img/hero-subject-mask.png');
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.hero__subject {
  z-index: 3;
  background-image: url('../img/hero-office.jpg');
  background-size: cover;
  background-position: center;
}

/* .hero__subject-shadow {
  z-index: 2;
  background-color: rgb(3 15 27 / 55%);
  filter: blur(clamp(14px, 2vw, 28px)); /* stronger, viewport-based blur */
  /* opacity: 0.9;
  transform: translate(-1%, -0.5%) scale(1.1);
  transform-origin: center; */
/* } */

/* Floating cards. Physical offsets (left/top) are correct here: the board is a
   fixed piece of artwork anchored to the photo, which is never mirrored. */
.hero-card {
  position: absolute;
  z-index: 1;
  padding: 0.4cqw 0.6cqw;
  /* Mockup: a translucent tint panel, 1px hairline, barely rounded. */
  border: 1px solid rgb(7 46 81 / 14%);
  border-radius: 0.25rem;
  background-color: rgb(219 239 244 / 88%);
  color: var(--color-ink);
  font-size: clamp(0.8125rem, 2.45cqw, 1.0625rem);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.hero-card__value,
.hero-card__label {
  display: block;
}

.hero-card--back {
  left: 26.8%;               /* mockup positions, as a share of the media box */
  top: 39.4%;
  width: 15%;
  z-index: 1;                /* above the photo, below the subject's shadow */
  box-shadow: var(--shadow-plate);
}

.hero-card--front {
  left: 62%;
  top: 54.3%;
  width: 18.5%;
  z-index: 4;                /* over the subject */
  box-shadow: var(--shadow-cast);
}

/* ==========================================================================
   7. Challenges
   ========================================================================== */

.challenges__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  justify-items: center;
  gap: var(--space-block) 0.75rem;
  margin-block-start: var(--space-title);
}

.challenges__item {
  display: grid;
  justify-items: center;
  gap: 1rem;
  width: 100%;
  /* Mockup: labels wrap to three lines inside a ~192px measure. */
  max-width: 12rem;
}

.challenges__icon {
  width: var(--icon-challenge);
  height: var(--icon-challenge);
  color: var(--color-ink);
}

.challenges__text {
  color: var(--color-ink-soft);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  text-align: center;
  text-wrap: balance;
}

.challenges__promise {
  margin-block-start: var(--space-block);
  color: var(--color-ink);
  font-size: var(--fs-lead);
  font-weight: 700;
  text-align: center;
}

/* ==========================================================================
   8. Curriculum
   ========================================================================== */

.curriculum__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 1.6875rem;     /* mockup row gap 24px / column gap 27px */
  margin-block-start: var(--space-title);
}

.curriculum__card {
  /* display: grid + min-height keeps every card the same height, as in the
     mockup, no matter how the copy wraps. */
  display: grid;
  align-content: center;
  min-height: 5.5rem;        /* mockup: 89px rows */
  padding: var(--card-pad-y) var(--card-pad-x);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  background-color: var(--color-tint);
}

.curriculum__card p {
  color: var(--color-ink-soft);
  font-size: var(--fs-card);
  line-height: 1.5;
  text-align: start; /* right-aligned in RTL, as requested */
  text-wrap: pretty;
}

/* ==========================================================================
   9. Audience
   ========================================================================== */

.audience {
  padding-block-end: 0;      /* the trainer panel follows directly */
}

.audience__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2.6875rem;     /* mockup column gap 43px */
  margin-block-start: var(--space-title);
}

.audience__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: var(--card-pad-y) var(--card-pad-x);
  border-radius: var(--radius-card);
  background-color: var(--color-paper);
  box-shadow: var(--shadow-card);
}

.audience__text {
  color: var(--color-ink-soft);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
}

.audience__icon {
  flex: none;
  width: var(--icon-audience);
  height: var(--icon-audience);
  color: var(--color-ink);
}

/* ==========================================================================
   10. Trainer
   ========================================================================== */

.trainer {
  padding-block-end: 0;
}

.trainer__panel {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1131px;         /* mockup: the navy panel is 1131px wide */
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background-color: var(--color-navy);
}

.trainer__figure {
  margin: 0;
  /* The portrait's own ratio, so phones and small tablets show the whole photo
     with no crop. Capped in width so a stacked panel cannot turn the photo into
     a full-screen banner; the two-column layout below swaps in the mockup's
     column ratio instead. */
  aspect-ratio: 1080 / 1574;
  width: 100%;
  max-width: 22.5rem;
  justify-self: center; /* explicit width keeps the item from collapsing */
}

.trainer__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%; /* only bites once the column crops vertically */
}

.trainer__content {
  padding: var(--space-block) var(--gutter);
}

.trainer__title {
  color: var(--color-green-soft); /* 8.6:1 on navy */
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-heading);
}

.trainer__text {
  margin-block-start: 1.25rem;
  color: var(--color-on-navy);
  font-size: var(--fs-card);
  line-height: 1.85;
}

/* ==========================================================================
   11. Pricing
   ========================================================================== */

.pricing__intro {
  max-width: 46rem;
  margin-block-start: 1.75rem;
  margin-inline: auto;
  color: var(--color-ink-soft);
  font-size: var(--fs-body);
  line-height: 1.65;
  text-align: center;
  text-wrap: pretty;
}

.pricing__intro strong {
  color: var(--color-ink);
}

.pricing__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5625rem;            /* mockup: 25px */
  margin-block-start: var(--space-title);
}

.pricing__card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  background-color: var(--color-paper);
}

.pricing__badge {
  display: grid;
  place-content: center;
  padding: 0.75rem 1.375rem;
  background-color: var(--color-navy);
  color: #fff;
  text-align: center;
}

.pricing__amount {
  font-size: var(--fs-price);
  font-weight: 400;
  line-height: 1.1;
}

.pricing__currency {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.2;
}

.pricing__info {
  display: grid;
  align-content: center;
  gap: 0.25rem;
  padding: var(--card-pad-y) var(--card-pad-x);
  text-align: start; /* offer copy reads right-aligned, as requested */
}

.pricing__name {
  color: var(--color-ink);
  font-size: var(--fs-card);
  font-weight: 600;
}

.pricing__compare {
  color: var(--color-ink-soft);
  font-size: var(--fs-small);
}

/* Featured bundle: inverted card — navy body, green badge. */
.pricing__card--featured {
  border-color: var(--color-navy);
  background-color: var(--color-navy);
}

.pricing__card--featured .pricing__badge {
  background-color: var(--color-green);
  color: var(--color-navy);
}

.pricing__card--featured .pricing__name {
  color: #fff;
}

.pricing__card--featured .pricing__compare {
  color: var(--color-on-navy);
}

.pricing__cta {
  display: block;
  width: fit-content;
  margin-block-start: var(--space-block);
  margin-inline: auto;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer {
  background-color: var(--color-navy);
  color: var(--color-on-navy);
}

.site-footer__inner {
  /* Same content edges as the header and the widest band. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  min-height: 2.25rem;       /* mockup: a slim 36px bar */
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-footer__contact {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--color-paper);
  font-size: var(--fs-small);
  text-decoration: none;
}

.site-footer__contact:hover .site-footer__email {
  text-decoration: underline;
}

.site-footer__icon {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--color-green-soft); /* 8.6:1 on navy */
}

.site-footer__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.75rem;
}

.site-footer__link {
  color: var(--color-on-navy);
  font-size: var(--fs-small);
  text-decoration: none;
}

.site-footer__link:hover {
  color: #fff;
  text-decoration: underline;
}

/* ==========================================================================
   13. Responsive overrides
   --------------------------------------------------------------------------
   Sizing and spacing are already fluid (see the fluid scale in the tokens), so
   these breakpoints only change *structure*, where the content itself breaks:
     768px  the nav collapses into the menu button; the footer compacts
     760px  curriculum cards fit two per row
     900px  trainer panel / audience cards go multi-column
     1120px the hero media is wide enough for a side-by-side split
   ========================================================================== */

/* --- Phones: menu button + dropdown panel + compact footer --- */
@media (max-width: 767px) {
  /* The panel styles only apply once script.js has taken over (`.is-enhanced`);
     without JavaScript the links stay visible in the bar. */
  .site-header.is-enhanced .site-nav__list {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.25rem var(--gutter) 0.75rem;
    background-color: var(--color-navy);
    box-shadow: var(--shadow-header);
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height)); /* clears mobile browser UI */
    overflow-y: auto;
  }

  .site-header.is-enhanced .site-nav__list.is-open {
    display: flex;
  }

  .site-nav__item + .site-nav__item .site-nav__link {
    border-block-start: 1px solid rgb(252 254 255 / 12%);
  }

  .site-nav__link {
    padding-block: 0.875rem;
  }

  /* Compact two-row bar instead of the desktop's slim single line. */
  .site-footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding-block: 0.4375rem;
  }

  .site-footer__list {
    justify-content: center;
    gap: 0.125rem 1rem;
  }

  .site-footer__link,
  .site-footer__contact {
    padding-block: 0.3125rem;
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  .site-footer__icon {
    width: 1.125rem;
    height: 1.125rem;
  }
}

/* --- Phones: the hero keeps its layered blocks, just bigger --- */
@media (max-width: 719px) {
  /* The board is only ~350px wide here, so the mockup's proportional cards
     would be unreadable. They stay anchored to the subject but take a larger
     share of the board, with a text size floor. */
  .hero-card {
    padding: 0.35rem 0.5rem;
    border-radius: 3px;
    font-size: 0.8125rem;
  }

  .hero-card--back {
    left: 8%;
    top: 30%;
    width: 34%;
  }

  .hero-card--front {
    left: 52%;
    top: 52%;
    width: 44%;
  }
}

/* --- Curriculum: two columns --- */
@media (min-width: 760px) {
  .curriculum__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Audience + trainer: multi-column layouts --- */
@media (min-width: 900px) {
  .audience__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .trainer__panel {
    /* 29.2% is the mockup's portrait column at 1440 (330 of 1131). Keeping it
       proportional stops the photo swallowing the panel on medium screens. */
    grid-template-columns: 29.2% 1fr;
  }

  .trainer__figure {
    aspect-ratio: 330 / 399; /* mockup: the panel is 399px tall */
    max-width: none;
    justify-self: stretch;
  }

  .trainer__content {
    padding: 2.5rem var(--trainer-inset-end) 2.5rem var(--trainer-inset-start);
  }
}

/* --- Pricing: the featured bundle gets its own full-width row on tablets,
       then the three-up layout from the mockup on wider screens. --- */
@media (min-width: 640px) and (max-width: 999px) {
  .pricing__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing__card--featured {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .pricing__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Challenges: 2 → 3 → 5 columns --- */
@media (min-width: 560px) {
  .challenges__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 800px) {
  .challenges__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1080px) {
  .challenges__list {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* --- Hero: full side-by-side split once the media board is wide enough --- */
@media (min-width: 1120px) {
  .hero__inner {
    grid-template-columns: 1fr 46.4%;
    align-items: stretch;
  }

  /* The board fills its own track here, so the stacked-layout cap comes off. */
  .hero__media {
    max-width: none;
    justify-self: stretch;
  }

  .hero__content {
    display: grid;
    align-content: center;
    justify-items: start;
    /* 605px of copy, with the mockup's 65px / 102px panel insets. */
    max-width: calc(605px + var(--hero-inset-start) + var(--hero-inset-end));
    margin-inline: 0 auto;
    padding-block: clamp(2rem, 4vw, 3rem);
    padding-inline: var(--hero-inset-start) var(--hero-inset-end);
  }
}

/* ==========================================================================
   14. Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

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