/* =========================================================
   Responsive — header (topbar + mega menu) & banner (hero)
   Breakpoints: 1200 / 1024 / 768 / 560 / 400 / 320
   ========================================================= */

/* ---------- 1200px ---------- */
@media (max-width:1200px) {
  .rhr-topbar {
    padding: 20px 32px
  }

  .rhr-mega-nav {
    padding: 96px 40px 40px
  }

  .rhr-mega-title {
    font-size: 32px
  }

  .rhr-mega-media-mark {
    width: 240px;
    right: -60px
  }

  .rhr-hero-mark {
    width: 340px;
    right: 32px
  }
}

/* ---------- 1024px : tablet ---------- */
@media (max-width:1024px) {
  .rhr-topbar {
    padding: 18px 26px
  }

  .banneritop-heading {
    margin-top: 40px;
  }

  .rhr-topbar-logo {
    height: 34px
  }

  .rhr-topbar-right {
    gap: 10px
  }

  /* Stack the menu: nav on top, media panel below */
  .rhr-mega-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 560px
  }

  .rhr-mega {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto
  }

  .rhr-mega-nav {
    padding: 92px 32px 32px;
    justify-content: flex-start
  }

  .rhr-mega-media {
    border-left: 0;
    border-top: 1px solid var(--rhr-l12);
    min-height: 210px
  }

  .rhr-mega-media-fade {
    background: linear-gradient(0deg, color-mix(in srgb, var(--rhr-ink) 90%, transparent), transparent 70%)
  }

  .rhr-mega-media-mark {
    width: 200px;
    right: -40px;
    top: auto;
    bottom: -30px
  }

  .rhr-mega-media-caption {
    left: 32px;
    bottom: 28px
  }

  .rhr-hero-sub {
    font-size: 16px;
    max-width: 480px
  }
}

/* ---------- 768px : large phone / small tablet ---------- */
@media (max-width:768px) {
  .rhr-topbar {
    padding: 16px 20px
  }

  .banneritop-heading {
    margin-top: 50px;
  }

  .rhr-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-right: 27px;
    font: 700 12px/1 'Saira Condensed', sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
  }

  .rhr-marquee {
    padding: 15px 0;
  }

  .rhr-topbar-logo {
    height: 30px
  }

  .rhr-topbar-right {
    gap: 8px
  }

  .rhr-replay-btn {
    padding: 10px 13px;
    gap: 7px;
    font-size: 9.5px;
    letter-spacing: .16em
  }

  .rhr-replay-btn i {
    font-size: 12px
  }

  .rhr-menu-btn {
    padding: 11px 17px;
    gap: 9px;
    font-size: 10px;
    letter-spacing: .2em
  }

  .rhr-icon-btn {
    width: 34px;
    height: 34px
  }

  .rhr-icon-btn i {
    font-size: 15px
  }

  .rhr-mega-nav {
    padding: 84px 24px 28px
  }

  .rhr-mega-kicker {
    margin-bottom: 24px
  }

  .rhr-mega-title {
    font-size: 28px
  }

  .rhr-mega-link {
    gap: 14px
  }

  .rhr-mega-num {
    width: 20px;
    font-size: 10px
  }

  .rhr-mega-sub {
    margin-left: 34px;
    gap: 8px 18px
  }

  .rhr-mega-media {
    min-height: 170px
  }

  /* Hero: 100vh is unreliable on mobile browser chrome; min-height:720px
     forces a taller-than-screen banner. Use dvh with a vh fallback. */
  .rhr-hero {
    height: 100vh;
    height: 55dvh;
    min-height: 560px;
    margin-top: -84px;
  }

  .rhr-hero-content {
    padding: 0 24px
  }

  .rhr-hero-eyebrow {
    font-size: 11px;
    letter-spacing: .34em;
    margin-bottom: 22px
  }

  .rhr-hero-title {
    font-size: clamp(52px, 13vw, 86px)
  }

  .rhr-hero-sub {
    margin-top: 13px;
    font-size: 15px;
    max-width: 420px;
  }

  .rhr-hero-cta {
    margin-top: 28px
  }

  .rhr-hero-mark {
    display: none
  }

  .rhr-btn-outline-red {
    padding: 12px 26px;
    font-size: 10px;
    letter-spacing: .2em;
  }

  .rhr-hero-scroll {
    bottom: 24px
  }

  .rhr-intro-stage {
    height: 100vh;
    height: 100dvh;
    min-height: 560px
  }

  .rhr-intro-logo-ghost,
  .rhr-intro-logo-fill {
    width: 140px
  }

  .rhr-intro-bar {
    width: 170px;
    margin-top: 28px
  }

  .rhr-mega-title {
    font-size: 18px
  }
}

/* ---------- 560px : phone ---------- */
@media (max-width:560px) {

  .rhr-topbar {
    padding: 14px 16px
  }

  .rhr-topbar-logo {
    height: 26px
  }

  .rhr-topbar-right {
    gap: 7px
  }

  .rhr-topbar-social {
    gap: 6px
  }

  .rhr-icon-btn {
    width: 31px;
    height: 31px
  }

  .rhr-icon-btn i {
    font-size: 14px
  }

  /* Intro collapses to its icon — same 31px circle as the social buttons */
  .rhr-replay-btn {
    width: 31px;
    height: 31px;
    padding: 0;
    gap: 0;
    justify-content: center;
    font-size: 0;
    letter-spacing: 0
  }

  .rhr-replay-btn i {
    font-size: 14px
  }

  .rhr-menu-btn {
    padding: 10px 15px;
    letter-spacing: .16em
  }

  .rhr-mega-nav {
    padding: 76px 20px 24px
  }

  .rhr-mega-title {
    font-size: 18px;
  }

  .rhr-mega-item {
    padding: 6px 0
  }

  .rhr-mega-media {
    min-height: 140px
  }

  .rhr-mega-media-caption {
    left: 20px;
    bottom: 20px
  }

  .rhr-mega-media-phone {
    font-size: 13px
  }

  .rhr-hero {
    min-height: 520px;
    margin-top: -72px
  }

  .rhr-hero-content {
    padding: 0 18px
  }

  .rhr-hero-title {
    font-size: clamp(44px, 14.5vw, 47px);
  }

  .rhr-hero-sub {
    font-size: 14.5px;
    line-height: 1.6
  }
}

/* ---------- 400px ---------- */
@media (max-width:400px) {
  .rhr-topbar {
    padding: 12px 14px
  }

  .rhr-topbar-logo {
    height: 23px
  }

  .rhr-topbar-right {
    gap: 6px
  }

  .rhr-topbar-social {
    gap: 5px
  }

  .rhr-icon-btn {
    width: 29px;
    height: 29px
  }

  .rhr-icon-btn i {
    font-size: 13px
  }

  .rhr-replay-btn {
    width: 29px;
    height: 29px
  }

  .rhr-replay-btn i {
    font-size: 13px
  }

  .rhr-menu-btn {
    padding: 9px 13px;
    gap: 8px;
    font-size: 9.5px
  }

  .rhr-menu-burger {
    width: 14px
  }

  .rhr-menu-burger span {
    width: 14px
  }

  .rhr-mega-nav {
    padding: 70px 16px 20px
  }

  .rhr-mega-title {
    font-size: 18px
  }

  .rhr-mega-sub {
    margin-left: 0;
    gap: 7px 14px
  }

  .rhr-mega-media {
    min-height: 120px
  }

  .rhr-hero-eyebrow {
    font-size: 10px;
    letter-spacing: .26em;
    margin-bottom: 18px
  }

  .rhr-hero-title {
    font-size: clamp(38px, 15vw, 56px)
  }

  .rhr-hero-title-outline {
    -webkit-text-stroke-width: 1px
  }

  .rhr-hero-sub {
    margin-top: 22px;
    font-size: 14px
  }

  .rhr-btn-outline-red {
    padding: 14px 22px;
    font-size: 11px;
    letter-spacing: .16em;
    gap: 9px
  }
}

/* ---------- 320px : floor ---------- */
@media (max-width:340px) {
  .rhr-topbar {
    padding: 11px 12px
  }

  /* Logo yields first and is capped, so the controls never get pushed off */
  .rhr-topbar-logo {
    height: 20px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 98px;
    object-fit: contain;
    object-position: left center
  }

  .rhr-topbar-right {
    gap: 5px;
    flex: none
  }

  .rhr-topbar-social {
    gap: 4px
  }

  .rhr-icon-btn {
    width: 27px;
    height: 27px
  }

  .rhr-icon-btn i {
    font-size: 12px
  }

  .rhr-replay-btn {
    width: 27px;
    height: 27px
  }

  .rhr-replay-btn i {
    font-size: 12px
  }

  /* Burger bars give up their width so all three icons still fit */
  .rhr-menu-burger {
    display: none
  }

  .rhr-menu-btn {
    padding: 9px 11px;
    gap: 0;
    font-size: 9px;
    letter-spacing: .12em
  }

  .rhr-mega-nav {
    padding: 64px 13px 18px
  }

  .rhr-mega-kicker {
    font-size: 10px;
    letter-spacing: .24em;
    margin-bottom: 18px
  }

  .rhr-mega-title {
    font-size: 20px
  }

  .rhr-mega-num {
    width: 17px
  }

  .rhr-mega-media {
    min-height: 110px
  }

  .rhr-mega-media-caption {
    left: 14px;
    bottom: 14px
  }

  .rhr-hero {
    min-height: 480px;
    margin-top: -62px
  }

  .rhr-hero-content {
    padding: 0 14px
  }

  .rhr-hero-title {
    font-size: 38px
  }

  .rhr-hero-sub {
    font-size: 13px;
    margin-top: 18px
  }

  .rhr-hero-cta {
    margin-top: 22px
  }

  .rhr-btn-outline-red {
    padding: 13px 18px;
    font-size: 10px;
    gap: 8px
  }

  .rhr-hero-scroll {
    bottom: 18px
  }

  .rhr-intro-logo-ghost,
  .rhr-intro-logo-fill {
    width: 112px
  }

  .rhr-intro-bar {
    width: 140px
  }

  .rhr-intro-label {
    gap: 10px;
    font-size: 9px;
    letter-spacing: .18em
  }
}

/* Landscape phones: a full-height banner leaves no room to read it */
@media (max-height:520px) and (orientation:landscape) {
  .rhr-hero {
    min-height: 440px
  }

  .rhr-hero-title {
    font-size: clamp(36px, 7vw, 58px)
  }

  .rhr-hero-sub {
    margin-top: 16px
  }

  .rhr-hero-cta {
    margin-top: 18px
  }

  .rhr-hero-scroll {
    display: none
  }

  .rhr-intro-stage {
    min-height: 0;
    height: 100vh;
    height: 100dvh
  }

  .rhr-mega-shell {
    min-height: 0;
    height: 100vh;
    height: 100dvh
  }

  .rhr-mega-nav {
    padding-top: 64px
  }
}

/* =========================================================
   Responsive — reel1 (horizontal scroll chapters)
   ========================================================= */

/* ---------- 1200px ---------- */
@media (max-width:1200px) {
  .rhr-reel1-panel {
    gap: 40px;
    padding: 0 40px
  }

  .rhr-reel1-label {
    left: 40px;
    top: 64px
  }

  .rhr-reel1-mark {
    right: 32px;
    top: 60px;
    width: 72px
  }

  .rhr-reel1-progress {
    left: 40px;
    right: 40px
  }

  .rhr-reel1-panel-mark {
    width: 380px
  }
}

/* ---------- 1024px : tablet ---------- */
@media (max-width:1024px) {
  .rhr-reel1 {
    height: 2800px
  }

  .rhr-reel1-panel {
    gap: 32px;
    padding: 0 32px
  }

  .rhr-reel1-label {
    left: 32px;
    top: 56px
  }

  .rhr-reel1-mark {
    right: 24px;
    top: 52px;
    width: 60px
  }

  .rhr-reel1-progress {
    left: 32px;
    right: 32px;
    bottom: 28px
  }

  .rhr-reel1-media--h1,
  .rhr-reel1-media--h2,
  .rhr-reel1-media--h3 {
    height: min(46vh, 400px)
  }

  .rhr-reel1-text {
    font-size: 15px;
    line-height: 1.7
  }
}

/* ---------- 768px : stack media over copy ---------- */
@media (max-width:768px) {
  .rhr-reel1 {
    height: 2400px
  }

  .rhr-reel1-sticky {
    min-height: 0;
    height: 100vh;
    height: 73dvh;
  }

  /* One column: image on top, copy below — order overrides no longer apply */
  .rhr-reel1-panel {
    height: 100vh;
    height: 74dvh;

    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    gap: 24px;
    padding: 92px 24px 68px
  }

  .rhr-reel1-media--o1,
  .rhr-reel1-media--o2 {
    order: 1
  }

  .rhr-reel1-copy--o1,
  .rhr-reel1-copy--o2 {
    order: 2
  }

  .rhr-reel1-media--h1,
  .rhr-reel1-media--h2,
  .rhr-reel1-media--h3 {
    height: min(32vh, 280px)
  }

  /* Parallax nudge is too wide once the frame is narrow */
  .rhr-reel1-img--a {
    transform: scale(1.12) translateX(calc(var(--p, 0) * 80px))
  }

  .rhr-reel1-img--b {
    transform: scale(1.12) translateX(calc(var(--p, 0) * -70px))
  }

  .rhr-reel1-img--c {
    transform: scale(1.12) translateX(calc(var(--p, 0) * 60px))
  }

  .rhr-reel1-copy,
  .rhr-reel1-copy--center {
    max-width: none
  }

  /* Right-aligned copy reads badly in a single narrow column */
  .rhr-reel1-copy--right {
    text-align: left
  }

  .rhr-reel1-label {
    left: 24px;
    top: 40px
  }

  .rhr-reel1-mark {
    right: 20px;
    top: 34px;
    width: 48px
  }

  .rhr-reel1-progress {
    left: 24px;
    right: 24px;
    bottom: 24px
  }

  .rhr-reel1-panel-mark {
    width: 300px
  }

  .rhr-reel1-num {
    font-size: clamp(48px, 12vw, 72px)
  }

  .rhr-reel1-title {
    font-size: clamp(32px, 8vw, 46px)
  }

  .rhr-reel1-mask {
    height: calc(44px * min(1, var(--p, 0) * 9, (1 - var(--p, 0)) * 9))
  }
}

/* ---------- 575px : only bites in the 561–575px window; the 560px
   block below resets padding with a shorthand ---------- */
@media (max-width:575px) {
  .rhr-reel1-panel {
    padding-top: 184px;
    padding-bottom: 48px
  }
}

/* ---------- 560px ---------- */
@media (max-width:560px) {
  .rhr-reel1 {
    height: 2100px
  }

  .rhr-reel1-panel {
    gap: 20px;
    padding: 62px 20px 60px;
  }

  .rhr-reel1-media--h1,
  .rhr-reel1-media--h2,
  .rhr-reel1-media--h3 {
    height: min(28vh, 220px)
  }

  .rhr-reel1-label {
    left: 20px;
    top: 34px;
    gap: 12px
  }

  .rhr-reel1-label-title {
    font-size: 10px;
    letter-spacing: .26em
  }

  .rhr-reel1-label-count {
    font-size: 10px
  }

  .rhr-reel1-mark {
    right: 16px;
    top: 28px;
    width: 40px
  }

  .rhr-reel1-progress {
    left: 20px;
    right: 20px;
    bottom: 20px
  }

  .rhr-reel1-panel-mark {
    width: 240px
  }

  .rhr-reel1-num {
    font-size: 46px;
    margin-bottom: 4px
  }

  .rhr-reel1-title {
    font-size: 30px
  }

  .rhr-reel1-text {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.65
  }
}

/* ---------- 400px ---------- */
@media (max-width:400px) {
  .rhr-reel1 {
    height: 1900px
  }

  .rhr-reel1-panel {
    gap: 16px;
    padding: 2px 16px 56px;
  }

  .rhr-reel1-media--h1,
  .rhr-reel1-media--h2,
  .rhr-reel1-media--h3 {
    height: min(24vh, 180px)
  }

  .rhr-reel1-label {
    left: 16px;
    top: 28px
  }

  .rhr-reel1-mark {
    right: 12px;
    top: 22px;
    width: 34px
  }

  .rhr-reel1-progress {
    left: 16px;
    right: 16px;
    bottom: 18px
  }

  .rhr-reel1-panel-mark {
    width: 200px
  }

  .rhr-reel1-num {
    font-size: 40px
  }

  .rhr-reel1-title {
    font-size: 26px
  }

  .rhr-reel1-text {
    font-size: 13.5px
  }
}

/* ---------- 340px : smallest supported (320px viewport) ---------- */
@media (max-width:340px) {
  .rhr-reel1 {
    height: 1800px
  }

  .rhr-reel1-panel {
    gap: 14px;
    padding: 70px 12px 52px
  }

  .rhr-reel1-media--h1,
  .rhr-reel1-media--h2,
  .rhr-reel1-media--h3 {
    height: min(22vh, 150px)
  }

  .rhr-reel1-label {
    left: 12px;
    top: 24px;
    gap: 8px
  }

  .rhr-reel1-label-title {
    font-size: 9px;
    letter-spacing: .2em
  }

  .rhr-reel1-label-count {
    font-size: 9px
  }

  .rhr-reel1-mark {
    right: 10px;
    top: 18px;
    width: 28px
  }

  .rhr-reel1-progress {
    left: 12px;
    right: 12px;
    bottom: 14px
  }

  .rhr-reel1-panel-mark {
    width: 170px
  }

  .rhr-reel1-num {
    font-size: 34px
  }

  .rhr-reel1-title {
    font-size: 23px
  }

  .rhr-reel1-text {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.6
  }
}

/* Landscape phones: no vertical room for stacked media + copy */
@media (max-height:520px) and (orientation:landscape) {

  .rhr-reel1-sticky,
  .rhr-reel1-panel {
    min-height: 0
  }

  .rhr-reel1-media--h1,
  .rhr-reel1-media--h2,
  .rhr-reel1-media--h3 {
    height: min(50vh, 220px)
  }

  .rhr-reel1-panel {
    padding-top: 169px;
    padding-bottom: 48px;
  }
}


/* =========================================================
   Responsive — record (stat grid)
   ========================================================= */

/* ---------- 1200px ---------- */
@media (max-width:1200px) {
  .rhr-record {
    padding: 104px 40px
  }

  .rhr-record-mark {
    width: 520px;
    right: -70px
  }

  .rhr-record-title {
    font-size: 60px
  }

  .rhr-record-grid {
    gap: 32px;
    margin-top: 60px
  }

  .rhr-record-stat-num {
    font-size: 62px
  }
}

/* ---------- 1024px : 2 x 2 grid ---------- */
@media (max-width:1024px) {
  .rhr-record {
    padding: 88px 32px
  }

  .rhr-record-mark {
    width: 420px;
    right: -60px;
    top: -30px
  }

  .rhr-record-title {
    font-size: 50px
  }

  .rhr-record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
    margin-top: 52px
  }

  .rhr-record-stat-num {
    font-size: 58px
  }
}

/* ---------- 768px ---------- */
@media (max-width:768px) {
  .rhr-record {
    padding: 72px 24px
  }

  .rhr-record-mark {
    width: 340px;
    right: -80px;
    top: -20px;
    opacity: .05
  }

  .rhr-record-kicker {
    margin-bottom: 18px
  }

  .rhr-record-title {
    font-size: clamp(32px, 7.5vw, 42px);
    line-height: 1.06
  }

  .rhr-record-grid {
    gap: 32px 24px;
    margin-top: 44px
  }

  .rhr-record-stat {
    padding-top: 18px
  }

  .rhr-record-stat-num {
    font-size: 37px;
  }

  .rhr-record-stat-label {
    margin-top: 10px;
    font-size: 13px
  }
}

/* ---------- 560px : single column ---------- */
@media (max-width:560px) {
  .rhr-record {
    padding: 60px 20px
  }

  .rhr-record-mark {
    width: 280px;
    right: -70px
  }

  .rhr-record-kicker {
    font-size: 10px;
    letter-spacing: .26em;
    margin-bottom: 14px
  }

  .rhr-record-title {
    font-size: 32px
  }

  /* Two narrow columns would break the big numerals onto two lines */
  .rhr-record-grid {
    /* grid-template-columns: minmax(0, 1fr); */
    grid-template-columns: auto auto;
    gap: 26px;
    margin-top: 36px
  }

  .rhr-record-stat-num {
    font-size: 44px
  }

  .rhr-record-stat-bar {
    width: 36px
  }
}

/* ---------- 400px ---------- */
@media (max-width:400px) {
  .rhr-record {
    padding: 52px 16px
  }

  .rhr-record-mark {
    width: 230px;
    right: -60px;
    top: -14px
  }

  .rhr-record-title {
    font-size: 28px
  }

  .rhr-record-grid {
    gap: 22px;
    margin-top: 30px
  }

  .rhr-record-stat {
    padding-top: 16px
  }

  .rhr-record-stat-num {
    font-size: 40px
  }

  .rhr-record-stat-label {
    font-size: 12.5px
  }
}

/* ---------- 340px : smallest supported (320px viewport) ---------- */
@media (max-width:340px) {
  .rhr-record {
    padding: 46px 12px
  }

  .rhr-record-mark {
    width: 190px;
    right: -50px
  }

  .rhr-record-kicker {
    font-size: 9px;
    letter-spacing: .2em;
    margin-bottom: 12px
  }

  .rhr-record-title {
    font-size: 25px
  }

  .rhr-record-grid {
    gap: 20px;
    margin-top: 26px
  }

  .rhr-record-stat-num {
    font-size: 36px
  }

  .rhr-record-stat-bar {
    width: 30px
  }

  .rhr-record-stat-label {
    margin-top: 8px;
    font-size: 12px
  }
}


/* =========================================================
   Responsive — honours (sticky sequence)
   ========================================================= */

/* ---------- 1200px ---------- */
@media (max-width:1200px) {
  .rhr-honours-panel {
    padding: 0 40px
  }

  .rhr-honours-stage {
    height: 330px
  }

  .rhr-honours-index {
    right: 32px
  }
}

/* ---------- 1024px : tablet ---------- */
@media (max-width:1024px) {
  .rhr-honours {
    height: 2400px
  }

  .rhr-honours-sticky {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr)
  }

  .rhr-honours-panel {
    padding: 0 28px 0 32px
  }

  .rhr-honours-head {
    margin-bottom: 26px
  }

  .rhr-honours-stage {
    height: 300px
  }

  .rhr-honours-year {
    font-size: clamp(68px, 11vw, 104px)
  }

  .rhr-honours-title {
    font-size: clamp(26px, 4.4vw, 38px)
  }

  .rhr-honours-who {
    font-size: 14px
  }

  .rhr-honours-track {
    margin-top: 34px
  }

  .rhr-honours-index {
    right: 20px
  }

  .rhr-honours-index-item {
    font-size: 10px;
    letter-spacing: .16em;
    padding: 7px 0 7px 10px
  }
}

/* ---------- 768px : photo behind the copy, single column ---------- */
@media (max-width:768px) {
  .rhr-honours {
    height: 2200px
  }

  .rhr-honours-sticky {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    height: 100vh;
    height: 100dvh
  }

  /* Both children share row 1 — the photo becomes a full-bleed backdrop */
  .rhr-honours-panel,
  .rhr-honours-media {
    grid-area: 1 / 1
  }

  .rhr-honours-media {
    z-index: 1
  }

  .rhr-honours-panel {
    z-index: 3;
    padding: 0 24px
  }

  .rhr-honours-photo {
    filter: grayscale(.4) contrast(1.1) brightness(.42)
  }

  /* Darken from the bottom instead of the left now that text sits on top */
  .rhr-honours-media-fade {
    background: linear-gradient(0deg, var(--rhr-abyss), color-mix(in srgb, var(--rhr-abyss) 70%, transparent) 46%, color-mix(in srgb, var(--rhr-abyss) 62%, transparent))
  }

  .rhr-honours-head {
    margin-bottom: 22px
  }

  .rhr-honours-stage {
    height: 290px
  }

  .rhr-honours-year {
    font-size: clamp(64px, 17vw, 92px);
    -webkit-text-stroke-width: 1.2px
  }

  .rhr-honours-title {
    font-size: clamp(24px, 6.4vw, 34px)
  }

  .rhr-honours-who {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.65
  }

  .rhr-honours-place-wrap {
    margin-top: 18px
  }

  /* The year rail overlaps the copy in one column */
  .rhr-honours-index {
    display: none
  }
}

/* ---------- 560px ---------- */
@media (max-width:560px) {
  .rhr-honours {
    height: 2000px
  }

  .rhr-honours-panel {
    padding: 0 20px
  }

  .rhr-honours-kicker {
    font-size: 10px;
    letter-spacing: .26em
  }

  .rhr-honours-count {
    font-size: 10px
  }

  .rhr-honours-head {
    gap: 10px;
    margin-bottom: 18px
  }

  .rhr-honours-stage {
    height: 265px
  }

  .rhr-honours-year {
    font-size: 72px
  }

  .rhr-honours-title {
    font-size: 27px
  }

  .rhr-honours-track {
    margin-top: 28px
  }
}

/* ---------- 400px ---------- */
@media (max-width:400px) {
  .rhr-honours {
    height: 1900px
  }

  .rhr-honours-panel {
    padding: 0 16px
  }

  .rhr-honours-stage {
    height: 245px
  }

  .rhr-honours-year {
    font-size: 62px
  }

  .rhr-honours-title {
    font-size: 24px
  }

  .rhr-honours-who {
    font-size: 13px
  }

  .rhr-honours-place {
    padding: 8px 13px;
    font-size: 10px;
    letter-spacing: .16em;
    gap: 7px
  }

  .rhr-honours-place i {
    font-size: 12px
  }
}

/* ---------- 340px : smallest supported (320px viewport) ---------- */
@media (max-width:340px) {
  .rhr-honours {
    height: 1800px
  }

  .rhr-honours-panel {
    padding: 0 12px
  }

  .rhr-honours-kicker {
    font-size: 9px;
    letter-spacing: .2em
  }

  .rhr-honours-count {
    font-size: 9px
  }

  .rhr-honours-head {
    gap: 8px;
    margin-bottom: 14px
  }

  .rhr-honours-stage {
    height: 230px
  }

  .rhr-honours-year {
    font-size: 54px;
    -webkit-text-stroke-width: 1px
  }

  .rhr-honours-title {
    margin-top: 10px;
    font-size: 21px
  }

  .rhr-honours-who {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.6
  }

  .rhr-honours-place-wrap {
    margin-top: 14px
  }

  .rhr-honours-place {
    padding: 7px 11px;
    font-size: 9px
  }

  .rhr-honours-track {
    margin-top: 22px
  }
}

/* Landscape phones: the stage is taller than the viewport */
@media (max-height:520px) and (orientation:landscape) {
  .rhr-honours-sticky {
    min-height: 0
  }

  .rhr-honours-stage {
    height: 200px
  }

  .rhr-honours-year {
    font-size: 56px
  }

  .rhr-honours-title {
    font-size: 22px
  }

  .rhr-honours-track {
    margin-top: 20px
  }
}


/* =========================================================
   Responsive — nextrace / services / film / ig / newsletter / footer
   ========================================================= */

/* ---------- 1200px ---------- */
@media (max-width:1200px) {

  .rhr-nextrace,
  .rhr-services {
    padding: 96px 40px 100px
  }

  .rhr-ig,
  .rhr-newsletter {
    padding: 92px 40px 96px
  }

  .rhr-footer-inner {
    padding: 80px 40px 0
  }

  .rhr-nextrace-mark {
    width: 420px
  }

  .rhr-nextrace-head,
  .rhr-services-head,
  .rhr-ig-head {
    gap: 32px
  }

  .rhr-services-grid {
    gap: 44px
  }

  .rhr-newsletter-grid {
    gap: 56px
  }

  .rhr-footer-grid {
    gap: 36px
  }

  .rhr-services-preview-media {
    height: 290px
  }
}

/* ---------- 1024px : tablet ---------- */
@media (max-width:1024px) {

  .rhr-nextrace,
  .rhr-services {
    padding: 80px 32px 84px
  }

  .rhr-ig,
  .rhr-newsletter {
    padding: 76px 32px 80px
  }

  .rhr-footer-inner {
    padding: 68px 32px 0
  }

  .rhr-nextrace-mark {
    width: 340px;
    right: -60px
  }

  /* Stack the head: title block over the trailing button / intro */
  .rhr-nextrace-head,
  .rhr-services-head,
  .rhr-ig-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px
  }

  .rhr-services-intro {
    max-width: none
  }

  /* 12-col card grid becomes 6-col, so spans halve into full rows */
  .rhr-nextrace-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }

  .rhr-span-5,
  .rhr-span-7 {
    grid-column: span 6
  }

  .rhr-row-2 {
    grid-row: span 1
  }

  .rhr-nextrace-circuit {
    min-height: 460px
  }

  .rhr-services-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px
  }

  /* Sticky preview makes no sense once it sits below the list */
  .rhr-services-preview {
    position: static
  }

  .rhr-newsletter-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: start
  }

  .rhr-ig-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .rhr-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px
  }

  .rhr-footer-wordmark-row {
    margin-top: 56px
  }

  .rhr-film-content,
  .rhr-film-foot {
    padding: 0 32px
  }
}

/* ---------- 768px : large phone ---------- */
@media (max-width:768px) {

  .rhr-nextrace,
  .rhr-services {
    padding: 64px 24px 68px
  }

  .rhr-ig,
  .rhr-newsletter {
    padding: 60px 24px 64px
  }

  .rhr-footer-inner {
    padding: 56px 24px 0
  }

  .rhr-nextrace-mark {
    width: 260px;
    right: -70px;
    bottom: -40px
  }

  .rhr-nextrace-kicker,
  .rhr-services-kicker-wrap,
  .rhr-ig-kicker {
    margin-bottom: 14px
  }

  .rhr-nextrace-title,
  .rhr-services-title {
    font-size: clamp(30px, 7vw, 40px)
  }

  .rhr-ig-title {
    font-size: clamp(26px, 6.4vw, 36px);
    overflow-wrap: anywhere
  }

  .rhr-nextrace-head,
  .rhr-services-head {
    margin-bottom: 32px
  }

  .rhr-nextrace-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px
  }

  .rhr-span-5,
  .rhr-span-7 {
    grid-column: span 1
  }

  /* .rhr-nextrace-circuit {
    min-height: 0
  } */

  .rhr-nextrace-circuit-body {
    padding: 22px 20px 20px
  }

  .rhr-nextrace-circuit-top {
    flex-direction: column;
    gap: 16px
  }

  .rhr-nextrace-circuit-name {
    margin-top: 8px;
    font-size: 26px
  }

  /* Stats sit under the name now, so left-align them */
  .rhr-nextrace-circuit-stats {
    gap: 32px;
    text-align: left
  }

  /* The sessions strip is absolutely positioned over the map — give it its
     own row instead of overlaying at phone widths */
  .rhr-track-map {
    min-height: 0;
    height: 190px;
    flex: none;
    margin: 16px 0 0
  }

  .rhr-track-svg {
    position: relative;
    height: 190px
  }

  .rhr-track-sessions {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    margin-top: 18px
  }

  .rhr-nextrace-circuit-foot {
    margin-top: 18px;
    letter-spacing: .16em;
    font-size: 9px
  }

  .rhr-nextrace-countdown {
    padding: 22px 20px 24px
  }

  .rhr-nextrace-countdown-row {
    gap: 14px;
    justify-content: space-between
  }

  .rhr-nextrace-countdown-num {
    font-size: clamp(34px, 11vw, 52px)
  }

  .rhr-nextrace-countdown-foot {
    margin-top: 18px;
    font-size: 12.5px
  }

  .rhr-nextrace-sessions {
    padding: 20px
  }

  /* Three columns will not fit — name on its own line, meta beneath */
  .rhr-nextrace-session-row {
    /* grid-template-columns: minmax(0, 1fr) auto; */
    gap: 4px 12px;
    padding: 12px 0
  }

  .rhr-nextrace-session-name {
    /* grid-column: 1 / -1; */
    font-size: 14px
  }

  .rhr-nextrace-session-len {
    justify-self: end
  }

  .rhr-nextrace-champ {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 20px
  }

  .rhr-nextrace-champ-title {
    font-size: 26px
  }

  .rhr-nextrace-paddock {
    gap: 14px;
    padding: 22px 20px
  }

  .rhr-nextrace-paddock i {
    font-size: 22px
  }

  .rhr-services-preview-media {
    height: 230px
  }

  .rhr-services-preview-title {
    left: 20px;
    bottom: 18px;
    font-size: 24px
  }

  .rhr-services-preview-body {
    padding: 20px
  }

  .rhr-services-preview-desc {
    font-size: 13.5px
  }

  /* Metrics plus button cannot share one line at phone width */
  .rhr-services-preview-metrics {
    flex-wrap: wrap;
    gap: 22px 28px;
    margin-top: 20px;
    padding-top: 18px
  }

  .rhr-services-metric-val {
    font-size: 26px
  }

  .rhr-services-view-btn {
    margin-left: 0;
    width: 100%;
    justify-content: center
  }

  /* Film: the sticky frame 720px floor exceeds a phone viewport */
  .rhr-film {
    height: 2100px
  }

  .rhr-film-sticky {
    min-height: 0;
    height: 100vh;
    height: 100dvh
  }

  .rhr-film-content {
    gap: 16px;
    padding: 0 24px
  }

  .rhr-film-kicker {
    font-size: 10px;
    letter-spacing: .3em
  }

  .rhr-film-title {
    font-size: clamp(34px, 7vw, 52px);
  }

  .rhr-film-sub {
    font-size: 14.5px;
    line-height: 1.7;
    max-width: 420px
  }

  .rhr-film-cta {
    padding: 14px 24px;
    font-size: 10.5px;
    letter-spacing: .18em
  }

  .rhr-film-foot {
    bottom: 18px;
    padding: 0 24px;
    font-size: 9px;
    letter-spacing: .16em;
    gap: 14px
  }

  .rhr-ig-head {
    margin-bottom: 26px
  }

  .rhr-ig-follow {
    padding: 13px 22px;
    font-size: 10.5px;
    letter-spacing: .18em
  }

  .rhr-ig-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
  }

  .rhr-ig-cap {
    padding: 12px;
    font-size: 11.5px
  }

  .rhr-newsletter-kicker {
    letter-spacing: .32em;
    margin-bottom: 18px
  }

  .rhr-newsletter-title {
    font-size: clamp(34px, 8.4vw, 52px)
  }

  .rhr-newsletter-sub {
    margin-top: 18px;
    font-size: 14.5px
  }

  /* Input and button stack; the underline moves onto the input itself */
  .rhr-newsletter-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    border-bottom: 0;
    padding-bottom: 0
  }

  .rhr-newsletter-input {
    padding: 14px 2px;
    border-bottom: 1px solid var(--rhr-l30);
    font-size: 18px
  }

  .rhr-newsletter-submit {
    justify-content: center;
    padding: 15px 24px
  }

  .rhr-newsletter-notes {
    gap: 8px 18px;
    letter-spacing: .16em
  }

  .rhr-footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px
  }

  .rhr-footer-logo {
    height: 40px
  }

  .rhr-footer-blurb {
    margin-top: 18px;
    max-width: none
  }

  .rhr-footer-social {
    margin-top: 20px
  }

  .rhr-footer-wordmark-row {
    margin-top: 44px;
    gap: 20px
  }

  /* Wordmark is nowrap — let it shrink rather than overflow */
  .rhr-footer-wordmark {
    font-size: min(9vw, 74px)
  }

  .rhr-footer-wordmark-icon {
    height: min(13vw, 70px)
  }

  .rhr-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 26px;
    padding: 18px 0 26px;
    letter-spacing: .18em
  }

  .rhr-footer-legal {
    gap: 18px;
    flex-wrap: wrap
  }
}

/* ---------- 560px ---------- */
@media (max-width:560px) {

  .rhr-nextrace,
  .rhr-services {
    padding: 54px 20px 58px
  }

  .rhr-ig,
  .rhr-newsletter {
    padding: 52px 20px 56px
  }

  .rhr-footer-inner {
    padding: 48px 20px 0
  }

  .rhr-nextrace-kicker,
  .rhr-services-kicker,
  .rhr-ig-kicker {
    font-size: 10px;
    letter-spacing: .26em
  }

  .rhr-nextrace-title,
  .rhr-services-title {
    font-size: 30px
  }

  .rhr-ig-title {
    font-size: 26px
  }

  .rhr-track-map,
  .rhr-track-svg {
    height: 160px
  }

  .rhr-nextrace-circuit-name {
    font-size: 23px
  }

  .rhr-nextrace-circuit-stat-num {
    font-size: 21px
  }

  .rhr-nextrace-countdown-num {
    font-size: 38px
  }

  .rhr-nextrace-champ-title,
  .rhr-services-preview-title {
    font-size: 23px
  }

  .rhr-services-preview-media {
    height: 200px
  }

  /* Full-width tap targets read better than shrink-wrapped pills here */
  .rhr-btn-solid-red,
  .rhr-btn-outline-red-sm,
  .rhr-ig-follow {
    width: 100%;
    justify-content: center
  }

  .rhr-ig-grid {
    gap: 8px
  }

  .rhr-newsletter-title {
    font-size: 34px
  }

  .rhr-footer-wordmark {
    font-size: min(12vw, 56px)
  }

  .rhr-footer-wordmark-icon {
    height: min(14vw, 54px)
  }
}

/* ---------- 400px ---------- */
@media (max-width:400px) {

  .rhr-nextrace,
  .rhr-services {
    padding: 48px 16px 52px
  }

  .rhr-ig,
  .rhr-newsletter {
    padding: 46px 16px 50px
  }

  .rhr-footer-inner {
    padding: 42px 16px 0
  }

  .rhr-nextrace-title,
  .rhr-services-title {
    font-size: 27px
  }

  .rhr-ig-title {
    font-size: 23px
  }

  .rhr-nextrace-circuit-body {
    padding: 18px 16px 16px
  }
  .rhr-nextrace-circuit {
    min-height: 435px;
}

  .rhr-track-map,
  .rhr-track-svg {
    height: 140px
  }

  /* Four session cards read as a single column this narrow */
  .rhr-track-sessions {
    grid-template-columns: auto auto;
    gap: 12px;
    margin-top: 46px;
}
  .rhr-nextrace-countdown,
  .rhr-nextrace-sessions,
  .rhr-nextrace-champ,
  .rhr-nextrace-paddock {
    padding: 18px 16px
  }

  .rhr-nextrace-countdown-num {
    font-size: 34px
  }

  .rhr-nextrace-countdown-label,
  .rhr-nextrace-label {
    letter-spacing: .18em
  }

  .rhr-services-preview-media {
    height: 176px
  }

  .rhr-services-preview-body {
    padding: 18px 16px
  }

  .rhr-services-metric-val {
    font-size: 23px
  }

  .rhr-film-title {
    font-size: 32px
  }

  .rhr-film-sub {
    font-size: 13.5px
  }

  .rhr-newsletter-title {
    font-size: 30px
  }

  .rhr-newsletter-sub {
    font-size: 13.5px
  }

  .rhr-footer-wordmark {
    font-size: min(13vw, 46px)
  }

  .rhr-footer-wordmark-icon {
    height: min(15vw, 46px)
  }

  .rhr-footer-phone {
    font-size: 16px
  }
}

/* ---------- 340px : smallest supported (320px viewport) ---------- */
@media (max-width:340px) {

  .rhr-nextrace,
  .rhr-services {
    padding: 42px 12px 46px
  }

  .rhr-ig,
  .rhr-newsletter {
    padding: 40px 12px 44px
  }

  .rhr-footer-inner {
    padding: 38px 12px 0
  }

  .rhr-nextrace-mark {
    width: 200px;
    right: -60px
  }

  .rhr-nextrace-title,
  .rhr-services-title {
    font-size: 24px
  }

  .rhr-ig-title {
    font-size: 20px
  }

  .rhr-nextrace-circuit-body {
    padding: 16px 12px 14px
  }

  .rhr-nextrace-circuit-name {
    font-size: 21px
  }

  .rhr-nextrace-circuit-stats {
    gap: 24px
  }

  .rhr-track-map,
  .rhr-track-svg {
    height: 120px
  }

  .rhr-nextrace-circuit-foot {
    /* flex-direction: column; */
    align-items: flex-start;
    gap: 8px
  }

  .rhr-nextrace-countdown,
  .rhr-nextrace-sessions,
  .rhr-nextrace-champ,
  .rhr-nextrace-paddock {
    padding: 16px 12px
  }

  .rhr-nextrace-countdown-row {
    gap: 8px
  }

  .rhr-nextrace-countdown-num {
    font-size: 30px
  }

  .rhr-nextrace-countdown-label {
    font-size: 9px;
    letter-spacing: .14em
  }

  .rhr-nextrace-session-name {
    font-size: 13px
  }

  .rhr-nextrace-session-date,
  .rhr-nextrace-session-len {
    font-size: 11.5px
  }

  .rhr-nextrace-champ-title {
    font-size: 21px
  }

  .rhr-nextrace-paddock-title {
    font-size: 14px
  }

  .rhr-nextrace-paddock-sub {
    font-size: 12px
  }

  .rhr-services-preview-media {
    height: 158px
  }

  .rhr-services-preview-title {
    left: 14px;
    bottom: 14px;
    font-size: 20px
  }

  .rhr-services-preview-body {
    padding: 16px 12px
  }

  .rhr-services-preview-desc {
    font-size: 13px
  }

  .rhr-services-preview-metrics {
    gap: 18px 22px
  }

  .rhr-film-content {
    gap: 13px;
    padding: 0 16px
  }

  .rhr-film-title {
    font-size: 28px
  }

  .rhr-film-sub {
    font-size: 13px
  }

  .rhr-film-cta {
    padding: 13px 20px;
    font-size: 10px
  }

  .rhr-film-foot {
    padding: 0 16px;
    font-size: 8.5px;
    letter-spacing: .12em
  }

  /* A 2-up grid leaves ~145px tiles; one column keeps the captions legible */
  .rhr-ig-grid {
    grid-template-columns: minmax(0, 1fr)
  }

  .rhr-newsletter-kicker {
    font-size: 10px;
    letter-spacing: .26em;
    margin-bottom: 14px
  }

  .rhr-newsletter-title {
    font-size: 26px
  }

  .rhr-newsletter-sub {
    margin-top: 14px;
    font-size: 13px
  }

  .rhr-newsletter-input {
    font-size: 16px
  }

  .rhr-footer-logo {
    height: 34px
  }

  .rhr-footer-blurb {
    font-size: 13px
  }

  .rhr-footer-social-btn {
    width: 38px;
    height: 38px
  }

  .rhr-footer-wordmark-row {
    margin-top: 34px
  }

  .rhr-footer-wordmark {
    font-size: min(14vw, 40px)
  }

  .rhr-footer-wordmark-icon {
    height: min(16vw, 40px)
  }

  .rhr-footer-link,
  .rhr-footer-visit {
    font-size: 13px
  }

  .rhr-footer-bottom {
    font-size: 9px;
    letter-spacing: .14em
  }
}

/* Landscape phones: a full-height film frame leaves no room for the copy */
@media (max-height:520px) and (orientation:landscape) {
  .rhr-film-sticky {
    min-height: 0
  }

  .rhr-film-content {
    gap: 12px
  }

  .rhr-film-title {
    font-size: clamp(30px, 6vw, 46px)
  }

  .rhr-film-sub {
    font-size: 13.5px
  }
}

/* =========================================================
   Responsive — section-1 (the team)
   Inline styles on this block win over classes, so the
   overrides below need !important.
   ========================================================= */

/* ---------- 1200px ---------- */
@media (max-width:1200px) {
  .s1 {
    padding: 96px 48px 100px !important
  }

  .s1-head {
    gap: 40px !important
  }
}

/* ---------- 1024px : tablet ---------- */
@media (max-width:1024px) {
  .s1 {
    padding: 84px 36px 88px !important
  }

  /* Lead portrait keeps half the row; the rest reflows to two-up */
  .s1-card-lead {
    grid-column: span 12 !important;
    grid-row: auto !important;
    min-height: 420px
  }

  .s1-card-person {
    grid-column: span 4 !important
  }

  .s1-card-stats {
    grid-column: span 12 !important;
    flex-direction: row !important;
    align-items: center;
    gap: 28px !important
  }

  .s1-card-stats>div[style*="height:1px"] {
    width: 1px;
    height: 44px !important;
    flex: none
  }

  .s1-card-stats>div:not([style*="height:1px"]) {
    flex: 1
  }

  .s1-card-shop,
  .s1-card-story {
    grid-column: span 12 !important
  }
}

/* ---------- 768px : large phone / small tablet ---------- */
@media (max-width:768px) {
  .s1 {
    padding: 68px 24px 72px !important
  }

  .s1-head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
    margin-bottom: 32px !important
  }

  .s1-lead {
    font-size: 14.5px !important
  }

  .s1-grid {
    grid-auto-rows: minmax(200px, auto) !important;
    gap: 14px !important
  }

  .s1-card-lead {
    min-height: 360px
  }

  .s1-card-person {
    grid-column: span 6 !important
  }

  .s1-lead-cap {
    left: 22px !important;
    right: 22px !important;
    bottom: 22px !important
  }

  .s1-shop-cap {
    padding: 26px 24px !important;
    height: auto !important;
    min-height: 100%
  }

  .s1-card-story {
    padding: 26px !important
  }
}

/* ---------- 560px : phone ---------- */
@media (max-width:560px) {
  .s1 {
    padding: 56px 18px 60px !important
  }

  /* .dv-card {
    height: 71vh;
} */
  .s1-title {
    font-size: clamp(30px, 9vw, 42px) !important
  }

  .s1-grid {
    grid-auto-rows: auto !important;
    gap: 12px !important
  }

  /* Single column: side-by-side portraits get too narrow to read */
  .s1-card-person {
    grid-column: span 12 !important;
    min-height: 260px
  }

  .s1-card-lead {
    min-height: 320px
  }

  .s1-card-shop {
    min-height: 230px !important
  }

  .s1-card-stats {
    /* flex-direction: column !important; */
    align-items: stretch;
    gap: 18px !important;
    padding: 24px !important
  }

  .s1-card-stats>div[style*="height:1px"] {
    width: auto;
    height: 1px !important
  }

  .s1-lead-copy {
    font-size: 13px !important
  }
}

/* ---------- 400px ---------- */
@media (max-width:400px) {
  .s1 {
    padding: 48px 14px 52px !important
  }

  .s1-kicker {
    font-size: 10px !important;
    letter-spacing: .26em !important
  }

  .s1-title {
    font-size: clamp(26px, 8.6vw, 34px) !important
  }

  .s1-lead,
  .s1-lead-copy {
    font-size: 13px !important;
    line-height: 1.65 !important
  }

  .s1-card-lead {
    min-height: 280px
  }

  .s1-lead-cap {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important
  }

  .s1-lead-name {
    font-size: 26px !important
  }

  .s1-person-cap {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important
  }

  .s1-card-person {
    min-height: 230px
  }

  .s1-shop-cap {
    padding: 22px 18px !important
  }

  .s1-shop-title {
    font-size: 22px !important
  }

  .s1-stat-num {
    font-size: 32px !important
  }

  .s1-card-story {
    padding: 22px 18px !important;
    gap: 18px !important
  }

  /* Full-width tap target rather than a cramped pill */
  .s1-story-cta {
    align-self: stretch !important;
    justify-content: center;
    padding: 14px 18px !important;
    font-size: 11px !important;
    letter-spacing: .16em !important
  }
  .s1-card-stats>div:not([style*="height:1px"]){
    width: 0 !important;
  }
  .s1-card-stats>div[data-dc-tpl="402"]{
    display: none;
  }
  .s1-card-stats {
    padding: 25px 15px !important;
}
.rhr-newsletter-submit {
    padding: 10px 24px;
}
}

/* ---------- 340px : smallest supported (320px viewport) ---------- */
@media (max-width:340px) {
  .s1 {
    padding: 42px 12px 46px !important
  }

  .s1-title {
    font-size: 25px !important
  }

  .s1-lead-name {
    font-size: 23px !important
  }

  .s1-shop-title {
    font-size: 20px !important
  }

  .s1-card-lead {
    min-height: 250px
  }

  .s1-card-person {
    min-height: 210px
  }
}

@media (max-height: 768px) and (orientation: landscape) {
  .rhr-reel1-panel {
    padding-top: 168px;
    padding-bottom: 48px;
  }
}

@media (max-height: 575px) and (orientation: landscape) {
  .rhr-reel1-panel {
    padding-top: 196px;
    padding-bottom: 48px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .rhr-reel1-panel {
    padding-top: 38px;
    padding-bottom: 48px;
  }
}

@media (max-width: 340px) {
  .rhr-reel1-panel {
    gap: 14px;
    padding: 16px 12px 52px;
  }
}
@media (max-width: 480px) {
    .rhr-reel1-panel {
        height: 69dvh;
    }
}
@media (max-width: 767px) {
    .rhr-services-grid a > span:nth-child(2) {
        font-size: 18px !important;
    }
    .rhr-services-grid a{
      display: flex !important;
    }
    .rhr-services-grid a > span:nth-child(1) {
        width: 25px !important;
    }
}