/* ===== Sprintbreak custom responsive + interactive layer ===== */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg { max-width: 100%; }

/* Fluid typography for key headings */
.sb-h1 { font-size: clamp(2.1rem, 6.4vw, 4rem) !important; line-height: 1.02em !important; }
.sb-h2 { font-size: clamp(1.7rem, 4.4vw, 2.4rem) !important; }
.sb-h2-lg { font-size: clamp(1.9rem, 5vw, 2.5rem) !important; }
.sb-stat-num { font-size: clamp(2.2rem, 5.5vw, 3.5rem) !important; }
.sb-hero-copy { font-size: clamp(0.98rem, 2.4vw, 1.19rem) !important; }

/* ===== NAV ===== */
.sb-nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.sb-nav-links a { color: #35586A; font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.sb-nav-links a:hover { color: #06293C; }
.sb-nav-cta { display: inline-flex; align-items: center; gap: 10px; background: #005582; color: #F5FAF7 !important; padding: 12px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.sb-nav-cta:hover { background: #007E86; color: #FFFFFF !important; }
.sb-burger { display: none; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #C8DFD5; background: transparent; border-radius: 999px; cursor: pointer; padding: 0; flex-shrink: 0; }
.sb-burger span { display: block; width: 18px; height: 1.5px; background: #06293C; border-radius: 2px; margin: 4px 0; }
.sb-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; }
.sb-nav-logo img { height: 27px; width: auto; display: block; }

.sb-mobile-panel { position: fixed; inset: 0; z-index: 9999; background: #005582; color: #F5FAF7; padding: 16px 24px 32px; display: none; flex-direction: column; overflow-y: auto; }
.sb-mobile-panel.sb-open { display: flex; }
.sb-mobile-panel-top { height: 56px; display: flex; align-items: center; justify-content: space-between; }
.sb-mobile-panel-top img { height: 24px; width: auto; }
.sb-mobile-close { width: 44px; height: 44px; border: 1px solid #2B7CA6; background: transparent; border-radius: 999px; color: #F5FAF7; font-size: 20px; cursor: pointer; }
.sb-mobile-links { margin-top: 24px; display: grid; }
.sb-mobile-links a { padding: 17px 0; border-bottom: 1px solid #2B7CA6; color: #F5FAF7; font-size: 1.5rem; letter-spacing: -0.03em; font-weight: 500; text-decoration: none; }
.sb-mobile-cta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #F5FAF7; color: #06293C !important; padding: 18px 24px; border-radius: 999px; font-size: 16px; font-weight: 600; text-decoration: none; }

@media (max-width: 860px) {
  .sb-nav-links { display: none !important; }
  .sb-burger { display: flex !important; flex-direction: column !important; }
}
@media (max-width: 640px) {
  .sb-nav-cta { display: none !important; }
}

/* ===== TJANSTER CAROUSEL ===== */
.sb-scroller { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
.sb-scroller::-webkit-scrollbar { display: none; }
.sb-scroller > div { scroll-snap-align: start; flex: 0 0 300px; }
@media (min-width: 900px) { .sb-scroller > div { flex: 0 0 calc(33.333% - 14px); } }
.sb-svc-card { transition: transform 300ms ease, box-shadow 300ms ease; cursor: default; }
.sb-svc-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(6,41,60,0.08); }
.sb-scrollbar-track { width: 100%; height: 2px; background: #D2E6DC; border-radius: 2px; position: relative; overflow: hidden; margin-top: 24px; }
.sb-scrollbar-fill { position: absolute; top: 0; left: 0; height: 100%; background: #00C2C7; border-radius: 2px; }
.sb-carousel-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #C8DFD5; background: transparent; color: #06293C; font-size: 14px; cursor: pointer; }
.sb-carousel-btn:hover { border-color: #005582; }

/* ===== PROCESS STEPS ===== */
.sb-step { transition: transform 300ms ease, background 300ms ease; }
.sb-step:hover { transform: translateY(-4px); }

/* ===== CASE CARDS ===== */
.sb-case-card:hover .sb-case-img { transform: scale(1.02); }
.sb-case-img { transition: transform 500ms cubic-bezier(.2,.7,.2,1); }

/* Responsive grids */
@media (max-width: 980px) {
  .sb-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .sb-grid-2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .sb-grid-4, .sb-grid-3 { grid-template-columns: 1fr !important; }
}

/* Insikter category pill filter */
.sb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-pill { display: inline-block; border: 1px solid #C8DFD5; color: #35586A; background: transparent; border-radius: 999px; padding: 9px 18px; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.sb-pill-active { background: #06293C !important; color: #F5FAF7 !important; border-color: #06293C !important; }
.sb-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; }
.sb-article-card { transition: transform 300ms ease; }
.sb-article-card a { color: inherit; }
.sb-article-card:hover { transform: translateY(-4px); }
.sb-article-card.sb-hidden { display: none; }
@media (max-width: 900px) { .sb-article-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .sb-article-grid { grid-template-columns: 1fr; } }

.sb-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; }
.sb-related-grid .sb-article-card:hover h3 { color: #007E86; }
.sb-related-grid h3 { transition: color 240ms ease; }
@media (max-width: 900px) { .sb-related-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .sb-related-grid { grid-template-columns: 1fr; } }

/* Reading progress bar */
.sb-progress-track { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #D2E6DC; }
.sb-progress-fill { width: 0%; height: 100%; background: #007E86; transition: width 100ms linear; }
header, .sb-nav-row { position: relative; }

/* Article TOC sidebar */
.sb-toc-mount { position: sticky; top: 108px; }
.sb-toc-label { font-family: JetBrains Mono; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #7595A3; margin-bottom: 18px; }
.sb-toc-nav { display: grid; gap: 2px; border-left: 1px solid #C8DFD5; }
.sb-toc-nav a { display: block; padding: 9px 0 9px 16px; margin-left: -1px; border-left: 2px solid transparent; color: #6E93A3; font-size: 14px; line-height: 1.4; letter-spacing: -0.01em; text-decoration: none; transition: color 200ms ease, border-color 200ms ease; }
.sb-toc-nav a.sb-toc-active { border-left: 2px solid #007E86; color: #06293C; font-weight: 600; }
.sb-toc-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; font-size: 14px; font-weight: 600; color: #06293C; border: 1px solid #C8DFD5; padding: 12px 18px; border-radius: 999px; text-decoration: none; }
.sb-toc-cta:hover { background: #005582; color: #F5FAF7; }
@media (max-width: 980px) { .sb-toc-mount { display: none; } }

/* Article body rich elements */
.et_pb_post_content h2 { margin-top: 52px; font-size: clamp(1.5rem,2.6vw,2rem); line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; scroll-margin-top: 110px; color: #06293C; }
.et_pb_post_content h3 { margin-top: 28px; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; color: #06293C; }
.et_pb_post_content p { font-size: 18px; line-height: 1.72; color: #143647; margin-top: 18px; }
.sb-pullquote { margin: 40px 0; border-left: 2px solid #007E86; padding: 4px 0 4px 26px; }
.sb-pullquote blockquote { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(1.3rem,2.2vw,1.7rem); line-height: 1.35; letter-spacing: -0.02em; color: #06293C; margin: 0; }
.sb-stats-grid { margin: 26px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1px; background: #C8DFD5; border: 1px solid #C8DFD5; border-radius: 12px; overflow: hidden; }
.sb-stats-grid > div { background: #F5FAF7; padding: 24px 20px; }
.sb-stats-grid .sb-stat-num { font-size: 2.2rem; line-height: 1; letter-spacing: -0.045em; font-weight: 600; }
.sb-stats-grid p { margin-top: 10px !important; font-size: 14px !important; line-height: 1.55 !important; color: #4A6875 !important; }
.sb-inline-cta { margin: 44px 0; border: 1px solid #005582; border-radius: 16px; background: #005582; color: #F5FAF7; padding: clamp(26px,3.4vw,40px); }
.sb-inline-cta .sb-eyebrow { font-family: JetBrains Mono; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #00C2C7; }
.sb-inline-cta h3 { margin-top: 18px !important; color: #F5FAF7 !important; font-size: clamp(1.3rem,2.2vw,1.5rem); line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; max-width: 26ch; }
.sb-inline-cta p { color: #C6E2EE !important; max-width: 42ch; margin-top: 14px !important; font-size: 16px !important; }
.sb-checklist { margin-top: 24px; display: grid; gap: 12px; list-style: none; padding: 0; }
.sb-checklist li { display: grid; grid-template-columns: 20px 1fr; gap: 14px; font-size: 17px; line-height: 1.6; color: #143647; }
.sb-checklist li span:first-child { color: #007E86; font-family: JetBrains Mono; font-size: 13px; padding-top: 4px; }
.sb-compare-table { margin: 28px 0; overflow-x: auto; border: 1px solid #C8DFD5; border-radius: 12px; }
.sb-compare-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.sb-compare-table th { text-align: left; padding: 14px 18px; font-family: JetBrains Mono; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #4A6875; font-weight: 500; border-bottom: 1px solid #C8DFD5; background: #DAF8E3; }
.sb-compare-table td { padding: 14px 18px; border-bottom: 1px solid #DCEDE5; color: #4A6875; }
.sb-compare-table td:first-child { color: #06293C; font-weight: 500; }
.sb-tags-row { margin-top: 48px; padding-top: 24px; border-top: 1px solid #C8DFD5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sb-tags-row .sb-tags-label { font-family: JetBrains Mono; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #7595A3; margin-right: 8px; }
.sb-tags-row span.sb-tag { padding: 8px 14px; border: 1px solid #C8DFD5; border-radius: 999px; font-size: 13.5px; background: #DAF8E3; }

/* Article layout width fixes */
.et_pb_post_content { max-width: 740px; }
.et_pb_post_content .sb-inline-cta, .et_pb_post_content .sb-stats-grid, .et_pb_post_content .sb-compare-table { max-width: 740px; }
@media (max-width: 980px) { .et_pb_post_content { max-width: 100%; } }

/* CRITICAL FIX: ensure all rows have horizontal gutter padding (was missing, causing edge-to-edge text on mobile/all widths under maxWidth) */
.et_pb_row { padding-left: clamp(20px, 4vw, 56px) !important; padding-right: clamp(20px, 4vw, 56px) !important; box-sizing: border-box; }
/* Nav code block handles its own inset; the parent row gets zero extra padding for nav specifically */
.sb-nav-row { margin: 0 clamp(-56px,-4vw,-20px); }
