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

:root {
  /* palette from the club's inclusive boxing poster */
  --navy: #1b2a4a;
  --navy-line: #33496f; /* lines on navy */
  --teal: #2a8c8c; /* icons and decoration */
  --teal-dark: #237676; /* teal text on light backgrounds (AA 4.5:1) */
  --teal-light: #7fcaca; /* teal text on navy (AA 4.5:1) */
  --soft-teal: #e3f2f2;
  --cream: #fff8ec;
  --yellow: #f5b82e; /* highlights only, never as text on light backgrounds */
  --red: #c8102e; /* hero accent word only */
  --dark: #1e293b;
  --mid: #475569;
  --light: #94a3b8;
  --border: #e2e8f0;
  --white: #ffffff;
  --max-w: 1200px;
  --nav-h: 84px;
}

/* in-page links stop below the sticky nav (and its 1px border) instead of under it */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1px);
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--white);
  color: var(--dark);
  line-height: 1.6;
  font-size: 16px;
}

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

/* <picture> is the layout box for each logo. Don't use display: contents here:
   Chrome renders the <source> as an empty box, which then takes a grid cell
   of its own and pushes the logo into the wrong place. */
picture {
  display: block;
}

/* keep phone numbers on one line */
a[href^="tel:"] {
  white-space: nowrap;
}

/* ── NAV ─────────────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
}

.nav-logo picture {
  flex-shrink: 0;
}
.nav-logo img {
  width: auto;
  height: 60px;
}

.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.nav-logo-text strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.nav-logo-text span {
  font-size: 11px;
  font-weight: 500;
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  align-items: center;
}
.nav-links a {
  text-decoration: none;
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: var(--teal-dark);
}

.nav-cta {
  background: var(--navy) !important;
  color: white !important;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 600 !important;
  transition: background 0.2s !important;
}
.nav-cta:hover {
  background: var(--teal-dark) !important;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: all 0.3s;
}
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 8px 24px 16px;
}
.mobile-menu a {
  display: block;
  padding: 13px 0;
  color: var(--navy);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child {
  border-bottom: none;
  color: var(--teal-dark);
  font-weight: 700;
}

/* ── SHARED ─────────────────────────────────── */
section {
  padding: 88px 24px;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--soft-teal);
  color: var(--teal-dark);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.pill::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 50%;
  flex-shrink: 0;
}

h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 16px;
  text-wrap: balance;
}

.lead {
  font-size: 17px;
  color: var(--mid);
  line-height: 1.75;
  max-width: 620px;
  text-wrap: balance;
}
.lead a {
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: underline;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: white;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  padding: 16px 32px;
  border-radius: 12px;
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(27, 42, 74, 0.25);
}
.btn-primary:hover {
  background: var(--teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(27, 42, 74, 0.3);
}
.btn-primary svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* National Lottery Community Fund logos: shown whole, never cropped, recoloured
   or stretched. Only the width is set; the height follows the file's proportions. */
.tnlcf-logo {
  width: 240px;
  max-width: 100%;
  height: auto;
}

/* ── HERO ───────────────────────────────────── */
#hero {
  background: var(--white);
  padding: 64px 24px 80px;
  position: relative;
  overflow: hidden;
}

#hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 48%;
  height: 100%;
  background: var(--cream);
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
  pointer-events: none;
}

.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

h1 {
  font-size: clamp(38px, 5.5vw, 64px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}
h1 .accent {
  color: var(--red);
}

/* the two programmes, in the class-card style (soft teal, teal top bar) */
.hero-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 36px;
}
.class-card.hero-card {
  display: block;
  padding: 26px 22px 22px;
  text-align: left;
  text-decoration: none;
}
/* the "Free" tag: warm yellow highlight with navy text for contrast */
.free-tag {
  display: inline-block;
  margin-bottom: 10px;
  background: var(--yellow);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  padding: 2px 10px;
  border-radius: 100px;
}
.hero-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 8px;
  text-wrap: balance;
}
/* no lone word on the last line of a hero card's day label */
.hero-card .class-day {
  text-wrap: balance;
}
.hero-card-detail {
  font-size: 15px;
  font-weight: 500;
  color: var(--mid);
  line-height: 1.5;
}
/* who the Friday sessions are for: the Free tag's size and shape, in navy
   with white text (about 14:1 contrast) */
.audience-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.audience-tags li {
  background: var(--navy);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  padding: 2px 10px;
  border-radius: 100px;
  white-space: nowrap;
}

/* the Armour Academy logo is the hero's main visual, on the cream shape on
   desktop. .hero-logo is the <picture>, so it is the grid item; only the
   width is set and the <img> fills it, keeping its proportions. */
.hero-logo {
  width: 380px;
  justify-self: center;
}

/* ── FUNDER BAND ────────────────────────────── */
/* slim white strip, so the logo file's own white background blends in */
.funder-band {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-top: 24px;
  padding-bottom: 24px;
}
.funder-band .tnlcf-logo {
  width: 360px;
  margin: 0 auto;
}

/* ── ABOUT ──────────────────────────────────── */
#about {
  background: var(--white);
}

.about-text {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.about-text p {
  color: var(--mid);
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.8;
}
.about-text p:last-child {
  margin-bottom: 0;
}

/* ── CLASSES (MONDAY & WEDNESDAY) ──────────── */
#classes {
  background: var(--cream);
}

.classes-hdr {
  text-align: center;
  margin-bottom: 56px;
}
.classes-hdr .lead {
  margin: 0 auto;
}

.classes-accent {
  color: var(--teal-dark);
  font-weight: 700;
}

#classes .class-card {
  max-width: 560px;
  margin: 0 auto;
}

.class-card {
  background: var(--soft-teal);
  border: 2px solid var(--soft-teal);
  border-radius: 20px;
  padding: 36px 30px;
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.class-card:hover {
  border-color: var(--teal);
  box-shadow: 0 8px 40px rgba(42, 140, 140, 0.15);
}
.class-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--teal);
}

.class-day {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal-dark);
  margin-bottom: 8px;
}
.class-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 20px;
}

.class-meta {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.meta-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--mid);
}
.meta-row svg {
  width: 17px;
  height: 17px;
  color: var(--teal);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── FRIDAYS (INCLUSIVE BOXING) ────────────── */
/* Kept deliberately calm: generous spacing, high-contrast text, and no
   hover movement, animation or flashing anywhere in this section. */
#fridays {
  background: var(--soft-teal);
}
#fridays .pill {
  background: var(--white);
} /* its usual soft teal would vanish here */

.fri-hdr {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.fri-hdr .lead {
  margin: 0 auto;
}
.fri-signpost {
  color: var(--teal-dark);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 18px;
  text-wrap: balance;
}

.fri-tagline {
  font-size: 18px;
  font-weight: 700;
  color: var(--teal-dark);
  line-height: 1.5;
  text-wrap: balance;
}
.fri-hdr .fri-tagline {
  margin-top: 20px;
}

.fri-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 48px;
}

.fri-text p {
  color: var(--mid);
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 18px;
}
.fri-text .fri-tagline {
  color: var(--teal-dark);
  margin: 32px 0 0;
}

.fri-list,
.fri-details {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fri-list {
  margin-top: 28px;
}
.fri-list li,
.fri-details li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--dark);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}
.fri-list svg,
.fri-details svg {
  width: 20px;
  height: 20px;
  color: var(--teal);
  flex-shrink: 0;
  margin-top: 2px;
}

.fri-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 30px;
}
.fri-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 18px;
}
.fri-card p {
  color: var(--mid);
  font-size: 16px;
  line-height: 1.75;
}
.fri-card p + p {
  margin-top: 14px;
}
.fri-card p a {
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: underline;
}
.fri-accent {
  color: var(--teal-dark);
  font-weight: 700;
}
.fri-note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.fri-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 64px;
}

.btn-register {
  display: inline-block;
  margin-top: 24px;
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 12px;
  text-align: center;
  text-wrap: balance;
}
.btn-register:hover {
  text-decoration: underline;
}
.btn-register:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.fri-close {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.fri-close .fri-tagline {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
}

/* ── ABOUT ARMOUR ACADEMY (THE VENUE) ──────── */
#about-aa {
  background: var(--white);
}

.aa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.loc-icon {
  width: 46px;
  height: 46px;
  background: var(--teal);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.loc-icon svg {
  width: 22px;
  height: 22px;
  color: white;
}
.aa-heading .loc-icon {
  margin-bottom: 20px;
}
.aa-heading h2 {
  font-size: clamp(24px, 3vw, 34px);
  margin-bottom: 0;
}

.aa-text p {
  color: var(--mid);
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.8;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--navy);
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 26px;
  border-radius: 10px;
  transition: all 0.2s;
  margin-top: 8px;
}
.btn-outline:hover {
  background: var(--navy);
  color: white;
}
.btn-outline svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── FOOTER ─────────────────────────────────── */
footer {
  background: var(--navy);
  color: white;
  padding: 52px 24px 32px;
}

.footer-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
}

.footer-logo {
  width: auto;
  height: 72px;
  margin-bottom: 20px;
  /* logo.png has 85 of its 800px empty before the artwork, about 8px at 72px
     tall, so shift it left to line the artwork up with the Armour text */
  margin-left: -8px;
}
.footer-brand strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 2px;
}
.footer-brand .ftag {
  font-size: 11px;
  color: var(--yellow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* the white logo file has 438 of its 3369px empty before the artwork, about
   31px at 240px wide, so shift it left to line the artwork up with the Armour
   text */
.footer-brand .tnlcf-logo {
  margin-top: 24px;
  margin-left: -31px;
}

.fcol h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--light);
  margin-bottom: 14px;
}
.fcol p,
.fcol a {
  font-size: 14px;
  color: var(--light);
  margin-bottom: 8px;
  line-height: 1.6;
  text-decoration: none;
  display: block;
}
.fcol a:hover {
  color: var(--teal-light);
}
/* the phone number and website read as links on navy: teal, bold, underlined */
.fcol a[href^="tel:"],
.fcol a[href^="https://armourtrainingacademy.com"] {
  color: var(--teal-light);
  font-weight: 600;
  text-decoration: underline;
}
.fcol a[href^="tel:"]:hover,
.fcol a[href^="https://armourtrainingacademy.com"]:hover {
  color: var(--white);
}

.footer-bar {
  max-width: var(--max-w);
  margin: 28px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--navy-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  font-size: 13px;
  color: var(--light);
}
.footer-bar > span:first-child {
  flex: 1 1 auto;
  max-width: 720px;
}
.footer-bar > :not(:first-child) {
  white-space: nowrap;
}
/* ccassinjr and Main Website match the Contact links: teal, bold, underlined */
.footer-bar a {
  color: var(--teal-light);
  font-weight: 600;
  text-decoration: underline;
}
.footer-bar a:hover {
  color: var(--white);
}
/* the registered office address always starts on a line of its own */
.reg-office {
  display: block;
}
/* numbers iOS auto-detects (like the company number) look like normal text */
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font: inherit !important;
}

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width: 1100px) {
  .nav-links {
    gap: 22px;
  }
}

/* the full link row needs about 890px, so switch to the menu button at 900px */
@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .mobile-menu.open {
    display: block;
  }
}

@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* one logo in the HTML: grid order lifts it above the heading */
  .hero-logo {
    order: -1;
    width: 260px;
  }
  /* tablets and phones: heading, cards and button centred under the logo */
  .hero-content {
    text-align: center;
  }
  .hero-cards {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  #hero::before {
    display: none;
  }
  .fri-grid {
    grid-template-columns: 1fr;
  }
  /* single column: Friday text in a centred column under the centred heading,
     text still left-aligned, tagline centred */
  .fri-text {
    max-width: 600px;
    margin: 0 auto;
  }
  .fri-text .fri-tagline {
    text-align: center;
  }
  .aa-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* single column: venue icon, heading, text and button centred */
  .aa-heading,
  .aa-text {
    text-align: center;
  }
  .aa-heading .loc-icon {
    margin-left: auto;
    margin-right: auto;
  }
  .aa-text p {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
  }
}

/* tablets: brand on the left, Contact with Venue stacked under it on the right */
@media (min-width: 768px) and (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    row-gap: 28px;
  }
  .footer-brand {
    grid-row: span 2;
  }
}

@media (max-width: 768px) {
  section {
    padding: 64px 20px;
  }
  #hero {
    padding: 44px 20px 60px;
  }
  .funder-band .tnlcf-logo {
    width: 280px;
  }
  .fri-steps {
    grid-template-columns: 1fr;
  }
  .fri-card {
    padding: 28px 24px;
  }
  .hero-inner {
    gap: 32px;
  }
  .hero-logo {
    width: 220px;
  }
  h1 {
    font-size: 38px;
  }
}

/* phones: footer in one column, from 768px it uses the tablet layout */
@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* stacked and left-aligned, in line with the footer columns above */
  .footer-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* phones: programme cards stacked, so the day labels stay on one line */
@media (max-width: 600px) {
  .hero-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .btn-register {
    display: block;
  }
  .btn-outline {
    font-size: 14px;
    padding: 12px 18px;
  }
}

/* wider screens: the registered office address never breaks. Where the
   address and the two links can't share a row (from 768px), the links wrap
   onto a second row instead of overflowing. */
@media (min-width: 768px) {
  .reg-office {
    white-space: nowrap;
  }
  .footer-bar {
    flex-wrap: wrap;
  }
  .footer-bar > span:first-child {
    flex-basis: 0;
  }
}

/* tablets: copyright on a full-width row, then Design by and Main Website
   together on a row below it, left-aligned */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-bar {
    justify-content: flex-start;
  }
  .footer-bar > span:first-child {
    flex-basis: 100%;
    max-width: none;
  }
}

@media (min-width: 1441px) {
  :root {
    --max-w: 1360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
  }
  .btn-primary:hover {
    transform: none;
  }
}