/* ReignVoIP v2 — light theme on the v1 palette (css/styles.css). Loaded after the v2 files; v2-light.css follows. */
:root {
  --ink: #ffffff;
  --navy: #ffffff;
  --navy-2: #f8fafc;
  --gold: #2563eb;            /* accent token (name kept from the dark build): v1 blue */
  --gold-soft: #38bdf8;
  --gold-glow: rgba(37, 99, 235, .18);
  --sky: #38bdf8;
  --paper: #0f172a;
  --mist: #64748b;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;

  --v2-bg: #ffffff;
  --v2-card: #ffffff;
  --v2-border: #e2e8f0;
  --v2-text: #0f172a;
  --v2-muted: #64748b;
  color-scheme: light;
}

html, body { background: #ffffff; overflow-x: clip; max-width: 100%; }
/* hide the page scrollbar (scrolling still works; the waveform under the header shows progress) */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* decorative glows must never widen the page (iOS Safari ignores body overflow-x) */
.v2-section, .callpath, .stats2, .signal, .kmarq, .hgal, .section, .final-cta, .rate-calculator-section { overflow-x: clip; }
::selection { background: #2563eb; color: #fff; }

/* ---------- Type ---------- */
.section-title, .hero2-title, .final-cta-title, .suite-copy h3, .person-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}
.section-title { font-size: clamp(1.7rem, 3.4vw, 2.75rem); line-height: 1.12; }
.hero2-title { font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1.06; font-weight: 800; }
.hero2-title em { background: none; -webkit-background-clip: initial; background-clip: initial; color: inherit; }
.section-label { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 700; color: #2563eb; }
.section-label::before { display: none; }

/* ---------- Surfaces: white, with a light-grey band every other v2 block ---------- */
.v2-section { background: #ffffff; }
#signal, #dial, #team, #events, #office, .stats2 { background: #f8fafc; }
.v2-section + .v2-section, .v2-section + .section, .section + .v2-section { border-top: 1px solid var(--line); }
.v2-glow { opacity: .07; }

/* ---------- Buttons (v1 primary gradient for the v2 CTA class) ---------- */
.btn-gold { background: linear-gradient(135deg, #2563eb, #38bdf8); color: #fff; box-shadow: 0 10px 28px rgba(37, 99, 235, .25); }
.btn-gold:hover { color: #fff; box-shadow: 0 14px 34px rgba(37, 99, 235, .32); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }

/* ---------- Wordmark logo (text only; "VoIP" = v1 accent #38bdf8) ---------- */
.wordmark {
  display: inline-flex; align-items: center; gap: 0; text-decoration: none;
  font-family: 'Cinzel', 'Sora', 'Manrope', serif; font-weight: 700; font-size: 32px; line-height: 1;
  letter-spacing: 0.03em; white-space: nowrap; padding: 6px 0;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}
.wordmark .wm-reign { color: #170b06; }
.wordmark .wm-voip { color: #ca903d; background: linear-gradient(180deg, #f8d05f 0%, #e5ad54 34%, #ca903d 62%, #9e6725 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.footer .wordmark .wm-reign { color: #ffffff; }
.footer .wordmark .wm-voip { background: linear-gradient(180deg, #ffe58a 0%, #f8d05f 38%, #e5ad54 68%, #ca903d 100%); -webkit-background-clip: text; background-clip: text; }
.wordmark--sm { font-size: 26px; }
/* emblem sits to the left of the wordmark, vertically centred */
.wordmark .wm-mark { height: 50px; width: auto; margin: 0 10px 0 0; flex: none; display: block; transform: translate(0px, -4px); }
.wordmark--sm .wm-mark { height: 42px; margin-right: 8px; transform: translate(0px, -3px); }
@media (max-width: 640px) { .wordmark .wm-mark { height: 44px; margin-right: 8px; transform: translate(0px, -3px); } }
/* comparison variant: open the page with ?wm=unbounded */
.wm-alt .wordmark { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.01em; }
.wm-alt .wordmark--sm { font-size: 21px; }
@media (max-width: 640px) {
  .wordmark { font-size: 27px; }
  .wm-alt .wordmark { font-size: 21px; }
}

/* ---------- Labels: sentence case, no tracking ---------- */
.person-role, .event-tag, .marquee2-cap, .mini-row.head { text-transform: none; letter-spacing: 0; }
.person-role { font-size: .85rem; }
.event-tag { font-size: .8rem; }
.marquee2-cap { font-size: .9rem; margin-bottom: 18px; }

/* events ticker: big plain words, gold dots between, no pills */
.marquee2 { padding: 34px 0 38px; }
.marquee2-track { gap: 0; animation-duration: 70s; }
.marquee2-track span {
  padding: 0; border: 0; border-radius: 0; background: none;
  font: 700 clamp(1.5rem, 2.8vw, 2.5rem)/1.1 var(--font-display); letter-spacing: -.01em; color: var(--paper);
}
.marquee2-track span::after { content: "•"; color: var(--gold); margin: 0 .7em; }

/* events: same grid, no boxes, bigger type */
.events-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 36px 40px; }
.event, .event:hover { background: none; border: 0; border-radius: 0; padding: 0; transform: none; overflow: visible; }
.event::before { display: none; }
.event-tag { font-size: .95rem; margin-bottom: 8px; }
.event h4 { font: 700 clamp(1.4rem, 2.2vw, 1.9rem)/1.2 var(--font-display); letter-spacing: -0.01em; margin: 0 0 10px; }
.event-part { font-size: .95rem; }
.event-part svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .events-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; } .event h4 { font-size: 1.15rem; } }

/* coverage map without the rate list */
.coverage-grid { grid-template-columns: 1fr !important; max-width: 980px; margin-left: auto; margin-right: auto; }
.map-cta { display: flex; justify-content: center; margin-top: 8px; }

/* contacts: 4 cards in a row (photo removed) */
.office-grid--cards { display: block; }
.office-grid--cards .contact-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.office-grid--cards .contact-card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px 22px; height: 100%; }
.office-grid--cards .contact-card:hover { transform: translateY(-4px); }
.office-grid--cards .contact-card strong { word-break: break-word; }
@media (max-width: 1024px) { .office-grid--cards .contact-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .office-grid--cards .contact-list { grid-template-columns: 1fr; } }

/* language dropdown */
.langm-hidden { display: none !important; }
.langm { position: relative; }
.langm-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: #ffffff; color: var(--paper);
  font: 600 .95rem/1 var(--font-family, Manrope); cursor: pointer; transition: border-color .2s, background .2s;
}
.langm-btn:hover, .langm.is-open .langm-btn { border-color: var(--gold); background: rgba(37, 99, 235, .05); }
.langm-btn > svg:first-child { width: 18px; height: 18px; color: var(--mist); }
.langm-chev { width: 12px; height: 12px; transition: transform .2s; }
.langm.is-open .langm-chev { transform: rotate(180deg); }
.langm-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 300; min-width: 220px; max-height: min(70vh, 520px); overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none; /* still scrolls with wheel / touch / keys, just no visible bar */
  margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: var(--navy); border: 1px solid var(--line-strong);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .14); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.langm-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
.langm.is-open .langm-list { opacity: 1; visibility: visible; transform: none; }
.langm-list [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; outline: none; }
.langm-list [role="option"]:hover, .langm-list [role="option"]:focus-visible { background: #f1f5f9; }
.langm-list [aria-selected="true"] { background: rgba(37, 99, 235, .08); }
.langm-text b { display: block; color: var(--paper); font-weight: 700; font-size: .98rem; }
.langm-list [aria-selected="true"] .langm-text b { color: var(--gold); }
.langm-text small { display: block; color: var(--mist); font-size: .74rem; margin-top: 2px; }
.langm-tick { width: 16px; height: 16px; color: var(--gold); opacity: 0; flex: none; }
.langm-list [aria-selected="true"] .langm-tick { opacity: 1; }
.header-actions .langm { flex: none; }
@media (max-width: 1024px) { .header-actions .langm { display: none; } }
/* inside the mobile menu the list opens in place */
.mobile-menu .langm-list { position: static; margin-top: 8px; box-shadow: none; display: none; }
.mobile-menu .langm.is-open .langm-list { display: block; }
.mobile-menu .langm-btn { width: 100%; justify-content: flex-start; }
.mobile-menu .langm-chev { margin-left: auto; }

/* cookie consent banner */
.consent {
  position: fixed; left: 50%; bottom: 20px; z-index: 1500; width: min(760px, calc(100% - 32px));
  transform: translate(-50%, 20px); opacity: 0; visibility: hidden; transition: opacity .35s, transform .35s, visibility .35s;
  display: flex; gap: 18px; align-items: center; padding: 18px 20px; border-radius: 18px;
  background: #ffffff; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(15, 23, 42, .16); color: var(--paper);
}
.consent.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.consent p { margin: 0; font-size: .92rem; line-height: 1.55; color: #475569; flex: 1; }
.consent a { color: var(--gold); text-decoration: underline; }
.consent-actions { display: flex; gap: 10px; flex: none; }
.consent-actions .btn { padding: 11px 18px; font-size: .9rem; }
@media (max-width: 640px) { .consent { flex-direction: column; align-items: stretch; bottom: 12px; } .consent-actions .btn { flex: 1; } }

/* legal pages */
.legal { padding: 64px 0 96px; }
.legal .container { max-width: 820px; }
.legal h1 { font: 700 clamp(2rem, 4vw, 3rem)/1.1 var(--font-display); color: var(--paper); margin: 0 0 10px; }
.legal .updated { color: var(--mist); margin: 0 0 40px; font-size: .95rem; }
.legal h2 { font: 700 1.3rem/1.3 var(--font-display); color: var(--paper); margin: 40px 0 12px; }
.legal p, .legal li { color: #334155; line-height: 1.75; font-size: 1rem; }
.legal ul { list-style: disc; padding-left: 22px; margin: 0 0 12px; }
.legal a { color: var(--gold); }
.legal table { width: 100%; border-collapse: collapse; margin: 12px 0 8px; font-size: .95rem; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); color: #334155; vertical-align: top; }
.legal th { color: var(--paper); }
@media (max-width: 640px) { .legal table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .legal th, .legal td { min-width: 120px; } }
.legal-lang { display: none; }
.legal-lang.is-active { display: block; }
.legal-head { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--line); }
.legal-head .container { max-width: 1120px; display: flex; align-items: center; justify-content: space-between; height: 72px; }
.legal-foot { border-top: 1px solid var(--line); padding: 28px 0; color: var(--mist); font-size: .9rem; }
.legal-foot .container { max-width: 1120px; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; }
.legal-foot a { color: var(--paper); }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.legal-links[hidden] { display: none; }
.legal-links a[aria-current="page"] { color: var(--gold); }

/* timeline milestone title */
.tl-text b { display: block; font: 700 1.1rem/1.3 var(--font-display); color: var(--paper); margin-bottom: 6px; }
.tl-text span { color: var(--mist); }


/* ---------- Waveform scroll progress ---------- */
.wave-progress { position: fixed; top: var(--header-height); left: 0; right: 0; height: 14px; z-index: 99; pointer-events: none; opacity: .9; }
.wave-progress svg { width: 100%; height: 100%; display: block; }
.wave-progress .wp-base { stroke: rgba(15, 23, 42, .08); }
.wave-progress .wp-fill { stroke: var(--gold); }

@media (prefers-reduced-motion: reduce) { .wave-progress { display: none; } }