/* ==========================================================================
   SwornGlobal — site styles
   Ported from the Claude Design prototype (SwornGlobal Website.html + site/*.jsx).
   Depends on colors_and_type.css (--swo-* tokens, DM Sans + Open Sans).
   Class namespace: sg-*.
   ========================================================================== */

/* ---------- Layout primitives ---------- */
.sg-container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-pad); padding-right: var(--container-pad); }
.sg-section { padding-top: 88px; padding-bottom: 88px; }
.sg-section--tight { padding-top: 84px; padding-bottom: 84px; }
.sg-section--white { background: #fff; }
.sg-section--mist { background: var(--swo-mist); }
.sg-bt { border-top: 1px solid var(--border-default); }
.sg-bb { border-bottom: 1px solid var(--border-default); }

/* Dark motif bands (navy + corner-quadrant imagery) */
.sg-dark { background: var(--swo-navy) url('/assets/bg-dark-landscape.jpg') center/cover; color: #fff; }
.sg-dark-flat { background: var(--swo-navy); color: #fff; }
.sg-light-motif { background: var(--swo-mist) url('/assets/bg-light-landscape.jpg') center/cover; }

[id] { scroll-margin-top: 84px; }

/* ---------- Buttons (DM Sans Bold, ALL CAPS, tracked) ---------- */
.sg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border: 1.5px solid transparent; border-radius: 6px;
  font-family: var(--font-heading); font-weight: 700; font-size: 13px; line-height: 1;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  background: var(--swo-blue); color: #fff;
  transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.sg-btn:hover { background: var(--swo-blue-hover); color: #fff; }
.sg-btn:active { transform: scale(0.98); }
.sg-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.sg-btn--sm { padding: 8px 14px; font-size: 12px; }
.sg-btn--lg { padding: 14px 24px; }
.sg-btn--ondark { background: #fff; color: var(--swo-navy); }
.sg-btn--ondark:hover { background: var(--swo-mist); color: var(--swo-navy); }
.sg-btn--secondary { background: transparent; color: var(--swo-navy); border-color: var(--swo-navy); }
.sg-btn--secondary:hover { background: rgba(26, 38, 51, 0.06); color: var(--swo-navy); }

/* ---------- Eyebrow + section head ---------- */
.sg-eyebrow {
  font: 600 15px/1.2 var(--font-heading); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--swo-blue); margin-bottom: 14px;
}
.on-dark .sg-eyebrow, .sg-eyebrow--ondark { color: var(--swo-blue-soft); }

.sg-sechead { margin-bottom: 44px; }
.sg-sechead h2 { font: 700 36px/1.05 var(--font-heading); letter-spacing: -0.01em; color: var(--text-heading); max-width: 640px; }
.sg-sechead .sg-lede { font: 400 17px/1.55 var(--font-body); margin: 16px 0 0; max-width: 620px; color: var(--text-body); }
.on-dark .sg-sechead h2 { color: #fff; }
.on-dark .sg-sechead .sg-lede { color: var(--text-on-dark-muted); }

/* Section head with an action on the right */
.sg-sechead-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.sg-sechead-row > .sg-sechead-side { margin-bottom: 44px; }

/* ---------- Trustpilot stars ---------- */
.sg-stars { display: inline-flex; gap: 3px; }
.sg-stars .sg-star {
  width: var(--star-size, 16px); height: var(--star-size, 16px);
  display: inline-grid; place-items: center; background: var(--swo-blue);
}
.sg-stars .sg-star svg { width: 62%; height: 62%; display: block; }
.sg-stars .sg-star--half { background: linear-gradient(90deg, var(--swo-blue) 50%, var(--swo-grey-300) 50%); }
.on-dark .sg-stars .sg-star--half { background: linear-gradient(90deg, var(--swo-blue) 50%, rgba(255, 255, 255, 0.22) 50%); }

.sg-trustline { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.sg-trustline .sg-trusttext { font: 400 13.5px/1.3 var(--font-body); color: var(--text-body); }
.sg-trustline .sg-trusttext strong { font: 600 13.5px/1.3 var(--font-heading); color: var(--text-heading); }
.on-dark .sg-trustline .sg-trusttext { color: var(--text-on-dark-muted); }
.on-dark .sg-trustline .sg-trusttext strong { color: #fff; }
a.sg-trustline:hover .sg-trusttext { text-decoration: underline; }

/* ---------- Icon tile ---------- */
.sg-icotile {
  width: 44px; height: 44px; border-radius: 8px; background: var(--swo-blue-wash);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  color: var(--swo-blue);
}
.sg-icotile--lg { width: 48px; height: 48px; }
.sg-icotile--sm { width: 36px; height: 36px; }
.on-dark .sg-icotile, .sg-icotile--ondark { background: rgba(255, 255, 255, 0.08); color: var(--swo-blue-soft); }

/* ---------- Cards ---------- */
.sg-card {
  background: #fff; border-radius: 12px; padding: var(--card-pad, 24px);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.sg-card--outlined { box-shadow: none; border: 1px solid var(--border-default); }
a.sg-card { display: block; color: inherit; text-decoration: none; }
a.sg-card:hover { box-shadow: var(--shadow-raised); color: inherit; }

/* ---------- Badges & chips ---------- */
.sg-badge {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px;
  font: 600 11px/1.2 var(--font-heading); letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--swo-blue-wash); color: var(--swo-blue-hover); white-space: nowrap;
}
.sg-chip {
  display: inline-flex; font: 400 13px/1 var(--font-body); color: var(--text-body);
  background: #fff; border: 1px solid var(--border-default); border-radius: 999px; padding: 8px 13px;
}
.sg-chip--ondark { background: transparent; border-color: rgba(255, 255, 255, 0.22); color: #dbe2e8; font-size: 12px; padding: 6px 11px; }
.sg-chiptag {
  display: inline-flex; align-items: center; gap: 6px; background: #fff;
  border: 1px solid var(--border-default); border-radius: 999px; padding: 6px 11px;
  font: 700 10px/1 var(--font-heading); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--swo-blue); box-shadow: 0 4px 12px rgba(7, 16, 35, 0.10); white-space: nowrap;
}
.sg-chiptag--navy { color: var(--swo-navy); }
.sg-chiptag--success { color: var(--swo-success); }

/* ---------- Breadcrumbs ---------- */
.sg-breadcrumbs { background: #fff; border-bottom: 1px solid var(--border-default); }
.sg-breadcrumbs ol {
  list-style: none; margin: 0 auto; display: flex; align-items: center; gap: 8px;
  padding-top: 10px; padding-bottom: 10px;
  font: 400 12.5px/1.2 var(--font-body); color: var(--text-secondary);
  white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.sg-breadcrumbs ol::-webkit-scrollbar { display: none; }
.sg-breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.sg-breadcrumbs a { color: var(--text-secondary); }
.sg-breadcrumbs a:hover { color: var(--swo-blue); }
.sg-breadcrumbs [aria-current="page"] { font: 600 12.5px/1.2 var(--font-heading); color: var(--swo-navy); }
.sg-breadcrumbs .sg-crumb-sep { display: inline-flex; color: var(--swo-grey-400); }

/* ---------- Header ---------- */
.sg-header { background: #fff; border-bottom: 1px solid var(--border-default); position: sticky; top: 0; z-index: 100; }
.sg-header-inner { display: flex; align-items: center; gap: 40px; height: 72px; }
.sg-logo { display: flex; flex: none; }
.sg-logo img { height: 26px; display: block; }

.sg-nav { display: flex; gap: 30px; flex: 1; align-items: center; align-self: stretch; }
.sg-nav-link {
  font: 500 14.5px/1 var(--font-heading); color: var(--swo-navy); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px; align-self: center; position: relative; padding: 8px 0;
}
.sg-nav-link:hover { color: var(--swo-blue); }
.sg-nav-link.is-active { color: var(--swo-blue); }
.sg-nav-link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px; background: var(--swo-blue); }
.sg-nav-link .sg-caret { transition: transform 150ms ease; }

/* Services dropdown (CSS hover/focus-within) */
.sg-dd { position: relative; align-self: stretch; display: flex; align-items: center; }
.sg-dd-menu {
  position: absolute; top: 100%; left: -14px; z-index: 200; display: none;
  background: #fff; border: 1px solid var(--border-default); border-radius: 8px; min-width: 312px;
  box-shadow: 0 16px 40px rgba(7, 16, 35, 0.16); padding: 8px;
}
.sg-dd:hover .sg-dd-menu, .sg-dd:focus-within .sg-dd-menu { display: block; }
.sg-dd:hover .sg-caret, .sg-dd:focus-within .sg-caret { transform: rotate(180deg); }
.sg-dd-rule { display: block; height: 1px; background: var(--border-default); margin: 6px 10px; }

.sg-menu-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px;
  cursor: pointer; font: 600 14px/1.25 var(--font-heading); color: var(--swo-navy); text-decoration: none;
}
.sg-menu-item:hover { background: var(--swo-mist); color: var(--swo-navy); }
.sg-menu-item .sg-menu-sub { display: block; font: 400 11.5px/1.35 var(--font-body); color: var(--text-secondary); margin-top: 2px; text-transform: none; }

.sg-head-actions { display: flex; gap: 20px; align-items: center; }
.sg-head-trust { display: flex; align-items: center; gap: 8px; }
.sg-head-trust .sg-trusttext { font: 400 12.5px/1.2 var(--font-body); color: var(--text-secondary); }

/* Burger + mobile menu (checkbox toggle) */
.sg-nav-toggle { display: none; }
.sg-burger { display: none; width: 44px; height: 44px; margin-right: -10px; place-items: center; cursor: pointer; color: var(--swo-navy); }
.sg-burger .i-open { display: inline-flex; }
.sg-burger .i-close { display: none; }
.sg-mobile-menu { display: none; }

/* ---------- Footer ---------- */
.sg-footer { background: var(--swo-navy); color: #fff; }
.sg-footer-inner { padding-top: 56px; padding-bottom: 32px; }
.sg-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.sg-footer-brand img { height: 24px; display: block; }
.sg-footer-tagline { font: 400 13.5px/1.55 var(--font-body); color: var(--text-on-dark-muted); max-width: 300px; margin: 16px 0 0; }
.sg-footer-h {
  font: 600 12px/1 var(--font-heading); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--swo-blue-soft); margin-bottom: 14px;
}
.sg-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sg-footer-col a { font: 400 13.5px/1.4 var(--font-body); color: var(--text-on-dark-link); }
.sg-footer-col a:hover { color: #fff; }
.sg-footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 40px; padding-top: 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font: 400 11px/1.4 var(--font-body); color: var(--text-on-dark-muted);
}
.sg-footer-legal a { color: var(--swo-blue-soft); }
.sg-footer-legal .sg-legal-links { display: flex; gap: 18px; }
.sg-footer-legal .sg-legal-links a { color: var(--text-on-dark-muted); }
.sg-footer-legal .sg-legal-links a:hover { color: #fff; }

/* ---------- Heroes ---------- */
.sg-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; padding-top: 88px; padding-bottom: 96px; }
.sg-hero-grid--inner { padding-top: 72px; padding-bottom: 64px; }
.sg-hero h1 { font: 700 54px/1.05 var(--font-heading); letter-spacing: -0.01em; max-width: 560px; color: #fff; }
.sg-hero .sg-hero-lede { font: 400 18px/1.55 var(--font-body); color: var(--text-on-dark-muted); max-width: 520px; margin: 22px 0 32px; }
.sg-hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.sg-hero-trust { display: flex; gap: 26px; margin-top: 44px; align-items: center; flex-wrap: wrap; }
.sg-hero-trust .sg-hero-fact { font: 400 13.5px/1.4 var(--font-body); color: var(--text-on-dark-muted); }
.sg-hero-illo { display: flex; justify-content: center; }

/* Light inner-page hero */
.sg-hero-light { border-bottom: 1px solid var(--border-default); }
.sg-hero-light .sg-hero-pad { padding-top: 76px; padding-bottom: 64px; }
.sg-hero-light h1 { font: 700 46px/1.05 var(--font-heading); letter-spacing: -0.01em; max-width: 640px; color: var(--text-heading); }
.sg-hero-light .sg-hero-lede { font: 400 18px/1.55 var(--font-body); color: var(--text-body); max-width: 600px; margin: 18px 0 0; }
.sg-hero-light .sg-hero-lede--cta { margin-bottom: 28px; }
.sg-hero-light .sg-hero-trust-light { display: flex; gap: 24px; margin-top: 32px; align-items: center; flex-wrap: wrap; }

/* Service-detail hero price aside */
.sg-price { display: inline-block; }
.sg-price .sg-price-main { font: 600 15px/1.2 var(--font-heading); color: var(--swo-navy); display: block; }
.sg-price .sg-price-note { font: 400 12px/1.3 var(--font-body); color: var(--text-secondary); }

.sg-fact { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1.45 var(--font-body); color: var(--text-body); }
.sg-fact svg { color: var(--swo-blue); flex: none; }

/* ---------- Home trust strip ---------- */
.sg-truststrip { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; }
.sg-truststrip-badges { display: flex; gap: 14px; align-items: center; }
.sg-truststrip-badges img { height: 56px; display: block; }
.sg-truststrip-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.sg-stat { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--swo-blue); padding-left: 14px; }
.sg-stat .sg-stat-n { font: 700 26px/1.1 var(--font-heading); color: var(--swo-navy); letter-spacing: -0.01em; }
.sg-stat .sg-stat-label { font: 400 12.5px/1.35 var(--font-body); color: var(--text-secondary); max-width: 190px; }

/* Dark hero stats (business page) */
.sg-stat--ondark { border-left-color: var(--swo-blue); gap: 4px; padding-left: 16px; }
.sg-stat--ondark .sg-stat-n { font: 700 34px/1 var(--font-heading); color: #fff; }
.sg-stat--ondark .sg-stat-label { font: 400 13px/1.4 var(--font-body); color: var(--text-on-dark-muted); max-width: 210px; }

/* ---------- Home services cards ---------- */
.sg-svc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.sg-svc-card { display: flex; flex-direction: column; gap: 14px; --card-pad: 28px; }
.sg-svc-card .sg-svc-title { font: 600 20px/1.2 var(--font-heading); color: var(--text-heading); }
.sg-svc-card p { font: 400 14.5px/1.55 var(--font-body); color: var(--text-body); margin: 0; flex: 1; }
.sg-svc-card .sg-svc-price { font: 600 14px/1.3 var(--font-heading); color: var(--swo-navy); border-top: 1px solid var(--border-default); padding-top: 14px; }
.sg-linklabel {
  font: 700 12.5px/1 var(--font-heading); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--swo-blue); text-decoration: none; display: inline-flex; gap: 6px; align-items: center;
}
a.sg-linklabel:hover { color: var(--swo-blue-hover); }
.sg-linklabel--ondark { color: var(--swo-blue-soft); }
.sg-linklabel--white { color: #fff; }

/* ---------- Steps grid (4-up) ---------- */
.sg-steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.sg-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sg-step-head .sg-step-n { font: 700 13px/1 var(--font-heading); color: var(--swo-blue); letter-spacing: var(--tracking-caps); }
.sg-step-head .sg-step-rule { flex: 1; height: 1px; background: var(--border-default); }
.sg-step-head svg { color: var(--swo-navy); flex: none; }
.sg-step-title { font: 600 17px/1.25 var(--font-heading); color: var(--text-heading); margin-bottom: 8px; }
.sg-steps4 p { font: 400 13.5px/1.55 var(--font-body); color: var(--text-body); margin: 0; }

/* ---------- Reviews strip ---------- */
.sg-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sg-review-card { display: flex; flex-direction: column; gap: 14px; --card-pad: 26px; }
.sg-review-card p { font: 400 15px/1.6 var(--font-body); color: var(--text-body); margin: 0; flex: 1; }
.sg-review-name { font: 600 14px/1.3 var(--font-heading); color: var(--text-heading); }
.sg-review-svc { font: 400 12.5px/1.3 var(--font-body); color: var(--text-secondary); margin-top: 2px; }

/* ---------- CTA band ---------- */
.sg-ctaband { background: var(--swo-blue) url('/assets/bg-blue-landscape.jpg') center/cover; }
.sg-ctaband-inner { padding-top: 68px; padding-bottom: 68px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.sg-ctaband h2 { font: 700 32px/1.05 var(--font-heading); color: #fff; }
.sg-ctaband p { font: 400 16px/1.4 var(--font-body); color: rgba(255, 255, 255, 0.85); margin: 10px 0 0; }

/* ---------- Coverage (home) ---------- */
.sg-tabs { display: flex; gap: 10px; overflow-x: auto; margin-bottom: 22px; scrollbar-width: none; }
.sg-tabs::-webkit-scrollbar { display: none; }
.sg-tab {
  font: 700 12px/1 var(--font-heading); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  padding: 11px 15px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.28); background: transparent; color: #dbe2e8;
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.sg-tab .sg-tab-badge {
  font: 600 10px/1 var(--font-heading); letter-spacing: 0.04em; border-radius: 999px; padding: 4px 7px;
  background: rgba(255, 255, 255, 0.10); color: var(--swo-blue-soft);
}
.sg-tab[aria-pressed="true"] { border-color: #fff; background: #fff; color: var(--swo-navy); }
.sg-tab[aria-pressed="true"] .sg-tab-badge { background: var(--swo-blue-wash); color: var(--swo-blue); }
.sg-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .sg-fade { animation: sg-fade 180ms ease; }
  @keyframes sg-fade { from { opacity: 0; transform: translateY(5px); } }
}
.sg-covnote { font: 400 13.5px/1.5 var(--font-body); color: var(--text-on-dark-muted); margin: 18px 0 0; display: flex; align-items: center; gap: 9px; }
.sg-covnote svg { color: var(--swo-blue-soft); flex: none; }

/* Dark panel card (notarisation / apostille panels, embassy aside) */
.sg-darkcard { background: var(--swo-navy-raise); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 10px; padding: 20px 22px; }
.sg-darkcard-label { font: 600 12px/1.2 var(--font-heading); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--swo-blue-soft); }
.sg-label-row { display: flex; align-items: center; gap: 10px; }
.sg-label-row .sg-label-rule { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.14); }
.sg-count-pill { font: 700 11px/1 var(--font-heading); color: var(--swo-blue-soft); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 4px 8px; }

.sg-dotitem { display: flex; align-items: center; gap: 8px; font: 400 13.5px/1.35 var(--font-body); color: var(--text-body); }
.sg-dotitem::before { content: ""; width: 4px; height: 4px; border-radius: 999px; background: var(--swo-blue); flex: none; }
.on-dark .sg-dotitem { color: #dbe2e8; }
.on-dark .sg-dotitem::before { background: var(--swo-blue-soft); }

/* ---------- Country grid ---------- */
.sg-cgrid { display: grid; grid-template-columns: 2.05fr 1fr 1fr 1fr; gap: 14px; align-items: stretch; }
.sg-cregion { border-radius: 10px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--border-default); box-shadow: 0 4px 14px rgba(7, 16, 35, 0.05); }
.on-dark .sg-cregion { background: var(--swo-navy-raise); border-color: rgba(255, 255, 255, 0.10); box-shadow: none; }
.sg-cregion .sg-region-label { font: 600 12px/1.2 var(--font-heading); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--swo-blue); }
.on-dark .sg-cregion .sg-region-label { color: var(--swo-blue-soft); }
.sg-cregion .sg-label-rule { background: var(--border-default); }
.sg-cregion .sg-count-pill { color: var(--swo-blue); border-color: var(--border-default); }
.on-dark .sg-cregion .sg-count-pill { color: var(--swo-blue-soft); border-color: rgba(255, 255, 255, 0.14); }
.sg-cregion .sg-citems { display: grid; grid-template-columns: 1fr; gap: 8px 14px; align-content: start; flex: 1; }
.sg-cregion--wide .sg-citems { grid-template-columns: 1fr 1fr 1fr; }
.sg-cgrid .sg-dotitem { font-size: 13px; }

/* Framed country grid (service page) */
.sg-cframe { border: 1px solid var(--border-default); border-radius: 12px; padding: 22px; }

/* ---------- Widget section (instant-pricing iframe) ---------- */
.sg-widget-grid { display: grid; grid-template-columns: 1fr 520px; gap: 56px; align-items: start; }
.sg-wsteps { display: flex; flex-direction: column; }
.sg-wstep { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--border-default); }
.on-dark .sg-wstep { border-top-color: rgba(255, 255, 255, 0.14); }
.sg-wstep .sg-icotile { width: 42px; height: 42px; }
.sg-wstep-title { font: 600 16px/1.3 var(--font-heading); color: var(--text-heading); }
.on-dark .sg-wstep-title { color: #fff; }
.sg-wstep-title .sg-wstep-n { color: var(--swo-blue); margin-right: 8px; }
.on-dark .sg-wstep-title .sg-wstep-n { color: var(--swo-blue-soft); }
.sg-wstep p { font: 400 14px/1.55 var(--font-body); color: var(--text-body); margin: 5px 0 0; }
.on-dark .sg-wstep p { color: var(--text-on-dark-muted); max-width: 460px; }

.sg-frame { border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-card); }
.sg-frame-bar { background: var(--swo-mist); border-bottom: 1px solid var(--border-default); padding: 14px 20px; display: flex; align-items: center; gap: 8px; }
.sg-frame-dots { display: flex; gap: 6px; flex: 1; }
.sg-frame-dots span { width: 9px; height: 9px; border-radius: 999px; background: var(--swo-grey-400); }
.sg-frame-label { font: 600 12px/1 var(--font-heading); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--swo-navy); display: inline-flex; align-items: center; gap: 7px; }
.sg-frame-label svg { color: var(--swo-blue); }
.sg-frame iframe { width: 100%; height: 780px; border: 0; display: block; background: #fff; }
.sg-frame-foot { background: var(--swo-mist); border-top: 1px solid var(--border-default); padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sg-frame-foot .sg-frame-note { font: 400 11.5px/1.4 var(--font-body); color: var(--text-secondary); }
.sg-frame-foot .sg-linklabel { font-size: 11.5px; }

/* Aside extras under widget steps */
.sg-aside-label { font: 600 12px/1.2 var(--font-heading); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--swo-blue); margin-bottom: 12px; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-aside-review { margin-top: 24px; background: #fff; border: 1px solid var(--border-default); border-radius: 10px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.sg-aside-review p { font: 400 14px/1.6 var(--font-body); color: var(--text-body); margin: 0; }
.sg-aside-review .sg-review-name { font: 600 13px/1.3 var(--font-heading); }
.sg-aside-review .sg-review-svc { font: 400 12px/1.3 var(--font-body); color: var(--text-secondary); margin-left: 6px; }
.sg-guarantees { display: flex; gap: 22px; margin-top: 24px; flex-wrap: wrap; }

/* ---------- FAQ (native details/summary) ---------- */
.sg-faq { display: flex; flex-direction: column; gap: 12px; }
.sg-faq-item { border: 1px solid var(--border-default); border-radius: 8px; background: #fff; overflow: hidden; }
.sg-faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; gap: 14px;
  font: 600 16px/1.35 var(--font-heading); color: var(--text-heading);
}
.sg-faq-item summary::-webkit-details-marker { display: none; }
.sg-faq-item summary span { flex: 1; }
.sg-faq-item summary svg { color: var(--swo-blue); flex: none; }
.sg-faq-item summary .i-plus, .sg-faq-item summary .i-minus { display: inline-flex; color: var(--swo-blue); }
.sg-faq-item summary .i-minus { display: none; }
.sg-faq-item[open] summary .i-minus { display: inline-flex; }
.sg-faq-item[open] summary .i-plus { display: none; }
.sg-faq-item p { font: 400 14.5px/1.6 var(--font-body); color: var(--text-body); margin: 0; padding: 0 22px 20px; }
.sg-faq-wrap { max-width: 880px; margin: 0 auto; }

/* ---------- Services page rows ---------- */
.sg-svcrow { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; padding: 64px 0; border-top: 1px solid var(--border-default); }
.sg-svcrow:first-child { border-top: none; }
.sg-svcrow--rev { grid-template-columns: 0.9fr 1.1fr; }
.sg-svcrow--rev > .sg-svcrow-copy { order: 2; }
.sg-svcrow--rev > .sg-svcrow-illo { order: 1; }
.sg-svcrow h2 { font: 700 30px/1.1 var(--font-heading); letter-spacing: -0.01em; margin: 0 0 12px; }
.sg-svcrow .sg-svcrow-blurb { font: 400 15.5px/1.6 var(--font-body); color: var(--text-body); margin: 0 0 18px; max-width: 520px; }
.sg-svcrow-illo { display: flex; justify-content: center; }
.sg-checks { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
.sg-checkitem { display: flex; align-items: center; gap: 10px; font: 400 14px/1.4 var(--font-body); color: var(--text-body); }
.sg-checkitem svg { color: var(--swo-blue); flex: none; }
.sg-svcrow-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* Doc types tile grid */
.sg-doctypes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sg-doctype { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border-default); border-radius: 8px; padding: 16px 18px; }
.sg-doctype svg { color: var(--swo-blue); flex: none; }
.sg-doctype span { font: 600 14.5px/1.3 var(--font-heading); color: var(--text-heading); }
.sg-doctypes-note { font: 400 13.5px/1.5 var(--font-body); color: var(--text-secondary); margin: 18px 0 0; }

/* ---------- Documents page ---------- */
.sg-doccats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sg-doccat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sg-doccat-head span { font: 600 18px/1.2 var(--font-heading); color: var(--text-heading); }
.sg-doccat-items { display: flex; flex-direction: column; }
.sg-doccat-items .sg-dotitem { padding: 8px 0; border-bottom: 1px solid var(--swo-grey-100); font-size: 14px; }
.sg-doccat-items .sg-dotitem:last-child { border-bottom: none; }

.sg-journeys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sg-journey { display: flex; flex-direction: column; gap: 14px; --card-pad: 26px; }
.sg-journey-head { display: flex; align-items: center; gap: 12px; }
.sg-journey-head span { font: 600 17.5px/1.25 var(--font-heading); color: var(--text-heading); }
.sg-journey p { font: 400 13.5px/1.55 var(--font-body); color: var(--text-body); margin: 0; }
.sg-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.sg-chain svg { color: var(--swo-grey-600); }
.sg-chainchip {
  display: inline-flex; align-items: center; gap: 7px; background: var(--swo-blue-wash);
  border-radius: 6px; padding: 8px 11px; font: 600 12.5px/1 var(--font-heading); color: var(--swo-navy);
}
.sg-chainchip svg { color: var(--swo-blue); }
.sg-journey-result { display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--border-default); padding-top: 14px; margin-top: auto; font: 600 13.5px/1.3 var(--font-heading); color: var(--text-heading); }
.sg-journey-result svg { color: var(--swo-success); flex: none; }

.sg-helpband { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: #fff; border: 1px solid var(--border-default); border-radius: 10px; padding: 22px 26px; margin-top: 24px; }
.sg-helpband--mist { background: var(--swo-mist); }
.sg-helpband .sg-helptext { display: flex; align-items: center; gap: 12px; font: 400 15px/1.5 var(--font-body); color: var(--text-body); }
.sg-helpband .sg-helptext svg { color: var(--swo-blue); flex: none; }

/* ---------- Step showcase (notarisation/apostille how-it-works) ---------- */
.sg-showcase-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 36px 0; border-top: 1px solid var(--border-default); }
.sg-showcase-row:first-child { border-top: none; }
.sg-showcase-row--rev > .sg-showcase-copy { order: 2; }
.sg-showcase-row--rev > .sg-showcase-illo { order: 1; }
.sg-showcase-copy h3 { font: 600 24px/1.15 var(--font-heading); letter-spacing: -0.01em; margin: 0 0 10px; }
.sg-showcase-copy > p { font: 400 15px/1.6 var(--font-body); color: var(--text-body); margin: 0; max-width: 460px; }
.sg-showcase-copy .sg-step-head { margin-bottom: 14px; }
.sg-showcase-copy .sg-step-head .sg-step-rule { flex: none; width: 52px; background: var(--border-strong); }
.sg-showcase-points { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sg-showcase-points .sg-checkitem { font-size: 13.5px; }
.sg-steppanel { background: var(--swo-mist); border: 1px solid var(--border-default); border-radius: 12px; min-height: 260px; display: flex; align-items: center; justify-content: center; padding: 30px 20px; }

/* ---------- Forms ---------- */
.sg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.sg-field label, .sg-field .sg-field-label { display: block; font: 600 13px/1.2 var(--font-heading); color: var(--text-heading); margin-bottom: 6px; }
.sg-field .sg-optional { color: var(--text-secondary); font-weight: 400; }
.sg-input, .sg-select, .sg-textarea {
  width: 100%; border: 1px solid var(--swo-grey-400); border-radius: 6px; background: #fff;
  padding: 10px 12px; font: 400 14.5px/1.5 var(--font-body); color: var(--swo-ink); outline: none;
}
.sg-textarea { resize: vertical; min-height: 74px; }
.sg-input:focus, .sg-select:focus, .sg-textarea:focus { border-color: var(--swo-blue); box-shadow: var(--shadow-focus); }
.sg-input::placeholder, .sg-textarea::placeholder { color: var(--swo-grey-600); opacity: 0.75; }
.sg-select:invalid { color: var(--swo-grey-600); }
.sg-field-error { font: 400 12.5px/1.4 var(--font-body); color: var(--swo-error); margin-top: 5px; display: none; }
.sg-radio-row { display: flex; gap: 18px; flex-wrap: wrap; }
.sg-radio-row label { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/1.3 var(--font-body); color: var(--text-body); cursor: pointer; }
.sg-radio-row input { accent-color: var(--swo-blue); width: 16px; height: 16px; }
.sg-form-note { display: inline-flex; align-items: center; gap: 8px; font: 400 12.5px/1.4 var(--font-body); color: var(--text-secondary); }
.sg-form-note svg { color: var(--swo-blue); flex: none; }
.sg-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.sg-attach-note {
  display: flex; align-items: flex-start; gap: 10px; border: 1.5px dashed var(--swo-grey-400); border-radius: 8px;
  background: var(--swo-mist); padding: 14px 16px; font: 400 13px/1.5 var(--font-body); color: var(--text-body);
}
.sg-attach-note svg { color: var(--swo-blue); flex: none; margin-top: 2px; }
.sg-form-grid2 { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.sg-form-points { display: flex; flex-direction: column; gap: 14px; }
.sg-form-points .sg-point { display: flex; align-items: center; gap: 12px; font: 400 14.5px/1.45 var(--font-body); color: var(--text-body); }

/* ---------- Apostille sections ---------- */
.sg-ap2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: stretch; }
.sg-apcard { background: #fff; border: 1px solid var(--border-default); box-shadow: 0 4px 14px rgba(7, 16, 35, 0.05); border-radius: 10px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.sg-apcard .sg-citems2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; align-content: start; flex: 1; }
.sg-apcard-dark { background: var(--swo-navy); border: 1px solid var(--swo-navy); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.sg-apcard-dark .sg-aptitle { font: 600 17px/1.25 var(--font-heading); color: #fff; }
.sg-apcard-dark p { font: 400 13.5px/1.55 var(--font-body); color: var(--text-on-dark-muted); margin: 0; flex: 1; }
.sg-cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sg-opt-card { display: flex; flex-direction: column; gap: 14px; --card-pad: 28px; }
.sg-opt-card .sg-opt-title { font: 600 19px/1.25 var(--font-heading); color: var(--text-heading); }
.sg-opt-card > p { font: 400 14.5px/1.6 var(--font-body); color: var(--text-body); margin: 0; flex: 1; }
.sg-opt-card .sg-opt-note { font: 400 12.5px/1.5 var(--font-body); color: var(--text-secondary); margin: 0; border-top: 1px solid var(--border-default); padding-top: 12px; }
.sg-opt-head { display: flex; align-items: center; gap: 12px; }
.sg-opt-head .sg-opt-title { font: 600 19px/1.25 var(--font-heading); }
.sg-examples-label { font: 600 11.5px/1.2 var(--font-heading); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--swo-blue); margin: 4px 0 10px; }
.sg-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.sg-examples .sg-checkitem { font-size: 13.5px; }
.sg-timeband { display: flex; align-items: center; gap: 14px; background: var(--swo-mist); border: 1px solid var(--border-default); border-radius: 10px; padding: 20px 24px; margin-top: 24px; }
.sg-timeband .sg-timeico { width: 40px; height: 40px; border-radius: 8px; background: #fff; border: 1px solid var(--border-default); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--swo-blue); }
.sg-timeband p { font: 400 14.5px/1.55 var(--font-body); color: var(--text-body); margin: 0; }
.sg-timeband strong { font: 600 14.5px/1.55 var(--font-heading); color: var(--text-heading); }

/* Embassy section */
.sg-embassy-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
.sg-embassy-aside { padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; }
.sg-embassy-aside .sg-citems2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }
.sg-embassy-aside .sg-others { font: 400 13.5px/1.35 var(--font-body); color: var(--text-on-dark-muted); font-style: italic; }
.sg-embassy-aside .sg-emb-note { font: 400 13.5px/1.6 var(--font-body); color: var(--text-on-dark-muted); margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 14px; }
.sg-emb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sg-quote-pill {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px;
  padding: 6px 11px; font: 700 10px/1 var(--font-heading); letter-spacing: 0.06em; text-transform: uppercase; color: var(--swo-blue-soft);
}

/* ---------- Business page ---------- */
.sg-clients { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; padding-top: 36px; padding-bottom: 36px; }
.sg-clients .sg-clients-label { font: 600 12px/1.4 var(--font-heading); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); flex: none; max-width: 170px; }
.sg-clients .sg-clients-row { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; flex: 1; }
.sg-clients .sg-client { font: 700 17px/1 var(--font-heading); color: var(--swo-grey-600); letter-spacing: -0.01em; white-space: nowrap; }
.sg-clients .sg-clients-note { font: 400 12.5px/1.4 var(--font-body); color: var(--text-secondary); max-width: 180px; }
.sg-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sg-way { display: flex; flex-direction: column; gap: 14px; --card-pad: 30px; }
.sg-way-head { display: flex; align-items: center; gap: 14px; }
.sg-way-head span { font: 600 20px/1.2 var(--font-heading); color: var(--text-heading); }
.sg-way > p { font: 400 14.5px/1.6 var(--font-body); color: var(--text-body); margin: 0; }
.sg-way .sg-checks { border-top: 1px solid var(--border-default); padding-top: 14px; margin-top: auto; margin-bottom: 0; }

/* ---------- About page ---------- */
.sg-about-hero-inner { padding-top: 84px; padding-bottom: 76px; text-align: center; }
.sg-about-hero-inner h1 { font: 700 48px/1.05 var(--font-heading); color: #fff; letter-spacing: -0.01em; max-width: 720px; margin: 0 auto; }
.sg-about-hero-inner .sg-hero-lede { font: 400 18px/1.55 var(--font-body); color: var(--text-on-dark-muted); max-width: 620px; margin: 20px auto 0; }
.sg-story-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.sg-story-grid .sg-story-para { font: 400 16px/1.7 var(--font-body); color: var(--text-body); margin: 0; }
.sg-story-paras { display: flex; flex-direction: column; gap: 16px; }
.sg-story-badges { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.sg-story-badges .sg-badge-frame { border: 1px solid var(--border-default); border-radius: 8px; padding: 8px; display: inline-flex; background: #fff; }
.sg-story-badges img { height: 64px; display: block; }
.sg-statband { border-radius: 12px; padding: 44px 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sg-statband .sg-stat-n { font: 700 40px/1 var(--font-heading); color: #fff; letter-spacing: -0.01em; }
.sg-statband .sg-stat-label { font: 400 13px/1.45 var(--font-body); color: var(--text-on-dark-muted); max-width: 200px; }
.sg-statband > div { display: flex; flex-direction: column; gap: 6px; }
.sg-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sg-value { display: flex; flex-direction: column; gap: 12px; --card-pad: 28px; }
.sg-value .sg-value-title { font: 600 18px/1.25 var(--font-heading); color: var(--text-heading); }
.sg-value p { font: 400 14px/1.6 var(--font-body); color: var(--text-body); margin: 0; }
.sg-operator { font: 400 13px/1.6 var(--font-body); color: var(--text-secondary); margin: 32px 0 0; border-left: 2px solid var(--border-strong); padding-left: 16px; max-width: 640px; }

/* ---------- Illustrations (shared bits) ---------- */
.sg-illo { position: relative; }
.sg-docsheet { background: #fff; border: 1px solid var(--swo-grey-300); border-radius: 8px; box-shadow: 0 14px 34px rgba(7, 16, 35, 0.14); padding: 18px; }
.sg-skel { display: flex; flex-direction: column; gap: 7px; }
.sg-skel span { height: 7px; border-radius: 2px; background: var(--swo-grey-200); }
.sg-seal {
  border-radius: 999px; background: #fff; border: 2px solid var(--swo-blue);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(7, 16, 35, 0.14); position: relative; flex: none; color: var(--swo-blue);
}
.sg-seal::before { content: ""; position: absolute; inset: 5px; border-radius: 999px; border: 1.5px dashed currentColor; opacity: 0.55; }
.sg-seal--navy { border-color: var(--swo-navy); color: var(--swo-navy); }
.sg-stampmark {
  display: inline-block; border: 2.5px solid var(--swo-blue); border-radius: 6px; color: var(--swo-blue);
  font: 700 13px/1 var(--font-heading); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 12px; background: rgba(255, 255, 255, 0.9);
}
.sg-stampmark--navy { border-color: var(--swo-navy); color: var(--swo-navy); }

/* ---------- 404 ---------- */
.sg-404 { text-align: center; padding-top: 96px; padding-bottom: 96px; }
.sg-404 h1 { font: 700 46px/1.05 var(--font-heading); color: #fff; }
.sg-404 p { font: 400 17px/1.55 var(--font-body); color: var(--text-on-dark-muted); margin: 16px auto 28px; max-width: 480px; }

/* ==========================================================================
   Responsive — mirrors the design's mobile rules (≤767px)
   ========================================================================== */
@media (max-width: 1080px) {
  .sg-head-trust { display: none; }
  .sg-hero h1 { font-size: 44px; }
}

@media (max-width: 767px) {
  h1, .sg-hero h1, .sg-hero-light h1, .sg-about-hero-inner h1 { font-size: 34px !important; line-height: 1.12 !important; }
  h2, .sg-sechead h2, .sg-ctaband h2, .sg-svcrow h2 { font-size: 26px !important; }
  h3, .sg-showcase-copy h3 { font-size: 20px !important; }
  :root { --container-pad: 20px; }

  /* Header: burger + sheet menu */
  .sg-header-inner { height: 60px; gap: 10px; justify-content: space-between; }
  .sg-logo img { height: 22px; }
  .sg-nav, .sg-head-trust { display: none; }
  .sg-burger { display: grid; }
  .sg-head-actions { gap: 6px; }
  .sg-header .sg-btn--sm { padding: 8px 12px; }
  .sg-nav-toggle:checked ~ .sg-header-row .sg-burger .i-open { display: none; }
  .sg-nav-toggle:checked ~ .sg-header-row .sg-burger .i-close { display: inline-flex; }
  .sg-nav-toggle:checked ~ .sg-mobile-menu { display: block; }
  .sg-mobile-menu {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 150; background: #fff;
    border-bottom: 1px solid var(--border-default); box-shadow: 0 28px 48px rgba(7, 16, 35, 0.20);
    padding: 6px 12px 18px; max-height: min(560px, calc(100vh - 130px)); overflow-y: auto;
  }
  .sg-mobile-menu .sg-menu-group {
    font: 600 11px/1 var(--font-heading); letter-spacing: var(--tracking-caps); text-transform: uppercase;
    color: var(--swo-blue); padding: 14px 12px 8px;
  }
  .sg-mobile-menu .sg-menu-item .sg-icotile--sm { width: 38px; height: 38px; }
  .sg-mobile-menu .sg-menu-rule { display: block; height: 1px; background: var(--border-default); margin: 10px 12px; }
  .sg-mobile-menu .sg-menu-trust { border-top: 1px solid var(--border-default); margin: 12px 12px 0; padding-top: 14px; }

  /* Single column everywhere */
  .sg-hero-grid, .sg-widget-grid, .sg-form-grid2, .sg-embassy-grid, .sg-story-grid,
  .sg-svcrow, .sg-svcrow--rev, .sg-showcase-row, .sg-cards2, .sg-ways, .sg-ap2,
  .sg-doccats, .sg-journeys, .sg-values, .sg-doctypes, .sg-svc-grid, .sg-reviews-grid,
  .sg-footer-grid, .sg-form-grid, .sg-statband, .sg-examples { grid-template-columns: 1fr !important; }
  .sg-svcrow--rev > .sg-svcrow-copy, .sg-showcase-row--rev > .sg-showcase-copy { order: 0; }
  .sg-svcrow--rev > .sg-svcrow-illo, .sg-showcase-row--rev > .sg-showcase-illo { order: 0; }
  .sg-hero-grid { padding-top: 60px; padding-bottom: 64px; }
  .sg-hero-illo { display: none; }
  .sg-section { padding-top: 64px; padding-bottom: 64px; }
  .sg-section--tight { padding-top: 60px; padding-bottom: 60px; }

  /* Swipeable rows: steps, reviews, countries (CSS scroll-snap; no dots) */
  .sg-steps4, .sg-cgrid {
    display: flex; overflow-x: auto; gap: 14px; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--container-pad)); padding: 2px var(--container-pad) 6px;
    scroll-padding-left: var(--container-pad); -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sg-steps4::-webkit-scrollbar, .sg-cgrid::-webkit-scrollbar { display: none; }
  .sg-steps4 > * { flex: none; width: 76%; scroll-snap-align: start; border: 1px solid var(--border-default); border-radius: 10px; background: #fff; padding: 20px 20px 22px; }
  .on-dark .sg-steps4 > * { background: var(--swo-navy-raise); border-color: rgba(255, 255, 255, 0.14); }
  .sg-cgrid > * { flex: none; width: 86%; scroll-snap-align: start; }
  .sg-cregion--wide .sg-citems { grid-template-columns: 1fr 1fr; }
  .sg-apcard .sg-citems2 { grid-template-columns: 1fr 1fr; }

  .sg-tabs { margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad)); padding: 0 var(--container-pad); }
  .sg-frame iframe { height: 700px; }
  .sg-truststrip-badges img { height: 44px; }
  .sg-statband { padding: 32px 28px; }
  .sg-illo { zoom: 0.7; }
  [data-mobile-stack] { grid-template-columns: 1fr !important; }
  [data-mobile-2col] { grid-template-columns: 1fr 1fr !important; }
}