/* UK homepage, loaded only by default.asp for www.tutorhunt.com (see
   includes/home-uk.inc). Everything is scoped to .hp so that the shared header,
   menu and footer stay exactly as they are on every other page.

   The Figtree @font-face is in css/topmenu.css, which every UK page loads. */

.hp
{
  --hp-navy: #1f3350;
  --hp-ink: #2a3a52;
  --hp-slate: #56657b;
  --hp-blue: #3a68ae;
  --hp-tint: #f0f4fb;
  --hp-line: #dbe4f1;
  --hp-lime: #a9d622;
  --hp-lime-dark: #98c31a;
  --hp-radius: 16px;
  --hp-shadow: 0 18px 44px rgba(31, 51, 80, .14);
  /* Brand blue panel (was navy until 2026-11-08; the class names still say navy). */
  --hp-surface: radial-gradient(520px 260px at 100% 0%, rgba(160, 195, 245, .38), transparent 65%), linear-gradient(110deg, #3a68ae 0%, #4170b8 100%);

  overflow-x: clip;
  color: var(--hp-ink);
  font-family: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

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

.hp h1, .hp h2, .hp h3
{
  margin: 0;
  color: var(--hp-navy);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.hp h2
{
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.015em;
}

.hp h3
{
  font-size: 19px;
  line-height: 1.3;
}

:where(.hp) p
{
  margin: 0;
}

:where(.hp) ul, :where(.hp) ol
{
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp a:focus-visible, .hp button:focus-visible, .hp input:focus-visible, .hp select:focus-visible
{
  outline: 3px solid var(--hp-blue);
  outline-offset: 2px;
}

.hp [hidden]
{
  display: none;
}

.hp-nowrap
{
  white-space: nowrap;
}

/* Sections ------------------------------------------------------------- */

.hp-section
{
  padding: clamp(56px, 7vw, 92px) 0;
}

.hp-section--tint
{
  background: var(--hp-tint);
}

.hp-section--navy
{
  background: var(--hp-surface);
}

.hp-section--navy h2
{
  color: #fff;
}

.hp-head
{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 36px;
}

.hp-head p
{
  color: var(--hp-slate);
}

.hp-head--stack
{
  display: block;
  max-width: 760px;
}

.hp-head--stack p
{
  margin-top: 12px;
}

.hp-more
{
  color: var(--hp-blue);
  font-weight: 600;
  text-decoration: none;
}

.hp-more:after
{
  content: " \2192";
}

.hp-more:hover
{
  text-decoration: underline;
}

.hp-btn
{
  display: inline-block;
  padding: 12px 26px;
  border: 2px solid var(--hp-lime);
  border-radius: 999px;
  background: var(--hp-lime);
  color: var(--hp-navy);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}

.hp-btn:hover
{
  border-color: var(--hp-lime-dark);
  background: var(--hp-lime-dark);
  color: var(--hp-navy);
}

.hp-btn--line
{
  border-color: currentColor;
  background: none;
  color: var(--hp-blue);
}

.hp-btn--line:hover
{
  border-color: var(--hp-blue);
  background: var(--hp-blue);
  color: #fff;
}

/* Hero ----------------------------------------------------------------- */

/* z-index 0 keeps every layer inside the hero below the menu's dropdowns. Keep
   this a plain block too: on pages with the old floated menu, flex or
   overflow:hidden here would squeeze the hero to one side of the float. */
.hp-hero
{
  --hp-band: clamp(380px, 30.5vw, 440px);
  position: relative;
  z-index: 0;
  background: var(--hp-tint);
}

/* The photo comes after this in the markup, so this layer has to sit above it. */
.hp-hero__inner
{
  position: relative;
  z-index: 1;
  padding-top: 40px;
  padding-bottom: 40px;
}

.hp h1
{
  font-size: clamp(36px, 3.9vw, 54px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.022em;
}

.hp-hero__lead
{
  margin-top: 14px;
  color: var(--hp-ink);
  font-size: clamp(17px, 1.5vw, 20px);
  text-wrap: balance;
  line-height: 1.45;
}

.hp-search
{
  margin-top: 28px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--hp-shadow);
}

.hp-search__tabs
{
  display: flex;
  gap: 4px;
  padding: 10px 14px 0;
  border-bottom: 1px solid var(--hp-line);
}

.hp-search__tabs a
{
  margin-bottom: -1px;
  padding: 8px 14px 10px;
  border-bottom: 3px solid transparent;
  color: var(--hp-slate);
  font-weight: 600;
  text-decoration: none;
}

.hp-search__tabs a:hover
{
  color: var(--hp-navy);
}

.hp-search__tabs a.active
{
  border-bottom-color: var(--hp-blue);
  color: var(--hp-blue);
}

.hp-search__form
{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 16px 18px 20px;
}

.hp-field
{
  flex: 1 1 150px;
  min-width: 0;
  margin: 0;
}

.hp-field--wide
{
  flex-grow: 2;
}

.hp-field span
{
  display: block;
  margin-bottom: 4px;
  color: var(--hp-navy);
  font-size: 14px;
  font-weight: 600;
}

.hp-field input, .hp-field select
{
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid #b8c5d8;
  border-radius: 10px;
  background-color: #fff;
  color: var(--hp-ink);
  font: inherit;
}

.hp-field input::placeholder
{
  color: #6c7a90;
}

.hp-search__go
{
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: var(--hp-lime);
  color: var(--hp-navy);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s;
}

.hp-search__go:hover
{
  background: var(--hp-lime-dark);
}

.hp-search__go .icon
{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.hp-hero__foot
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin-top: 22px;
}

.hp-popular
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--hp-slate);
  font-size: 15px;
}

.hp-popular a
{
  padding: 4px 12px;
  border: 1px solid var(--hp-line);
  border-radius: 999px;
  background: #fff;
  color: var(--hp-blue);
  font-weight: 600;
  text-decoration: none;
}

.hp-popular a:hover
{
  border-color: var(--hp-blue);
}

/* includes/reviews-snippet.inc is shared with older pages, so it is restyled
   here and not edited. */
.hp .reviewssnippet
{
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  text-align: left;
}

.hp .reviewssnippetreviews
{
  margin: 0;
  padding: 0;
  font-size: 15px;
}

.hp .reviewssnippettrust
{
  height: 84px;
  overflow: hidden;
}

.hp .reviewssnippetreviews img
{
  margin-bottom: 4px !important;
}

/* Lesson window --------------------------------------------------------- */

.hp-lesson__bar
{
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px 14px 0 0;
  background: var(--hp-blue);
}

.hp-lesson__bar i
{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
}

.hp-lesson__bar span
{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.hp-lesson__bar span:before
{
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5c5c;
  box-shadow: 0 0 0 0 rgba(255, 92, 92, .6);
}

.hp-lesson__board
{
  position: relative;
  overflow: hidden;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 22px 50px rgba(31, 51, 80, .24);
}

.hp-lesson__board img
{
  display: block;
  width: 100%;
  height: auto;
}

.hp-lesson__pen
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Undrawn by default, so it only appears when the animation runs. */
.hp-lesson__pen path
{
  fill: none;
  stroke: #2563eb;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.hp-lesson__pen path + path
{
  stroke: #16a34a;
  stroke-width: 6;
}

/* Stats ----------------------------------------------------------------- */

.hp-stats
{
  background: var(--hp-surface);
}

.hp-stats__row
{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 32px;
  padding-top: 34px;
  padding-bottom: 36px;
}

.hp-stat
{
  padding-left: 18px;
  border-left: 4px solid var(--hp-lime);
}

.hp-stat strong
{
  display: block;
  color: #fff;
  font-size: clamp(40px, 4.4vw, 60px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.hp-stat span
{
  display: block;
  margin-top: 4px;
  color: #f3f7fc;
  font-size: 17px;
  line-height: 1.3;
}

/* Press ---------------------------------------------------------------- */

.hp-press
{
  border-bottom: 1px solid var(--hp-line);
}

.hp-press__row
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 22px;
  padding-bottom: 22px;
  color: var(--hp-slate);
  font-size: 15px;
  font-weight: 600;
}

.hp-press .icon
{
  height: 30px;
  fill: #76849a;
}

/* This symbol is a white square with the wordmark across its middle, so it is
   sized up and cropped to that band. */
.hp-press .icondailymail
{
  width: 150px;
  height: 150px;
  margin: -60px 0;
  clip-path: inset(38% 0);
}

/* How it works --------------------------------------------------------- */

.hp-steps
{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 36px;
  counter-reset: hp-step;
}

.hp-steps li
{
  position: relative;
  padding-top: 18px;
  border-top: 3px solid var(--hp-line);
  counter-increment: hp-step;
}

.hp-steps li:before
{
  content: counter(hp-step);
  position: absolute;
  top: 16px;
  right: 0;
  color: var(--hp-line);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
}

.hp-steps .icon
{
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
}

.hp-steps p
{
  margin-top: 6px;
  color: var(--hp-slate);
  font-size: 16px;
}

/* Subjects ------------------------------------------------------------- */

.hp-tiles
{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.hp-tile
{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 12px 20px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  background: #fff;
  color: var(--hp-navy);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.hp-tile:hover
{
  border-color: var(--hp-blue);
  box-shadow: 0 10px 24px rgba(31, 51, 80, .1);
  color: var(--hp-blue);
  transform: translateY(-2px);
}

.hp-tile .icon
{
  width: 52px;
  height: 52px;
}

/* Reviews -------------------------------------------------------------- */

.hp-reviews
{
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  transition: opacity .17s;
}

.hp-reviews::-webkit-scrollbar
{
  display: none;
}

.hp-reviews:focus-visible
{
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.hp-reviews__nav
{
  display: flex;
  gap: 10px;
}

.hp-reviews__nav button
{
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

.hp-reviews__nav button:hover:not(:disabled)
{
  border-color: #fff;
  background: #fff;
  color: var(--hp-navy);
}

.hp-reviews__nav button:disabled
{
  opacity: .35;
  cursor: default;
}

.hp-section--navy button:focus-visible
{
  outline-color: #fff;
}

.hp-dots
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 18px;
}

.hp-dots button
{
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hp-dots button:before
{
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
}

.hp-dots button[aria-current]:before
{
  background: var(--hp-lime);
}

.hp-review
{
  display: flex;
  flex: 0 0 calc((100% - 48px) / 3);
  flex-direction: column;
  margin: 0;
  scroll-snap-align: start;
  padding: 26px;
  border-radius: var(--hp-radius);
  background: #fff;
}

.hp-review .icon
{
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  fill: #7aa3e4;
}

.hp-review blockquote
{
  flex: 1;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--hp-ink);
  font-size: 17px;
  font-style: normal;
}

.hp-review figcaption
{
  margin-top: 18px;
  color: var(--hp-slate);
  font-size: 15px;
}

.hp-review strong
{
  color: var(--hp-navy);
}

.hp-review span:before
{
  content: " \00b7  ";
}

.hp-review small
{
  display: block;
  font-size: 14px;
}

/* Online lessons ------------------------------------------------------- */

.hp-online
{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
}

.hp-features
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}

.hp-features .icon
{
  width: 26px;
  height: 26px;
  margin-bottom: 8px;
  fill: var(--hp-blue);
}

.hp-features h3
{
  font-size: 18px;
}

.hp-features p
{
  margin-top: 4px;
  color: var(--hp-slate);
  font-size: 15.5px;
  line-height: 1.5;
}

.hp-online__shot
{
  display: block;
  width: 100%;
}

/* Locations ------------------------------------------------------------ */

.hp-cities
{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.hp-city
{
  padding: 14px 15px;
  border: 1px solid var(--hp-line);
  border-radius: 12px;
  background: #fff;
}

.hp-city h3
{
  font-size: 18px;
}

.hp-city h3 a
{
  color: var(--hp-navy);
  text-decoration: none;
}

.hp-city h3 a:hover
{
  color: var(--hp-blue);
  text-decoration: underline;
}

.hp-city p
{
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 4px;
  font-size: 14.5px;
}

.hp-city p a
{
  color: var(--hp-blue);
  text-decoration: none;
}

.hp-city p a:hover
{
  text-decoration: underline;
}

.hp-city--all
{
  border-color: var(--hp-blue);
}

/* Join ----------------------------------------------------------------- */

.hp-join
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.hp-join__card
{
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  border-radius: 20px;
  background: var(--hp-tint);
}

.hp-join__card h3
{
  font-size: 26px;
  font-weight: 800;
}

.hp-join__card ul
{
  flex: 1;
  margin-top: 16px;
}

.hp-join__card li
{
  position: relative;
  padding: 6px 0 6px 30px;
}

.hp-join__card li:before
{
  content: "";
  position: absolute;
  top: 13px;
  left: 3px;
  width: 15px;
  height: 8px;
  border-bottom: 3px solid var(--hp-blue);
  border-left: 3px solid var(--hp-blue);
  transform: rotate(-45deg);
}

.hp-join__actions
{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.hp-join__card--dark
{
  background: var(--hp-surface);
  color: #f3f7fc;
}

.hp-join__card--dark h3
{
  color: #fff;
}

.hp-join__card--dark li:before
{
  border-color: var(--hp-lime);
}

.hp-join__card--dark .hp-btn--line
{
  color: #fff;
}

.hp-join__card--dark .hp-btn--line:hover
{
  border-color: #fff;
  background: #fff;
  color: var(--hp-navy);
}

/* Blog ----------------------------------------------------------------- */

.hp-posts
{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.hp-post
{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  background: #fff;
  color: var(--hp-ink);
  text-decoration: none;
  transition: box-shadow .15s, transform .15s;
}

.hp-post:hover
{
  box-shadow: 0 10px 24px rgba(31, 51, 80, .1);
  transform: translateY(-2px);
}

.hp-post img
{
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.hp-post__tag
{
  margin: 14px 16px 0;
  color: var(--hp-blue);
  font-size: 13px;
  font-weight: 700;
}

.hp-post strong
{
  margin: 2px 16px 0;
  color: var(--hp-navy);
  font-size: 17px;
  line-height: 1.3;
}

.hp-post__text
{
  margin: 6px 16px 18px;
  color: var(--hp-slate);
  font-size: 15px;
  line-height: 1.45;
}

/* Motion ---------------------------------------------------------------
   Static styles come first, so the page looks finished with no animation at
   all. Then two levels:
   - Calm, for everyone: fades, text changes, the count-up and the pen. None of
     it moves things around the screen. Visitors with reduced motion get this,
     and so does anyone on Remote Desktop, where browsers report that setting.
   - Full: the media query further down adds the slides, pops, zoom and drift.
   js/home.js adds .hp-reveal, so nothing is hidden if that script fails. */

.hp-swap
{
  display: inline-block;
  color: var(--hp-blue);
  white-space: nowrap;
  transition: width .32s cubic-bezier(.3, .8, .3, 1);
}

#hp-word
{
  position: relative;
  display: inline-block;
}

/* Highlighter stroke. It sits behind the word inside the hero's stacking layer. */
#hp-word:after
{
  content: "";
  position: absolute;
  z-index: -1;
  right: -.06em;
  bottom: .07em;
  left: -.06em;
  height: .2em;
  border-radius: .1em;
  background: var(--hp-lime);
  opacity: .75;
  transform-origin: left;
}

.hp-hero__photo
{
  display: block;
  overflow: hidden;
  height: clamp(220px, 58vw, 420px);
}

.hp-hero__photo img
{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

.hp-points
{
  display: none;
}

.hp-steps li:after
{
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--hp-blue);
  transform-origin: left;
}

.hp-online__shot
{
  transform: perspective(1400px) rotateY(calc(var(--hp-tilt, 0) * -16deg)) rotateX(calc(var(--hp-tilt, 0) * 7deg)) scale(calc(1 - var(--hp-tilt, 0) * .06));
}

.hp-section--navy
{
  position: relative;
  overflow: hidden;
}

.hp-section--navy .container
{
  position: relative;
  z-index: 1;
}

.hp-more:after
{
  display: inline-block;
  margin-left: .3em;
  transition: transform .2s;
}

.hp-more:hover:after
{
  transform: translateX(5px);
}

.hp-search__go
{
  position: relative;
  overflow: hidden;
}

@media print
{
  .hp-reveal
  {
    opacity: 1 !important;
  }
}

@keyframes hp-fade
{
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hp-fade-out
{
  to { opacity: 0; }
}

@keyframes hp-pulse
{
  50% { opacity: .4; }
}

@keyframes hp-pen-once
{
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.hp-hero__photo img
{
  animation: hp-fade .9s ease-out both;
}

.hp-hero__copy h1
{
  animation: hp-fade .6s ease-out both;
}

.hp-hero__lead
{
  animation: hp-fade .6s .1s ease-out both;
}

.hp-points
{
  animation: hp-fade .6s .2s ease-out both;
}

.hp-search
{
  animation: hp-fade .6s .25s ease-out both;
}

.hp .reviewssnippet
{
  animation: hp-fade .6s .4s ease-out both;
}

#hp-word.is-out
{
  animation: hp-fade-out .22s ease-in both;
}

#hp-word.is-in
{
  animation: hp-fade .36s ease-out both;
}

.hp-lesson__bar span:before
{
  animation: hp-pulse 1.8s ease-in-out infinite;
}

/* Calm level: the tutor draws once and it stays on the board. */
.hp-lesson.is-drawing .hp-lesson__pen path
{
  animation: hp-pen-once 2.4s .3s ease-in-out forwards;
}

.hp-lesson.is-drawing .hp-lesson__pen path + path
{
  animation: hp-pen-once .7s 2.8s ease-in-out forwards;
}

.hp-reveal
{
  opacity: 0;
}

.hp-reveal.is-in
{
  animation-name: hp-fade;
  animation-delay: var(--hp-delay, 0ms);
  animation-duration: .7s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: no-preference)
{
  @keyframes hp-rise
  {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes hp-pop
  {
    0% { opacity: 0; transform: scale(.8); }
    65% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: none; }
  }

  @keyframes hp-left
  {
    from { opacity: 0; transform: translateX(-56px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes hp-right
  {
    from { opacity: 0; transform: translateX(56px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes hp-zoom
  {
    from { transform: scale(1.08); }
    to { transform: none; }
  }

  @keyframes hp-live
  {
    50% { box-shadow: 0 0 0 6px rgba(255, 92, 92, 0); opacity: .55; }
  }

  @keyframes hp-pen
  {
    0% { stroke-dashoffset: 1; opacity: 1; }
    30% { stroke-dashoffset: 0; opacity: 1; }
    88% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
  }

  @keyframes hp-tick
  {
    0%, 32% { stroke-dashoffset: 1; opacity: 1; }
    42% { stroke-dashoffset: 0; opacity: 1; }
    88% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
  }

  @keyframes hp-draw
  {
    from { transform: scaleX(0); }
    to { transform: none; }
  }

  @keyframes hp-word-out
  {
    to { opacity: 0; transform: translateY(-.34em); }
  }

  @keyframes hp-word-in
  {
    from { opacity: 0; transform: translateY(.42em); }
    to { opacity: 1; transform: none; }
  }

  @keyframes hp-shine
  {
    0% { transform: translateX(-140%) skewX(-20deg); }
    22%, 100% { transform: translateX(380%) skewX(-20deg); }
  }

  @keyframes hp-drift
  {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(90px, 50px) scale(1.2); }
  }

  @keyframes hp-wiggle
  {
    25% { transform: rotate(-9deg) scale(1.1); }
    60% { transform: rotate(7deg) scale(1.1); }
  }

  /* Opening of the hero. */
  .hp-hero__photo img
  {
    animation: hp-zoom 2.4s cubic-bezier(.2, .7, .2, 1) both;
  }

  .hp-points
  {
    animation: hp-rise .7s .15s cubic-bezier(.2, .7, .2, 1) both;
  }

  .hp-lesson__bar span:before
  {
    animation: hp-live 1.8s ease-in-out infinite;
  }

  /* The tutor draws on the board, over and over. */
  .hp-lesson.is-drawing .hp-lesson__pen path
  {
    animation: hp-pen 9s .4s ease-in-out infinite;
  }

  .hp-lesson.is-drawing .hp-lesson__pen path + path
  {
    animation: hp-tick 9s .4s ease-in-out infinite;
  }

  .hp-hero__copy h1
  {
    animation: hp-rise .7s cubic-bezier(.2, .7, .2, 1) both;
  }

  .hp-hero__lead
  {
    animation: hp-rise .7s .1s cubic-bezier(.2, .7, .2, 1) both;
  }

  .hp-search
  {
    animation: hp-rise .7s .2s cubic-bezier(.2, .7, .2, 1) both;
  }

  .hp .reviewssnippet
  {
    animation: hp-rise .7s .45s cubic-bezier(.2, .7, .2, 1) both;
  }

  #hp-word.is-out
  {
    animation: hp-word-out .24s ease-in both;
  }

  #hp-word.is-in
  {
    animation: hp-word-in .42s cubic-bezier(.2, .8, .3, 1.15) both;
  }

  #hp-word.is-in:after
  {
    animation: hp-draw .5s .12s cubic-bezier(.3, .8, .3, 1) both;
  }

  /* A sweep of light across the search button. */
  .hp-search__go:after
  {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 36%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
    animation: hp-shine 5.5s 1.8s ease-in-out infinite both;
    pointer-events: none;
  }

  /* Scroll reveals: each effect replaces the calm fade. */
  .hp-reveal--rise.is-in { animation-name: hp-rise; }
  .hp-reveal--pop.is-in { animation-name: hp-pop; animation-duration: .55s; }
  .hp-reveal--left.is-in { animation-name: hp-left; }
  .hp-reveal--right.is-in { animation-name: hp-right; }

  /* In How it works, the accent line draws and the picture pops after the card. */
  .hp-steps li.hp-reveal:after
  {
    transform: scaleX(0);
  }

  .hp-steps li.hp-reveal.is-in:after
  {
    animation: hp-draw .7s calc(var(--hp-delay, 0ms) + .15s) cubic-bezier(.3, .8, .3, 1) both;
  }

  .hp-steps li.hp-reveal.is-in .icon
  {
    animation: hp-pop .6s calc(var(--hp-delay, 0ms) + .12s) both;
  }

  .hp-tile:hover .icon
  {
    animation: hp-wiggle .5s ease-in-out;
  }

  /* Soft colour drifting behind the reviews. */
  .hp-section--navy:before, .hp-section--navy:after
  {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    pointer-events: none;
  }

  .hp-section--navy:before
  {
    top: -240px;
    left: -140px;
    background: radial-gradient(circle, rgba(122, 163, 228, .34), transparent 66%);
    animation: hp-drift 17s ease-in-out infinite alternate;
  }

  .hp-section--navy:after
  {
    right: -160px;
    bottom: -280px;
    background: radial-gradient(circle, rgba(169, 214, 34, .2), transparent 66%);
    animation: hp-drift 21s ease-in-out infinite alternate-reverse;
  }

  .hp-online__shot
  {
    will-change: transform;
  }
}

/* The homepage is the current page in the top menu. */
#menu .homebutton:not(.mobyes) > a:before
{
  transform: none;
}

/* Footer: the UK page has a fifth column. Below 1025px the shared two-column
   layout applies. The footer sits outside .hp, so these are not scoped to it. */
@media (min-width: 1025px)
{
  .footernav--five .footercol
  {
    width: 20%;
  }
}

@media (min-width: 1025px) and (max-width: 1199px)
{
  .footernav--five .footercol h2
  {
    font-size: 15px;
  }
}

/* Layout by width ------------------------------------------------------ */

@media (min-width: 992px)
{
  /* Fills the top right of the hero, flush with the menu and the screen edge. It
     starts just right of the longest headline, and the search box overlaps its
     lower edge. */
  .hp-hero__photo
  {
    position: absolute;
    top: 0;
    right: 0;
    left: calc(50% - 30px);
    height: var(--hp-band);
    border-bottom-left-radius: 36px;
  }

  .hp-hero__inner
  {
    padding-top: 0;
    padding-bottom: 26px;
  }

  /* Sets where the search box starts, overlapping the window. */
  .hp-hero__copy
  {
    min-height: calc(var(--hp-band) - 84px);
    padding-top: 52px;
    padding-bottom: 22px;
  }

  .hp-hero__copy h1, .hp-hero__lead
  {
    max-width: 520px;
  }

  .hp-search
  {
    margin-top: 0;
  }
}

@media (min-width: 768px)
{
  .hp-points
  {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 16px;
  }

  .hp-points li
  {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px 6px 8px;
    border: 1px solid var(--hp-line);
    border-radius: 999px;
    background: #fff;
    color: var(--hp-navy);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
  }

  .hp-points .icon
  {
    width: 18px;
    height: 18px;
    fill: #6d8f12;
  }
}

@media (min-width: 992px) and (max-width: 1199px)
{
  .hp-hero__copy h1, .hp-hero__lead
  {
    max-width: 350px;
  }

  .hp-hero__copy h1
  {
    text-wrap: balance;
  }

  .hp-points
  {
    max-width: calc(50vw - 60px);
  }
}

@media (max-width: 991px)
{
  .hp-steps, .hp-posts
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hp-tiles
  {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hp-cities
  {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hp-review
  {
    flex-basis: calc((100% - 24px) / 2);
  }

  .hp-online
  {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px)
{
  .hp-join
  {
    grid-template-columns: minmax(0, 1fr);
  }

  .hp-reviews
  {
    gap: 16px;
  }

  .hp-review
  {
    flex-basis: 86%;
  }

  .hp-cities
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hp-press .icon
  {
    height: 24px;
  }

  .hp-press .icondailymail
  {
    width: 120px;
    height: 120px;
    margin: -48px 0;
  }

  .hp-press__row
  {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
  }

  .hp-press__row span
  {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .hp-city--all
  {
    grid-column: 1 / -1;
  }

  .hp-city p
  {
    gap: 6px 14px;
  }

  .hp-city p a
  {
    padding: 3px 0;
  }
}

@media (max-width: 560px)
{
  .hp-steps, .hp-posts, .hp-features
  {
    grid-template-columns: minmax(0, 1fr);
  }

  .hp-tiles
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hp-field, .hp-search__go
  {
    flex-basis: 100%;
  }

  .hp-stats__row
  {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 28px;
    padding-bottom: 30px;
  }
}

@media (prefers-reduced-motion: reduce)
{
  .hp-tile, .hp-post, .hp-btn
  {
    transition: none;
  }

  .hp-tile:hover, .hp-post:hover
  {
    transform: none;
  }
}

/* GCSE exam practice (2026-11-09): a brand-blue band low on the page, linking to
   /learn/exams/gcse/. The card on the right is an illustration (aria-hidden). */
.hp-exam
{
  position: relative;
  background: var(--hp-surface);
  color: #fff;
}

.hp-exam__band
{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 56px;
  align-items: center;
}

.hp-exam__tag
{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.hp-exam__tag span
{
  padding: 3px 9px 2px;
  border-radius: 999px;
  background: var(--hp-lime);
  color: var(--hp-navy);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hp .hp-exam h2
{
  color: #fff;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.08;
}

.hp-exam__lead
{
  max-width: 34em;
  margin: 18px 0 0 !important;
  color: #e8f0fc;
  font-size: 18px;
  line-height: 1.6;
}

.hp-exam__points
{
  display: grid;
  gap: 10px;
  margin: 22px 0 30px !important;
}

.hp-exam__points li
{
  position: relative;
  padding-left: 32px;
  color: #fff;
  font-weight: 600;
}

.hp-exam__points li:before
{
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hp-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3350' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") 50% 50% / 14px 14px no-repeat;
}

.hp-exam__go
{
  padding: 14px 30px;
  font-size: 18px;
}

.hp .hp-exam a.hp-exam__go:focus-visible
{
  outline-color: #fff;
}

/* The marked answer */
.hp-exam__card
{
  position: relative;
  padding: 26px 28px 24px;
  border-radius: 20px;
  background: #fff;
  color: var(--hp-ink);
  box-shadow: 0 34px 70px rgba(12, 32, 72, .38);
  transform: rotate(1.4deg);
}

.hp-exam__meta
{
  color: var(--hp-slate);
  font-size: 14px;
  font-weight: 600;
}

.hp-exam__meta span
{
  margin-right: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--hp-tint);
  color: var(--hp-blue);
  font-weight: 800;
}

.hp-exam__q
{
  margin: 14px 0 0 !important;
  color: var(--hp-navy);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

.hp-exam__q em
{
  color: var(--hp-slate);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.hp-exam__ans
{
  margin: 14px 0 0 !important;
  padding: 12px 14px;
  border: 1px solid var(--hp-line);
  border-radius: 12px;
  color: var(--hp-navy);
  font-size: 18px;
  font-weight: 700;
}

.hp-exam__ans span
{
  display: block;
  margin-bottom: 2px;
  color: var(--hp-slate);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hp-exam__marks
{
  display: grid;
  gap: 8px;
  margin: 14px 0 0 !important;
}

.hp-exam__marks li
{
  position: relative;
  padding: 8px 12px 8px 38px;
  border-radius: 10px;
  background: #f1f8ea;
  color: #2f5214;
  font-size: 15px;
  line-height: 1.4;
}

.hp-exam__marks li:before
{
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a8a1c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") 50% 50% / 16px 16px no-repeat;
}

.hp-exam__marks b
{
  margin-right: 6px;
  color: #2f5214;
  font-weight: 800;
}

.hp-exam__score
{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0 !important;
  color: var(--hp-slate);
  font-size: 15px;
}

.hp-exam__score strong
{
  color: var(--hp-navy);
  font-size: 22px;
  font-weight: 800;
}

.hp-exam__bar
{
  flex: 1;
  height: 8px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--hp-tint);
  overflow: hidden;
}

.hp-exam__bar span
{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--hp-lime);
}

.hp-exam__helper
{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--hp-line);
  color: var(--hp-blue);
  font-size: 14px;
  font-weight: 700;
}

.hp-exam__dot
{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hp-lime);
  box-shadow: 0 0 0 4px rgba(169, 214, 34, .25);
}

@media (max-width: 991px)
{
  .hp-exam__band
  {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .hp-exam__card
  {
    max-width: 520px;
    transform: none;
  }
}

@media (max-width: 560px)
{
  .hp-exam__lead
  {
    font-size: 17px;
  }

  .hp-exam__go
  {
    display: block;
    text-align: center;
  }

  .hp-exam__card
  {
    padding: 22px 18px 20px;
  }

  .hp-exam__q
  {
    font-size: 17px;
  }
}