/* Nordic Pro — mobile & tablet responsive overrides
   Breakpoints: 768px (tablet), 480px (phone), 320px (small phone) */

:root {
  --nav-height: 64px;
  --space-section-y: 72px;
  --space-section-x: 20px;
  --space-section-x-safe: max(20px, env(safe-area-inset-left));
}

/* ── Base & Safari fixes ── */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  overflow-x: clip;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Skip link — hidden until keyboard focus (WCAG 2.4.1) */
.skip-link {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  z-index: 9999;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 8px !important;
  top: 8px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  background: #c8a84b;
  color: #0e0e0e;
  padding: 10px 18px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
}

img,
video,
svg,
iframe {
  max-width: 100%;
  height: auto;
}

/* Prevent horizontal scroll from off-canvas elements */
.hero,
.page-hero,
.story-section,
.story-visual,
.marquee-strip {
  overflow-x: clip;
}

/* ── Navigation ── */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 20px;
  height: 1.5px;
  background: #fff;
  transition: transform 0.25s, opacity 0.25s;
}

.nav-toggle span {
  position: relative;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

nav.menu-open .nav-toggle span { background: transparent; }
nav.menu-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
nav.menu-open .nav-toggle span::after  { top: 0; transform: rotate(-45deg); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 1024px) {
  :root {
    --nav-height: 98px;
  }

  nav {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    height: auto !important;
    min-height: var(--nav-height) !important;
    max-height: none !important;
    padding: 10px var(--space-section-x-safe) !important;
    padding-top: calc(10px + env(safe-area-inset-top)) !important;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    /* backdrop-filter + overflow:hidden on nav clip position:fixed children */
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav-logo img {
    height: 78px !important;
    width: auto !important;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links,
  .nav-mobile-panel {
    display: none !important;
    position: fixed;
    top: calc(var(--nav-height) + env(safe-area-inset-top));
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 8px 0 calc(24px + env(safe-area-inset-bottom)) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
    background: #0a0a0a;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 9998;
    pointer-events: none;
    visibility: hidden;
  }

  nav.menu-open {
    z-index: 9999;
  }

  body.menu-open .nav-mobile-panel.is-open,
  nav.menu-open .nav-links.is-open {
    display: flex !important;
    pointer-events: auto;
    visibility: visible;
  }

  .nav-links li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .nav-links a {
    display: block !important;
    padding: 16px 24px !important;
    font-size: 13px !important;
    letter-spacing: 0.14em !important;
    min-height: 44px;
    line-height: 1.2;
    opacity: 1 !important;
  }

  .nav-links a.active {
    color: var(--gold) !important;
    background: rgba(200, 168, 75, 0.06);
  }

  .nav-cta {
    display: none !important;
  }

  body.menu-open .nav-cta-mobile,
  .nav-mobile-panel.is-open .nav-cta-mobile {
    display: block !important;
    margin: 16px 24px 0 !important;
    text-align: center;
    min-height: 44px;
    line-height: 24px;
    padding: 14px 24px !important;
  }

  .nav-cta-mobile-wrap {
    border-bottom: none !important;
    list-style: none;
  }

  .lang-toggle {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px !important;
  }

  .nav-link-duplicate-cta {
    display: none !important;
  }

  .nav-link-secondary {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: 4px !important;
    padding-top: 4px !important;
  }

  .nav-link-secondary a {
    opacity: 0.7 !important;
    font-size: 12px !important;
  }

  body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
}

/* ── Touch-friendly buttons ── */
@media (max-width: 768px) {
  .btn-primary,
  .btn-dark,
  .btn-outline-dark,
  .btn-outline,
  .btn-ghost,
  .nav-cta,
  .price-cta,
  .lang-toggle,
  .cookie-settings-btn,
  button.btn-primary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-primary,
  .btn-dark,
  .btn-outline-dark,
  .price-cta {
    padding: 14px 28px !important;
  }
}

/* ── Hero (homepage) ── */
@media (max-width: 768px) {
  .hero {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
    background: var(--blue) !important;
  }

  .hero-bg,
  .hero-grid {
    display: none !important;
  }

  .hero-img-right {
    position: relative !important;
    order: 1;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    top: auto !important;
    bottom: auto !important;
    clip-path: none !important;
    opacity: 1 !important;
    background: #0a1628 !important;
    padding-top: calc(var(--nav-height) + env(safe-area-inset-top));
    overflow: hidden !important;
  }

  .hero-img-right::after {
    content: '' !important;
    position: absolute !important;
    inset: auto 0 0 0 !important;
    height: 40% !important;
    background: linear-gradient(to bottom, transparent, var(--blue)) !important;
    pointer-events: none;
  }

  .hero-img-right img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 62vh !important;
    aspect-ratio: 4 / 5;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .hero-img-right picture {
    display: block;
    width: 100%;
  }

  .hero-overlay {
    display: none !important;
  }

  .hero-content {
    order: 2;
    position: relative !important;
    z-index: 2;
    padding: 24px var(--space-section-x) 28px !important;
    background: var(--blue) !important;
    margin-top: -8px;
  }

  .hero-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    margin-bottom: 12px !important;
  }

  .hero-title {
    font-size: clamp(30px, 8.2vw, 42px) !important;
    line-height: 1.08 !important;
    max-width: 100% !important;
    overflow-wrap: break-word;
  }

  .hero-sub {
    max-width: 100% !important;
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.65 !important;
    margin-top: 16px !important;
  }

  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    justify-content: center;
    width: 100%;
  }

  .hero-stats {
    order: 3;
    position: static !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    gap: 16px !important;
    text-align: center !important;
    padding: 20px var(--space-section-x) 28px !important;
    margin-top: 0 !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .hero-stats .stat-num {
    font-size: clamp(28px, 8vw, 36px) !important;
  }

  .hero-stats .stat-label {
    font-size: 8px !important;
  }

  .hero-scroll {
    display: none !important;
  }
}

/* ── Page heroes (inner pages) ── */
@media (max-width: 768px) {
  .page-hero {
    padding: calc(var(--nav-height) + env(safe-area-inset-top) + 32px) var(--space-section-x) 48px !important;
    min-height: 0 !important;
    align-items: flex-end !important;
  }

  .page-hero-img {
    width: 100% !important;
    opacity: 0.2 !important;
  }

  .page-title {
    font-size: clamp(36px, 10vw, 56px) !important;
  }

  .page-sub {
    max-width: 100% !important;
    font-size: clamp(16px, 4.2vw, 20px) !important;
  }
}

/* ── Stats band ── */
@media (max-width: 768px) {
  .stats-band {
    grid-template-columns: 1fr !important;
  }

  .stat-cell {
    padding: 32px var(--space-section-x) !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .stat-cell:last-child {
    border-bottom: none;
  }

  .stat-cell-num {
    font-size: clamp(40px, 11vw, 56px) !important;
  }

  .stat-cell-unit {
    font-size: clamp(20px, 6vw, 28px) !important;
  }

  .stat-cell-label {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }
}

/* ── Multi-column layouts → stack ── */
@media (max-width: 768px) {
  :root {
    --space-section-y: 56px;
  }

  .story-section,
  .pillars,
  .what-section,
  .quote-section,
  .cta-section,
  .ratio-section,
  .partner-section {
    border-top: 1px solid rgba(14, 14, 14, 0.07);
  }

  .pillars,
  .cta-section,
  .ratio-section {
    border-top-color: rgba(255, 255, 255, 0.06);
  }

  .story-section,
  .pillars-head,
  .pillars-grid,
  .photo-strip,
  .two-col,
  .three-col,
  .pricing-grid,
  .apply-grid,
  .coach-card,
  .coach-card.reverse,
  .ratio-inner,
  .ratio-grid,
  .partner-cards,
  .include-grid,
  footer {
    grid-template-columns: 1fr !important;
  }

  .coach-card.reverse .coach-img,
  .coach-card.reverse .coach-info {
    order: unset !important;
  }

  .story-section {
    padding: var(--space-section-y) var(--space-section-x) !important;
    gap: 48px !important;
  }

  .story-img-float {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    width: 80% !important;
    margin: -40px auto 0 !important;
    border-width: 4px !important;
  }

  .story-badge {
    left: 12px !important;
    top: 12px !important;
  }

  .pillars {
    padding: var(--space-section-y) var(--space-section-x) !important;
  }

  .pillars-head {
    gap: 32px !important;
    margin-bottom: 40px !important;
  }

  .pillar {
    padding: 32px 24px !important;
  }

  .photo-strip {
    height: auto !important;
    grid-template-rows: auto !important;
  }

  .photo-item {
    min-height: 220px;
  }

  .what-section,
  .quote-section,
  .cta-section,
  .ratio-section,
  .partner-section,
  .straight-talk {
    padding: var(--space-section-y) var(--space-section-x) !important;
  }

  .intake-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 24px var(--space-section-x) !important;
  }

  .marquee-item {
    font-size: 10px !important;
    padding: 0 16px !important;
  }

  .marquee-track {
    animation-duration: 48s !important;
  }
}

/* ── Inline grid / padding overrides ── */
@media (max-width: 768px) {
  section[style*="padding"],
  section[style*="background"] {
    padding-top: var(--space-section-y) !important;
    padding-bottom: var(--space-section-y) !important;
    padding-left: var(--space-section-x) !important;
    padding-right: var(--space-section-x) !important;
  }

  div[style*="display:grid"],
  div[style*="display: grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* Intake schedule table rows */
  div[style*="grid-template-columns:1.4fr"] {
    gap: 0 !important;
  }

  div[style*="grid-template-columns:1.4fr"] > div:nth-child(1) {
    font-weight: 500 !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  div[style*="grid-template-columns:1.4fr"] > div {
    padding: 8px 0 !important;
  }

  div[style*="grid-template-columns:1.4fr"] > div[style*="letter-spacing"] {
    display: none !important;
  }

  /* Hide intake table header row on mobile */
  div[style*="grid-template-columns:1.4fr"]:has(> div[data-i18n="intake_col1"]) {
    display: none !important;
  }
}

/* ── Pricing ── */
@media (max-width: 768px) {
  .pricing-grid {
    gap: 16px !important;
  }

  .pricing-card {
    padding: 36px 24px !important;
  }

  .price-num {
    font-size: clamp(44px, 12vw, 60px) !important;
  }

  .notes-box {
    padding: 24px 20px !important;
    margin-left: var(--space-section-x) !important;
    margin-right: var(--space-section-x) !important;
  }

  .comparison-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--space-section-x));
    padding: 0 var(--space-section-x);
  }

  .comparison-table {
    min-width: 480px;
  }
}

/* ── Coaches ── */
@media (max-width: 768px) {
  .coach-img,
  .coach-img-placeholder {
    min-height: 280px !important;
  }

  .coach-info {
    padding: 32px 24px !important;
  }

  .coach-num {
    font-size: 48px !important;
  }

  .ratio-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .partner-card {
    padding: 32px 24px !important;
  }
}

/* ── Apply form ── */
@media (max-width: 768px) {
  .apply-grid {
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  .apply-left {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .apply-left-content {
    padding: calc(var(--nav-height) + env(safe-area-inset-top) + 24px) var(--space-section-x) 32px !important;
    overflow-y: visible !important;
    justify-content: flex-start !important;
    gap: 24px;
  }

  .apply-right {
    padding: 40px var(--space-section-x) 80px !important;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .apply-right form,
  .apply-right > * {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .steps-mini {
    align-items: stretch !important;
    width: 100%;
    max-width: 100%;
  }

  .form-row {
    grid-template-columns: 1fr !important;
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    min-height: 44px;
  }

  .step-mini {
    width: 100% !important;
    max-width: 100% !important;
  }

  .steps-mini {
    align-items: stretch !important;
  }
}

/* ── FAQ ── */
@media (max-width: 768px) {
  .faq-q {
    padding: 16px 0 !important;
    align-items: center !important;
    min-height: 56px;
    gap: 16px;
    -webkit-tap-highlight-color: transparent;
  }

  .faq-q-text {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    padding-right: 12px;
    line-height: 1.45 !important;
  }

  .faq-arrow {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(200, 168, 75, 0.14) !important;
    border-radius: 50%;
    font-size: 20px !important;
    font-weight: 300;
    margin-left: 0 !important;
  }

  .faq-item.open .faq-arrow {
    transform: rotate(45deg);
  }

  .faq-a p {
    font-size: clamp(16px, 4vw, 19px) !important;
  }

  .faq-category {
    margin: 48px 0 16px !important;
  }
}

/* ── Legal pages ── */
@media (max-width: 768px) {
  .legal-body {
    padding: calc(var(--nav-height) + env(safe-area-inset-top) + 32px) var(--space-section-x) 80px !important;
  }

  .legal-body p,
  .legal-body ul li {
    font-size: clamp(16px, 4vw, 19px) !important;
  }
}

/* ── Footer ── */
@media (max-width: 768px) {
  footer {
    padding: 48px var(--space-section-x) !important;
    gap: 32px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px var(--space-section-x) !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
  }
}

/* ── Typography scaling ── */
@media (max-width: 768px) {
  .section-title {
    font-size: clamp(28px, 7.5vw, 40px) !important;
    line-height: 1.1 !important;
  }

  .body-text,
  .page-sub,
  .hero-sub,
  .pillar-text,
  .card-text,
  .coach-bio,
  .check-item,
  .faq-a p,
  .legal-body p,
  .legal-body ul li,
  .price-features li,
  .notes-box p,
  .partner-card-text {
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.65 !important;
  }

  .pull-quote {
    font-size: clamp(22px, 6vw, 30px) !important;
  }

  .pillar-title {
    font-size: clamp(20px, 5.5vw, 24px) !important;
  }
}

/* ── Program page cards ── */
@media (max-width: 768px) {
  .card {
    padding: 28px 24px !important;
  }

  .dark-section {
    padding: var(--space-section-y) var(--space-section-x) !important;
  }

  .coaching-cue {
    padding: 24px 20px !important;
  }
}

/* ── Cookie banner ── */
@media (max-width: 768px) {
  #npe-cookie-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px var(--space-section-x) calc(16px + env(safe-area-inset-bottom)) !important;
    gap: 12px !important;
  }

  #npe-cookie-banner p {
    font-size: 12px !important;
    line-height: 1.55 !important;
    min-width: 0 !important;
  }

  .npe-cookie-btns {
    width: 100% !important;
    flex-direction: column !important;
  }

  .npe-cookie-btns button {
    width: 100% !important;
    min-height: 44px !important;
  }
}

/* ── Small phones (320–375px) ── */
@media (max-width: 375px) {
  :root {
    --space-section-x: 16px;
    --space-section-y: 48px;
  }

  .nav-logo img {
    height: 60px !important;
  }

  .hero-title {
    font-size: clamp(28px, 8.5vw, 36px) !important;
  }

  .stat-cell-num {
    font-size: 42px !important;
  }

  .ratio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Tablet landscape (768px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --nav-height: 120px;
  }

  nav {
    height: auto !important;
    min-height: var(--nav-height) !important;
    max-height: none !important;
    padding: 12px 32px !important;
  }

  .nav-logo img {
    height: 96px !important;
  }

  .nav-links {
    gap: 12px !important;
  }

  .nav-links a {
    font-size: 10px !important;
  }

  .story-section,
  .pillars-head,
  .two-col {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .pillars-grid,
  .pricing-grid,
  .three-col {
    grid-template-columns: 1fr 1fr !important;
  }

  footer {
    grid-template-columns: 1fr 1fr !important;
  }

  .apply-grid {
    grid-template-columns: 1fr !important;
  }

  .apply-left {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
  }
}

/* ── Sticky Apply FAB (mobile) ── */
.mobile-apply-fab {
  display: none;
}

@media (max-width: 768px) {
  .mobile-apply-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 9990;
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    min-height: 48px;
    padding: 14px 24px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    background: var(--gold);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s, opacity 0.2s;
  }

  .mobile-apply-fab:active {
    transform: scale(0.98);
  }

  .mobile-apply-fab.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
  }

  body.has-mobile-fab .footer-bottom {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }

  body.menu-open .mobile-apply-fab {
    display: none !important;
  }
}

/* ── Calendly embed (mobile) ── */
@media (max-width: 768px) {
  #book-call {
    padding-left: var(--space-section-x) !important;
    padding-right: var(--space-section-x) !important;
  }

  #book-call > div > div {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    justify-items: center !important;
  }

  #book-call .reveal-delay-1 {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #book-call .calendly-inline-widget {
    min-width: 0 !important;
    width: 100% !important;
    max-width: min(100%, 420px) !important;
    height: min(700px, 78vh) !important;
    margin: 0 auto !important;
  }

  #book-call .calendly-inline-widget iframe {
    margin: 0 auto !important;
    display: block !important;
  }
}

/* ── Desktop nav + layout (do not affect mobile nav) ── */
@media (min-width: 1025px) {
  :root {
    --desktop-nav-height: 96px;
  }

  nav {
    height: auto !important;
    min-height: var(--desktop-nav-height) !important;
    max-height: none !important;
    padding: 14px 32px !important;
    overflow: visible !important;
    background: rgba(14, 14, 14, 0.72) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  .nav-logo img {
    height: 72px !important;
    width: auto !important;
  }

  .page-hero {
    padding-top: calc(var(--desktop-nav-height) + 120px) !important;
  }

  .apply-grid {
    margin-top: var(--desktop-nav-height) !important;
    min-height: calc(100vh - var(--desktop-nav-height)) !important;
  }

  .apply-left {
    top: var(--desktop-nav-height) !important;
    height: calc(100vh - var(--desktop-nav-height)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .apply-left-content {
    overflow-y: visible !important;
    min-height: min-content;
    padding-bottom: 48px !important;
  }

  .apply-right {
    padding-top: 80px !important;
  }

  .hero-img-right {
    padding-top: calc(var(--desktop-nav-height) + 12px) !important;
  }

  .hero-img-right img {
    max-height: calc(100vh - var(--desktop-nav-height) - 32px) !important;
  }
}