/* ============================================================
   EZEWAG  -  Service Page Suite (shared across all service pages)
   Adds ONLY the handful of components the standard site template
   doesn't already have (SWOT, compare, tabs, geo cards, lead panel).
   Everything else (hero, buttons, eyebrow, section rhythm, cards,
   process steps, FAQ, related-services pills, forms) reuses the
   site's existing global classes and tokens on purpose, so every
   service page automatically matches the rest of ezewag.in.
   Loaded on every /export-*.html, /global-*.html service page.
   ============================================================ */

/* -- Checklist ---------------------------------------------------- */
.svc-check-list { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px; }
.svc-check-list li { display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:start; color:var(--body); font-size:.94rem; line-height:1.6; }
.svc-check-list li strong { display:block; color:var(--navy-900); font-size:.96rem; margin-bottom:2px; }
.svc-check-list .tick { width:22px; height:22px; border-radius:50%; border:1px solid var(--gold-line); color:var(--gold-deep); display:grid; place-items:center; font-size:.68rem; margin-top:1px; }

/* -- Two-column comparison (perceived advantage vs real cost) ----- */
.svc-compare { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin-top:40px; }
.svc-compare > div { background:var(--white); padding:clamp(24px,3vw,38px); }
.svc-compare .bad { background:var(--ivory); }
.svc-compare-label { font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 10px; }
.svc-compare h3 { margin:0 0 20px; }
.svc-compare ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.svc-compare ul li { position:relative; padding-left:24px; color:var(--body); font-size:.9rem; line-height:1.6; }
.svc-compare .good li::before { content:"\2013"; position:absolute; left:0; color:var(--gold); }
.svc-compare .bad li::before { content:"\2717"; position:absolute; left:0; color:#9f5555; font-size:.78rem; }

/* -- SWOT 2x2 ------------------------------------------------------ */
.svc-swot { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.svc-swot article { display:grid; grid-template-columns:52px 1fr; gap:16px; padding:24px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--white); box-shadow:var(--shadow-sm); }
.svc-swot article > span { width:46px; height:46px; border-radius:50%; border:1px solid var(--gold-line); color:var(--gold-deep); display:grid; place-items:center; font-family:var(--font-display); font-size:1.25rem; }
.svc-swot article h3 { margin:0 0 6px; font-size:1.05rem; color:var(--navy-900); }
.svc-swot article p { margin:0; color:var(--body); font-size:.88rem; line-height:1.6; }

/* -- Tabs (interactive dimension / scorecard style switcher) ------ */
.svc-tabs-layout { display:grid; grid-template-columns:.68fr 1.32fr; gap:24px; align-items:start; }
.svc-tab-nav { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.svc-tab { border:1px solid var(--border); background:var(--white); border-radius:var(--r); padding:14px; text-align:left; color:var(--body); font-weight:600; font-size:.74rem; transition:.2s; }
.svc-tab span { display:block; font-family:var(--font-display); color:var(--gold-deep); font-size:1rem; margin-bottom:2px; }
.svc-tab:hover, .svc-tab.active { background:var(--ivory); border-color:var(--gold-line); box-shadow:var(--shadow-sm); color:var(--navy-900); }
.svc-tab-panel { padding:clamp(26px,3vw,40px); border-radius:var(--r-lg); background:var(--ivory); border:1px solid var(--border); }
.svc-tab-panel .svc-tab-eyebrow { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.svc-tab-panel .svc-tab-eyebrow > span:first-child { font-family:var(--font-display); font-size:2rem; color:var(--gold); }
.svc-tab-panel .svc-tab-eyebrow > span:last-child { font-size:.65rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.svc-tab-panel h3 { margin:0 0 14px; }
.svc-tab-panel > p { color:var(--body); }
.svc-tab-question { margin:22px 0; padding:18px 20px; background:var(--white); border-left:2px solid var(--gold); border-radius:0 var(--r) var(--r) 0; }
.svc-tab-question small { display:block; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-size:.62rem; margin-bottom:6px; }
.svc-tab-question strong { font-family:var(--font-display); font-size:1.05rem; color:var(--navy-900); }
.svc-score-demo { display:flex; align-items:center; gap:18px; }
.svc-score-gauge { width:78px; height:78px; flex:none; border-radius:50%; display:grid; place-items:center; position:relative; }
.svc-score-gauge::before { content:""; position:absolute; inset:7px; background:var(--ivory); border-radius:50%; }
.svc-score-gauge span, .svc-score-gauge small { position:relative; }
.svc-score-gauge span { font-family:var(--font-display); font-size:1.55rem; color:var(--navy-900); }
.svc-score-gauge small { display:block; font-size:.6rem; color:var(--muted); }
.svc-score-demo b { font-size:.82rem; color:var(--gold-deep); }
.svc-score-demo p { margin:4px 0 0; font-size:.72rem; color:var(--muted); }

/* -- Geography / country cards -------------------------------------- */
.svc-geo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.svc-geo-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .25s, transform .25s; }
.svc-geo-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.svc-geo-flag { font-size:1.8rem; padding:22px 22px 0; }
.svc-geo-card .svc-geo-tag { display:block; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); margin:14px 22px 6px; }
.svc-geo-card h3 { margin:0 22px 8px; font-size:1.05rem; }
.svc-geo-card p { margin:0 22px 22px; color:var(--body); font-size:.86rem; line-height:1.6; }

/* -- Stat / confirm chip row ----------------------------------------- */
.svc-chip-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.svc-chip { display:flex; align-items:center; gap:12px; padding:16px 18px; border:1px solid var(--border); border-radius:var(--r); background:var(--white); font-size:.86rem; color:var(--navy-900); font-weight:600; }
.svc-chip span { color:var(--gold); font-size:1.1rem; }

/* -- Lead panel (copy + form side by side) --------------------------- */
.svc-lead-panel { display:grid; grid-template-columns:.85fr 1.15fr; gap:0; border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; background:var(--white); box-shadow:var(--shadow-md); }
.svc-lead-copy { padding:clamp(28px,4vw,48px); background:var(--ivory); }
.svc-lead-copy .svc-check-list { margin-top:22px; }
.svc-lead-copy p.svc-secondary-note { margin-top:24px; padding-top:20px; border-top:1px solid var(--border); font-size:.88rem; color:var(--body); }
.svc-lead-panel .contact-form-card { box-shadow:none; border:0; border-left:1px solid var(--border); border-radius:0; }
.svc-google-form-card { position:relative; isolation:isolate; min-width:0; padding:clamp(32px,5vw,58px); display:flex; flex-direction:column; justify-content:center; overflow:hidden; color:#fff; background:linear-gradient(145deg,#061a31 0%,#0a2847 58%,#103858 100%); border-left:1px solid rgba(203,160,81,.28); }
.svc-google-form-card::before { content:""; position:absolute; z-index:-1; width:340px; height:340px; right:-150px; top:-170px; border:1px solid rgba(216,174,98,.22); border-radius:50%; box-shadow:0 0 0 42px rgba(216,174,98,.05),0 0 0 86px rgba(216,174,98,.035); }
.svc-google-form-icon { width:64px; height:64px; margin-bottom:24px; display:grid; place-items:center; color:#d8ae62; background:rgba(255,255,255,.08); border:1px solid rgba(216,174,98,.42); border-radius:50%; }
.svc-google-form-icon svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.svc-google-form-card .eyebrow { margin-bottom:14px; color:#d8ae62 !important; }
.svc-google-form-card h2 { max-width:13ch; margin:0; color:#fff !important; font-size:clamp(2.25rem,3.5vw,3.4rem); line-height:1.02; }
.svc-google-form-card > p:not(.eyebrow) { max-width:43rem; margin:20px 0 0; color:rgba(255,255,255,.78) !important; }
.svc-google-form-points { margin:24px 0 28px; padding:20px 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); list-style:none; }
.svc-google-form-points li { min-width:0; display:flex; align-items:flex-start; gap:8px; color:rgba(255,255,255,.9); font-size:.76rem; font-weight:600; line-height:1.45; }
.svc-google-form-points li::before { content:"\2713"; flex:0 0 auto; width:18px; height:18px; display:grid; place-items:center; color:#071b33; background:#d8ae62; border-radius:50%; font-size:.62rem; font-weight:900; }
.svc-google-form-card .btn { width:100%; min-height:54px; justify-content:center; color:#071b33 !important; background:linear-gradient(135deg,#e2bd72,#c89135); border-color:#d8ae62; box-shadow:0 12px 30px rgba(0,0,0,.18); }
.svc-google-form-card .btn:hover { color:#071b33 !important; background:#efce8d; transform:translateY(-2px); }
.svc-google-form-note { margin:12px 0 0 !important; color:rgba(255,255,255,.6) !important; font-size:.74rem !important; text-align:center; }
body[data-site-system="standard"] main#main-content .svc-google-form-card h2 { color:#fff !important; -webkit-text-fill-color:#fff !important; }
body[data-site-system="standard"] main#main-content .svc-google-form-card .svc-google-form-points li { color:rgba(255,255,255,.9) !important; }

/* -- Simple orbit / priority visual ----------------------------------- */
.svc-orbit-visual { position:relative; aspect-ratio:1/1; max-width:360px; margin-inline:auto; display:grid; place-items:center; }
.svc-orbit-visual::before { content:""; position:absolute; inset:6%; border-radius:50%; background:radial-gradient(circle, var(--white), var(--ash-50)); box-shadow:var(--shadow-lg); }
.svc-orbit-ring { position:absolute; border-radius:50%; border:1px solid var(--gold-line); }
.svc-orbit-ring.r1 { inset:2%; }
.svc-orbit-ring.r2 { inset:16%; border-color:var(--border-md); }
.svc-orbit-core { position:relative; z-index:2; width:150px; height:150px; border-radius:50%; display:grid; place-content:center; text-align:center; background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-md); }
.svc-orbit-core span { font-family:var(--font-display); font-size:3.2rem; color:var(--gold); line-height:1; }
.svc-orbit-core small { display:block; margin-top:8px; text-transform:uppercase; letter-spacing:.1em; font-size:.6rem; color:var(--muted); }
.svc-orbit-label { position:absolute; z-index:3; padding:9px 14px; border-radius:999px; background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-sm); font-size:.72rem; color:var(--navy-900); }

/* -- Tilt utility (paired with service-suite.js) ---------------------- */
.svc-tilt { transition:transform .2s ease, box-shadow .3s ease; transform-style:preserve-3d; will-change:transform; }

/* -- Floating WhatsApp CTA (shared across every service page) --------- */
.svc-whatsapp-float { position:fixed; right:22px; bottom:22px; z-index:90; display:flex; align-items:center; gap:9px; padding:11px 18px 11px 11px; border-radius:999px; background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-lg); text-decoration:none; }
.svc-whatsapp-float span { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; background:#2f7e58; font-size:.66rem; font-weight:800; }
.svc-whatsapp-float b { color:var(--ink-pure); font-weight:700; font-size:.84rem; }
@media (max-width:620px) {
  .svc-whatsapp-float b { display:none; }
  .svc-whatsapp-float { padding:0; width:52px; height:52px; justify-content:center; }
}

/* -- Responsive -------------------------------------------------------- */
@media (max-width:900px) {
  .svc-compare { grid-template-columns:1fr; }
  .svc-swot { grid-template-columns:1fr; }
  .svc-tabs-layout { grid-template-columns:1fr; }
  .svc-tab-nav { grid-template-columns:repeat(3,1fr); overflow-x:auto; }
  .svc-geo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .svc-lead-panel { grid-template-columns:1fr; }
  .svc-lead-panel .contact-form-card { border-left:0; border-top:1px solid var(--border); }
  .svc-google-form-card { border-left:0; border-top:1px solid rgba(203,160,81,.28); }
}
@media (max-width:620px) {
  .svc-geo-grid { grid-template-columns:1fr; }
  .svc-tab-nav { grid-template-columns:repeat(2,1fr); overflow-x:visible; }
  .svc-google-form-card { padding:32px 24px; }
  .svc-google-form-points { grid-template-columns:1fr; }
}