:root {
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --accent:#0284c7;
  --accent-2:#0891b2;
  --ring:rgba(2,132,199,.25);
  --shadow:0 10px 24px rgba(2,6,23,.08);
  --radius:18px;
  --container-pad:24px;
  --card-pad:22px;
  --teal:#1b79a5
}
* {
  box-sizing:border-box
}
html,body {
  margin:0;
  padding:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";
  background:var(--bg);
  color:var(--text)
}
img {
  max-width:100%;
  height:auto;
  display:block
}
a {
  color:var(--accent);
  text-decoration:none
}
a:hover {
  text-decoration:underline
}
.container,.wrap {
  max-width:1200px;
  margin:0 auto;
  padding-left:var(--container-pad);
  padding-right:var(--container-pad)
}
.grid {
  display:grid;
  gap:22px
}
.cards-3 {
  grid-template-columns:repeat(1,1fr)
}
@media (min-width:720px) {
  .cards-3 {
    grid-template-columns:repeat(3,1fr)
  }
}
.mt-44 {
  margin-top:44px
}
.mt-18 {
  margin-top:18px
}
.divider {
  height:1px;
  background:rgba(2,6,23,.08);
  margin:18px 0
}
.muted {
  color:var(--muted)
}
header {
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(248,250,252,.8);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(2,6,23,.08)
}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  letter-spacing:.2px
}
.brand img.logo-img {
  height:56px;
  width:auto;
  border-radius:10px
}
.menu,.menu li,.submenu,.submenu li {
  list-style:none;
  margin:0;
  padding:0
}
.menu a,.menu button {
  color:var(--muted)
}
.menu a:hover,.menu button:hover {
  background:rgba(2,132,199,.10);
  color:var(--text)
}
@media (min-width:861px) {
  .nav-toggle {
    display:none
  }
  .menu {
    display:flex;
    align-items:center;
    gap:28px;
    position:relative
  }
  .menu>li {
    position:relative
  }
  .menu>li>a {
    display:inline-block;
    padding:12px 6px;
    text-decoration:none
  }
  .menu>li:hover>.submenu {
    display:block
  }
  .submenu {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:220px;
    padding:8px;
    background:#fff;
    border:1px solid rgba(11,42,63,.08);
    border-radius:12px;
    box-shadow:0 10px 30px rgba(11,42,63,.12);
    z-index:1000
  }
  .submenu li a {
    padding:8px 12px;
    display:block
  }
}
@media (max-width:860px) {
  .menu>li {
    margin-bottom:10px
  }
  .menu a,.menu button {
    padding-top:18px;
    padding-bottom:18px
  }
  .submenu a {
    padding-top:12px;
    padding-bottom:12px
  }
  .menu>li:nth-child(3),.menu>li:nth-child(4) {
    margin-bottom:24px!important
  }
}
.btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(2,6,23,.08);
  background:#fff;
  color:var(--text);
  text-decoration:none;
  box-shadow:var(--shadow);
  transition:transform .15s ease,border-color .15s ease
}
.btn:hover {
  transform:translateY(-2px);
  text-decoration:none
}
.btn.primary {
  background:linear-gradient(180deg,var(--accent),#0369a1);
  color:#fff;
  border-color:transparent
}
.card {
  background:var(--card);
  border:1px solid rgba(2,6,23,.08);
  border-radius:var(--radius);
  padding:var(--card-pad);
  box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease
}
.card:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(15,23,42,.15)
}
.chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(2,6,23,.08);
  background:#fff;
  color:var(--muted);
  font-weight:600;
  font-size:12px
}
.media-thumb {
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  background:#eef2ff;
  border:1px solid rgba(2,6,23,.08);
  position:relative;
  display:grid;
  place-items:center
}
.media-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease
}
.media-thumb img:hover {
  transform:scale(1.05)
}
.list {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px
}
.list li {
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:var(--muted)
}
.hero {
  padding:40px 0 48px;
  position:relative;
  overflow:hidden
}
.hero h1,.hero h2 {
  line-height:1.1;
  margin:0 0 14px;
  letter-spacing:.3px
}
.hero h1 {
  font-size:clamp(28px,5vw,40px)
}
.hero h2 {
  font-size:clamp(22px,4vw,34px)
}
.hero p.lede {
  font-size:clamp(14px,2vw,18px);
  max-width:900px
}
.hero-cta {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px
}
h2.section-title {
  font-size:clamp(22px,3vw,34px);
  margin:8px 0 16px
}
.section-sub {
  color:var(--muted);
  margin-top:-10px;
  margin-bottom:18px
}
.by-numbers .card {
  box-shadow:none;
  border-color:rgba(2,6,23,.06)
}
.by-numbers .card:nth-child(1) {
  background:#e0f2fe
}
.by-numbers .card:nth-child(2) {
  background:#fae8ff
}
.by-numbers .card:nth-child(3) {
  background:#fef3c7
}
.by-numbers .card:nth-child(4) {
  background:#dcfce7
}
.brands {
  margin-top:44px
}
.brand-row {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.brand-badge {
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  border-radius:999px;
  padding:10px 14px;
  box-shadow:var(--shadow)
}
.brand-badge img {
  width:28px;
  height:28px;
  border-radius:8px;
  object-fit:cover
}
.brand-badge span {
  font-weight:700;
  color:var(--text)
}
.brand-badge small {
  color:var(--muted);
  font-weight:600
}
footer {
  margin-top:48px;
  padding:32px 0;
  color:var(--muted);
  border-top:1px solid rgba(2,6,23,.08)
}
.footer-grid {
  display:grid;
  gap:22px;
  grid-template-columns:1fr
}
@media (min-width:860px) {
  .footer-grid {
    grid-template-columns:1.5fr 1fr 1fr 1fr
  }
}
.hero-chip {
  display:inline-block;
  background:#fff;
  color:var(--text);
  border-radius:999px;
  padding:10px 20px;
  box-shadow:0 4px 14px rgba(2,6,23,.08);
  font-weight:600;
  font-size:16px;
  margin-bottom:20px;
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.card-wide {
  grid-column: 1 / -1;
}
.thumb-row {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
[id^="card-"] {
  scroll-margin-top:120px;
}
.mt-66 {
  margin-top:66px
}
/* Keep consistent spacing after headers */
h1 {
  margin-bottom: 16px;
}
h2 {
  margin-bottom: 12px;
}
h3 {
  margin-bottom: 10px;
}
.section-sub {
  margin-top: 10px;
}
/* === Case Studies canonical layout (from uploaded reference) === */
.case-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media(min-width:1000px) {
  .case-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* === Tuplebits new label style 2025-11-04 === */
.lbl_bold {
  font-weight: 700;
  color: #0f172a;
}
/* === Tuplebits color normalization 2025-11-04 === */
/* Ensure consistent text color across cards and sections */
.card, .card p, .card li, .card h3 {
  color: var(--text);
}
.section-sub, .muted {
  color: var(--muted);
}
/* === Tuplebits muted text default 2025-11-04 === */
/* Make description text use muted color by default */
.card p,
.card li,
.section-sub,
.container p {
  color: var(--muted);
}
/* Keep headers and key labels strong */
.card h3,
h1, h2, h3,
.lbl_bold, .label {
  color: var(--text);
  font-weight: 700;
}
/* === Tuplebits card header & label refinement 2025-11-04 === */
/* Add more space after card headers */
.card h3 {
  margin-bottom: 14px;
  /* previously tighter, now more breathable */
}
/* Soften Objective, Approach, Outcome labels */
.label,
.lbl_bold {
  color: #5b6470;
  /* softer gray-blue tone for subtle contrast */
  font-weight: 700;
}