/* ==========================================================================
   OnlineUni homepage — editorial redesign.

   Design language: photographic hero under an ink scrim, oversized serif
   numerals, hairline rules and uppercase micro-labels. Restraint everywhere;
   the logo orange appears only where the eye should land.
   ========================================================================== */

/* ---- Shared editorial atoms -------------------------------------------- */

.ou-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tg-royal);
}
.ou-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--tg-royal);
}

.ou-sechead {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2rem 4rem;
  align-items: end;
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
}
.ou-sechead h2 {
  margin: 0.9rem 0 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2.1rem, 3.6vw, 3.15rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--tg-ink);
}
.ou-sechead h2 em { font-style: italic; color: var(--tg-royal); }
.ou-sechead > p {
  margin: 0 0 0.4rem;
  color: var(--tg-muted);
  font-weight: 600;
  line-height: 1.65;
  max-width: 46ch;
  justify-self: end;
}

.ou-section { padding: clamp(3.4rem, 6vw, 5.5rem) 0; }
.ou-section--off { background: var(--tg-canvas); }
.ou-section--ruled { border-top: 1px solid var(--tg-line); }

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

.ou-hero {
  position: relative;
  background: #0C0D10;
  color: #fff;
  /* Visible + raised so the search typeahead can spill past the hero's bottom
     edge and float over the next section instead of being cut off at it. The
     background image and scrim are inset:0, so nothing else can escape. */
  overflow: visible;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(600px, 82vh, 820px);
}
.ou-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}
/* Ink scrim, heavier on the left where the copy sits, letting the warm sky
   show through on the right. */
.ou-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 13, 16, 0.88) 0%, rgba(12, 13, 16, 0.62) 44%, rgba(12, 13, 16, 0.18) 100%),
    linear-gradient(0deg, rgba(12, 13, 16, 0.82) 0%, rgba(12, 13, 16, 0.10) 38%);
}
.ou-hero > .lobs-container {
  position: relative;
  z-index: 1;
  padding: clamp(3rem, 6vh, 4.5rem) 0;
}
.ou-hero .ou-eyebrow { color: #FF8A57; }
.ou-hero .ou-eyebrow::before { background: #FF8A57; }
/* Doubled with body.tg-body so this outweighs the premium sheet's `body.tg-body h1`,
   which otherwise pins the hero headline to the generic heading size. */
body.tg-body .ou-hero h1 {
  margin: 1.2rem 0 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(3.9rem, 8.6vw, 7rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 14ch;
  color: #fff;
}
.ou-hero h1 em { font-style: italic; color: #FFB699; }
.ou-hero .ou-lead {
  margin: 1.5rem 0 0;
  max-width: 56ch;
  font-size: clamp(1.14rem, 1.6vw, 1.32rem);
  font-weight: 600;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
}

.ou-hero-search {
  margin-top: 2rem;
  display: flex;
  max-width: 620px;
  background: #fff;
  border-radius: 8px;
  padding: 0.45rem;
  gap: 0.45rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.ou-hero-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0.85rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--tg-ink);
}
.ou-hero-search input::placeholder { color: var(--tg-faint); }
.ou-hero-search button {
  border: 0;
  cursor: pointer;
  background: var(--tg-royal);
  color: #fff;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 1.6rem;
  border-radius: 6px;
  transition: background 0.16s ease;
}
.ou-hero-search button:hover { background: var(--tg-royal-dark); }

.ou-hero-quick {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.86rem;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.65);
}
.ou-hero-quick a {
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.ou-hero-quick a:hover { background: rgba(255, 72, 0, 0.28); border-color: rgba(255, 138, 87, 0.7); }

/* The moving reassurance ticker under the hero, LondonOBS-style. */
.ou-ticker {
  overflow: hidden;
  background: #0C0D10;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ou-ticker__track {
  display: flex;
  width: max-content;
  animation: ouTicker 36s linear infinite;
}
.ou-ticker span {
  white-space: nowrap;
  padding: 0.95rem 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.ou-ticker i {
  font-style: normal;
  color: var(--tg-royal);
  padding: 0 1.1rem;
}
@keyframes ouTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ou-ticker__track { animation: none; }
}

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

.ou-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.ou-stat { padding-right: 1.5rem; }
.ou-stat + .ou-stat {
  border-left: 1px solid var(--tg-line-strong);
  padding-left: 2.2rem;
}
.ou-stat strong {
  display: block;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2.7rem, 4.4vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tg-ink);
  white-space: nowrap;
}
/* The + and ★ sit inline right after the figure, scaled to read as part of it
   rather than wrapping onto their own line. */
.ou-stat strong .accent {
  color: var(--tg-royal);
  font-size: 0.78em;
  margin-left: 0.04em;
}
.ou-stat > span {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tg-muted);
}

/* ---- Pathway grid ---------------------------------------------------------- */

.ou-pathgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(1.6rem, 3.4vw, 3.2rem);
  row-gap: clamp(2rem, 4vw, 3rem);
}
.ou-path {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border-top: 2px solid var(--tg-ink);
  padding-top: 1.35rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease;
}
.ou-path:hover { border-top-color: var(--tg-royal); }
.ou-path__tag {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tg-royal);
}
.ou-path h3 {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.35rem, 1.8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tg-ink);
}
.ou-path p {
  margin: 0;
  color: var(--tg-muted);
  font-weight: 600;
  line-height: 1.6;
  flex: 1;
}
.ou-path__go {
  margin-top: 0.9rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tg-ink);
}
.ou-path__go .arr { display: inline-block; transition: transform 0.18s ease; color: var(--tg-royal); }
.ou-path:hover .ou-path__go { color: var(--tg-royal); }
.ou-path:hover .ou-path__go .arr { transform: translateX(4px); }

/* ---- Access grid: what every learner gets --------------------------------- */

.ou-access { margin-top: clamp(3rem, 5.5vw, 4.5rem); }
.ou-access-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1rem 4rem;
  align-items: end;
  border-top: 2px solid var(--tg-ink);
  padding-top: 1.6rem;
  margin-bottom: 1.9rem;
}
.ou-access-head h3 {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tg-ink);
}
.ou-access-head p {
  margin: 0;
  color: var(--tg-muted);
  font-weight: 600;
  line-height: 1.6;
  justify-self: end;
  max-width: 44ch;
}
.ou-access-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 2.6vw, 2.4rem);
}
.ou-access-grid li {
  border-top: 1px solid var(--tg-line-strong);
  padding-top: 1.1rem;
}
.ou-access-grid li.is-one { border-top-color: var(--tg-royal); }
.ou-access-tag {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tg-muted);
}
.ou-access-tag--one { color: var(--tg-royal); }
.ou-access-grid h4 {
  margin: 0.55rem 0 0.4rem;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tg-ink);
}
.ou-access-grid p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--tg-muted);
  font-weight: 600;
  line-height: 1.6;
}

/* ---- Peers banner ----------------------------------------------------------- */

.ou-peers {
  position: relative;
  background: #0C0D10;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 56vh, 560px);
}
.ou-peers__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.ou-peers::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 13, 16, 0.9) 0%, rgba(12, 13, 16, 0.55) 52%, rgba(12, 13, 16, 0.15) 100%);
}
.ou-peers .lobs-container { position: relative; z-index: 1; padding: clamp(3rem, 6vh, 4.5rem) 0; }
.ou-peers-box { max-width: 560px; }
.ou-peers .ou-eyebrow { color: #FF8A57; }
.ou-peers .ou-eyebrow::before { background: #FF8A57; }
.ou-peers h2 {
  margin: 1rem 0 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2.1rem, 3.8vw, 3.1rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #fff;
}
.ou-peers h2 em { font-style: italic; color: #FFB699; }
.ou-peers p {
  margin: 1.1rem 0 1.6rem;
  color: rgba(255, 255, 255, 0.84);
  font-weight: 600;
  line-height: 1.7;
}

/* ---- "The standard is the difference" ------------------------------------- */

.ou-standard { border-top: 1px solid var(--tg-line); }
.ou-standard-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 1.5rem 3rem;
  align-items: start;
  padding: clamp(1.5rem, 2.6vw, 2.1rem) 0;
  border-bottom: 1px solid var(--tg-line);
}
.ou-standard-row .n {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tg-royal);
  padding-top: 0.3rem;
}
.ou-standard-row h3 {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tg-ink);
}
.ou-standard-row p {
  margin: 0;
  color: var(--tg-muted);
  font-weight: 600;
  line-height: 1.7;
}

/* ---- Three steps ------------------------------------------------------------ */

.ou-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.8rem, 3.6vw, 3.4rem);
}
.ou-step { border-top: 1px solid var(--tg-line-strong); padding-top: 1.4rem; }
.ou-step .n {
  display: block;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2.4rem, 3.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--tg-royal);
}
.ou-step h3 {
  margin: 1rem 0 0.45rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tg-ink);
}
.ou-step p { margin: 0; color: var(--tg-muted); font-weight: 600; line-height: 1.65; }

/* ---- Membership band ---------------------------------------------------------- */

.ou-member {
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(255, 72, 0, 0.32), transparent 62%),
    linear-gradient(150deg, #16181D 0%, #0C0D10 100%);
  color: #fff;
}
.ou-member-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 2.5rem 5rem;
  align-items: center;
  padding: clamp(3.2rem, 6vw, 4.8rem) 0;
}
.ou-member .ou-eyebrow { color: #FF8A57; }
.ou-member .ou-eyebrow::before { background: #FF8A57; }
.ou-member h2 {
  margin: 1rem 0 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: #fff;
}
.ou-member h2 em { font-style: italic; color: #FFB699; }
.ou-member-inner > div > p {
  margin: 1.1rem 0 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  line-height: 1.7;
}
.ou-member-side {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  padding-left: clamp(1.6rem, 3vw, 2.6rem);
}
.ou-member-price {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
}
.ou-member-price small {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 0.5rem;
}
.ou-member-side ul {
  margin: 1.3rem 0 1.6rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}
.ou-member-side li {
  font-weight: 650;
  color: rgba(255, 255, 255, 0.85);
  padding-left: 1.35rem;
  position: relative;
}
.ou-member-side li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: #FF8A57;
}
.ou-member-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--tg-royal);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.95rem 1.5rem;
  border-radius: 6px;
  transition: background 0.16s ease, transform 0.16s ease;
}
.ou-member-cta:hover { background: var(--tg-electric); transform: translateY(-1px); color: #fff; }

/* ---- Responsive ---------------------------------------------------------------- */

@media (max-width: 1080px) {
  .ou-access-grid { grid-template-columns: repeat(2, 1fr); }
  .ou-access-head { grid-template-columns: 1fr; }
  .ou-access-head p { justify-self: start; }
  .ou-stats { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; }
  .ou-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ou-pathgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .ou-sechead { grid-template-columns: 1fr; align-items: start; }
  .ou-sechead > p { justify-self: start; }
  .ou-hero { min-height: 78vh; }
  body.tg-body .ou-hero h1 { font-size: clamp(2.8rem, 12.5vw, 3.7rem); }
  .ou-hero-search { flex-direction: column; padding: 0.55rem; }
  .ou-hero-search button { padding: 0.9rem 1rem; }
  .ou-pathgrid { grid-template-columns: 1fr; }
  .ou-standard-row { grid-template-columns: 48px minmax(0, 1fr); }
  .ou-standard-row p { grid-column: 2; }
  .ou-steps { grid-template-columns: 1fr; }
  .ou-stats { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .ou-stat strong { font-size: 2.2rem; }
  .ou-member-inner { grid-template-columns: 1fr; }
  .ou-member-side { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1.8rem; }
  .ou-access-grid { grid-template-columns: 1fr; }
  .ou-peers { min-height: 70vh; }
}