/* ═══════════════════════════════════════════════════════════
   OPIB OnePay — Shared design system + polish layer
   Loaded AFTER theme.css and BEFORE each page's inline <style>?
   No — page <style> comes later in source, so this file uses
   !important / high specificity to win, matching theme.css.
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. Base typography rhythm
   ───────────────────────────────────────────── */
body { font-feature-settings: "kern" 1; text-rendering: optimizeLegibility; }

/* Restrained, consistent heading scale — forced site-wide so no
   page shouts with a 64px display heading in a content section. */
main h1, .u-h1 { font-size: var(--fs-h1) !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; }
main section h2, main h2, .u-h2 { font-size: var(--fs-h2) !important; line-height: 1.18 !important; letter-spacing: -0.015em !important; }
main h3 { font-size: var(--fs-h3) !important; line-height: 1.3 !important; }
h1.u-display, .u-display, .about-shell h1, .hero-shell h1 { font-size: var(--fs-display) !important; line-height: 1.08 !important; letter-spacing: -0.025em !important; }
.u-accent { color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; }
/* big gradient word inside a section heading → same size, solid orange */
main h2 .about-title-accent, main h2 .accent, main h2 span[class*="accent"] {
  font-size: 1em !important; font-weight: inherit !important;
  background: none !important; -webkit-text-fill-color: var(--accent) !important; color: var(--accent) !important;
}

/* Card body copy that was tuned for dark cards → readable on white */
.coverage-copy, .coverage-footnote,
.svc-service-desc, .tm-quote-text { color: var(--t-subtle) !important; }

/* Headings/values that hard-code near-black → follow the theme in dark mode */
.dark .coverage-title,
.dark .svc-title,
.dark .svc-service-name,
.dark .svc-stat-chip-value,
.dark .core-values-title,
.dark .core-value-card h3,
.dark .mvp-card h3,
.dark .contact-pill-title,
.dark .contact-success-title,
.dark .about-metric-value,
.dark .tm-stat-num,
.dark .estimator-price { color: var(--t-heading) !important; }
.dark .contact-textarea,
.dark .contact-input,
.dark .contact-select { color: var(--t-heading) !important; }

/* ─────────────────────────────────────────────
   2. Eyebrow label — replaces the orange pill badges
   ───────────────────────────────────────────── */
.u-eyebrow,
.about-badge,
.svc-pill,
.tm-section-pill,
.core-values-badge,
.mvp-badge,
.idt-badge,
.footer-cta-tag,
.qt-pill,
.faq-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: var(--fs-eyebrow) !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--t-muted) !important;
  box-shadow: none !important;
}
/* hide the little dots/rules that decorated the old pills */
.about-badge-dot,
.svc-pill-dot,
.tm-section-pill-dot,
.qt-pill-dot,
.faq-kicker::before,
.faq-kicker::after { display: none !important; }
/* a single small accent tick before the eyebrow text */
.u-eyebrow::before,
.about-badge::before,
.svc-pill::before,
.mvp-badge::before,
.idt-badge::before,
.footer-cta-tag::before,
.faq-kicker::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 2px !important;
  background: var(--accent) !important;
  flex: none !important;
}
.faq-kicker::after { display: none !important; }
.footer-cta-tag { color: rgba(255,255,255,0.6) !important; }

/* ─────────────────────────────────────────────
   3. Buttons
   ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 12px;
  font-family: 'Manrope', sans-serif; font-size: 0.9rem; font-weight: 700;
  line-height: 1; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn .material-symbols-outlined { font-size: 18px; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px rgba(255,122,26,0.28); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-soft); }
.btn--ghost { background: transparent; border-color: var(--t-border2); color: var(--t-heading); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ─────────────────────────────────────────────
   4. Card
   ───────────────────────────────────────────── */
.u-card {
  background: var(--t-bg-howcard);
  border: 1px solid var(--t-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.u-card--lift { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.u-card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--t-border2); }

.u-section { padding-top: var(--section-y); padding-bottom: var(--section-y); }

/* How-it-works numbered stepper (home) */
.hiw-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding-top: 32px;               /* the discs straddle the cards' top edge */
}

/* The rail that makes five boxes read as one sequence. It sits behind the
   cards, so it only shows in the gaps between them and under the discs. */
.hiw-steps::before {
  content: '';
  position: absolute;
  top: 32px;                       /* the cards' top edge = the discs' centre */
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 9%, var(--accent) 91%, transparent);
  opacity: .3;
  z-index: 0;
}

.hiw-step {
  position: relative;
  z-index: 1;                      /* occludes the rail across the card itself */
  padding: 46px 18px 26px;
  text-align: center;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* scroll-reveal injects `[data-reveal].is-visible{transform:none!important}`
   at runtime, after this sheet. Same specificity would lose on source order,
   so the hover lift is scoped one level deeper to out-rank it. */
.hiw-steps .hiw-step:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 122, 26, 0.42);
  box-shadow: var(--shadow-lift);
}

/* Icon and step number as a single anchor, instead of one in each corner. */
.hiw-icon {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--t-bg-howcard);
  border: 1px solid rgba(255, 122, 26, 0.3);
  box-shadow: 0 0 0 7px var(--t-bg-cool);   /* clean break in the rail */
  color: var(--accent);
  line-height: 1;
  transition: background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.hiw-icon .material-symbols-outlined { font-size: 27px; }
.hiw-step:hover .hiw-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 7px var(--t-bg-cool), 0 10px 22px rgba(255, 122, 26, 0.34);
}

.hiw-num {
  position: absolute;
  top: -34px;
  left: calc(50% + 14px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--t-bg-cool);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .72rem;
  line-height: 1;
}
.dark .hiw-num { background: var(--accent); }

/* A fixed two-line box so the body copy starts level on all five cards,
   however long the heading is. */
.hiw-step h3 {
  margin: 0;
  min-height: 2.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--t-heading);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.hiw-step p { margin-top: 6px; font-size: .85rem; line-height: 1.6; color: var(--t-subtle); }

/* The rail only makes sense while all five sit on one row. */
@media (max-width: 1080px) {
  .hiw-steps { grid-template-columns: repeat(3, 1fr); row-gap: 58px; }
  .hiw-steps::before { display: none; }
}
@media (max-width: 760px) { .hiw-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) {
  .hiw-steps { grid-template-columns: 1fr; row-gap: 56px; }
  .hiw-step h3 { min-height: 0; }
}

/* ─────────────────────────────────────────────
   4b. Hero heading hierarchy — the big orange accent
       lines become a proper muted subtitle
   ───────────────────────────────────────────── */
.about-shell h1, .hero-shell h1 {
  font-size: var(--fs-display) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
}
.about-shell h1 .about-title-accent,
.hero-shell h1 .about-title-accent,
.about-shell h1 .hero-title-accent,
.hero-shell h1 .hero-title-accent {
  display: block !important;
  margin-top: 12px !important;
  font-size: 0.46em !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.005em !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--t-subtle) !important;
}
/* inline accent inside section headings: solid orange, no gradient */
h2 .about-title-accent, h2 .accent, h2 .svc-title-accent {
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Cool the hard-coded warm section bands */
:root:not(.dark) .core-values-section,
:root:not(.dark) .mvp-section,
:root:not(.dark) .about-shell,
:root:not(.dark) .hero-shell,
:root:not(.dark) .tm-shell,
:root:not(.dark) .coverage-section,
:root:not(.dark) .faq-section,
:root:not(.dark) .estimator-strip {
  background: transparent !important;
}
:root:not(.dark) .core-values-section,
:root:not(.dark) .mvp-section { background: var(--t-bg-cool) !important; }

/* ─────────────────────────────────────────────
   5. Decorative dial-back
   ───────────────────────────────────────────── */
/* Giant faded background words — gone */
.about-ghost-word, .about-ghost-num,
.tm-ghost-word, .tm-ghost-num,
.process-bg-word,
.hero-ghost-word, .svc-ghost-word,
.qt-ghost-word { display: none !important; }

/* Oversized "ghost numbers" behind cards — gone */
.coverage-card::after,
.core-value-card::after,
.mvp-card::after,
.how-card .card-ghost-num,
.mvp-card-num,
.core-value-num,
.coverage-meta::after { display: none !important; }

/* Corner brackets that animate on the hero — keep static + faint */
.hero-corners::before, .hero-corners::after,
.about-shell .hero-corners::before, .about-shell .hero-corners::after {
  opacity: .35 !important; transform: none !important; transition: none !important;
}
/* orange corner-bracket / glow decorations on the estimator + cards */
.estimator-strip::before, .estimator-strip::after,
.cta-banner::before, .cta-banner::after,
.svc-card::before, .svc-card::after,
.tm-card::before, .tm-card::after { display: none !important; }

/* Soften every orange glow shadow to a neutral soft shadow */
.cta-primary, .btn-ripple, .estimator-btn-primary,
.svc-btn-primary, .footer-cta-primary, .about-badge,
.quote-submit, .sq-submit {
  box-shadow: 0 10px 24px rgba(255,122,26,0.24) !important;
}
.how-card, .coverage-card, .core-value-card, .mvp-card,
.svc-card, .tm-card, .tm-stat-card, .glass, .estimator-shell,
.blog-card, .u-card, .article-keypoints {
  box-shadow: var(--shadow-soft) !important;
}

/* Calmer nav / glass blur */
.nav-frame, .nav-blur, .glass { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }
.nav-frame { background: linear-gradient(180deg, var(--t-bg-nav), var(--t-bg-nav2)) !important; }
.nav-blur { background: none !important; }

/* Ripple effect off */
.btn-ripple .ripple-circle { display: none !important; }

/* Kill the fixed decorative background number on the about hero etc. */
[class*="ghost"][aria-hidden="true"] { display: none !important; }

/* ─────────────────────────────────────────────
   6. FAQ — flat treatment, readable in both themes
   ───────────────────────────────────────────── */
.faq-section { background: transparent !important; }
.faq-trigger { color: var(--t-heading) !important; }
.faq-trigger:hover { color: var(--accent) !important; }
.faq-panel p { color: var(--t-subtle) !important; }
.faq-item { background: var(--t-bg-howcard) !important; border-color: var(--t-border) !important; }
.faq-divider-line { opacity: .5; }

/* ─────────────────────────────────────────────
   7. Section eyebrow spacing helper for common headers
   ───────────────────────────────────────────── */
.svc-header .svc-pill,
.tm-section-header .tm-section-pill { margin-bottom: 14px !important; }

/* ═════════════════════════════════════════════
   8. UNIFIED FOOTER — deep navy, white text,
   identical + responsive on every page.
   High specificity (html:root) beats page inline <style>.
   ═════════════════════════════════════════════ */
html:root .site-footer {
  background: var(--ink) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 56px 24px 0 !important;
}
html:root .footer-grid {
  max-width: 1160px !important; margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1.3fr 1fr 1fr 1fr !important;
  gap: 40px !important;
  padding-bottom: 40px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* text colours — bright + legible on navy */
html:root .site-footer .footer-col-heading {
  color: #ffffff !important;
  margin-bottom: 16px !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  display: flex !important; align-items: center !important; gap: 9px !important;
}
html:root .site-footer .footer-col-heading::before {
  content: "" !important; width: 16px !important; height: 2px !important;
  background: var(--accent) !important; flex: none !important; display: block !important;
}
html:root .site-footer .footer-brand-desc { color: #aeb9c9 !important; font-size: 13px !important; line-height: 1.7 !important; margin-top: 14px !important; }
/* stop the brand logo stretching in column-flex wrappers */
html:root .site-footer .footer-logo-wrap { align-items: flex-start !important; }
html:root .site-footer .footer-logo-wrap img { width: auto !important; max-width: 150px !important; align-self: flex-start !important; }
html:root .site-footer .footer-nav-list { display: flex !important; flex-direction: column !important; gap: 4px !important; }
html:root .site-footer .footer-nav-list li a { color: #cbd5e1 !important; }
html:root .site-footer .footer-nav-list li a:hover { color: #ffffff !important; }
html:root .site-footer .footer-email-row,
html:root .site-footer .footer-hotline-hours,
html:root .site-footer .footer-location-address,
html:root .site-footer .footer-location-arrow,
html:root .site-footer .footer-status-row,
html:root .site-footer .footer-ira-text span { color: #aeb9c9 !important; }
html:root .site-footer .footer-bottom-bar p { color: #9aa7bc !important; }
html:root .site-footer .footer-email-row:hover { color: #ffffff !important; }
html:root .site-footer .footer-hotline-number,
html:root .site-footer .footer-location-title { color: #ffffff !important; }
html:root .site-footer .footer-ira-text strong { color: #ffffff !important; }
html:root .footer-cta-hero { border-color: rgba(255,255,255,0.08) !important; }
html:root .footer-cta-title { color: #fff !important; }
html:root .footer-cta-copy { color: rgba(255,255,255,0.82) !important; }

/* surfaces */
html:root .footer-logo-box, html:root .footer-social-btn, html:root .footer-ira-badge,
html:root .footer-nav-icon, html:root .footer-email-icon,
html:root .footer-location-link {
  background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.1) !important; box-shadow: none !important;
}
html:root .footer-social-btn { color: #cbd5e1 !important; }
html:root .footer-social-btn:hover { background: rgba(255,122,26,0.16) !important; border-color: rgba(255,122,26,0.35) !important; color: #ff9c4a !important; }
html:root .footer-location-link:hover { border-color: rgba(255,122,26,0.4) !important; background: rgba(255,255,255,0.07) !important; }
html:root .footer-location-icon { background: rgba(255,122,26,0.16) !important; color: #ff9c4a !important; }
html:root .footer-hotline-card {
  background: rgba(255,122,26,0.1) !important; border-color: rgba(255,122,26,0.28) !important; box-shadow: none !important;
}
html:root .footer-hotline-label { color: #ff9c4a !important; }
html:root .footer-bottom-bar { border-top-color: rgba(255,255,255,0.08) !important; }
html:root .footer-hotline-center { max-width: 480px !important; margin: 24px auto 0 !important; }
html:root .footer-location-section { margin-top: 22px !important; padding-top: 22px !important; }
html:root .footer-location-grid { grid-template-columns: repeat(2, minmax(0, 300px)) !important; justify-content: center !important; gap: 14px !important; }
html:root .footer-bottom-bar { margin-top: 24px !important; }

/* ── Footer responsive ── */
@media (max-width: 900px) {
  html:root .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 30px 24px !important; }
}
@media (max-width: 560px) {
  html:root .site-footer { padding: 40px 20px 0 !important; }
  /* brand block full width; the three link columns stay 2-up so the footer isn't a mile long */
  html:root .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 26px 18px !important; }
  html:root .footer-grid > :first-child { grid-column: 1 / -1 !important; }
  html:root .footer-col-heading { margin-bottom: 12px !important; }
  html:root .site-footer .footer-nav-list li a { font-size: 13px !important; padding: 3px 0 !important; }
  html:root .footer-location-grid { grid-template-columns: 1fr !important; }
  html:root .footer-hotline-center { margin-top: 24px !important; }
  html:root .footer-bottom-bar { flex-direction: column !important; align-items: center !important; gap: 10px !important; text-align: center !important; padding: 18px 0 !important; }
  html:root .footer-bottom-bar p { font-size: 11px !important; line-height: 1.6 !important; }
}
@media (max-width: 380px) {
  html:root .footer-grid { grid-template-columns: 1fr !important; }
}
.footer-location-address, .footer-location-arrow { color: #94a3b8 !important; }
.footer-location-icon { background: rgba(255,122,26,0.16) !important; color: #ff9c4a !important; }

/* ─────────────────────────────────────────────
   8b. Mobile fixes
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  /* coverage marquee: the inline overflow wrapper blocked the 2-col grid */
  .marquee-wrap > div { display: contents !important; }
  .marquee-wrap { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .marquee-wrap .ins-card { padding-bottom: 62% !important; }
  .marquee-fade::before, .marquee-fade::after { display: none !important; }

  /* tighten hero rhythm */
  .hero-shell h1, .about-shell h1 { font-size: clamp(1.9rem, 7vw, 2.4rem) !important; }

  /* how-it-works stepper: comfortable single column */
  .hiw-steps { gap: 10px !important; row-gap: 56px !important; }
  .hiw-step { padding: 44px 18px 24px !important; }

  /* trust strips: smaller, wrap tidily */
  .trust-strip .flex, .about-trust-strip { font-size: 0.72rem !important; }
}

/* ─────────────────────────────────────────────
   9. Reduced-motion safety
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ─────────────────────────────────────────────
   10. Navigation — shared bar + mobile menu
   Selectors carry #mobile-menu / html:root so they beat the
   `:root:not(.dark) #mobile-menu …` rules in theme.css and the
   per-page inline <style> blocks.
   ───────────────────────────────────────────── */

/* Calmer glass; blur(20px) is expensive on mid-range phones */
html:root .nav-frame {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: box-shadow .25s ease, border-color .25s ease;
}
/* .nav-blur is a decorative sheen on top of .nav-frame — a second stacked
   backdrop-filter just costs a compositor pass and (because the panel below is
   unpositioned) blurred the open mobile menu's own content. */
html:root .nav-blur {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 0 !important;
}

/* Header lifts slightly once the page is scrolled */
html:root header.is-scrolled .nav-frame {
  border-color: var(--t-border2) !important;
  box-shadow: inset 0 1px 0 var(--t-nav-inset), 0 10px 30px var(--t-shadow) !important;
}

/* ── Mobile menu panel ── */
html:root #mobile-menu.mobile-menu {
  position: relative !important;   /* paint above .nav-blur */
  z-index: 2 !important;
  background: var(--t-mobile-bg) !important;
  border-top: 1px solid var(--t-border) !important;
  padding: 0 12px !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transition: max-height .28s cubic-bezier(.22,1,.36,1), opacity .18s ease, padding .28s cubic-bezier(.22,1,.36,1);
}
html:root #mobile-menu.mobile-menu.is-open {
  max-height: min(74vh, 640px);
  opacity: 1;
  overflow-y: auto;
  padding: 10px 12px 14px !important;
}

/* ── Menu links: 50px rows, comfortable thumb targets ── */
html:root #mobile-menu .mnav-list { display: flex !important; flex-direction: column !important; gap: 2px !important; }
html:root #mobile-menu .mnav-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 50px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--t-text) !important;
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease !important;
  -webkit-tap-highlight-color: transparent;
}
html:root #mobile-menu .mnav-link:hover,
html:root #mobile-menu .mnav-link:active {
  background: var(--t-bg-soft) !important;
  color: var(--t-heading) !important;
}
html:root #mobile-menu .mnav-ico { font-size: 20px !important; color: var(--t-muted) !important; flex: none !important; }
html:root #mobile-menu .mnav-text { flex: 1 1 auto !important; }
/* Fixed box so a slow-loading icon font shows nothing rather than the raw
   "chevron_right" ligature text blowing out the row. */
html:root #mobile-menu .mnav-chev {
  font-size: 18px !important;
  color: var(--t-muted) !important;
  opacity: .45 !important;
  flex: none !important;
  width: 18px !important;
  overflow: hidden !important;
}
html:root #mobile-menu .mnav-ico { width: 20px !important; overflow: hidden !important; }

html:root #mobile-menu .mnav-link.is-active {
  background: rgba(255,122,26,0.1) !important;
  color: var(--accent) !important;
}
html:root #mobile-menu .mnav-link.is-active .mnav-ico { color: var(--accent) !important; }
html:root #mobile-menu .mnav-link.is-active .mnav-chev { opacity: 0 !important; }

/* ── Stacked full-width CTAs ── */
html:root #mobile-menu .mnav-actions {
  display: grid !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--t-border) !important;
}
html:root #mobile-menu .mnav-cta {
  display: grid !important;
  place-items: center !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease !important;
  -webkit-tap-highlight-color: transparent;
}
html:root #mobile-menu .mnav-cta--primary {
  background: var(--accent) !important;
  color: #ffffff !important;
  border: 1px solid var(--accent) !important;
}
html:root #mobile-menu .mnav-cta--primary:hover,
html:root #mobile-menu .mnav-cta--primary:active { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
html:root #mobile-menu .mnav-cta--ghost {
  background: transparent !important;
  border: 1px solid var(--t-border2) !important;
  color: var(--t-heading) !important;
}
html:root #mobile-menu .mnav-cta--ghost:hover,
html:root #mobile-menu .mnav-cta--ghost:active { background: var(--t-bg-soft) !important; }

/* ── Footer row: tap-to-call + theme switch ── */
html:root #mobile-menu .mnav-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--t-border) !important;
}
html:root #mobile-menu .mnav-call {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 0 10px 0 4px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--t-subtle) !important;
  text-decoration: none !important;
}
html:root #mobile-menu .mnav-call .material-symbols-outlined { font-size: 19px !important; color: var(--accent) !important; }
html:root #mobile-menu .mnav-call:hover { background: var(--t-bg-soft) !important; color: var(--t-heading) !important; }
html:root #mobile-menu .mnav-theme {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  flex: none !important;
  border-radius: 12px !important;
  border: 1px solid var(--t-border2) !important;
  background: var(--t-bg-soft) !important;
  color: var(--t-subtle) !important;
  cursor: pointer;
}
html:root #mobile-menu .mnav-theme:hover { color: var(--t-heading) !important; }
html:root #mobile-menu .mnav-theme .material-symbols-outlined { font-size: 20px !important; }

/* ── Bar sizing on small screens ── */
@media (max-width: 767px) {
  html:root header.fixed { padding: 10px 10px 0 !important; }
  html:root .nav-frame { border-radius: 18px !important; }
  html:root .nav-frame > div.relative { padding: 9px 10px 9px 12px !important; }
  html:root header a > img[alt*="OPIB"] { height: 40px !important; }
  html:root .js-mobile-menu-toggle { height: 42px !important; width: 42px !important; border-radius: 12px !important; }
  html:root .js-mobile-menu-toggle .material-symbols-outlined { font-size: 22px !important; }
}
@media (max-width: 360px) {
  html:root header a > img[alt*="OPIB"] { height: 34px !important; }
}

/* Body is position:fixed while the menu is open — keep it from flashing white */
html:root body.nav-open { overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  html:root #mobile-menu.mobile-menu { transition: none !important; }
}