/* ==========================================================================
   Material Academy — Homepage enhancement layer
   --------------------------------------------------------------------------
   Loaded AFTER css/main.css. This refines the existing template rather than
   replacing it: same sections, same structure, same intent — better type,
   consistent rhythm, and motion that responds to the visitor.

   Requires tokens.css.
   ========================================================================== */

/* ==========================================================================
   1. Typography — Fraunces for headings, Archivo for everything else
   ========================================================================== */
body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.section-title h3,
.single-popular-course .details h4 {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--brand-800);
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* ==========================================================================
   2. Section rhythm — the single biggest fix for a "scattered" page.
      Every band gets the same generous vertical space, so the page reads as
      one document instead of a stack of unrelated blocks.
   ========================================================================== */
.main-content,
.secondsection,
.popular-course-area,
.service-section,
.cta,
.review-section,
#contact {
  padding-block: var(--space-9);
}
@media (min-width: 48rem) {
  .main-content,
  .popular-course-area,
  .service-section,
  .cta,
  .review-section,
  #contact {
    padding-block: var(--space-11);
  }
}

.popular-course-area .container-fluid,
.service-section .container,
#contact .container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section headings share one treatment everywhere. */
.section-title,
.popular-course-area .b {
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  text-align: center;
}
.section-title h3,
.popular-course-area .b h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
  text-transform: none;      /* kills the ALL-CAPS shouting */
}
@media (min-width: 48rem) {
  .section-title h3,
  .popular-course-area .b h2 { font-size: var(--text-3xl); }
}
.section-title p,
.popular-course-area .b p {
  color: var(--ink-600);
  font-size: var(--text-lg);
  margin-bottom: 0;
}

/* ==========================================================================
   3. Hero
   ========================================================================== */
.main-content > h2 {
  font-size: var(--text-3xl);
  text-align: center;
  margin-bottom: var(--space-8);
}
@media (min-width: 48rem) {
  .main-content > h2 { font-size: var(--text-4xl); line-height: var(--leading-tight); }
}

.main-content .features {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 48rem) {
  .main-content .features { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.main-content .feature {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  /* Motion: a hairline that warms and a card that lifts, nothing theatrical */
  transition: transform var(--duration-lg) var(--ease-out),
              border-color var(--duration-lg) var(--ease-out),
              box-shadow var(--duration-lg) var(--ease-out);
}
.main-content .feature:hover {
  transform: translateY(-4px);
  border-color: var(--border-brand);
  box-shadow: var(--shadow-md);
}
.main-content .feature h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}
.main-content .feature p { color: var(--ink-700); margin-bottom: 0; }

/* The statement block */
.main-content .hero {
  max-width: 62ch;
  margin: var(--space-9) auto 0;
  padding: var(--space-8) var(--gutter);
  text-align: center;
  border-top: 1px solid var(--rule);
}
.main-content .hero h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
}
@media (min-width: 48rem) { .main-content .hero h3 { font-size: var(--text-2xl); } }
.main-content .hero p { color: var(--ink-600); margin-bottom: var(--space-6); }

/* ==========================================================================
   4. Buttons — one treatment, used everywhere
   ========================================================================== */
.main-content .hero .btn,
.cta .btn,
.search-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  background: var(--accent-700);
  color: #fff;
  border: 1px solid var(--accent-700);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}
.main-content .hero .btn:hover,
.cta .btn:hover,
.search-form button:hover {
  background: var(--accent-800);
  border-color: var(--accent-800);
  color: #fff;
  transform: translateY(-2px);
}
.main-content .hero .btn:active,
.cta .btn:active,
.search-form button:active { transform: translateY(0); }

/* ==========================================================================
   5. Search
   ========================================================================== */
.secondsection { background: var(--paper-sunken); border-block: 1px solid var(--rule); }
.secondsection .search { max-width: 640px; margin-inline: auto; padding-inline: var(--gutter); }
.search-form { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.search-form input[type="text"] {
  flex: 1 1 220px;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--ink-900);
  background: var(--paper-raised);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}
.search-form input[type="text"]:hover { border-color: var(--ink-600); }
.search-form input[type="text"]::placeholder { color: var(--ink-400); }

/* The stray "search your course" heading inside the hero band */
.backgroundimage .search h3 {
  text-align: center;
  font-size: var(--text-lg);
  color: var(--ink-600);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   6. Course cards — inside Owl Carousel.
      theme-head.php initialises .popuar-course-carusel with loop, nav, dots
      and 1/2/3 responsive items. That works, so it is kept: the carousel IS
      the movement on this section. These rules make the slides equal height
      and give the controls a real design.
   ========================================================================== */
.popuar-course-carusel .owl-stage { display: flex; }
.popuar-course-carusel .owl-item { display: flex; height: auto; }
.popuar-course-carusel .owl-item > * { width: 100%; }

/* Nav arrows */
.popuar-course-carusel .owl-nav { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); }
.popuar-course-carusel .owl-nav .owl-prev,
.popuar-course-carusel .owl-nav .owl-next {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-xl); line-height: 1;
  color: var(--brand-800);
  background: var(--paper-raised);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}
.popuar-course-carusel .owl-nav .owl-prev:hover,
.popuar-course-carusel .owl-nav .owl-next:hover {
  background: var(--brand-800); color: #fff; transform: translateY(-2px);
}
.popuar-course-carusel .owl-nav .disabled { opacity: 0.4; }

/* Dots */
.popuar-course-carusel .owl-dots { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); }
.popuar-course-carusel .owl-dot span {
  display: block; width: 9px; height: 9px;
  background: var(--brand-200);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition), width var(--transition);
}
.popuar-course-carusel .owl-dot.active span { background: var(--accent-700); width: 26px; }

.single-popular-course {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--duration-lg) var(--ease-out),
              border-color var(--duration-lg) var(--ease-out),
              box-shadow var(--duration-lg) var(--ease-out);
}
.single-popular-course:hover {
  transform: translateY(-6px);
  border-color: var(--border-brand);
  box-shadow: var(--shadow-lg);
}

.single-popular-course .thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-sunken);
}
.single-popular-course .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* Motion: the image breathes on hover, clipped by the thumb */
  transition: transform 600ms var(--ease-out);
}
.single-popular-course:hover .thumb img { transform: scale(1.06); }

.single-popular-course .details {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}
.single-popular-course .details .name {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  background: var(--brand-100);
  color: var(--brand-800);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0;
}
.single-popular-course .details .value {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--brand-800);
  margin: 0;
}
.single-popular-course .details h4 {
  font-size: var(--text-lg);
  margin-block: var(--space-4) var(--space-3);
  transition: color var(--transition);
}
.single-popular-course:hover .details h4 { color: var(--brand-900); }
.single-popular-course .details > a { text-decoration: none; }
.single-popular-course .details .course-blurb {
  color: var(--ink-600);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.single-popular-course .bottom {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  color: var(--ink-600);
  font-size: var(--text-sm);
  align-items: center;
}
.single-popular-course .bottom p { margin: 0; }

/* ==========================================================================
   7. Services
   ========================================================================== */
.service-section { background: var(--paper-sunken); border-block: 1px solid var(--rule); }
.service-section .row { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .service-section .row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .service-section .row { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }

.service-item {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  width: auto !important;      /* the theme's grid classes fight the grid */
  max-width: none !important;
  transition: transform var(--duration-lg) var(--ease-out),
              border-color var(--duration-lg) var(--ease-out);
}
.service-item:hover { transform: translateY(-4px); border-color: var(--border-brand); }
.service-icon img { width: 44px; height: 44px; object-fit: contain; margin-bottom: var(--space-4); }
.service-content h4 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.service-content p { color: var(--ink-700); font-size: var(--text-base); margin-bottom: 0; }

/* ==========================================================================
   8. Call to action
   ========================================================================== */
.cta { background: var(--brand-950); color: var(--brand-200); }
.cta h2, .cta h3, .cta h4 { color: #fff; }
.cta p { color: var(--brand-200); }
.cta .firstpart {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   9. Contact
   ========================================================================== */
#contact .section-header { margin-bottom: var(--space-8); text-align: center; }
#contact .section-header h2 { font-size: var(--text-2xl); }

/* ==========================================================================
   10. Motion
       AOS handles the reveal on scroll; these are the defaults it animates
       with. Anyone who asks for reduced motion gets none of it.
   ========================================================================== */
[data-aos] { will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .single-popular-course,
  .single-popular-course .thumb img,
  .main-content .feature,
  .service-item { transition: none; }
  .single-popular-course:hover,
  .main-content .feature:hover,
  .service-item:hover { transform: none; }
}

/* ==========================================================================
   11. Focus — visible on everything interactive, always
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   12. Fixes found by measuring the rendered page
   ========================================================================== */

/* AOS declares [data-aos^="fade"][data-aos^="fade"] — specificity (0,2,0) —
   and pins transition-property to opacity/transform. That silently killed the
   card hover. These selectors match that specificity and, loading later, win.
   opacity stays in the list so the AOS reveal still animates. */
.popuar-course-carusel .single-popular-course[data-aos],
.service-section .service-item[data-aos],
.main-content .features .feature[data-aos],
.popuar-course-carusel .single-popular-course,
.service-section .service-item,
.main-content .features .feature {
  transition-property: opacity, transform, border-color, box-shadow;
  transition-duration: var(--duration-lg);
  transition-timing-function: var(--ease-out);
}

/* The hero sits on a photograph, so white text is right — but legibility must
   not depend on which photo. A scrim guarantees it regardless of the image. */
.backgroundimage { position: relative; isolation: isolate; }
.backgroundimage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
              rgba(10, 24, 38, 0.72) 0%,
              rgba(10, 24, 38, 0.58) 55%,
              rgba(10, 24, 38, 0.78) 100%);
}
.backgroundimage .main-content > h2,
.backgroundimage .main-content .hero h3 { color: #fff; }
.backgroundimage .main-content .hero p,
.backgroundimage .search h3 { color: rgba(255, 255, 255, 0.86); }

/* Feature cards sit on that dark scrim, so they get a translucent treatment
   rather than solid white blocks punched out of the photograph. */
.backgroundimage .main-content .feature {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
}
.backgroundimage .main-content .feature h3 { color: #fff; }
.backgroundimage .main-content .feature p  { color: rgba(255, 255, 255, 0.84); }
.backgroundimage .main-content .feature:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
}
.backgroundimage .main-content .hero { border-top-color: rgba(255, 255, 255, 0.22); }

/* Owl 1.x renders nav as <div>, which cannot be focused or activated from a
   keyboard. The init script promotes them to role=button with a tabindex, so
   they need a visible focus ring like any other control. */
.popuar-course-carusel .owl-nav .owl-prev,
.popuar-course-carusel .owl-nav .owl-next,
.popuar-course-carusel .owl-dot { cursor: pointer; }
.popuar-course-carusel .owl-nav .owl-prev:focus-visible,
.popuar-course-carusel .owl-nav .owl-next:focus-visible,
.popuar-course-carusel .owl-dot:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* The AOS attribute now sits on .course-slide, so .single-popular-course
   carries no AOS rules and its own transition applies cleanly. The slide must
   still stretch so cards in a row match height. */
.popuar-course-carusel .owl-item > .course-slide { display: flex; width: 100%; }
.popuar-course-carusel .course-slide > .single-popular-course { width: 100%; }

/* ==========================================================================
   13. Hero lead
   --------------------------------------------------------------------------
   The page previously opened with "Why choose Material Academy?", which only
   works if you already know what Material Academy is. This states the offer
   first; the old heading survives directly beneath as supporting content.
   Sits on the dark scrim, so the type is light.
   ========================================================================== */
.hero-lead {
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-8) var(--space-9);
  text-align: center;
}
@media (min-width: 48rem) {
  .hero-lead { padding-block: var(--space-10) var(--space-11); }
}

.hero-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: var(--space-5);
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: clamp(2.1rem, 6.2vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 auto var(--space-6);
  max-width: 18ch;
  text-wrap: balance;
}

.hero-sub {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  max-width: 54ch;
  margin: 0 auto var(--space-7);
}

/* ---------- Actions ------------------------------------------------------ */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-9);
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 260ms var(--ease-out),
              border-color 260ms var(--ease-out),
              transform 260ms var(--ease-out),
              box-shadow 260ms var(--ease-out);
}
.hero-cta--primary {
  background: #fff;
  color: var(--brand-900);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}
.hero-cta--primary:hover {
  background: #fff;
  color: var(--brand-950);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
}
/* The arrow leans forward when you reach for it. */
.hero-cta__arrow { transition: transform 260ms var(--ease-out); }
.hero-cta--primary:hover .hero-cta__arrow { transform: translateX(4px); }

.hero-cta--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-cta--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- Facts -------------------------------------------------------
   Real numbers only: the programme count is queried, not typed.           */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6) var(--space-8);
  list-style: none;
  margin: 0;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-facts li { margin: 0; text-align: center; }
.hero-fact__value {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: #fff;
  line-height: 1.1;
}
.hero-fact__label {
  display: block;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.68);
  margin-top: var(--space-1);
}

/* The old heading, now supporting content rather than the opening line. */
.hero-why {
  text-align: center;
  color: #fff !important;
  font-size: var(--text-2xl);
  margin-bottom: var(--space-7);
}

/* ==========================================================================
   14. The reveal
   --------------------------------------------------------------------------
   Words rise in sequence, then the supporting lines follow. Everything starts
   hidden only once the script has confirmed it can animate, so with JS off
   the hero is simply visible.
   ========================================================================== */
.hero-title .word {
  display: inline-block;
  white-space: pre;
}
.js-reveal .hero-title .word {
  opacity: 0;
  transform: translateY(0.5em) rotate(1.5deg);
  animation: heroWordIn 900ms cubic-bezier(0.22, 0.68, 0.24, 1) forwards;
  animation-delay: calc(var(--w, 0) * 85ms + 120ms);
}
@keyframes heroWordIn {
  to { opacity: 1; transform: translateY(0) rotate(0deg); }
}

.js-reveal .hero-eyebrow,
.js-reveal .hero-sub,
.js-reveal .hero-actions,
.js-reveal .hero-facts {
  opacity: 0;
  transform: translateY(14px);
  animation: heroRiseIn 760ms var(--ease-out) forwards;
}
.js-reveal .hero-eyebrow { animation-delay: 40ms; }
.js-reveal .hero-sub     { animation-delay: calc(var(--after-title, 700ms) + 60ms); }
.js-reveal .hero-actions { animation-delay: calc(var(--after-title, 700ms) + 180ms); }
.js-reveal .hero-facts   { animation-delay: calc(var(--after-title, 700ms) + 300ms); }
@keyframes heroRiseIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .hero-title .word,
  .js-reveal .hero-eyebrow,
  .js-reveal .hero-sub,
  .js-reveal .hero-actions,
  .js-reveal .hero-facts {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero-cta:hover { transform: none; }
}

/* ==========================================================================
   15. Reveal gating and hero spacing
   ========================================================================== */

/* Held still until the preloader has cleared, so the animation is actually
   seen rather than played behind a white sheet. */
.hero-lead.is-waiting .hero-title .word,
.hero-lead.is-waiting .hero-eyebrow,
.hero-lead.is-waiting .hero-sub,
.hero-lead.is-waiting .hero-actions,
.hero-lead.is-waiting .hero-facts {
  animation-play-state: paused;
}

/* The gap under the bar was the theme's .main-content padding stacking on top
   of the hero's own. The bar is fixed and the wrapper already pads itself by
   the bar height, so the section needs very little of its own. */
.backgroundimage .main-content { padding-top: var(--space-2); }
.hero-lead { padding-block: var(--space-6) var(--space-8); }
@media (min-width: 48rem) {
  .backgroundimage .main-content { padding-top: var(--space-4); }
  .hero-lead { padding-block: var(--space-7) var(--space-10); }
}

/* css/main.css gives .main-content a 150px top margin, which existed to clear
   the old fixed 60px header. .backgroundimage already pads itself by the bar
   height, so that margin is now just dead space under the navigation. */
.backgroundimage .main-content { margin-top: 0; }

/* ==========================================================================
   16. Hero parallax
   --------------------------------------------------------------------------
   The photograph moves at roughly a third of the page's speed, so the hero
   text appears to sit in front of it rather than on it.

   Done with a transform on its own layer rather than background-attachment:
   fixed, which repaints the whole background on every frame and is simply
   ignored on iOS. A transform is composited on the GPU, so the page keeps
   scrolling at full rate.
   ========================================================================== */
.backgroundimage {
  overflow: hidden;                 /* the layer is taller than its box */
  background-image: none;           /* the layer below carries the image now */
}

.hero-parallax {
  position: absolute;
  /* Headroom. The layer travels heroHeight x SPEED downward, so it must be
     tall enough that its bottom edge never rises into view. Coverage needs
     H + pad >= (1 - SPEED) x H + viewportHeight; at 20% that holds while the
     hero is at least ~1.85 screens tall, which it is at every breakpoint. */
  inset: -20% 0 -20% 0;
  z-index: -2;                      /* under the scrim, which sits at -1 */
  background-image: url('../../headway-5QgIuuBxKwM-unsplash.jpg');  /* relative to THIS file, not the page */
  background-size: cover;
  background-position: center;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Without JavaScript the image simply sits still, which is the old behaviour. */
@media (prefers-reduced-motion: reduce) {
  .hero-parallax { transform: none !important; }
}

/* ==========================================================================
   17. Trust strip
   --------------------------------------------------------------------------
   Sits immediately under the hero. The hardest question a visitor has is
   "who are you to certify anyone", and it needs answering before they scroll
   past. Deliberately restrained: numbered claims and a hairline grid, no
   badges, no invented accreditations.
   ========================================================================== */
.trust {
  /* Deep navy so the white cards read as objects sitting on it. This is the
     band that has to stop a visitor, so it earns the contrast. */
  background: var(--brand-900);
  border-block: 1px solid var(--brand-950);
  padding-block: var(--space-8);
}
@media (min-width: 48rem) { .trust { padding-block: var(--space-10); } }

.trust__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.trust__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .trust__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-6); } }
@media (min-width: 64rem) { .trust__grid { grid-template-columns: repeat(4, 1fr); } }

.trust__item {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--brand-800);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 420ms var(--ease-out),
              border-color 420ms var(--ease-out),
              box-shadow 420ms var(--ease-out);
}

/* A spotlight that follows the pointer. The coordinates are written by the
   script as --mx/--my, so the gradient tracks the cursor across each card
   rather than simply switching on. */
.trust__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%),
              rgba(138, 90, 28, 0.16), transparent 68%);
  opacity: 0;
  transition: opacity 380ms var(--ease-out);
}

/* A large ghosted numeral, the way a printed prospectus numbers its sections.
   It sits behind the text and steps forward as you approach. */
.trust__item::after {
  content: attr(data-num);
  position: absolute;
  top: -0.34em;
  right: 0.06em;
  z-index: -1;
  font-family: var(--font-serif);
  font-size: 7.5rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--brand-800);
  opacity: 0.05;
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
  pointer-events: none;
}

.trust__item:hover {
  transform: translateY(-6px);
  border-color: var(--border-brand);
  border-top-color: var(--accent-700);
  box-shadow: 0 14px 34px rgba(10, 24, 38, 0.10);
}
.trust__item:hover::before { opacity: 1; }
.trust__item:hover::after {
  opacity: 0.11;
  transform: translate3d(-6px, 4px, 0) rotate(-3deg);
}

/* The small label above the title. */
.trust__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--accent-700);
  margin-bottom: var(--space-3);
}
/* A rule that grows out of the label as the card is approached. */
.trust__mark::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background: var(--accent-700);
  transition: width 460ms var(--ease-out);
}
.trust__item:hover .trust__mark::after { width: 34px; }

.trust__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--brand-800);
  margin-bottom: var(--space-2);
  line-height: 1.25;
  transition: transform 420ms var(--ease-out);
}
.trust__item:hover .trust__title { transform: translateX(3px); }

.trust__body {
  font-size: var(--text-base);
  color: var(--ink-700);
  margin: 0;
  transition: color 420ms var(--ease-out);
}
.trust__item:hover .trust__body { color: var(--ink-900); }

/* ---------- The industries line -----------------------------------------
   A slow ticker. It is a statement of who the programmes are built for, not
   a client list, and the label says exactly that. The accessible copy is a
   plain sentence, so nobody hears a loop.
   ------------------------------------------------------------------------ */
.trust__for {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.trust__for-label {
  flex: none;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.trust__marquee {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  /* Fade both ends so the loop has no visible seam. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trust__track {
  display: inline-flex;
  gap: var(--space-6);
  white-space: nowrap;
  will-change: transform;
  animation: trustScroll 34s linear infinite;
}
/* The list is duplicated in the markup, so translating exactly -50% lands on
   an identical frame and the loop is seamless. */
@keyframes trustScroll { to { transform: translateX(-50%); } }

.trust__track span {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: #fff;
  opacity: 0.5;
}
.trust__marquee:hover .trust__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .trust__track { animation: none; }
  .trust__item { transition: none; }
}

/* On narrow screens the label and the ticker cannot share a row: the ticker
   was squeezed to 134px of a 390px screen. Stack them instead. */
@media (max-width: 40rem) {
  .trust__for { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .trust__marquee { width: 100%; }
}


/* Reduced motion: the cards keep their spotlight and numerals but stop
   moving, so the section still reads as designed rather than inert. */
@media (prefers-reduced-motion: reduce) {
  .trust__item,
  .trust__title,
  .trust__body,
  .trust__mark::after,
  .trust__item::before,
  .trust__item::after { transition: none !important; }
  .trust__item:hover { transform: none; }
  .trust__item:hover::after { transform: none; }
  .trust__item:hover .trust__title { transform: none; }
}

/* AOS pins transition-property through [data-aos^="fade"][data-aos^="fade"],
   specificity (0,2,0), which silently disabled the lift, border and shadow on
   these cards. Adding the attribute to the selector makes it (0,3,0) and wins.
   opacity stays in the list so the AOS reveal still animates. */
.trust__grid .trust__item[data-aos] {
  transition-property: opacity, transform, border-color, box-shadow;
  transition-duration: 420ms;
  transition-timing-function: var(--ease-out);
}

/* The trust cards reveal themselves rather than going through AOS, so their
   hover transition is not overwritten. A keyframe animation is used rather
   than a transition: a transition on .is-in would keep owning transform and
   opacity afterwards, which would then swallow the hover lift. The script
   adds .is-done on animationend, which drops the animation entirely and hands
   the card back to its own hover transition. Hidden only once the script has
   confirmed it can reveal them - with JS off, .js-trust is never added. */
.trust__grid.js-trust .trust__item { opacity: 0; }
.trust__grid.js-trust .trust__item.is-in {
  animation: trustCardIn 620ms var(--ease-out) var(--d, 0ms) both;
}
.trust__grid.js-trust .trust__item.is-done {
  animation: none;
  opacity: 1;
  transform: none;
}
@keyframes trustCardIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .trust__grid.js-trust .trust__item { opacity: 1; animation: none !important; }
}

/* ==========================================================================
   Trust cards, two-phase reveal
   --------------------------------------------------------------------------
   The box arrives first and settles; only then does its content write itself
   in, word by word. Splitting is done by script, and the words are hidden by
   a class the script adds, so with JS off the text is simply there.
   ========================================================================== */
.trust__title .w,
.trust__body .w {
  display: inline-block;
  white-space: pre;
}
.js-trust .trust__title .w,
.js-trust .trust__body .w {
  opacity: 0;
  transform: translateY(0.45em);
}

/* .is-done lands on animationend of the box, so the words cannot start until
   the card has actually finished arriving. */
.js-trust .trust__item.is-done .trust__title .w,
.js-trust .trust__item.is-done .trust__body .w {
  animation: trustWordIn 480ms var(--ease-out) forwards;
  animation-delay: calc(var(--wi, 0) * 30ms);
}
/* The body starts once the title has had a moment. */
.js-trust .trust__item.is-done .trust__body .w {
  animation-delay: calc(180ms + var(--wi, 0) * 18ms);
}

@keyframes trustWordIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .js-trust .trust__title .w,
  .js-trust .trust__body .w {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}