/*
 * Sanvoice design layer — gold leads.
 *
 * Gold carries emphasis (rules, prices, badges, primary buttons); the logo blue
 * stays reserved for the brand mark and links so the two never compete. Ink
 * panels give the page its one rich moment, as the printed brochure does.
 *
 * Component styles are namespaced .sv-* so they cannot collide with Elementor
 * or the Solace theme. Only the handful of rules under "global polish" reach
 * outside that namespace.
 */

:root {
  --sv-gold: #D9A441;
  --sv-gold-deep: #A8761C;
  --sv-gold-text: #8F6516;
  --sv-gold-tint: #FBF3E2;
  --sv-ink: #0A1622;
  --sv-navy: #0F2036;
  --sv-blue: #0B6FE8;
  --sv-head: #0A1622;
  --sv-text: #4E5A69;
  --sv-muted: #7A8797;
  --sv-line: #E4E9EF;
  --sv-tint: #F6F8FC;
  --sv-radius: 12px;
  --sv-display: 'Avenir Next', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --sv-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --sv-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- shared bits ---------- */
.sv-eyebrow {
  font-family: var(--sv-body);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sv-gold-text);
  margin: 0 0 6px;
}
.sv-rule { width: 64px; height: 4px; background: var(--sv-gold); border-radius: 2px; margin: 14px 0 20px; }
.sv-h { font-family: var(--sv-display); color: var(--sv-head); letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.sv-lede { color: var(--sv-text); max-width: 62ch; }

.sv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 8px; text-decoration: none;
  font-family: var(--sv-body); font-weight: 600; font-size: .95rem;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.sv-btn:hover { transform: translateY(-1px); }
.sv-btn--gold { background: var(--sv-gold); color: #1B1305; box-shadow: 0 8px 20px -12px rgba(168,118,28,.9); }
.sv-btn--gold:hover { background: #E4B35A; color: #1B1305; }
.sv-btn--ink { background: var(--sv-ink); color: #fff; }
.sv-btn--out { border-color: var(--sv-line); color: var(--sv-head); }
.sv-btn--out:hover { border-color: var(--sv-gold); color: var(--sv-gold-text); }

/* Local acquisition layer */
.sv-proofbar { background: var(--sv-ink); color: #fff; }
.sv-proofbar .sv-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding-block: 0; }
.sv-proofbar .sv-wrap > div { padding: 20px 18px; border-left: 1px solid #26394C; }
.sv-proofbar strong { display: block; color: var(--sv-gold); font-family: var(--sv-mono); font-size: .68rem; letter-spacing: .08em; }
.sv-proofbar span { display: block; margin-top: 6px; color: #C0CEDA; font-size: .82rem; line-height: 1.35; }
.sv-local { background: linear-gradient(135deg, #F7F9FC 0%, #EEF3F8 100%); }
.sv-local__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 52px; align-items: center; }
.sv-local__card { position: relative; overflow: hidden; padding: 32px; background: var(--sv-ink); border-radius: 18px; color: #fff; box-shadow: 0 24px 55px -35px rgba(10,22,34,.7); }
.sv-local__pin { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--sv-gold); color: var(--sv-ink); font-family: var(--sv-mono); font-weight: 800; }
.sv-local__card h3 { margin: 24px 0 8px; color: #fff; font-family: var(--sv-display); font-size: 1.35rem; }
.sv-local__card p { color: #B8C8D6; line-height: 1.65; }
.sv-local__card a { color: var(--sv-gold); font-weight: 700; text-decoration: none; }

.sv-section { padding: 8px 0 24px; }
.sv-head-block { max-width: 60ch; margin-bottom: 30px; }
.sv-head-block h1 { font-family: var(--sv-display); color: var(--sv-head); font-size: clamp(1.9rem,4vw,2.6rem); line-height: 1.1; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.sv-head-block p:last-child { color: var(--sv-muted); margin: 0; }

/* ---------- routing panel ---------- */
.sv-routing { background: var(--sv-ink); border-radius: var(--sv-radius); padding: 24px; color: #E8EEF4; }
.sv-routing .sv-eyebrow { color: var(--sv-gold); }
.sv-routing__scen { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 16px; }
.sv-routing__scen button {
  font-family: var(--sv-mono); font-size: .72rem; padding: 6px 12px;
  border-radius: 999px; border: 1px solid #24374B; background: transparent;
  color: #96A9BB; cursor: pointer;
}
.sv-routing__scen button[aria-pressed="true"] { background: var(--sv-gold); color: #1B1305; border-color: var(--sv-gold); }
.sv-node { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 9px 0; opacity: .32; transition: opacity .3s ease; }
.sv-node.is-on { opacity: 1; }
.sv-node__pip { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #24374B; display: grid; place-items: center; font-family: var(--sv-mono); font-size: .66rem; color: #96A9BB; }
.sv-node.is-on .sv-node__pip { border-color: var(--sv-gold); color: var(--sv-gold); }
.sv-node__l { font-weight: 600; font-size: .93rem; color: #fff; display: block; }
.sv-node__s { font-family: var(--sv-mono); font-size: .75rem; color: #8FA3B6; }
.sv-link { width: 1px; height: 12px; background: #24374B; margin-left: 13px; }
.sv-link.is-on { background: var(--sv-gold); }

/* ---------- resellers ---------- */
.sv-resellers {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--sv-tint); border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius); padding: 18px 24px;
}
.sv-resellers__k { font-size: .73rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sv-muted); }
.sv-resellers__brands { display: flex; gap: 20px; flex-wrap: wrap; }
.sv-resellers__brands span { font-family: var(--sv-display); font-weight: 700; font-size: .96rem; color: var(--sv-head); opacity: .78; }
.sv-resellers__years { margin-left: auto; font-family: var(--sv-mono); font-size: .78rem; color: var(--sv-gold-text); border: 1px solid var(--sv-gold); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }

/* ---------- plans ---------- */
.sv-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sv-plan {
  background: #fff; border: 1px solid var(--sv-line); border-radius: var(--sv-radius);
  padding: 26px; display: grid; gap: 12px; align-content: start;
}
.sv-plan--best { border-color: var(--sv-gold); box-shadow: 0 22px 46px -34px rgba(168,118,28,.75); }
.sv-plan__badge { justify-self: start; background: var(--sv-gold-tint); color: var(--sv-gold-text); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.sv-plan__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sv-plan__name { font-family: var(--sv-display); font-size: 1.2rem; color: var(--sv-head); margin: 0; }
.sv-plan__price { font-family: var(--sv-display); font-weight: 800; font-size: 2.05rem; color: var(--sv-head); letter-spacing: -.03em; }
.sv-plan__price span { font-family: var(--sv-body); font-size: .74rem; font-weight: 600; color: var(--sv-muted); letter-spacing: 0; }
.sv-plan__vol { margin: -4px 0 0; font-size: .84rem; font-weight: 600; color: var(--sv-gold-text); }
.sv-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .92rem; }
.sv-plan li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.sv-plan li::before { content: "✓"; color: var(--sv-gold-deep); font-weight: 700; }
.sv-fine { font-size: .81rem; color: var(--sv-muted); line-height: 1.55; margin-top: 18px; max-width: 82ch; }

/* ---------- plan capabilities ---------- */
.sv-compare-head { max-width: 66ch; margin-bottom: 26px; }
.sv-compare-head h3 { font-family: var(--sv-display); color: var(--sv-head); font-size: clamp(1.65rem, 3vw, 2.15rem); margin: 0; letter-spacing: -.035em; }
.sv-compare-head p:last-child { color: var(--sv-muted); margin: 10px 0 0; line-height: 1.65; }
.sv-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sv-capability { overflow: hidden; background: #fff; border: 1px solid var(--sv-line); border-radius: 16px; box-shadow: 0 16px 42px -36px rgba(10, 28, 46, .65); }
.sv-capability { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.sv-capability:hover { transform: translateY(-2px); border-color: #BCC9D6; box-shadow: 0 22px 48px -34px rgba(10, 28, 46, .52); }
.sv-capability:last-child { grid-column: 1 / -1; }
.sv-capability__head { min-height: 104px; padding: 22px 24px; display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(135deg, #071927 0%, #102b3e 100%); }
.sv-capability__mark { width: 9px; height: 42px; flex: 0 0 9px; border-radius: 8px; background: var(--sv-gold); }
.sv-capability__head h4 { margin: 0; color: #fff; font-family: var(--sv-display); font-size: 1.16rem; letter-spacing: -.015em; }
.sv-capability__head p { margin: 5px 0 0; color: #AFC0CF; font-size: .84rem; line-height: 1.45; }
.sv-capability__plans, .sv-capability__row { display: grid; grid-template-columns: minmax(210px, 1.75fr) repeat(3, minmax(72px, .65fr)); align-items: center; }
.sv-capability__plans { padding: 11px 20px; background: #F4F7F9; border-bottom: 1px solid var(--sv-line); color: var(--sv-muted); font-family: var(--sv-mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; }
.sv-capability__plans b { color: var(--sv-head); text-align: center; }
.sv-capability__row { min-height: 64px; padding: 0 20px; border-bottom: 1px solid #E8EDF1; }
.sv-capability__row:last-child { border-bottom: 0; }
.sv-capability__row > strong { padding: 14px 16px 14px 0; color: var(--sv-head); font-size: .86rem; font-weight: 620; line-height: 1.4; }
.sv-capability__value { justify-self: center; min-width: 64px; padding: 7px 10px; border: 1px solid transparent; border-radius: 999px; font-size: .72rem; font-weight: 750; text-align: center; }
.sv-capability__row > .sv-capability__value:nth-child(2) { background: #F7EEE3; border-color: #E8D3BA; color: #7B4B1E; }
.sv-capability__row > .sv-capability__value:nth-child(3) { background: #EEF2F6; border-color: #D8E0E8; color: #3D5266; }
.sv-capability__row > .sv-capability__value:nth-child(4) { background: #FFF4D8; border-color: #EDD79C; color: #72520A; box-shadow: inset 0 0 0 1px rgba(218,165,55,.08); }
.sv-capability__plans b:nth-of-type(1) { color: #8B572A; }
.sv-capability__plans b:nth-of-type(2) { color: #526779; }
.sv-capability__plans b:nth-of-type(3) { color: #9A6B06; }
.sv-capability__value:not(.is-empty):not(:first-of-type) { }
.sv-capability__row > .sv-capability__value.is-empty { background: transparent; border-color: transparent; box-shadow: none; color: #A8B1BA; font-size: 1rem; }
.sv-capability__row:nth-child(even) { background: #FBFCFD; }

@media (max-width: 900px) {
  .sv-capabilities { grid-template-columns: 1fr; }
  .sv-capability:last-child { grid-column: auto; }
}
@media (max-width: 650px) {
  .sv-capability__head { min-height: auto; }
  .sv-capability__plans { display: none; }
  .sv-capability__row { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px; }
  .sv-capability__row > strong { grid-column: 1 / -1; padding: 0 0 4px; }
  .sv-capability__value { width: 100%; padding: 7px 4px; }
  .sv-capability__value::before { content: attr(data-plan) "\A"; white-space: pre; color: var(--sv-muted); font-family: var(--sv-mono); font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; }
}

/* ---------- ai band ---------- */
.sv-band {
  background: var(--sv-ink); color: #B7C6DA; border-radius: var(--sv-radius);
  padding: 32px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.sv-band h3 { font-family: var(--sv-display); color: #fff; font-size: 1.4rem; margin: 0; letter-spacing: -.02em; }
.sv-band p { margin: 8px 0 0; font-size: .94rem; max-width: 58ch; }
.sv-band__right { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sv-band__price { font-family: var(--sv-display); font-weight: 800; font-size: 1.8rem; color: var(--sv-gold); }
.sv-band__price span { display: block; max-width: 18ch; font-size: .78rem; line-height: 1.3; font-weight: 600; color: #8FA3B6; }

/* ---------- service / feature grid ---------- */
.sv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sv-line); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); overflow: hidden; }
.sv-cell { background: #fff; padding: 24px; display: grid; gap: 8px; align-content: start; }
.sv-cell__n { font-family: var(--sv-mono); font-size: .72rem; color: var(--sv-gold-text); }
.sv-cell h3 { font-family: var(--sv-display); font-size: 1.05rem; color: var(--sv-head); margin: 0; }
.sv-cell p { font-size: .92rem; color: var(--sv-muted); margin: 0; }

/* ---------- web design stack ---------- */
.sv-stack { display: grid; gap: 0; }
.sv-stack > div { display: grid; grid-template-columns: 118px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--sv-line); font-size: .93rem; }
.sv-stack > div:last-child { border-bottom: 1px solid var(--sv-line); }
.sv-stack b { font-family: var(--sv-mono); font-size: .74rem; color: var(--sv-gold-text); letter-spacing: .07em; padding-top: 3px; }

/* ---------- managed print ---------- */
.sv-print-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sv-print-card { min-height: 250px; padding: 26px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sv-line); border-radius: var(--sv-radius); box-shadow: 0 8px 24px rgba(17, 42, 65, .05); }
.sv-print-card--featured { border-color: var(--sv-gold); box-shadow: 0 12px 30px rgba(17, 42, 65, .10); transform: translateY(-6px); }
.sv-print-card h3 { margin: 22px 0 8px; color: var(--sv-head); font-family: var(--sv-display); font-size: 1.25rem; }
.sv-print-card p { margin: 0; color: var(--sv-muted); line-height: 1.6; }
.sv-print-card__link { margin-top: auto; padding-top: 24px; color: var(--sv-head); font-weight: 700; text-decoration: none; }
.sv-print-card__link:hover { color: var(--sv-gold-text); }
.sv-print-note { margin-top: 18px; padding: 18px 22px; display: flex; gap: 12px; align-items: baseline; background: var(--sv-ink); border-radius: var(--sv-radius); color: #B7C6DA; font-size: .9rem; }
.sv-print-note strong { color: var(--sv-gold); font-family: var(--sv-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

@media (max-width: 900px) { .sv-print-grid { grid-template-columns: 1fr; } .sv-print-card--featured { transform: none; } }
@media (max-width: 650px) { .sv-print-note { display: block; } .sv-print-note span { display: block; margin-top: 7px; } }

/* ---------- shop grid ---------- */
.sv-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sv-prod { border: 1px solid var(--sv-line); border-radius: var(--sv-radius); overflow: hidden; background: #fff; }
.sv-prod__shot { background: var(--sv-tint); aspect-ratio: 4/3; display: grid; place-items: center; border-bottom: 1px solid var(--sv-line); position: relative; }
.sv-prod__shot img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.sv-prod__shot span { font-family: var(--sv-mono); font-size: .72rem; color: var(--sv-muted); }
.sv-prod__badge { position: absolute; top: 12px; left: 12px; background: var(--sv-gold); color: #1B1305; font-size: .67rem; font-weight: 700; letter-spacing: .06em; padding: 4px 9px; border-radius: 4px; text-transform: uppercase; }
.sv-prod__body { padding: 18px; display: grid; gap: 6px; }
.sv-prod__brand { font-family: var(--sv-mono); font-size: .71rem; color: var(--sv-muted); letter-spacing: .08em; }
.sv-prod h3 { font-family: var(--sv-display); font-size: 1.05rem; color: var(--sv-head); margin: 0; }
.sv-prod__spec { font-size: .87rem; color: var(--sv-muted); margin: 0; }
.sv-prod__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.sv-prod__price { font-family: var(--sv-display); font-weight: 800; font-size: 1.25rem; color: var(--sv-head); }
.sv-prod__price span { display: block; font-family: var(--sv-body); font-size: .72rem; font-weight: 500; color: var(--sv-muted); }
.sv-prod__fit, .sv-phone-card__service { display: inline-flex; align-items: center; gap: 7px; color: #52677A; font-size: .76rem; font-weight: 700; letter-spacing: .01em; }
.sv-prod__fit::before, .sv-phone-card__service::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sv-gold); box-shadow: 0 0 0 4px var(--sv-gold-tint); }

@media (max-width: 900px) {
  .sv-plans, .sv-grid, .sv-shop { grid-template-columns: 1fr; }
  .sv-resellers__years { margin-left: 0; }
  .sv-proofbar .sv-wrap { grid-template-columns: repeat(2, 1fr); }
  .sv-local__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- global polish (outside the namespace, deliberately small) ---------- */
.elementor-button, .wp-block-button__link { border-radius: 8px; font-weight: 600; letter-spacing: 0; }
a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .sv-btn, .sv-node { transition: none !important; }
}

/* ==========================================================================
   Full-page layout — used by the "Sanvoice — Full Design" page template.
   This replaces the theme's header, hero and footer rather than restyling
   them, because the theme's structure was what kept the old look.
   ========================================================================== */

body.sanvoice-full { background: #fff; color: var(--sv-text); font-family: var(--sv-body); margin: 0; }
body.sanvoice-full * { box-sizing: border-box; }
.sv-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* top rail */
.sv-rail { background: var(--sv-ink); color: #93A7BA; font-family: var(--sv-mono); font-size: .76rem; }
.sv-rail .sv-wrap { display: flex; gap: 10px 24px; align-items: center; flex-wrap: wrap; padding-block: 9px; }
.sv-rail b { color: #fff; font-weight: 500; }
.sv-rail .sv-rail__right { margin-left: auto; }
.sv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sv-gold); display: inline-block; margin-right: 7px; }

/* header */
.sv-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sv-line); }
.sv-header .sv-wrap { display: flex; align-items: center; gap: 26px; padding-block: 14px; }
.sv-lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sv-lockup__wm { font-family: var(--sv-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; color: var(--sv-head); }
.sv-nav { display: flex; gap: 20px; margin-left: 6px; }
.sv-nav > ul { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; }
.sv-nav li { position: relative; list-style: none; }
.sv-nav a { text-decoration: none; color: #5F6C7C; font-size: .93rem; font-weight: 500; }
.sv-nav a:hover { color: var(--sv-gold-text); }
.sv-nav__parent > a::after { content: "⌄"; margin-left: 5px; font-size: .75em; }
.sv-nav__menu { display: none; position: absolute; top: calc(100% + 12px); left: -16px; width: 260px; padding: 10px; margin: 0; background: #fff; border: 1px solid var(--sv-line); border-radius: 10px; box-shadow: 0 18px 38px -22px rgba(10,22,34,.6); }
.sv-nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.sv-nav__menu a { display: block; padding: 9px 10px; border-radius: 6px; }
.sv-nav__menu a:hover { background: var(--sv-tint); }
.sv-nav__parent:hover .sv-nav__menu, .sv-nav__parent:focus-within .sv-nav__menu { display: block; }
.sv-header__cta { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.sv-header__login { text-decoration: none; font-weight: 600; font-size: .93rem; color: var(--sv-gold-text); }
.sv-burger { display: none; background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: var(--sv-head); }
.sv-nav-toggle { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

/* hero */
.sv-hero .sv-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; padding-block: 66px; }
.sv-hero h1 { font-family: var(--sv-display); font-size: clamp(2.1rem, 4.6vw, 3.2rem); line-height: 1.05; color: var(--sv-head); margin: 0; letter-spacing: -.035em; text-wrap: balance; }
.sv-hero .sv-lede { font-size: 1.08rem; margin: 0; }
.sv-hero__cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.sv-hero__meta { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--sv-line); }
.sv-hero__meta div { font-size: .85rem; color: var(--sv-muted); }
.sv-hero__meta b { display: block; font-family: var(--sv-display); font-size: 1.05rem; color: var(--sv-head); }

/* page sections */
.sv-block { padding-block: 70px; }
.sv-block--tint { background: var(--sv-tint); border-block: 1px solid var(--sv-line); }
.sv-block h2 { font-family: var(--sv-display); font-size: clamp(1.6rem, 3vw, 2.15rem); line-height: 1.14; color: var(--sv-head); margin: 0; letter-spacing: -.03em; }
.sv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

/* support band */
.sv-support { background: var(--sv-ink); color: #9DB0C2; border-radius: var(--sv-radius); padding: 34px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.sv-support h3 { font-family: var(--sv-display); color: #fff; font-size: 1.4rem; margin: 0; }
.sv-support p { margin: 8px 0 0; max-width: 54ch; }
.sv-support .sv-btn { margin-left: auto; }

/* footer */
.sv-footer { border-top: 1px solid var(--sv-line); padding-block: 44px 56px; }
.sv-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.sv-footer h3, .sv-footer h4 { font-family: var(--sv-body); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sv-muted); font-weight: 600; margin: 0 0 12px; }
.sv-footer a { display: block; text-decoration: none; color: var(--sv-muted); font-size: .92rem; padding: 3px 0; }
.sv-footer a:hover { color: var(--sv-gold-text); }
.sv-footer address { font-style: normal; color: var(--sv-muted); font-size: .92rem; line-height: 1.75; }
.sv-footer__note { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--sv-line); display: flex; gap: 8px 24px; flex-wrap: wrap; font-size: .82rem; color: var(--sv-muted); }

@media (max-width: 900px) {
  .sv-hero .sv-wrap, .sv-cols { grid-template-columns: 1fr; gap: 34px; }
  .sv-footer__grid { grid-template-columns: 1fr 1fr; }
  .sv-nav { display: none; }
  .sv-nav.is-open { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; padding: 16px 28px; border-bottom: 1px solid var(--sv-line); }
  .sv-burger { display: block; margin-left: auto; }
  .sv-header__cta { margin-left: 0; }
  .sv-support .sv-btn { margin-left: 0; }
}

/* wp_nav_menu emits bare <li> inside our <nav> (items_wrap has no <ul>) */
.sv-nav, .sv-nav li { list-style: none; margin: 0; padding: 0; }
.sv-nav li { display: inline-flex; }
.sv-nav li a { display: inline-block; padding: 4px 0; }
.sv-nav .menu-item-has-children > a::after { content: " ▾"; font-size: .7em; opacity: .55; }

/* --------------------------------------------------------------------------
   Specificity guard. The Solace theme colours every <a> and heading globally,
   which turned gold buttons blue and made headings on ink panels invisible.
   These selectors are deliberately one step stronger than the theme's.
   -------------------------------------------------------------------------- */
body .sv-btn { text-decoration: none; }
body .sv-btn--gold, body .sv-btn--gold:visited, body .sv-btn--gold:hover { color: #1B1305; }
body .sv-btn--ink, body .sv-btn--ink:visited, body .sv-btn--ink:hover { color: #fff; }
body .sv-btn--out, body .sv-btn--out:visited { color: var(--sv-head); }
body .sv-btn--out:hover { color: var(--sv-gold-text); }

body .sv-band h3, body .sv-support h3, body .sv-routing .sv-node__l { color: #fff; }
body .sv-band p, body .sv-support p { color: #9DB0C2; }
body .sv-band__price { color: var(--sv-gold); }

body .sv-nav a, body .sv-nav a:visited { color: #5F6C7C; }
body .sv-nav a:hover { color: var(--sv-gold-text); }
body .sv-header__login, body .sv-header__login:visited { color: var(--sv-gold-text); }
body .sv-footer a, body .sv-footer a:visited { color: var(--sv-muted); }
body .sv-footer a:hover { color: var(--sv-gold-text); }
body .sv-rail a, body .sv-rail b { color: #fff; }

/* keep the top navigation on one line */
.sv-nav { gap: 16px; flex-wrap: nowrap; }
.sv-nav a { font-size: .9rem; white-space: nowrap; }
@media (max-width: 1120px) { .sv-nav { gap: 12px; } .sv-nav a { font-size: .85rem; } }

/* The theme's link colour is emitted after ours and wins on equal specificity,
   so button text colour is forced. Kept to these three declarations only. */
body .sv-btn--gold, body .sv-btn--gold:visited, body .sv-btn--gold:hover, body .sv-btn--gold:focus { color: #1B1305 !important; }
body .sv-btn--ink, body .sv-btn--ink:visited, body .sv-btn--ink:hover { color: #fff !important; }
body .sv-btn--out, body .sv-btn--out:visited { color: var(--sv-head) !important; }
.sv-header__login { white-space: nowrap; }

/* Catalogue cards: real product shot fills the frame; where we have no photo
   yet, the maker's mark sits small and quiet instead of an empty box. */
.sv-prod__shot--mark { background: #fff; }
.sv-prod__shot--mark img { max-height: 46px; width: auto; opacity: .45; padding: 0; object-fit: contain; }

/* Contact form block: the Zoho form arrives as theme/Elementor markup, so it is
   given a card to sit in and its inputs are normalised to the design. */
.sv-formwrap { background: #fff; border: 1px solid var(--sv-line); border-radius: var(--sv-radius); padding: 8px 24px 24px; }
.sv-formwrap .elementor-section, .sv-formwrap .e-con { padding-left: 0 !important; padding-right: 0 !important; }
.sv-formwrap input[type=text], .sv-formwrap input[type=email], .sv-formwrap input[type=tel], .sv-formwrap select, .sv-formwrap textarea {
	width: 100%; padding: 11px 13px; border: 1px solid var(--sv-line); border-radius: 6px;
	font-family: var(--sv-body); font-size: .95rem; background: #fff; color: var(--sv-head);
}
.sv-formwrap input:focus, .sv-formwrap textarea:focus, .sv-formwrap select:focus { outline: 2px solid var(--sv-gold); outline-offset: 1px; border-color: var(--sv-gold); }
.sv-formwrap input[type=submit], .sv-formwrap button[type=submit], .sv-formwrap .formsubmit {
	background: var(--sv-gold) !important; color: #1B1305 !important; border: 0 !important;
	padding: 12px 24px !important; border-radius: 8px !important; font-weight: 600 !important; cursor: pointer;
}
.sv-formwrap input[type=reset] { background: transparent !important; color: var(--sv-muted) !important; border: 1px solid var(--sv-line) !important; padding: 12px 20px !important; border-radius: 8px !important; }
.sv-formwrap .zcwf_title, .sv-formwrap h2, .sv-formwrap h3 { font-family: var(--sv-display); color: var(--sv-head); }

/* service cells are links now */
a.sv-cell { text-decoration: none; transition: background .15s ease; }
a.sv-cell:hover { background: var(--sv-tint); }
.sv-cell__more { font-size: .86rem; font-weight: 600; color: var(--sv-gold-text); margin-top: 4px; }

/* ---------- contact form ---------- */
.sv-form { display: grid; gap: 22px; }
.sv-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sv-field { display: grid; gap: 7px; }
.sv-field--wide { grid-column: 1 / -1; }
.sv-field label { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-muted); }
.sv-field__opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .8; }
.sv-req { color: #B4232A; }
.sv-form input[type=text], .sv-form input[type=email], .sv-form input[type=tel], .sv-form textarea {
	width: 100%; padding: 12px 14px; border: 1px solid var(--sv-line); border-radius: 8px;
	font-family: var(--sv-body); font-size: .96rem; color: var(--sv-head); background: #fff;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.sv-form input:hover, .sv-form textarea:hover { border-color: var(--sv-line-strong, #C3CDD8); }
.sv-form input:focus, .sv-form textarea:focus {
	outline: none; border-color: var(--sv-gold);
	box-shadow: 0 0 0 3px rgba(217,164,65,.22);
}
.sv-form textarea { resize: vertical; min-height: 120px; }
.sv-form input[type=file] { font-family: var(--sv-body); font-size: .9rem; color: var(--sv-muted); padding: 10px 0; }
.sv-form input[type=file]::file-selector-button {
	font-family: var(--sv-body); font-weight: 600; font-size: .88rem; color: var(--sv-head);
	background: #fff; border: 1px solid var(--sv-line); border-radius: 7px; padding: 9px 15px; margin-right: 12px; cursor: pointer;
}
.sv-form input[type=file]::file-selector-button:hover { border-color: var(--sv-gold); color: var(--sv-gold-text); }
.sv-form__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 4px; }
.sv-form__actions input[type=submit] { border: 0; cursor: pointer; font-size: .96rem; }
.sv-form__actions input[type=submit][disabled] { opacity: .55; cursor: default; }
.sv-form__note { font-size: .82rem; color: var(--sv-muted); margin: 0; }
.sv-formwrap { padding: 28px; }

@media (max-width: 720px) { .sv-form__grid { grid-template-columns: 1fr; } }

/* ---------- compact model list (handsets without photography) ---------- */
.sv-list { display: grid; gap: 0; border: 1px solid var(--sv-line); border-radius: var(--sv-radius); overflow: hidden; background: #fff; }
.sv-list__row {
	display: grid; grid-template-columns: 180px 200px 1fr auto; gap: 20px; align-items: center;
	padding: 18px 22px; border-bottom: 1px solid var(--sv-line);
}
.sv-list__row:last-child { border-bottom: 0; }
.sv-list__row:hover { background: var(--sv-tint); }
.sv-list__id h3 { font-family: var(--sv-display); font-size: 1.02rem; color: var(--sv-head); margin: 2px 0 0; }
.sv-list__lines { font-weight: 600; font-size: .9rem; color: var(--sv-gold-text); }
.sv-list__spec { font-size: .9rem; color: var(--sv-muted); }
.sv-list__cta { font-weight: 600; font-size: .89rem; color: var(--sv-gold-text); text-decoration: none; white-space: nowrap; }
.sv-list__cta:hover { text-decoration: underline; }

/* plan cards: equal height, buttons aligned along the bottom */
.sv-plans { align-items: stretch; }
.sv-plan { height: 100%; }
.sv-plan .sv-btn { margin-top: auto; }
.sv-plan ul { margin-bottom: 4px; }

@media (max-width: 860px) {
	.sv-list__row { grid-template-columns: 1fr; gap: 6px; }
	.sv-list__cta { justify-self: start; margin-top: 6px; }
}

/* ---------- complete IP phone catalogue ---------- */
.sv-phone-page { background: linear-gradient(180deg, #fff 0, #f7f9fc 34%, #fff 100%); }
.sv-phone-brand { margin-top: 64px; }
.sv-phone-brand + .sv-phone-brand { padding-top: 64px; border-top: 1px solid var(--sv-line); }
.sv-phone-brand__head { display: grid; grid-template-columns: minmax(260px,.8fr) 1.2fr; gap: 36px; align-items: end; margin-bottom: 26px; }
.sv-phone-brand__head h2 { font-family: var(--sv-display); color: var(--sv-head); font-size: clamp(1.65rem,3vw,2.25rem); margin: 4px 0 0; letter-spacing: -.03em; }
.sv-phone-brand__head > p { color: var(--sv-muted); margin: 0; max-width: 62ch; }
.sv-phone-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; align-items: stretch; }
.sv-phone-card { background: #fff; border: 1px solid var(--sv-line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 12px 34px -28px rgba(17,38,65,.55); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.sv-phone-card:hover { transform: translateY(-3px); border-color: #c6d2df; box-shadow: 0 22px 42px -29px rgba(17,38,65,.65); }
.sv-phone-card__image { height: 260px; overflow: hidden; background: #f5f6f8; position: relative; border-bottom: 1px solid var(--sv-line); }
.sv-phone-card__image img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 18px; }
.sv-phone-card__body { padding: 20px; display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.sv-phone-card__body h3 { font-family: var(--sv-display); color: var(--sv-head); font-size: 1.3rem; margin: 5px 0 2px; }
.sv-phone-card__body p { color: var(--sv-muted); font-size: .9rem; line-height: 1.55; margin: 8px 0 0; }
.sv-phone-card__body .sv-phone-card__role { color: var(--sv-head); font-weight: 650; margin-top: 2px; }
.sv-phone-card__cta { color: var(--sv-gold-text); font-weight: 700; font-size: .88rem; text-decoration: none; margin-top: auto; padding-top: 18px; }
.sv-phone-card__cta:hover { text-decoration: underline; }
.sv-phone-note { margin: 36px 0 28px; padding: 18px 20px; color: var(--sv-muted); background: var(--sv-gold-tint); border: 1px solid var(--sv-gold); border-radius: 10px; font-size: .9rem; }
.sv-phone-note strong { color: var(--sv-head); }
@media (max-width: 980px) { .sv-phone-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } .sv-phone-card__image { height: 220px; } .sv-phone-card__body { padding: 17px; } }
@media (max-width: 650px) { .sv-phone-brand__head, .sv-phone-grid { grid-template-columns: 1fr; } .sv-phone-brand__head { gap: 12px; } .sv-phone-brand { margin-top: 42px; } .sv-phone-brand + .sv-phone-brand { padding-top: 42px; } .sv-phone-card__image { height: 210px; } .sv-phone-card__body h3 { font-size: 1.2rem; } .sv-phone-card__body p { font-size: .88rem; } }

/* ==========================================================================
   Account hub — the page the whole project exists for.
   ========================================================================== */
.sv-account { display: grid; gap: 30px; }
.sv-account__welcome {
	background: var(--sv-gold-tint); border: 1px solid var(--sv-gold);
	color: var(--sv-gold-text); border-radius: var(--sv-radius); padding: 14px 18px; font-weight: 500;
}

.sv-account__head {
	background: var(--sv-ink); border-radius: var(--sv-radius); padding: 32px;
	display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
}
.sv-account__head h1 { font-family: var(--sv-display); color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin: 6px 0 0; letter-spacing: -.03em; }
.sv-account__meta { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center; margin-top: 16px; color: #93A7BA; font-size: .9rem; }
.sv-account__meta b { color: #fff; font-family: var(--sv-mono); font-weight: 500; }
.sv-account__logout { margin-left: auto; color: #93A7BA; font-size: .9rem; font-weight: 600; text-decoration: none; }
body .sv-account__logout:hover { color: var(--sv-gold); }

.sv-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: rgba(217,164,65,.16); color: var(--sv-gold); }
.sv-pill--active, .sv-pill--paid { background: rgba(63,182,148,.16); color: #55C6A4; }
.sv-pill--overdue, .sv-pill--provisioning_failed { background: rgba(224,90,90,.16); color: #F08585; }

/* the two doors */
.sv-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sv-door {
	background: #fff; border: 1px solid var(--sv-line); border-radius: var(--sv-radius);
	padding: 28px; display: grid; gap: 10px; align-content: start; position: relative;
}
.sv-door:hover { border-color: var(--sv-gold); }
.sv-door__n { font-family: var(--sv-mono); font-size: .74rem; color: var(--sv-gold-text); letter-spacing: .1em; }
.sv-door h2 { font-family: var(--sv-display); font-size: 1.3rem; color: var(--sv-head); margin: 0; letter-spacing: -.02em; }
.sv-door p { font-size: .93rem; color: var(--sv-muted); margin: 0; }
.sv-door__figure {
	font-family: var(--sv-display) !important; font-weight: 800; font-size: 1.7rem;
	color: var(--sv-head) !important; margin: 8px 0 4px !important; letter-spacing: -.03em;
}
.sv-door__figure span { display: block; font-family: var(--sv-body); font-size: .8rem; font-weight: 500; color: var(--sv-muted); letter-spacing: 0; }
.sv-door__pending { color: var(--sv-gold-text) !important; font-weight: 500; background: var(--sv-gold-tint); border-radius: 8px; padding: 12px 14px; margin-top: 6px !important; }
.sv-door .sv-btn { justify-self: start; margin-top: 6px; }

/* invoices */
.sv-account__section h2 { font-family: var(--sv-display); font-size: 1.4rem; color: var(--sv-head); margin: 0 0 16px; letter-spacing: -.02em; }
.sv-table-scroll { overflow-x: auto; border: 1px solid var(--sv-line); border-radius: var(--sv-radius); background: #fff; }
.sv-invoices { width: 100%; border-collapse: collapse; min-width: 720px; }
.sv-invoices th, .sv-invoices td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--sv-line); white-space: nowrap; font-size: .92rem; }
.sv-invoices tr:last-child td { border-bottom: 0; }
.sv-invoices th { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-muted); font-weight: 600; }
.sv-invoices td { font-variant-numeric: tabular-nums; color: var(--sv-head); }

.sv-account__help {
	background: var(--sv-tint); border: 1px solid var(--sv-line); border-radius: var(--sv-radius);
	padding: 26px 28px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.sv-account__help h3 { font-family: var(--sv-display); font-size: 1.15rem; color: var(--sv-head); margin: 0; }
.sv-account__help p { margin: 6px 0 0; font-size: .92rem; color: var(--sv-muted); max-width: 60ch; }
.sv-account__help-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 860px) {
	.sv-doors { grid-template-columns: 1fr; }
	.sv-account__logout, .sv-account__help-actions { margin-left: 0; }
}

/* ---------- customer sign-in ---------- */
.sv-login { display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; border: 1px solid var(--sv-line); border-radius: var(--sv-radius); overflow: hidden; }
.sv-login__panel { background: var(--sv-ink); color: #9DB0C2; padding: 40px; }
.sv-login__panel h1 { font-family: var(--sv-display); color: #fff; font-size: 1.9rem; line-height: 1.1; margin: 8px 0 14px; letter-spacing: -.03em; }
.sv-login__panel p { margin: 0; font-size: .96rem; }
.sv-login__panel ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; font-size: .93rem; }
.sv-login__panel li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; color: #C6D3E0; }
.sv-login__panel li::before { content: "✓"; color: var(--sv-gold); font-weight: 700; }

.sv-login__form { background: #fff; padding: 40px; }
.sv-login__form h2 { font-family: var(--sv-display); font-size: 1.35rem; color: var(--sv-head); margin: 0 0 18px; letter-spacing: -.02em; }
.sv-login__error { background: #FDECEC; border: 1px solid #E9B6B6; color: #7F1D1D; border-radius: 8px; padding: 12px 14px; font-size: .9rem; margin: 0 0 16px; }
.sv-login__form .login-username, .sv-login__form .login-password { display: grid; gap: 7px; margin-bottom: 16px; }
.sv-login__form label { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-muted); }
.sv-login__form input[type=text], .sv-login__form input[type=password] {
	width: 100%; padding: 12px 14px; border: 1px solid var(--sv-line); border-radius: 8px;
	font-family: var(--sv-body); font-size: .96rem; color: var(--sv-head); background: #fff;
}
.sv-login__form input[type=text]:focus, .sv-login__form input[type=password]:focus {
	outline: none; border-color: var(--sv-gold); box-shadow: 0 0 0 3px rgba(217,164,65,.22);
}
.sv-login__form .login-remember { margin-bottom: 18px; font-size: .9rem; color: var(--sv-muted); }
.sv-login__form .login-remember label { font-size: .9rem; letter-spacing: 0; text-transform: none; font-weight: 400; }
body .sv-login__form .button, body .sv-login__form input[type=submit] {
	background: var(--sv-gold) !important; color: #1B1305 !important; border: 0 !important;
	padding: 12px 26px !important; border-radius: 8px !important; font-family: var(--sv-body) !important;
	font-weight: 600 !important; font-size: .96rem !important; cursor: pointer; width: 100%;
	box-shadow: 0 8px 20px -12px rgba(168,118,28,.9); text-shadow: none !important; height: auto !important; line-height: 1.4 !important;
}
.sv-login__links { margin: 18px 0 0; font-size: .9rem; display: flex; gap: 10px; flex-wrap: wrap; }
body .sv-login__links a { color: var(--sv-gold-text); font-weight: 600; text-decoration: none; }
body .sv-login__links a:hover { text-decoration: underline; }
.sv-login__links span { color: var(--sv-line-strong, #C3CDD8); }

@media (max-width: 860px) { .sv-login { grid-template-columns: 1fr; } .sv-login__panel, .sv-login__form { padding: 28px; } }

/* call records: secondary link on the door, muted result pill */
.sv-door__secondary { display: inline-block; margin-top: 10px; font-size: .88rem; font-weight: 600; color: var(--sv-muted); text-decoration: none; }
body .sv-door__secondary:hover { color: var(--sv-gold-text); }
.sv-pill--muted { background: #EEF1F5; color: #5A6472; }

/* customer portal: one Sanvoice sign-in for billing and phone records */
.sv-client { max-width: 1080px; margin: 0 auto; }
.sv-client__head { margin-bottom: 26px; }
.sv-client__head h1 { font-family: var(--sv-display); font-size: clamp(2rem, 4vw, 2.8rem); color: var(--sv-head); margin: 6px 0 0; letter-spacing: -.03em; }
.sv-client__lead { font-size: 1.05rem; color: var(--sv-muted); max-width: 60ch; margin: 12px 0 0; line-height: 1.6; }
.sv-client__panel {
	display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start;
	background: #fff; border: 1px solid var(--sv-line); border-radius: 14px; padding: 30px;
}
.sv-client__panel h2 { font-family: var(--sv-display); font-size: 1.5rem; color: var(--sv-head); margin: 0 0 10px; letter-spacing: -.02em; }
.sv-client__panel p { font-size: .95rem; color: var(--sv-muted); line-height: 1.65; margin: 0 0 18px; max-width: 52ch; }
.sv-client__aside { background: var(--sv-gold-tint); border-radius: 10px; padding: 22px; }
.sv-client__aside h3 { font-family: var(--sv-display); font-size: 1.05rem; color: var(--sv-head); margin: 0 0 8px; }
.sv-client__aside p { font-size: .89rem; margin-bottom: 14px; }
.sv-client__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
.sv-client__card { background: #fff; border: 1px solid var(--sv-line); border-radius: 12px; padding: 22px; }
.sv-client__card h3 { font-family: var(--sv-display); font-size: 1.08rem; color: var(--sv-head); margin: 0 0 8px; }
.sv-client__card p { font-size: .9rem; color: var(--sv-muted); line-height: 1.6; margin: 0 0 12px; }
body .sv-client__card a { font-size: .89rem; font-weight: 600; color: var(--sv-gold-text); text-decoration: none; }
body .sv-client__card a:hover { text-decoration: underline; }
@media (max-width: 860px) {
	.sv-client__panel { grid-template-columns: 1fr; padding: 24px; }
	.sv-client__grid { grid-template-columns: 1fr; }
}

/* client area: sign-in form and signed-in header */
.sv-client__notice { border-radius: 10px; padding: 14px 16px; font-size: .93rem; font-weight: 500; margin: 0 0 22px; }
.sv-client__notice--ok { background: var(--sv-gold-tint); color: var(--sv-gold-text); }
.sv-client__notice--warn { background: #FDECEC; color: #8C2F2F; }
.sv-client__head--in { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
body .sv-client__signout { font-size: .88rem; font-weight: 600; color: var(--sv-muted); text-decoration: none; }
body .sv-client__signout:hover { color: var(--sv-gold-text); }
.sv-client__form { display: grid; gap: 8px; max-width: 380px; margin: 0 0 12px; }
.sv-client__form label { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-muted); }
.sv-client__form input {
	width: 100%; padding: 13px 14px; font-family: var(--sv-body); font-size: 1rem; color: var(--sv-ink);
	background: #fff; border: 1px solid var(--sv-line); border-radius: 9px;
}
.sv-client__form input:focus { outline: none; border-color: var(--sv-gold); box-shadow: 0 0 0 3px var(--sv-gold-tint); }
.sv-client__form .sv-btn { justify-self: start; margin-top: 4px; }
.sv-client__hint { font-size: .85rem; color: var(--sv-muted); margin: 0; }
.sv-client__figure {
	font-family: var(--sv-display); font-size: 2.1rem; font-weight: 800; color: var(--sv-head);
	letter-spacing: -.03em; margin: 0 0 10px !important;
}
.sv-client__figure span { display: block; font-family: var(--sv-body); font-size: .8rem; font-weight: 500; color: var(--sv-muted); letter-spacing: 0; }
.sv-client__loading { padding: 40px 0; color: var(--sv-muted); font-size: .95rem; }
.sv-client__tabs {
	display: flex; gap: 8px; overflow-x: auto; margin: 0 0 24px; padding: 6px;
	background: #fff; border: 1px solid var(--sv-line); border-radius: 12px;
	box-shadow: 0 1px 2px rgba(10, 22, 34, .04);
}
.sv-client__tab {
	flex: 0 0 auto; border: 0; background: transparent; color: var(--sv-muted); cursor: pointer;
	font: inherit; font-size: .9rem; font-weight: 600; padding: 10px 16px; border-radius: 8px;
}
.sv-client__tab:hover { color: var(--sv-head); background: var(--sv-tint); }
.sv-client__tab.is-on { color: #fff; background: var(--sv-head); }
.sv-client__tab:focus-visible, .sv-client__jump:focus-visible { outline: 2px solid var(--sv-gold-deep); outline-offset: 2px; }
.sv-client__view { animation: sv-client-view-in .18s ease-out; }
.sv-client__view[hidden] { display: none !important; }
.sv-account__section.sv-client__view {
	background: #fff; border: 1px solid var(--sv-line); border-radius: 14px; padding: 28px;
}
.sv-client__jump {
	border: 0; padding: 0; background: transparent; cursor: pointer; font: inherit;
	font-size: .89rem; font-weight: 600; color: var(--sv-gold-text); text-align: left;
}
.sv-client__jump:hover { text-decoration: underline; }
@keyframes sv-client-view-in { from { opacity: .25; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
	.sv-client__tabs { margin-inline: -4px; }
	.sv-client__tab { padding: 9px 12px; font-size: .84rem; }
}

/* ==========================================================================
   Contrast pass
   The page read as white-on-white: card borders at #E4E9EF were nearly
   invisible and the alternating band at #F6F8FC did not register as a band at
   all. The ground is now a soft blue-grey, cards stay pure white and lift off
   it, and the tinted bands are deep enough to actually separate sections.
   ========================================================================== */
:root {
  --sv-line: #D5DDE8;
  --sv-tint: #E9EEF6;
}
body.sanvoice-full { background: #F3F6FA; }

/* Sections carry the ground; only the tinted band differs. */
.sv-block--tint { background: var(--sv-tint); border-block: 1px solid var(--sv-line); }

/* White cards, lifted just enough to read as objects on the ground. */
.sv-cell,
.sv-prod,
.sv-plan,
.sv-door,
.sv-client__panel,
.sv-client__card,
.sv-formwrap,
.sv-login__form,
.sv-account__section,
.sv-table-scroll {
  box-shadow: 0 1px 2px rgba(10, 22, 34, .05), 0 10px 24px -14px rgba(10, 22, 34, .18);
}

/* Tables sat on the ground with no edge of their own. */
.sv-invoices { background: #fff; }
.sv-invoices th { background: #F7F9FC; }

/* Mobile header: the nav button exists now, and the CTA must not overflow. */
@media (max-width: 900px) {
  .sv-header .sv-wrap { gap: 12px; flex-wrap: wrap; position: relative; }
  .sv-header__cta { margin-left: auto; gap: 10px; }
  .sv-header__cta .sv-btn { padding: 9px 14px; font-size: .85rem; }
  .sv-nav.is-open { z-index: 50; box-shadow: 0 14px 24px -18px rgba(10,22,34,.4); }
  .sv-nav.is-open li { display: block; }
  .sv-nav.is-open a { padding: 10px 0; font-size: 1rem; }
}
@media (max-width: 520px) {
  /* Two CTAs plus a logo do not fit; the login link is the one a customer
     hunts for, and "Free consultation" repeats within the first screen. */
  .sv-header__cta .sv-btn { display: none; }
  .sv-lockup__wm { font-size: 1.15rem; }
}

/* ==========================================================================
   Header fits, or the burger takes over
   The hamburger only appeared below 900px, but eight nav items plus the logo,
   the login link and the gold CTA do not actually fit until about 1200px. In
   between, the header overflowed the viewport — measured at 230px of
   horizontal overflow at 901px — putting a scrollbar on every page and pushing
   the primary CTA off screen, right across the common laptop widths (1024,
   1152, 1194). The switch now happens where the content genuinely stops
   fitting, not at a round number.
   ========================================================================== */
@media (max-width: 1240px) {
  .sv-header .sv-wrap { position: relative; gap: 14px; }
  .sv-nav { display: none !important; }
  .sv-nav.is-open {
    display: flex !important; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; flex-direction: column; padding: 16px 28px;
    border-bottom: 1px solid var(--sv-line); z-index: 50;
    box-shadow: 0 14px 24px -18px rgba(10, 22, 34, .4);
  }
  .sv-nav-toggle:checked ~ .sv-nav {
    display: flex !important; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; flex-direction: column; padding: 16px 28px;
    border-bottom: 1px solid var(--sv-line); z-index: 50;
    box-shadow: 0 14px 24px -18px rgba(10, 22, 34, .4);
  }
	.sv-nav-toggle:checked ~ .sv-nav > ul { display: grid; gap: 0; width: 100%; }
	.sv-nav-toggle:checked ~ .sv-nav .sv-nav__menu { display: block; position: static; width: auto; padding: 2px 0 6px 16px; border: 0; box-shadow: none; }
	.sv-nav-toggle:checked ~ .sv-nav li { display: block; }
	.sv-nav-toggle:checked ~ .sv-nav a { padding: 10px 0; font-size: 1rem; }
	.sv-nav.is-open > ul { display: grid; gap: 0; width: 100%; }
	.sv-nav.is-open .sv-nav__menu { display: block; position: static; width: auto; padding: 2px 0 6px 16px; border: 0; box-shadow: none; }
	.sv-nav.is-open .sv-nav__menu a { padding: 7px 0; font-size: .9rem; }
  .sv-nav.is-open li { display: block; }
  .sv-nav.is-open a { padding: 10px 0; font-size: 1rem; }
  .sv-burger { display: flex !important; align-items: center; justify-content: center; order: 3; margin-left: 0; position: relative; z-index: 60; min-width: 44px; min-height: 44px; padding: 8px; pointer-events: auto; }
  .sv-header__cta { margin-left: auto; order: 2; }
}

/* Tablet navigation: keep the header calm and make the menu a full-width,
   touch-friendly panel instead of squeezing every link into one row. */
@media (min-width: 761px) and (max-width: 1024px) {
  .sv-header .sv-wrap { padding-block: 12px; }
  .sv-header__logo img { max-width: 150px; }
  .sv-header__cta { gap: 10px; }
  .sv-header__cta .sv-btn { padding: 10px 14px; }
  .sv-header__tel--secondary { display: none; }
  .sv-nav.is-open { left: 12px; right: 12px; border: 1px solid var(--sv-line); border-radius: 0 0 12px 12px; padding: 14px 20px 18px; }
  .sv-nav-toggle:checked ~ .sv-nav { left: 12px; right: 12px; border: 1px solid var(--sv-line); border-radius: 0 0 12px 12px; padding: 14px 20px 18px; }
  .sv-nav.is-open > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .sv-nav-toggle:checked ~ .sv-nav > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .sv-nav.is-open li a { min-height: 44px; display: flex; align-items: center; }
  .sv-nav.is-open .sv-nav__menu { padding-left: 12px; }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .sv-phone-card__image { height: 180px; }
  .sv-phone-card__image img { padding: 12px; }
  .sv-phone-card__body { padding: 14px 16px 16px; }
  .sv-phone-card__body p { margin-top: 5px; }
}

/* Header phone number, and the footer service-area line.
   The number appears only once the nav collapses: with all eight nav items
   showing there is no room for it, and adding it pushed the header back into
   overflow at 1280px. Above that width the number is in the hero band and the
   footer; below it, this is the only tappable number above the fold. */
.sv-header__tel { display: none; text-decoration: none; font-weight: 700; font-size: .95rem; color: var(--sv-head); white-space: nowrap; }
body .sv-header__tel:hover { color: var(--sv-gold-text); }
.sv-footer__area { font-size: .82rem; line-height: 1.6; color: #8FA0B2; margin: 14px 0 0; max-width: 34ch; }
@media (max-width: 1240px) {
  /* The nav has collapsed into the burger, so there is room for the number. */
  .sv-header__tel { display: inline-block; }
  .sv-header__cta { gap: 14px; }
}
@media (max-width: 620px) {
  /* The consultation button goes — the hero repeats it a moment later. The
     phone number and the client login both stay: one is how a prospect buys,
     the other is the only header route an existing customer has to /account/,
     since the primary menu does not carry it. */
  .sv-header__cta .sv-btn { display: none; }
  .sv-header .sv-wrap { gap: 10px; }
  .sv-header__cta { gap: 12px; }
  .sv-header__tel { font-size: .9rem; }
  .sv-header__login { font-size: .85rem; }
  .sv-lockup__wm { font-size: 1.05rem; }
  .sv-lockup svg { width: 24px; height: 27px; }
}
@media (max-width: 400px) {
  /* Below this the three will not sit together; the number wins. */
  .sv-header__login { display: none; }
}

/* ==========================================================================
   Accessibility corrections
   --sv-muted was #7A8797, which is 3.66:1 on white — below the 4.5:1 AA floor
   and used as real text in 25-odd places: form labels, table headers, footer
   links, fine print, product specs, all at small sizes. Darkened to #5F6C7C,
   measured at 5.35:1. The gold #D9A441 is 2.25:1 on white and is only ever a
   background here; it must never be used as text.
   ========================================================================== */
:root { --sv-muted: #5F6C7C; }

/* The theme's stylesheet strips focus outlines globally with :focus{outline:0}.
   Links and our own inputs override it; these two buttons had nothing, so a
   keyboard user could not see where they were. */
.sv-burger:focus-visible,
.sv-routing__scen button:focus-visible,
.sv-client__form button:focus-visible,
.sv-form__actions input:focus-visible {
  outline: 2px solid var(--sv-gold-deep);
  outline-offset: 2px;
  border-radius: 4px;
}
.sv-client__who { font-family: var(--sv-display); font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800; color: var(--sv-head); letter-spacing: -.03em; margin: 6px 0 0; }

/* ---------------------------------------------------------------- calls ---
   Call records shown on sanvoice.com rather than by sending the customer to
   the carrier's own interface. Deliberately built on the invoice table so the
   two sections of the client area read as one page. */
.sv-calls__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.sv-calls__head h2 { margin: 0; }
.sv-calls__range { display: flex; gap: 6px; }
.sv-range { padding: 6px 14px; border: 1px solid #D8DEE7; background: #fff; border-radius: 999px; font: inherit; font-size: .82rem; color: var(--sv-muted); cursor: pointer; }
.sv-range:hover { border-color: var(--sv-gold); color: var(--sv-head); }
.sv-range.is-on { background: var(--sv-head); border-color: var(--sv-head); color: #fff; font-weight: 600; }
.sv-calls__summary { color: var(--sv-muted); margin: 0 0 14px; font-size: .92rem; }
.sv-calls__table td { vertical-align: middle; }

/* Direction reads at a glance — inbound is the one that matters when a
   customer is checking whether they missed something. */
.sv-pill--in  { background: rgba(63,182,148,.16); color: #3F8F77; }
.sv-pill--out { background: #EEF1F5; color: #5A6472; }

@media (max-width: 640px) {
	.sv-calls__head { flex-direction: column; align-items: stretch; }
	.sv-calls__range { justify-content: flex-start; }
}

@media (max-width: 650px) {
  .sv-proofbar .sv-wrap { grid-template-columns: 1fr; }
  .sv-proofbar .sv-wrap > div { border-left: 0; border-bottom: 1px solid #26394C; }
  .sv-local__card { padding: 24px; }
}
/* Header contact is desktop-only: mobile keeps the header uncluttered. */@media (max-width: 1240px) {  .sv-header__tel { display: none !important; }}