/* ═══════════════════════════════════════════════════════
   THE BASE DIGITAL — Design System v6
   thebasedigital.com.tr · 2026
   Premium agency — animated, conversion-focused
═══════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  --paper: #F4F2ED;
  --ink:   #001E2B;
  --sky:   #72B4CD;
  --accent:#00A3E0;
  --steel: #55676F;
  --fog:   #DEDAD2;
  --white: #FFFFFF;
  --e1: cubic-bezier(.16,1,.3,1);
  --e2: cubic-bezier(.76,0,.24,1);
  --e3: cubic-bezier(.34,1.56,.64,1);
}

/* ── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; font-size: 16px; }
body {
  font-family: 'DM Sans', 'Poppins', sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}

/* grain texture */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9997; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px; opacity: .024; mix-blend-mode: overlay;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

/* ── PROGRESS BAR ────────────────────────────────────── */
#tbd-prog {
  position: fixed; top: 0; left: 0; z-index: 9996;
  height: 2px; width: 0%; background: linear-gradient(90deg, var(--accent), var(--sky));
  transition: width .1s linear; pointer-events: none;
}

/* ── LOADER ──────────────────────────────────────────── */
#tbd-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  transition: opacity .7s var(--e1), visibility .7s;
}
#tbd-loader.out { opacity: 0; visibility: hidden; }
.tbd-loader-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 22px; letter-spacing: -.02em; color: var(--white);
  opacity: 0; animation: tbdFadeUp .5s var(--e1) .2s forwards;
}
.tbd-loader-logo em { font-style: normal; color: var(--accent); }
.tbd-loader-bar {
  position: absolute; bottom: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--sky));
  width: 0%; animation: tbdLoaderBar 1.4s var(--e1) .1s forwards;
}
@keyframes tbdLoaderBar { from { width: 0% } to { width: 100% } }

/* ── CURSOR ──────────────────────────────────────────── */
#tbd-cur {
  position: fixed; z-index: 9998; pointer-events: none; top: 0; left: 0;
  transform: translate(-50%,-50%); border-radius: 50%;
  width: 9px; height: 9px; background: var(--accent);
  transition: width .22s var(--e1), height .22s var(--e1), background .22s, border-radius .22s;
  display: none;
}
#tbd-cur-r {
  position: fixed; z-index: 9997; pointer-events: none; top: 0; left: 0;
  transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(0,163,224,.4);
  transition: width .3s var(--e1), height .3s var(--e1), border-color .3s;
  display: none;
}
body.tbd-cursor-enabled #tbd-cur,
body.tbd-cursor-enabled #tbd-cur-r { display: block; }
body.tbd-ch #tbd-cur  { width: 13px; height: 13px; }
body.tbd-cd #tbd-cur  { background: var(--sky); }
body.tbd-cd #tbd-cur-r{ border-color: rgba(114,180,205,.35); }
body.tbd-cl #tbd-cur  { width: 48px; height: 48px; background: rgba(0,30,43,.1); border-radius: 2px; }
body.tbd-cl #tbd-cur-r{ opacity: 0; }
@media (hover: none) { #tbd-cur, #tbd-cur-r { display: none; } }

/* ── NAV ─────────────────────────────────────────────── */
.tbd-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 64px; padding: 0 52px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .4s var(--e1), border-color .4s, box-shadow .4s;
}
.tbd-nav.scrolled {
  background: rgba(244,242,237,.97);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--fog);
  box-shadow: 0 1px 24px rgba(0,30,43,.05);
}
.tbd-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 20px; letter-spacing: -.025em; color: var(--ink);
  display: flex; align-items: center; gap: 5px;
  font-weight: 400;
}
.tbd-logo-word {
  font-family: 'DM Serif Display', serif;
  font-size: 16px;
  letter-spacing: -.02em;
  color: var(--paper);
  text-shadow: 0 1px 18px rgba(0,0,0,.28);
}
.tbd-nav.scrolled .tbd-logo-word {
  color: var(--ink);
  text-shadow: none;
}
.tbd-nav:not(.scrolled) .tbd-nav-links a {
  color: rgba(244,242,237,.64);
}
.tbd-nav:not(.scrolled) .tbd-nav-links a:hover {
  color: var(--paper);
}
.tbd-nav:not(.scrolled) .tbd-nav-cta {
  color: var(--paper);
}
.tbd-nav-links { display: flex; gap: 32px; }
.tbd-nav-links a {
  font-size: 13px; font-weight: 400; color: var(--steel); letter-spacing: .01em;
  position: relative; transition: color .2s;
}
.tbd-nav-links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1px; background: var(--ink);
  transition: width .28s var(--e1);
}
.tbd-nav-links a:hover { color: var(--ink); }
.tbd-nav-links a:hover::after { width: 100%; }
.tbd-nav-cta {
  background: var(--ink); color: var(--white);
  padding: 9px 20px; border-radius: 2px; font-size: 13px; font-weight: 500; letter-spacing: .02em;
  display: inline-block; position: relative; overflow: hidden;
  transition: transform .22s var(--e1), box-shadow .22s var(--e1);
}
.tbd-nav-cta::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg,transparent 30%,rgba(255,255,255,.09) 52%,transparent 66%);
  transform: translateX(-100%); transition: transform .55s var(--e1);
}
.tbd-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,30,43,.28); }
.tbd-nav-cta:hover::before { transform: translateX(100%); }

/* mobile hamburger */
.tbd-nav-hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  padding: 4px; background: none; border: none;
}
.tbd-nav-hamburger span {
  display: block; width: 22px; height: 1.5px; background: var(--ink);
  transition: transform .3s var(--e1), opacity .2s;
}
body.tbd-menu-open .tbd-nav-hamburger span:nth-child(1) { transform: rotate(45deg) translate(4.5px,4.5px); }
body.tbd-menu-open .tbd-nav-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.tbd-menu-open .tbd-nav-hamburger span:nth-child(3) { transform: rotate(-45deg) translate(4.5px,-4.5px); }

/* mobile menu overlay */
.tbd-mobile-menu {
  position: fixed; inset: 0; z-index: 900; background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; opacity: 0; visibility: hidden;
  transition: opacity .4s var(--e1), visibility .4s;
}
body.tbd-menu-open .tbd-mobile-menu { opacity: 1; visibility: visible; }
.tbd-mobile-menu a {
  font-family: 'DM Serif Display', serif; font-size: 36px; letter-spacing: -.02em;
  color: var(--white); font-weight: 400;
  opacity: 0; transform: translateY(14px);
  transition: color .2s, opacity .4s var(--e1), transform .4s var(--e1);
}
body.tbd-menu-open .tbd-mobile-menu a {
  opacity: 1; transform: none;
}
body.tbd-menu-open .tbd-mobile-menu a:nth-child(1) { transition-delay: .05s; }
body.tbd-menu-open .tbd-mobile-menu a:nth-child(2) { transition-delay: .10s; }
body.tbd-menu-open .tbd-mobile-menu a:nth-child(3) { transition-delay: .15s; }
body.tbd-menu-open .tbd-mobile-menu a:nth-child(4) { transition-delay: .20s; }
body.tbd-menu-open .tbd-mobile-menu a:nth-child(5) { transition-delay: .25s; }
body.tbd-menu-open .tbd-mobile-menu a:nth-child(6) { transition-delay: .30s; }
body.tbd-menu-open .tbd-mobile-menu a:nth-child(7) { transition-delay: .35s; }
.tbd-mobile-menu a:hover { color: var(--sky); }

/* ── BUTTONS ─────────────────────────────────────────── */
.tbd-btn-ink {
  background: var(--ink); color: var(--white);
  padding: 13px 26px; border-radius: 2px; font-size: 13px; font-weight: 500; letter-spacing: .02em;
  display: inline-block; position: relative; overflow: hidden;
  transition: transform .22s var(--e1), box-shadow .22s var(--e1);
}
.tbd-btn-ink::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg,transparent 30%,rgba(255,255,255,.09) 52%,transparent 66%);
  transform: translateX(-100%); transition: transform .55s var(--e1);
}
.tbd-btn-ink:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,30,43,.3); }
.tbd-btn-ink:hover::before { transform: translateX(100%); }
.tbd-btn-outline {
  border: 1.5px solid rgba(0,30,43,.2); color: var(--ink);
  padding: 12px 22px; border-radius: 2px; font-size: 13px; font-weight: 400;
  display: inline-block; transition: border-color .2s, transform .22s var(--e1), background .2s;
}
.tbd-btn-outline:hover {
  border-color: var(--ink); transform: translateY(-2px);
  background: rgba(0,30,43,.04);
}
.tbd-btn-white {
  background: var(--white); color: var(--accent);
  padding: 14px 32px; border-radius: 2px; font-size: 14px; font-weight: 600; letter-spacing: .01em;
  display: inline-block; white-space: nowrap; position: relative; overflow: hidden;
  transition: transform .22s var(--e1), box-shadow .22s var(--e1);
}
.tbd-btn-white::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg,transparent 30%,rgba(0,163,224,.07) 52%,transparent 66%);
  transform: translateX(-100%); transition: transform .55s var(--e1);
}
.tbd-btn-white:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.18); }
.tbd-btn-white:hover::before { transform: translateX(100%); }

/* ── MARQUEE ─────────────────────────────────────────── */
.tbd-marquee {
  overflow: hidden; background: var(--ink); padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.tbd-marquee-track {
  display: flex; flex-wrap: nowrap; align-items: center;
  width: max-content; min-width: 200%;
  white-space: nowrap; will-change: transform;
  animation: tbdMarquee 32s linear infinite;
}
.tbd-marquee-track:hover { animation-play-state: paused; }
@keyframes tbdMarquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.tbd-mqi {
  flex: 0 0 auto; min-width: max-content;
  display: inline-flex; align-items: center; gap: 20px; padding: 0 20px;
  font-size: 11px; line-height: 1; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(244,242,237,.3);
  transition: color .2s;
}
.tbd-mqi::after { content: '✦'; font-size: 7px; color: var(--accent); opacity: .6; }
.tbd-marquee-track:hover .tbd-mqi { color: rgba(244,242,237,.5); }

/* ── METRICS BAND ────────────────────────────────────── */
.tbd-metrics {
  display: grid; grid-template-columns: repeat(4,1fr);
  background: var(--white); border-bottom: 1px solid var(--fog);
}
.tbd-met {
  padding: 44px 40px; border-right: 1px solid var(--fog);
  position: relative; cursor: default; transition: background .3s; overflow: hidden;
}
.tbd-met:last-child { border-right: none; }
.tbd-met::before {
  content: ''; position: absolute; left: 0; top: 0; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--sky));
  transition: width .7s var(--e1);
}
.tbd-met:hover { background: #FDFCF9; }
.tbd-met:hover::before { width: 100%; }
.tbd-met-n {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(40px,4.2vw,62px); line-height: 1; letter-spacing: -.04em;
  color: var(--ink); display: flex; align-items: baseline; gap: 2px;
}
.tbd-met-suf {
  font-family: 'DM Sans', sans-serif; font-size: .42em;
  color: var(--accent); font-weight: 600; letter-spacing: .01em;
}
.tbd-met-label {
  font-size: 12px; font-weight: 300; color: var(--steel);
  margin-top: 10px; letter-spacing: .02em;
}

/* ── STATEMENT STRIP ─────────────────────────────────── */
.tbd-statement {
  padding: clamp(68px,8.5vh,108px) 52px;
  background: var(--white); border-bottom: 1px solid var(--fog);
  position: relative; overflow: hidden;
}
.tbd-statement::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, var(--accent), var(--sky), transparent);
}
.tbd-stmt-text {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(26px,3.8vw,56px); line-height: 1.14; letter-spacing: -.025em;
  color: var(--ink); max-width: 940px;
}
.tbd-stmt-text em { font-style: italic; color: var(--sky); }
.tbd-stmt-attr {
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(0,30,43,.3); margin-top: 24px;
  display: flex; align-items: center; gap: 10px;
}
.tbd-stmt-attr::before { content: ''; width: 18px; height: 1px; background: currentColor; }

/* ── SERVICES ACCORDION ──────────────────────────────── */
.tbd-svc-sec { padding: clamp(80px,10vh,116px) 52px; }
.tbd-svc-top {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: end; margin-bottom: 64px;
}
.tbd-svc-list { border-top: 1px solid var(--fog); }
.tbd-sr {
  border-bottom: 1px solid var(--fog);
  position: relative; overflow: hidden; cursor: default;
}
.tbd-sr-fill {
  position: absolute; inset: 0; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .54s var(--e2); z-index: 0; will-change: transform;
}
.tbd-sr:hover .tbd-sr-fill { transform: scaleX(1); }
.tbd-sr > *:not(.tbd-sr-fill) { position: relative; z-index: 1; }
.tbd-sr-top {
  display: grid; grid-template-columns: 60px 1fr auto auto;
  align-items: center; gap: 18px; padding: 28px 0;
  transition: padding-left .28s var(--e1);
}
.tbd-sr:hover .tbd-sr-top { padding-left: 12px; }
.tbd-sr-n {
  font-family: 'DM Serif Display', serif; font-size: 28px; line-height: 1;
  letter-spacing: -.03em; color: rgba(0,30,43,.1); transition: color .38s;
}
.tbd-sr:hover .tbd-sr-n { color: rgba(255,255,255,.1); }
.tbd-sr-name {
  font-size: 18.5px; font-weight: 500; letter-spacing: -.01em;
  color: var(--ink); transition: color .3s;
}
.tbd-sr:hover .tbd-sr-name { color: var(--white); }
.tbd-sr-tag {
  font-size: 10.5px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(0,30,43,.3); transition: color .3s;
}
.tbd-sr:hover .tbd-sr-tag { color: rgba(255,255,255,.3); }
.tbd-sr-arr {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(0,30,43,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--steel);
  transition: background .3s, border-color .3s, color .3s, transform .38s var(--e3);
}
.tbd-sr:hover .tbd-sr-arr {
  background: var(--accent); border-color: var(--accent);
  color: var(--white); transform: rotate(45deg) scale(1.1);
}
.tbd-sr-desc {
  display: grid; grid-template-columns: 60px 1fr 1fr auto; gap: 18px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .54s var(--e1), opacity .38s, padding .44s var(--e1);
}
.tbd-sr:hover .tbd-sr-desc { max-height: 140px; opacity: 1; padding-bottom: 28px; }
.tbd-sr-dt {
  grid-column: 2/3; font-size: 13.5px; font-weight: 300;
  color: rgba(244,242,237,.62); line-height: 1.78;
}
.tbd-sr-dl {
  grid-column: 4/5; align-self: end;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sky); white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
  transition: gap .22s var(--e1), color .2s;
}
.tbd-sr-dl:hover { gap: 11px; color: #90cde0; }
.tbd-sr-dl::after { content: '→'; }

/* ── ABOUT DARK ──────────────────────────────────────── */
.tbd-about {
  background: var(--ink);
  padding: clamp(80px,10vh,120px) 52px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center;
  position: relative; overflow: hidden;
}
.tbd-about::before {
  content: '"'; position: absolute; right: -20px; top: -60px;
  font-family: 'DM Serif Display', serif; font-size: 540px; line-height: .65;
  color: rgba(255,255,255,.018); pointer-events: none; user-select: none;
}
.tbd-about::after {
  content: ''; position: absolute; left: -120px; bottom: -120px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,163,224,.06) 0%, transparent 70%);
  pointer-events: none;
}
.tbd-about-quote {
  font-family: 'DM Serif Display', serif; font-style: italic;
  font-size: clamp(20px,2.2vw,32px); line-height: 1.38; letter-spacing: -.02em;
  color: var(--paper);
  border-left: 2px solid var(--sky); padding-left: 26px; margin-bottom: 40px;
}
.tbd-about-pts { display: flex; flex-direction: column; }
.tbd-about-pt {
  padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.07);
  display: grid; grid-template-columns: 18px 1fr; gap: 14px; align-items: start;
  transition: padding-left .22s var(--e1); cursor: default;
}
.tbd-about-pt:last-child { border-bottom: none; }
.tbd-about-pt:hover { padding-left: 8px; }
.tbd-about-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--sky);
  margin-top: 8px; justify-self: center;
  transition: transform .22s var(--e3), background .2s;
}
.tbd-about-pt:hover .tbd-about-dot { transform: scale(1.8); background: var(--accent); }
.tbd-about-pt-text {
  font-size: 13.5px; font-weight: 300; color: rgba(244,242,237,.54); line-height: 1.76;
}
.tbd-about-pt-text strong { color: var(--paper); font-weight: 500; }

/* ── FEATURES SECTION (Büyüme Sistemi) ───────────────── */
.tbd-feat-section {
  background: var(--ink);
  padding: clamp(80px,10vh,116px) 52px;
  position: relative; overflow: hidden;
}
.tbd-feat-section::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(0,163,224,.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(114,180,205,.05) 0%, transparent 60%);
  pointer-events: none;
}
.tbd-feat-head { text-align: center; margin-bottom: 56px; position: relative; z-index: 1; max-width: 720px; margin-inline: auto; margin-bottom: 56px; }
.tbd-feat-head .tbd-lead { margin: 0 auto; }
.tbd-feat-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;
  max-width: 960px; margin: 0 auto; position: relative; z-index: 1;
}
.tbd-feat-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  border-top: 1px solid rgba(0,163,224,.22);
  border-radius: 8px; padding: 36px 28px;
  text-align: center; position: relative; overflow: hidden;
  transition: background .32s, border-color .32s, transform .32s var(--e1), box-shadow .32s;
}
.tbd-feat-card::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0; transition: opacity .32s;
}
.tbd-feat-card:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(0,163,224,.3);
  border-top-color: rgba(0,163,224,.5);
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(0,0,0,.25), 0 0 0 1px rgba(0,163,224,.1);
}
.tbd-feat-card:hover::before { opacity: 1; }
.tbd-feat-icon {
  width: 56px; height: 56px; margin: 0 auto 20px;
  background: rgba(0,163,224,.13); border: 1px solid rgba(0,163,224,.18);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  transition: background .3s, border-color .3s, transform .3s var(--e3), box-shadow .3s;
}
.tbd-feat-card:hover .tbd-feat-icon {
  background: rgba(0,163,224,.22); border-color: rgba(0,163,224,.35);
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 8px 24px rgba(0,163,224,.18);
}
.tbd-feat-icon svg { width: 26px; height: 26px; stroke: var(--accent); }
.tbd-feat-kicker {
  font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px; display: block;
}
.tbd-feat-title {
  font-weight: 600; color: var(--white); margin-bottom: 10px;
  font-size: clamp(14px, 1.2vw, 16px); line-height: 1.32; letter-spacing: -.01em;
}
.tbd-feat-body {
  color: rgba(244,242,237,.46); font-size: 13px; font-weight: 300; line-height: 1.72;
}

/* ── CLIENTS ─────────────────────────────────────────── */
.tbd-clients {
  padding: 72px 52px; background: var(--white); border-bottom: 1px solid var(--fog);
  position: relative; overflow: hidden;
}
.tbd-clients::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(0,163,224,.025) 0%, transparent 70%);
  pointer-events: none;
}
.tbd-clients-head { text-align: center; margin-bottom: 48px; position: relative; }
.tbd-clients-head h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(20px,2vw,30px); letter-spacing: -.02em; font-weight: 400; color: var(--ink);
}
.tbd-clients-row {
  display: flex; border: 1px solid var(--fog); border-radius: 3px; overflow: hidden;
  position: relative;
}
.tbd-client {
  flex: 1; padding: 28px 16px; border-right: 1px solid var(--fog);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(0,30,43,.38); transition: color .26s, background .26s; cursor: default;
  text-align: center;
}
.tbd-client:last-child { border-right: none; }
.tbd-client-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(0,30,43,.06); border: 1px solid rgba(0,30,43,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: var(--ink);
  opacity: .65; transition: opacity .26s, transform .3s var(--e3), background .26s;
  line-height: 1;
}
.tbd-client:hover { color: var(--ink); background: rgba(0,163,224,.04); }
.tbd-client:hover .tbd-client-icon {
  opacity: 1; transform: translateY(-2px);
  background: rgba(0,163,224,.1); border-color: rgba(0,163,224,.2);
}

/* ── BLOG ────────────────────────────────────────────── */
.tbd-blog { padding: clamp(80px,10vh,116px) 52px; background: var(--paper); }
.tbd-blog-head { display: grid; grid-template-columns: 1fr auto; align-items: end; margin-bottom: 44px; }
.tbd-blog-all {
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); display: flex; align-items: center; gap: 7px;
  transition: gap .22s var(--e1);
}
.tbd-blog-all:hover { gap: 12px; }
.tbd-blog-all::after { content: '→'; font-size: 14px; }
.tbd-blog-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 1px;
  background: var(--fog); border: 1px solid var(--fog); border-radius: 3px; overflow: hidden;
}
.tbd-blog-card {
  background: var(--white); padding: 34px 30px; display: flex; flex-direction: column;
  transition: background .24s, transform .28s var(--e1), box-shadow .28s; cursor: pointer;
}
.tbd-blog-card:hover { background: #F8F6F1; transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,30,43,.08); }
.tbd-blog-card.featured:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.28); }
.tbd-blog-card.featured { background: var(--ink); }
.tbd-blog-card.featured:hover { background: #00253A; }
.tbd-blog-cat {
  font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.tbd-blog-card.featured .tbd-blog-cat { color: var(--sky); }
.tbd-blog-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(15px,1.4vw,20px); line-height: 1.22; letter-spacing: -.01em;
  color: var(--ink); font-weight: 400; margin-bottom: 10px; flex: 1;
  transition: color .2s;
}
.tbd-blog-card.featured .tbd-blog-title { color: var(--white); }
.tbd-blog-card:not(.featured):hover .tbd-blog-title { color: var(--accent); }
.tbd-blog-excerpt {
  font-size: 13px; font-weight: 300; color: var(--steel); line-height: 1.72; margin-bottom: 18px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.tbd-blog-card.featured .tbd-blog-excerpt { color: rgba(244,242,237,.46); }
.tbd-blog-date {
  font-size: 11px; color: rgba(0,30,43,.24); display: flex; align-items: center; gap: 7px; margin-top: auto;
}
.tbd-blog-date::before { content: ''; width: 12px; height: 1px; background: currentColor; }
.tbd-blog-card.featured .tbd-blog-date { color: rgba(244,242,237,.24); }

/* ── CTA BAND ────────────────────────────────────────── */
.tbd-cta {
  padding: clamp(80px,10vh,116px) 52px; background: var(--accent);
  display: grid; grid-template-columns: 1fr auto; gap: 52px; align-items: center;
  position: relative; overflow: hidden;
}
.tbd-cta::before { content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  width: 560px; height: 560px; background: rgba(255,255,255,.06); right: -160px; top: -220px; }
.tbd-cta::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  width: 240px; height: 240px; background: rgba(255,255,255,.04); left: -70px; bottom: -120px; }
.tbd-cta-headline {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(24px,2.8vw,46px); line-height: 1.06; letter-spacing: -.025em;
  color: var(--white); font-weight: 400; margin-bottom: 12px;
}
.tbd-cta-headline em { font-style: italic; color: rgba(255,255,255,.82); }
.tbd-cta-sub { font-size: 15.5px; font-weight: 300; color: rgba(255,255,255,.65); line-height: 1.68; max-width: 520px; }
.tbd-cta-right {
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-end; flex-shrink: 0; position: relative; z-index: 1;
}
.tbd-cta-note { font-size: 11px; color: rgba(255,255,255,.42); letter-spacing: .04em; text-align: right; }

/* ── FOOTER ──────────────────────────────────────────── */
.tbd-footer { background: var(--ink); padding: 72px 52px 44px; color: var(--paper); }
.tbd-footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 52px;
  margin-bottom: 52px; padding-bottom: 52px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.tbd-footer-brand {
  font-family: 'DM Serif Display', serif; font-size: 22px; letter-spacing: -.025em; margin-bottom: 10px;
}
.tbd-footer-tagline {
  font-size: 12.5px; font-weight: 300; color: rgba(244,242,237,.34);
  line-height: 1.74; max-width: 210px; margin-bottom: 20px;
}
.tbd-footer-contact { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.tbd-footer-contact a {
  font-size: 12.5px; color: rgba(244,242,237,.38);
  font-weight: 300; transition: color .18s;
}
.tbd-footer-contact a:hover { color: var(--paper); }
.tbd-footer-contact span { font-size: 12px; color: rgba(244,242,237,.22); font-weight: 300; margin-top: 2px; }
.tbd-footer-social {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: 11px; color: rgba(244,242,237,.3);
  border: 1px solid rgba(255,255,255,.06); padding: 6px 11px; border-radius: 2px;
  transition: color .18s, border-color .18s;
}
.tbd-footer-social:hover { color: var(--paper); border-color: rgba(255,255,255,.18); }
.tbd-footer-social-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.tbd-footer-col-title {
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sky); margin-bottom: 16px;
}
.tbd-footer-links { display: flex; flex-direction: column; gap: 9px; }
.tbd-footer-links a {
  font-size: 12.5px; color: rgba(244,242,237,.34); font-weight: 300;
  transition: color .18s, padding-left .18s var(--e1);
}
.tbd-footer-links a:hover { color: var(--paper); padding-left: 4px; }
.tbd-footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
}
.tbd-footer-copy { font-size: 11.5px; color: rgba(244,242,237,.18); font-weight: 300; }
.tbd-footer-legal { display: flex; gap: 18px; }
.tbd-footer-legal a {
  font-size: 11.5px; color: rgba(244,242,237,.18); font-weight: 300; transition: color .18s;
}
.tbd-footer-legal a:hover { color: rgba(244,242,237,.48); }

/* ── WHATSAPP STICKY ─────────────────────────────────── */
.tbd-whatsapp {
  position: fixed; bottom: 24px; right: 24px; z-index: 500;
  width: 52px; height: 52px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,.38);
  transition: transform .25s var(--e3), box-shadow .22s var(--e1);
  animation: tbdWaIn .8s var(--e3) 2.2s both;
}
@keyframes tbdWaIn { from{transform:scale(0) rotate(-45deg);opacity:0} to{transform:none;opacity:1} }
.tbd-whatsapp:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 10px 28px rgba(37,211,102,.5); }
.tbd-whatsapp img { width: 28px; height: 28px; }

/* ── MOBILE CTA BAR ──────────────────────────────────── */
.tbd-cta-mobile {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 400;
  padding: 12px 16px; background: rgba(244,242,237,.97); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--fog); gap: 10px;
  box-shadow: 0 -4px 20px rgba(0,30,43,.08);
}

/* ── SHARED EYEBROW ──────────────────────────────────── */
.tbd-ey {
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.tbd-ey::before { content: ''; width: 16px; height: 1px; background: var(--accent); }
.tbd-ey-sky { color: var(--sky); }
.tbd-ey-sky::before { background: var(--sky); }

/* ── SHARED H2 ───────────────────────────────────────── */
h2.tbd-h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(32px,3.6vw,52px); line-height: 1.04; letter-spacing: -.025em;
  font-weight: 400; margin-bottom: 16px; color: var(--ink);
}
h2.tbd-h2 em { font-style: italic; color: var(--sky); }
h2.tbd-h2-light { color: var(--white); }

/* ── SHARED LEAD ─────────────────────────────────────── */
.tbd-lead { font-size: 15.5px; font-weight: 300; color: var(--steel); line-height: 1.76; max-width: 460px; }
.tbd-lead-light { color: rgba(244,242,237,.46); }

/* ── HERO ────────────────────────────────────────────── */
.tbd-hero {
  min-height: 100svh; padding-top: 64px;
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  position: relative;
}
.tbd-hero-left {
  padding: clamp(38px,4.5vh,58px) 52px clamp(44px,5.5vh,72px);
  display: flex; flex-direction: column; justify-content: flex-start;
  position: relative; z-index: 2; background: var(--paper);
  pointer-events: none; isolation: isolate;
}
.tbd-hero-left a,
.tbd-hero-left button { pointer-events: auto; }
/* subtle radial glow on hero left */
.tbd-hero-left::before {
  content: ''; position: absolute;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle,rgba(114,180,205,.07) 0%,transparent 68%);
  top: 5%; right: -15%; pointer-events: none; z-index: 0;
  animation: tbdHlBlob 18s ease-in-out infinite;
}
.tbd-hero-left::after {
  content: ''; position: absolute;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle,rgba(0,163,224,.04) 0%,transparent 70%);
  bottom: 10%; left: 0%; pointer-events: none; z-index: 0;
  animation: tbdHlBlob 14s ease-in-out 4s infinite reverse;
}
@keyframes tbdHlBlob {
  0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-40px,30px) scale(1.12)}
}
.tbd-hero-meta {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: clamp(24px,3.5vh,44px);
  position: relative; z-index: 1;
  opacity: 0; animation: tbdFadeUp .7s var(--e1) 1.8s forwards;
}
@keyframes tbdFadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.tbd-hero-year { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.tbd-hero-rule { flex: 1; height: 1px; background: var(--fog); }
.tbd-hero-city { font-size: 10px; color: var(--steel); letter-spacing: .08em; }

.tbd-hero-side {
  position: absolute;
  top: clamp(116px,16vh,172px);
  right: clamp(24px,3.5vw,56px);
  z-index: 3;
  width: min(33vw,430px);
  display: grid;
  gap: 16px;
  pointer-events: none;
}
.tbd-hero--dark .tbd-hero-side {
  position: relative;
  top: auto;
  right: auto;
  width: 100%;
  z-index: 3;
  padding: 56px 24px 40px 20px;
  pointer-events: auto;
  align-content: start;
}
.tbd-side-kicker {
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,242,237,.65);
}

/* ── VAPOUR TEXT ─────────────────────────────── */
.tbd-vapour-wrap {
  position: relative;
  width: 100%;
  height: 96px;
  margin: 0;
  overflow: visible;
  pointer-events: none;
}
.tbd-vapour-wrap--side::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  width: 1px;
  height: 54px;
  background: linear-gradient(180deg, transparent, rgba(114,180,205,.55), transparent);
  transform: translateY(-50%);
}
.tbd-side-card {
  width: min(100%, 320px);
  justify-self: end;
  padding: 16px 18px;
  border: 1px solid rgba(244,242,237,.13);
  background: rgba(0,30,43,.34);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 46px rgba(0,0,0,.16);
}
.tbd-side-card span {
  display: block;
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--sky);
}
.tbd-side-card strong {
  display: block;
  margin-bottom: 6px;
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
  color: var(--paper);
}
.tbd-side-card small {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 300;
  color: rgba(244,242,237,.55);
}
.tbd-side-card--muted {
  margin-right: 34px;
  background: rgba(0,30,43,.22);
}

/* Hero headline — clip-path curtain */
h1.tbd-hh {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(34px,4.15vw,60px); line-height: 1.14; letter-spacing: -.03em;
  color: var(--ink); font-weight: 400; position: relative; z-index: 1;
  max-width: 760px;
}
.tbd-hl { display: block; overflow: visible; line-height: 1.14; padding: 0 0 .12em; }
.tbd-hl-i {
  display: block; clip-path: inset(0 -0.08em 100% -0.08em);
  animation: tbdCurtain .9s var(--e1) forwards;
}
.tbd-hl:nth-child(1) .tbd-hl-i { animation-delay: .22s; }
.tbd-hl:nth-child(2) .tbd-hl-i { animation-delay: .38s; }
.tbd-hl:nth-child(3) .tbd-hl-i { animation-delay: .54s; }
.tbd-hl:nth-child(4) .tbd-hl-i { animation-delay: .70s; }
.tbd-hl:nth-child(5) .tbd-hl-i { animation-delay: .86s; }
@keyframes tbdCurtain {
  from{clip-path:inset(0 -0.08em 100% -0.08em)}
  to{clip-path:inset(0 -0.08em -0.16em -0.08em)}
}
.tbd-hi { font-style: italic; color: var(--sky); }
.tbd-ho { -webkit-text-stroke: 1.5px var(--sky); color: transparent; }

.tbd-hero-bot {
  margin-top: clamp(28px,3.8vh,52px);
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px;
  position: relative; z-index: 1;
  opacity: 0; animation: tbdFadeUp .8s var(--e1) 1.6s forwards;
}
.tbd-hero-sub { font-size: 15.5px; font-weight: 300; color: var(--steel); line-height: 1.78; max-width: 380px; }
.tbd-hero-ctas { display: flex; gap: 20px; align-items: center; flex-shrink: 0; }

/* Hero right panel */
.tbd-hero-right {
  background: var(--ink); position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(68px,8.5vh,108px) 40px clamp(48px,6vh,68px);
}.tbd-hr-ey {
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sky); margin-bottom: 22px; display: flex; align-items: center; gap: 8px;
}
.tbd-hr-ey::before { content: ''; width: 14px; height: 1px; background: var(--sky); }.tbd-hr-stat {
  padding: 12px 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 2px; display: flex; align-items: center; justify-content: space-between;
  transition: background .24s, padding-left .24s var(--e1), border-color .24s;
}
.tbd-hr-stat:hover { background: rgba(255,255,255,.1); padding-left: 20px; border-color: rgba(0,163,224,.2); }
.tbd-hr-stat-k { font-size: 10.5px; color: rgba(244,242,237,.42); letter-spacing: .04em; }
.tbd-hr-stat-v {
  font-family: 'DM Serif Display', serif; font-size: 17px;
  color: var(--white); letter-spacing: -.02em; display: flex; align-items: baseline; gap: 3px;
}
.tbd-hr-stat-v em { font-family: 'DM Sans', sans-serif; font-style: normal; font-size: 11px; color: var(--accent); }
/* ── SCROLL REVEALS ──────────────────────────────────── */
.tbd-rv {
  opacity: 0; transform: translateY(30px);
  transition: opacity .85s var(--e1), transform .85s var(--e1);
}
.tbd-rv.on { opacity: 1; transform: none; }
.tbd-rv.d1 { transition-delay: .08s; }
.tbd-rv.d2 { transition-delay: .16s; }
.tbd-rv.d3 { transition-delay: .24s; }
.tbd-rv.d4 { transition-delay: .32s; }

/* ── REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tbd-rv { opacity: 1; transform: none; transition: none; }
  .tbd-hl-i { animation: none; clip-path: none; }
  .tbd-hero-meta, .tbd-hero-bot { opacity: 1; animation: none; }
  .tbd-loader-logo { opacity: 1; animation: none; }
  .tbd-loader-bar { animation: tbdLoaderBar .1s forwards; }
  .tbd-marquee-track { animation-duration: 60s; }
  .tbd-hero-left::before, .tbd-hero-left::after { animation: none; }
  #tbd-loader { transition-duration: .1s; }
  .tbd-feat-card, .tbd-sr { transition-duration: .1s; }
  .tbd-whatsapp { animation: none; }
}

/* ── COOKIE BAR ──────────────────────────────────────── */
.cookie-bar {
  position: fixed; bottom: 20px; left: 20px; right: 20px; z-index: 800;
  max-width: 480px;
}
.cookie-bar .card {
  background: var(--white); border: 1px solid var(--fog); border-radius: 4px;
  padding: 20px 24px; box-shadow: 0 8px 32px rgba(0,30,43,.12);
  display: flex; flex-direction: column; gap: 14px;
}
.cookie-copy { font-size: 13px; color: var(--ink); line-height: 1.6; }
.cookie-actions { display: flex; gap: 10px; }
.btn.primary { background: var(--ink); color: var(--white); padding: 9px 18px; border-radius: 2px; font-size: 13px; font-weight: 500; border: none; cursor: pointer; transition: opacity .2s; }
.btn.primary:hover { opacity: .85; }
.btn { background: transparent; color: var(--steel); padding: 9px 18px; border-radius: 2px; font-size: 13px; font-weight: 400; border: 1.5px solid var(--fog); cursor: pointer; transition: border-color .2s; }
.btn:hover { border-color: var(--ink); }

/* ── INTERIOR PAGE HERO ──────────────────────────────── */
.tbd-page-hero {
  padding: clamp(80px,10vh,120px) 52px clamp(48px,6vh,72px);
  padding-top: calc(64px + clamp(56px,7vh,88px));
  background: var(--paper); border-bottom: 1px solid var(--fog);
}
.tbd-page-hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(38px,5vw,72px); line-height: 1.0; letter-spacing: -.03em;
  color: var(--ink); font-weight: 400; max-width: 800px; margin-bottom: 20px;
}
.tbd-page-hero h1 em { font-style: italic; color: var(--sky); }
.tbd-page-hero .sub {
  font-size: 17px; font-weight: 300; color: var(--steel); line-height: 1.72; max-width: 560px;
}
.tbd-page-hero.dark { background: var(--ink); border-bottom: none; }
.tbd-page-hero.dark h1 { color: var(--white); }
.tbd-page-hero.dark .sub { color: rgba(244,242,237,.52); }

/* ── RICH CONTENT ────────────────────────────────────── */
.rich-content h2, .rich-content h3 { font-family: 'DM Serif Display', serif; font-weight: 400; }
.rich-content h2 { font-size: clamp(22px,2.4vw,32px); letter-spacing: -.02em; margin: 32px 0 14px; }
.rich-content h3 { font-size: clamp(18px,1.8vw,24px); letter-spacing: -.01em; margin: 24px 0 10px; }
.rich-content p { font-size: 16px; font-weight: 300; color: var(--steel); line-height: 1.78; margin-bottom: 18px; }
.rich-content ul { padding-left: 20px; margin-bottom: 18px; }
.rich-content li { font-size: 16px; font-weight: 300; color: var(--steel); line-height: 1.72; margin-bottom: 6px; }
.rich-content a { color: var(--accent); border-bottom: 1px solid rgba(0,163,224,.3); transition: border-color .2s; }
.rich-content a:hover { border-color: var(--accent); }

/* ── FAQ ─────────────────────────────────────────────── */
.faq-item { border-bottom: 1px solid var(--fog); }
.faq-q {
  padding: 20px 0; font-size: 16px; font-weight: 500; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  transition: color .2s;
}
.faq-q:hover { color: var(--accent); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--e1); }
.faq-item.open .faq-a { max-height: 300px; }
.faq-a-inner { padding-bottom: 20px; font-size: 15px; font-weight: 300; color: var(--steel); line-height: 1.75; }

/* ── LICENSE BANNER ──────────────────────────────────── */
.license-banner {
  background: linear-gradient(135deg,#7f1d1d,#991b1b);
  color: #fff7ed; border-bottom: 1px solid rgba(255,255,255,.12);
  font-family: 'DM Sans', sans-serif;
}
.license-banner__inner {
  max-width: 1200px; margin: 0 auto; padding: 12px 20px;
  display: flex; justify-content: space-between; gap: 16px; align-items: center; font-size: 14px;
}
.license-banner__meta { font-weight: 600; white-space: nowrap; }

/* ── 404 PAGE ────────────────────────────────────────── */
.tbd-404 {
  min-height: 70vh; display: flex; align-items: center; justify-content: center;
  padding: 80px 52px; text-align: center; flex-direction: column; gap: 24px;
}
.tbd-404-n {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(80px,12vw,160px); line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(0,30,43,.15);
}
.tbd-404-t { font-family: 'DM Serif Display', serif; font-size: clamp(20px,3vw,32px); color: var(--ink); }
.tbd-404-s { font-size: 15px; color: var(--steel); max-width: 380px; line-height: 1.7; }

/* ── UTILITIES ───────────────────────────────────────── */
.tbd-container { max-width: 1440px; margin: 0 auto; padding: 0 52px; }
.tbd-section { padding: clamp(80px,10vh,116px) 52px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── MOBILE ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .tbd-nav { padding: 0 20px; }
  .tbd-nav-links { display: none; }
  .tbd-nav-hamburger { display: flex; }
  .tbd-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 64px; }
  .tbd-hero-left { padding: 44px 20px 32px; }
  .tbd-vapour-wrap { height: 60px; }
  .tbd-hero-right { min-height: 260px; padding: 36px 24px 40px; }
  h1.tbd-hh { font-size: clamp(30px,7vw,50px); }
  .tbd-hero-bot { grid-template-columns: 1fr; gap: 18px; }
  .tbd-metrics { grid-template-columns: 1fr 1fr; }
  .tbd-met:nth-child(2) { border-right: none; }
  .tbd-met { padding: 24px 20px; }
  .tbd-statement, .tbd-svc-sec, .tbd-process, .tbd-blog, .tbd-cta, .tbd-about { padding: 60px 20px; }
  .tbd-feat-section { padding: 60px 20px; }
  .tbd-feat-grid { grid-template-columns: 1fr; max-width: 100%; gap: 12px; }
  .tbd-svc-top { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
  .tbd-sr-top { grid-template-columns: 44px 1fr auto; }
  .tbd-sr-tag { display: none; }
  .tbd-sr-desc { grid-template-columns: 44px 1fr; }
  .tbd-sr-dl { display: none; }
  .tbd-about { grid-template-columns: 1fr; gap: 36px; }
  .tbd-clients { padding: 40px 16px; }
  .tbd-clients-head { margin-bottom: 28px; }
  .tbd-clients-row { flex-wrap: wrap; }
  .tbd-client { min-width: 50%; border-bottom: 1px solid var(--fog); padding: 18px 12px; }
  .tbd-client:nth-child(even) { border-right: none; }
  .tbd-client-icon { width: 44px; height: 44px; font-size: 18px; }
  .tbd-blog-grid { grid-template-columns: 1fr; }
  .tbd-blog-head { grid-template-columns: 1fr; gap: 8px; }
  .tbd-cta { grid-template-columns: 1fr; gap: 22px; }
  .tbd-cta-right { align-items: flex-start; }
  .tbd-footer { padding: 48px 20px 32px; }
  .tbd-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .tbd-footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .tbd-footer-legal { justify-content: center; }
  .tbd-page-hero { padding: calc(64px + 36px) 20px 36px; }
  .tbd-cta-mobile { display: flex; }
}
@media (max-width: 640px) {
  .tbd-metrics { grid-template-columns: 1fr 1fr; }
  .tbd-stmt-text { font-size: clamp(22px,5.5vw,32px); }
  .tbd-feat-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   SERVICE LIST & PRODUCT LIST — New design pages
═══════════════════════════════════════════════ */
main { padding: 0; }
.hero {
  padding: calc(64px + clamp(44px,5.5vh,72px)) 52px clamp(36px,4.5vh,56px);
  background: var(--paper); border-bottom: 1px solid var(--fog);
}
.hero h1 {
  font-family: 'DM Serif Display', serif !important;
  font-size: clamp(32px,4.5vw,60px) !important;
  line-height: 1.04 !important; letter-spacing: -.03em !important;
  font-weight: 400 !important; color: var(--ink) !important; margin-bottom: 14px !important;
}
.hero p.muted, .hero .muted {
  font-size: 16px; font-weight: 300; color: var(--steel); line-height: 1.75; max-width: 640px;
}
.section { padding: clamp(52px,7vh,88px) 52px; }
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
}
.card {
  background: var(--white); border: 1px solid var(--fog); border-radius: 4px;
  padding: 28px 26px; transition: box-shadow .25s, transform .22s; cursor: default;
}
.card:hover { box-shadow: 0 8px 28px rgba(0,30,43,.08); transform: translateY(-2px); }
a.card { text-decoration: none; color: inherit; cursor: pointer; }
a.card h2, a.card h3 { font-family: 'DM Serif Display', serif; font-weight: 400; color: var(--ink); transition: color .2s; }
a.card:hover h2, a.card:hover h3 { color: var(--accent); }
.card .muted, .muted { color: var(--steel); font-size: 14px; font-weight: 300; line-height: 1.72; }
.card [style*="height:150px"], .card [style*="height: 150px"] {
  height: 160px !important; border-radius: 4px !important; overflow: hidden !important;
}
.card [style*="height:150px"] img, .card [style*="height: 150px"] img {
  object-fit: cover !important; object-position: center top !important; filter: none !important;
}
.section .grid a.card[href*="-ajansi"], .section .grid a.card[href*="-pazarlama"] {
  background: var(--ink);
}
.section .grid a.card[href*="-ajansi"] h2, .section .grid a.card[href*="-pazarlama"] h2 {
  color: var(--white) !important; font-size: 20px;
}
.section .grid a.card[href*="-ajansi"] .muted, .section .grid a.card[href*="-pazarlama"] .muted {
  color: rgba(244,242,237,.55) !important;
}
.section .grid a.card[href*="-ajansi"]:hover, .section .grid a.card[href*="-pazarlama"]:hover {
  background: #00263A;
}
.section-head { margin-bottom: 44px; }
.section-head .kicker {
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.section-head .kicker::before { content: ''; width: 16px; height: 1px; background: var(--accent); }
.section-head h2, .section-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(28px,3.2vw,46px); line-height: 1.06; letter-spacing: -.025em;
  font-weight: 400; color: var(--ink); margin-bottom: 12px;
}
.section-lead { font-size: 16px; font-weight: 300; color: var(--steel); line-height: 1.75; max-width: 560px; }
.services-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.service-hero { margin-bottom: 20px !important; }
.service-hero img { width: 100% !important; height: 280px !important; object-fit: cover !important; object-position: center !important; border-radius: 4px !important; }
.btn {
  background: transparent; border: 1.5px solid rgba(0,30,43,.2); color: var(--ink);
  padding: 10px 18px; border-radius: 2px; font-size: 13px; font-weight: 400;
  display: inline-block; transition: border-color .2s, transform .2s; text-decoration: none;
}
.btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn.primary { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn.primary:hover { opacity: .88; }
.tag { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.pagination { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 36px; padding-bottom: 20px; }
.pagination a, .pagination span {
  padding: 8px 14px; border: 1.5px solid var(--fog); border-radius: 2px;
  font-size: 13px; color: var(--steel); transition: border-color .2s, color .2s;
}
.pagination a:hover { border-color: var(--ink); color: var(--ink); }
.pagination .current { background: var(--ink); color: var(--white); border-color: var(--ink); }
.rich-content { line-height: 1.78; }
.rich-content h2 { font-family: 'DM Serif Display', serif; font-size: clamp(20px,2.5vw,28px); margin: 28px 0 12px; font-weight: 400; }
.rich-content h3 { font-family: 'DM Serif Display', serif; font-size: clamp(17px,2vw,22px); margin: 22px 0 10px; font-weight: 400; }
.rich-content p { font-size: 16px; font-weight: 300; color: var(--steel); line-height: 1.78; margin-bottom: 16px; }
.rich-content ul, .rich-content ol { padding-left: 22px; margin-bottom: 16px; }
.rich-content li { font-size: 16px; font-weight: 300; color: var(--steel); line-height: 1.72; margin-bottom: 6px; }
.rich-content a { color: var(--accent); }
.rich-content ul {
  padding-left: 0; list-style: none; margin-bottom: 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.rich-content li {
  font-size: 15px; font-weight: 300; color: var(--steel);
  line-height: 1.7; padding-left: 20px; position: relative;
}

/* ── IMAGE VISIBILITY CONTROLS ───────────────────── */
/* 1. Default attributes for rich-content images */
.rich-content img {
  max-width: 100% !important; max-height: 320px !important;
  border-radius: 4px !important; display: block !important;
  margin: 16px auto !important; object-fit: contain !important;
}
/* 2. Hide stock photos from rich content — they break layouts */
.section .card .rich-content img,
.rich-content img { display: none !important; }
/* 3. Exceptions — always show blog, product, and cover images */
.tbd-blog-card img, .tbd-blog-grid img,
a[style*="flex-direction:column"] > div > img,
a[style*="flex-direction:column"] img { display: block !important; }
.section .card img:not([width='1']) {
  max-height: 340px !important; width: 100% !important;
  object-fit: cover !important; object-position: center top !important;
  border-radius: 4px !important;
}
/* Service list image containers */
.section .card [style*="height:150px"],
.section .card [style*="height: 150px"] {
  height: 180px !important; border-radius: 4px !important; overflow: hidden !important;
}
.section .card [style*="height:150px"] img,
.section .card [style*="height: 150px"] img {
  display: block !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center top !important;
}
/* Service hero image */
.service-hero { display: block !important; border-radius: 4px; overflow: hidden; max-height: 360px; margin-bottom: 24px; }
.service-hero img {
  display: block !important; width: 100% !important; height: 280px !important;
  object-fit: cover !important; object-position: center top !important; border-radius: 4px !important;
}
/* Services track product images */
.services-track a.card img, .services-track .tdb-card img {
  display: block !important; height: 150px !important; width: 100% !important;
  object-fit: cover !important; object-position: center top !important; border-radius: 4px 4px 0 0 !important;
}
.rich-content li::before {
  content: '·'; position: absolute; left: 0;
  color: var(--accent); font-size: 20px; line-height: 1.3; font-weight: 700;
}

@media (max-width: 768px) {
  .hero { padding: calc(64px + 28px) 20px 28px; }
  .section { padding: 44px 20px; }
  .grid { grid-template-columns: 1fr; }
  .services-track { grid-template-columns: 1fr; }
  .tbd-about { padding: 56px 20px; }
  .tbd-svc-sec { padding: 56px 20px; }
  .tbd-cta { padding: 56px 20px; }
  .blog-hero, .blog-posts-section, .blog-topics, .blog-cta { padding-left: 20px !important; padding-right: 20px !important; }
}

* { min-width: 0; }

/* ── BLOG CARD IMAGE ─────────────────────────────── */
.tbd-blog-card img {
  height: 180px !important; width: 100% !important;
  object-fit: cover !important; display: block !important; margin-bottom: 12px;
}

/* ── BLOG PAGE ───────────────────────────────────── */
.blog-page main { background: var(--paper); }

/* ── PRODUCT GROUP HEADING ───────────────────────── */
.prod-group-head { border-bottom: 2px solid var(--ink) !important; }

/* ── MOBILE WHATSAPP + CTA BAR ───────────────────── */
@media (max-width: 960px) {
  .tbd-cta-mobile {
    padding: 10px 16px !important;
    background: rgba(244,242,237,.97) !important;
    box-shadow: 0 -1px 0 var(--fog);
  }
  .tbd-cta-mobile a { padding: 13px !important; }
  .tbd-whatsapp { bottom: 76px !important; right: 16px !important; width: 48px !important; height: 48px !important; }
  .tbd-whatsapp svg { width: 24px !important; height: 24px !important; }
}

/* ── RELATED CARDS (service/product detail) ──────── */
.related-grid {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 16px !important; margin-top: 20px;
}
.related-card {
  text-decoration: none !important; color: inherit !important;
  display: flex !important; flex-direction: column !important;
  background: var(--paper) !important; border: 1px solid var(--fog) !important;
  border-radius: 4px !important; overflow: hidden !important;
  transition: box-shadow .22s, transform .22s !important;
}
.related-card:hover { box-shadow: 0 6px 20px rgba(0,30,43,.08) !important; transform: translateY(-2px) !important; }
.related-card .card-media {
  height: 160px !important; overflow: hidden !important;
  background: linear-gradient(135deg,var(--ink),#00263A) !important; flex-shrink: 0 !important;
}
.related-card .card-media img {
  display: block !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center top !important;
}
.related-card > div, .related-card .card-title,
.related-card .card-desc, .related-card .card-action { padding: 0 18px !important; }
.related-card > div:first-of-type { padding-top: 16px !important; }
.related-card .card-action {
  padding-bottom: 16px !important; margin-top: auto !important;
  font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  color: var(--accent) !important; display: block !important;
}
.related-card .card-title {
  font-family: 'DM Serif Display',serif !important;
  font-size: clamp(15px,1.4vw,18px) !important; line-height: 1.22 !important;
  color: var(--ink) !important; margin-bottom: 8px !important; font-weight: 400 !important;
}
.related-card .card-desc {
  font-size: 13px !important; color: var(--steel) !important;
  line-height: 1.65 !important; padding-bottom: 14px !important;
}
.related-shell {
  background: var(--white) !important; border: 1px solid var(--fog) !important;
  border-radius: 4px !important; padding: 28px 32px !important;
}
.related-head {
  display: flex !important; align-items: flex-start !important;
  justify-content: space-between !important; gap: 20px !important; margin-bottom: 4px !important;
}
.related-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.related-placeholder { display: flex !important; align-items: center !important; justify-content: center !important; }
.related-placeholder .chip {
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
@media (max-width: 768px) {
  .related-grid { grid-template-columns: 1fr !important; }
  .related-shell { padding: 20px !important; }
}

/* ── PILL FILTER ─────────────────────────────────── */
.pill {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 99px;
  background: var(--fog); color: var(--steel);
}
.pill.active { background: var(--ink); color: var(--white); }

/* ── CONTACT PAGE GRID (mobile) ──────────────────── */
@media (max-width: 960px) {
  div[style*="grid-template-columns:1.1fr"] {
    grid-template-columns: 1fr !important; gap: 28px !important; padding: 40px 20px !important;
  }
  div[style*="position:sticky"] { position: relative !important; top: auto !important; }
}

/* ═══════════════════════════════════════════════
   HERO DARK VARIANT + SPLINE + SPOTLIGHT
═══════════════════════════════════════════════ */

/* Full dark canvas */
.tbd-hero--dark {
  background: var(--ink);
  grid-template-columns: 6fr 6fr 4fr;
}
.tbd-hero--dark .tbd-hero-left {
  background: transparent;
}

/* Typography goes light */
.tbd-hero--dark h1.tbd-hh { font-size: clamp(26px,3vw,44px); }
.tbd-hero--dark h1.tbd-hh,
.tbd-hero--dark .tbd-hl-i {
  color: var(--paper);
}
.tbd-hero--dark .tbd-hl-i.tbd-hi {
  color: var(--sky);
}
.tbd-hero--dark .tbd-hero-sub {
  color: rgba(244,242,237,.68);
}
.tbd-hero--dark .tbd-hero-year {
  color: var(--sky);
}
.tbd-hero--dark .tbd-hero-left {
  justify-content: center;
  align-items: flex-start;
  padding-left: 44px;
  padding-right: 44px;
}
.tbd-hero--dark .tbd-hero-city {
  color: rgba(244,242,237,.38);
}
.tbd-hero--dark .tbd-hero-rule {
  background: rgba(244,242,237,.12);
}

/* Buttons invert on dark */
.tbd-hero--dark .tbd-btn-ink {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.tbd-hero--dark .tbd-btn-ink:hover {
  background: var(--white);
  border-color: var(--white);
}
.tbd-hero--dark .tbd-btn-outline {
  color: rgba(244,242,237,.55);
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .04em;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s, gap .2s;
}
.tbd-hero--dark .tbd-btn-outline:hover {
  background: transparent;
  border: none;
  color: var(--paper);
  gap: 10px;
  transform: none;
}

/* Center column: robot bleeds into adjacent columns, stays behind text */
.tbd-hero--dark .tbd-hero-right {
  position: relative;
  inset: auto;
  padding: 0;
  overflow: visible;
  z-index: 0;
  pointer-events: auto;
}
.tbd-spline-frame {
  position: absolute;
  inset: -60px -8vw -80px -8vw;
  overflow: visible;
  transform: translateZ(0);
}
spline-viewer,
.tbd-spline-viewer {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  transform: translateX(-1vw) translateZ(0);
}

/* Hide Spline watermark */
spline-viewer::part(logo) { display: none !important; }
.spline-watermark { display: none !important; }

/* Spotlight mouse-follow overlay */
.tbd-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity .4s ease;
}

/* Mobile: spline under text */
@media (max-width: 960px) {
  .tbd-hero--dark {
    grid-template-columns: 1fr;
  }
  .tbd-hero--dark .tbd-hero-right {
    position: relative;
    inset: auto;
    min-height: 320px;
    padding: 0;
  }
  .tbd-spline-frame {
    inset: -12px -18px -64px -48px;
  }
  .tbd-vapour-wrap {
    height: 64px;
  }
  .tbd-hero--dark .tbd-hero-side {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    padding: 16px 24px 24px;
  }
  .tbd-vapour-wrap--side::before {
    display: none;
  }
  .tbd-side-card {
    display: none;
  }
  .tbd-spline-viewer {
    transform: translateZ(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbd-marquee-track,
  .tbd-loader-bar,
  .tbd-hero-left::before {
    animation: none !important;
  }
  .tbd-rv,
  .tbd-hl-i,
  .tbd-met,
  .service-premium-card,
  .service-premium-media img {
    transition: none !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════
   UX IMPROVEMENTS — 2026-05
   Fixes: nav contrast, hero-bot overflow, mobile
   button layout, metrics borders, blog hover
═══════════════════════════════════════════════ */

/* ── NAV: hamburger & CTA visible on dark hero ── */
/* When nav sits over the dark hero (not yet scrolled) the ink-coloured
   hamburger bars and ink CTA button are invisible against the dark canvas. */
.tbd-nav:not(.scrolled) .tbd-nav-hamburger span {
  background: var(--paper);
}
.tbd-nav.scrolled .tbd-nav-hamburger span {
  background: var(--ink);
}
.tbd-nav:not(.scrolled) .tbd-nav-cta {
  background: var(--paper);
  color: var(--ink);
}
.tbd-nav:not(.scrolled) .tbd-nav-cta:hover {
  background: var(--white);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

/* ── HERO-BOT: prevent subtitle compression on mid-range viewports ── */
/* Between 961 px–1280 px the hero is still two columns (left/right) but
   the hero-bot's 1fr/auto split squeezes the subtitle text to ~160 px.
   Stack vertically in that range to keep it readable. */
@media (max-width: 1280px) and (min-width: 961px) {
  .tbd-hero-bot {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: flex-start;
  }
  .tbd-hero-sub { max-width: 100%; }
}

/* ── HERO-SIDE: tighten panel on narrow desktops ── */
@media (max-width: 1100px) and (min-width: 961px) {
  .tbd-hero-side { width: min(22vw, 260px); }
}

/* ── MOBILE: CTA buttons fill the row equally ── */
@media (max-width: 960px) {
  .tbd-hero-ctas {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .tbd-hero-ctas .tbd-btn-ink {
    width: 100%;
    text-align: center;
    padding: 15px 12px;
  }
  .tbd-hero-ctas .tbd-btn-outline {
    padding: 0;
  }
}

/* ── METRICS: add row separator when grid is 2 × 2 on mobile ── */
@media (max-width: 960px) {
  .tbd-met:nth-child(4) { border-right: none; }
  .tbd-met:nth-child(1),
  .tbd-met:nth-child(2) { border-bottom: 1px solid var(--fog); }
}

/* ── FOOTER: 2-column grid on tablet (641 px–960 px) ── */
@media (max-width: 960px) and (min-width: 641px) {
  .tbd-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* ── BLOG GRID: allow card hover lift to be visible ── */
/* overflow: hidden clips the translateY(-3px) lift and the drop-shadow.
   Remove the clip — the gap background still creates the dividers. */
.tbd-blog-grid { overflow: visible; }

/* ── SERVICE ACCORDION: description text colour fix ── */
/* .tbd-sr-dt inherits rgba(244,242,237,.62) which is unreadable on the
   light/white background before the hover fill kicks in. */
.tbd-sr-dt { color: var(--steel); }
.tbd-sr:hover .tbd-sr-dt { color: rgba(244,242,237,.62); }

/* ── ABOUT SECTION: quote border more prominent ── */
.tbd-about-quote {
  border-left-width: 3px;
}

/* ── CTA BAND: note text legibility ── */
.tbd-cta-note { font-size: 12px; color: rgba(255,255,255,.55); }

/* ── MOBILE STATEMENT: tighter top padding ── */
@media (max-width: 960px) {
  .tbd-statement { padding: 52px 20px; }
}

/* ── FEAT CARDS: ensure text doesn't overflow card on narrow 1-col mobile ── */
@media (max-width: 960px) {
  .tbd-feat-card { padding: 28px 20px; }
  .tbd-feat-title { font-size: 15px; }
}

/* ── NAV: logo word visible on light hero (scrolled) ── */
/* Ensure logo transitions cleanly when nav background appears */
.tbd-logo-word { transition: color .3s var(--e1), text-shadow .3s; }

/* ── HERO: sub text slightly larger on desktop for readability ── */
@media (min-width: 1280px) {
  .tbd-hero-sub { font-size: 16px; }
}

/* ── MOBILE MENU: close button helper ── */
.tbd-mobile-menu .tbd-nav-cta {
  margin-top: 12px;
  padding: 14px 32px;
  font-size: 14px;
}

/* The Base Digital home hero UX polish - 2026-05-26
   Scope: hero CTA placement, right-side system panel, bottom services marquee. */

@media (min-width: 961px) {
  .tbd-hero--dark {
    grid-template-columns: minmax(440px, 5.15fr) minmax(420px, 5.75fr) minmax(360px, 3.75fr);
  }

  .tbd-hero--dark .tbd-hero-left {
    justify-content: center;
    padding-left: clamp(40px, 3.8vw, 70px);
    padding-right: clamp(24px, 2.6vw, 46px);
    padding-bottom: clamp(78px, 10vh, 128px);
  }

  .tbd-hero--dark h1.tbd-hh {
    max-width: 560px;
    font-size: clamp(34px, 3.35vw, 58px);
    line-height: 1.16;
  }

  .tbd-hero-bot {
    margin-top: clamp(38px, 6vh, 84px) !important;
    width: min(100%, 560px);
  }

  .tbd-hero-sub {
    max-width: 500px !important;
    font-size: clamp(16px, 1.02vw, 18px);
    line-height: 1.7;
  }

  .tbd-hero-ctas {
    align-self: flex-start;
    gap: clamp(18px, 1.8vw, 30px);
    padding-left: clamp(88px, 8vw, 162px);
  }

  .tbd-hero-ctas .tbd-btn-ink {
    min-width: 250px;
    min-height: 56px;
    justify-content: center;
    box-shadow: 0 18px 46px rgba(0,0,0,.24);
  }

  .tbd-hero-ctas .tbd-btn-outline {
    min-height: 56px;
  }

  .tbd-spline-frame {
    inset: -58px -6.5vw -68px -9vw;
  }

  .tbd-spline-viewer {
    transform: translateX(-2.2vw) scale(1.04) translateZ(0);
  }

  .tbd-hero--dark .tbd-hero-side {
    padding: clamp(72px, 9vh, 118px) clamp(22px, 2vw, 38px) 46px 8px;
    gap: 18px;
    align-content: center;
  }

  .tbd-side-kicker {
    margin-left: 2px;
    font-size: 11px;
    letter-spacing: .2em;
    color: rgba(244,242,237,.78);
  }

  .tbd-vapour-wrap {
    height: 118px;
    margin-bottom: 10px;
  }

  .tbd-vapour-wrap--side::before {
    left: -22px;
    height: 72px;
  }

  .tbd-hero-side > div[style*="grid-template-columns"] {
    gap: 10px !important;
    margin-top: 8px !important;
  }

  .tbd-hero-side > div[style*="grid-template-columns"] > div {
    min-height: 72px;
    padding: 16px 18px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-color: rgba(244,242,237,.17) !important;
    background: linear-gradient(135deg, rgba(0,38,54,.58), rgba(0,22,32,.34)) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.12);
  }

  .tbd-hero-side > div[style*="grid-template-columns"] > div span {
    margin-bottom: 7px !important;
    font-size: 10px !important;
  }

  .tbd-side-card {
    width: 100%;
    max-width: 384px;
    justify-self: stretch;
    margin-top: 16px !important;
    padding: 22px 24px;
    background: linear-gradient(135deg, rgba(0,38,54,.72), rgba(0,22,32,.42));
  }

  .tbd-side-card strong {
    font-size: clamp(26px, 2vw, 34px);
    line-height: 1.08;
  }

  .tbd-side-card small {
    max-width: 300px;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(244,242,237,.68);
  }
}

.tbd-marquee {
  padding: clamp(18px, 2.2vh, 26px) 0;
  background: linear-gradient(90deg, #001e2b 0%, #002a3a 48%, #001e2b 100%);
  border-top-color: rgba(114,180,205,.16);
  border-bottom-color: rgba(114,180,205,.12);
  box-shadow: inset 0 1px rgba(244,242,237,.04), 0 -18px 60px rgba(0,0,0,.2);
}

.tbd-marquee-track {
  animation-duration: 26s;
}

.tbd-mqi {
  padding: 0 clamp(24px, 3vw, 52px);
  gap: 24px;
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 500;
  letter-spacing: .11em;
  color: rgba(244,242,237,.58);
}

.tbd-mqi::after {
  font-size: 10px;
  color: var(--sky);
  opacity: .9;
}

.tbd-marquee-track:hover .tbd-mqi {
  color: rgba(244,242,237,.86);
}

@media (max-width: 1280px) and (min-width: 961px) {
  .tbd-hero--dark {
    grid-template-columns: minmax(390px, 1.05fr) minmax(390px, 1fr);
  }

  .tbd-hero--dark .tbd-hero-side {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 220px 1fr minmax(260px, 340px);
    gap: 18px;
    padding: 0 32px 34px;
    align-items: end;
  }

  .tbd-hero-side > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 960px) {
  .tbd-hero--dark .tbd-hero-left {
    padding-bottom: 28px;
  }

  .tbd-hero-bot {
    margin-top: 30px !important;
  }

  .tbd-marquee {
    padding: 16px 0;
  }

  .tbd-marquee-track {
    animation-duration: 34s;
  }

  .tbd-mqi {
    padding: 0 22px;
    font-size: 13px;
    letter-spacing: .09em;
  }
}

/* The Base Digital home hero CTA correction - 2026-05-26 */

@media (min-width: 961px) {
  .tbd-hero--dark .tbd-hero-left {
    padding-bottom: clamp(64px, 8vh, 104px);
  }

  .tbd-hero-bot {
    width: min(100%, 560px);
    margin-top: clamp(42px, 5.4vh, 72px) !important;
  }

  .tbd-hero-ctas {
    width: min(100%, 520px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    padding-left: 0 !important;
    margin-left: 0;
  }

  .tbd-hero-ctas .tbd-btn-ink,
  .tbd-hero-ctas .tbd-btn-outline {
    min-height: 52px;
    height: 52px;
    box-sizing: border-box;
    white-space: nowrap;
  }

  .tbd-hero-ctas .tbd-btn-ink {
    min-width: 224px;
    width: auto;
    padding: 0 28px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
  }

  .tbd-hero-ctas .tbd-btn-outline {
    min-width: 176px;
    padding: 0 22px !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(244,242,237,.22) !important;
    background: rgba(0,30,43,.36) !important;
    color: rgba(244,242,237,.82) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: .02em !important;
  }

  .tbd-hero-ctas .tbd-btn-outline:hover {
    border-color: rgba(244,242,237,.42) !important;
    background: rgba(0,42,58,.58) !important;
    color: var(--paper) !important;
    gap: 6px !important;
  }
}

@media (max-width: 1280px) and (min-width: 961px) {
  .tbd-hero-ctas {
    width: 100%;
    gap: 12px;
  }

  .tbd-hero-ctas .tbd-btn-ink {
    min-width: 214px;
    padding: 0 22px;
  }

  .tbd-hero-ctas .tbd-btn-outline {
    min-width: 164px;
    padding: 0 18px !important;
  }
}

@media (max-width: 960px) {
  .tbd-hero-ctas .tbd-btn-outline {
    min-height: 48px;
    padding: 0 18px !important;
    border: 1px solid rgba(244,242,237,.2) !important;
    background: rgba(0,30,43,.34) !important;
    color: rgba(244,242,237,.82) !important;
  }
}

/* The Base Digital services list UX correction - 2026-05-26 */

.tbd-svc-sec {
  background: #f4f2ed;
}

.tbd-svc-list {
  border-top: 1px solid rgba(0,30,43,.1);
}

.tbd-sr {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-bottom-color: rgba(0,30,43,.1);
}

.tbd-sr-top {
  grid-template-columns: 64px minmax(270px,.82fr) minmax(420px,1.18fr) 48px;
  gap: clamp(18px,2.4vw,44px);
  padding: 31px 0;
}

.tbd-sr:hover .tbd-sr-top {
  padding-left: 18px;
  padding-right: 18px;
}

.tbd-sr-name {
  font-size: clamp(19px,1.35vw,25px);
  line-height: 1.22;
}

.tbd-sr-tag {
  max-width: 760px;
  font-size: clamp(14px,1vw,16px);
  line-height: 1.62;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(0,30,43,.58);
  white-space: normal;
  overflow: visible;
}

.tbd-sr:hover .tbd-sr-tag {
  color: rgba(244,242,237,.72);
}

.tbd-sr-arr {
  width: 42px;
  height: 42px;
  justify-self: end;
  background: rgba(255,255,255,.54);
}

.tbd-sr-desc {
  display: none !important;
}

.tbd-sr:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

@media (max-width: 1180px) {
  .tbd-sr-top {
    grid-template-columns: 56px minmax(230px,.8fr) minmax(300px,1.2fr) 44px;
    gap: 22px;
  }
}

@media (max-width: 960px) {
  .tbd-sr-top {
    grid-template-columns: 42px 1fr 40px;
    gap: 12px 14px;
    padding: 24px 0;
  }

  .tbd-sr:hover .tbd-sr-top {
    padding-left: 0;
    padding-right: 0;
  }

  .tbd-sr-n {
    grid-row: 1 / span 2;
    font-size: 24px;
  }

  .tbd-sr-name {
    grid-column: 2 / 3;
    font-size: 18px;
  }

  .tbd-sr-tag {
    display: block;
    grid-column: 2 / 3;
    font-size: 14px;
    line-height: 1.55;
  }

  .tbd-sr-arr {
    grid-column: 3 / 4;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

/* The Base Digital client logos UX - 2026-05-26 */

.tbd-clients {
  padding: clamp(76px, 9vh, 112px) 52px;
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(0,163,224,.045), transparent 68%),
    var(--white);
}

.tbd-clients-head {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.tbd-clients-head h2 {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.08;
}

.tbd-clients-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  max-width: 1440px;
  margin: 0 auto;
  border: 1px solid rgba(0,30,43,.1);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.7);
  box-shadow: 0 24px 70px rgba(0,30,43,.06);
}

.tbd-client {
  min-height: 132px;
  padding: 26px 18px;
  border-right: 1px solid rgba(0,30,43,.08);
  border-bottom: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(244,242,237,.56));
  position: relative;
}

.tbd-client:last-child {
  border-right: none;
}

.tbd-client::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,163,224,.28), transparent);
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .24s var(--e1), transform .3s var(--e1);
}

.tbd-client:hover {
  background: #fff;
}

.tbd-client:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.tbd-client-logo {
  display: block;
  max-width: min(150px, 88%);
  max-height: 54px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(.92) opacity(.7);
  transition: filter .24s var(--e1), transform .28s var(--e3);
}

.tbd-client:hover .tbd-client-logo {
  filter: grayscale(0) contrast(1) opacity(1);
  transform: translateY(-2px);
}

.tbd-client-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.tbd-client-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0,30,43,.06);
  border: 1px solid rgba(0,30,43,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
}

.tbd-client-name {
  max-width: 150px;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,30,43,.52);
}

@media (max-width: 1200px) {
  .tbd-clients-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tbd-client {
    border-bottom: 1px solid rgba(0,30,43,.08);
  }

  .tbd-client:nth-child(4n) {
    border-right: none;
  }
}

@media (max-width: 760px) {
  .tbd-clients {
    padding: 56px 18px;
  }

  .tbd-clients-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tbd-client {
    min-height: 116px;
    padding: 22px 14px;
  }

  .tbd-client:nth-child(odd) {
    border-right: 1px solid rgba(0,30,43,.08);
  }

  .tbd-client:nth-child(even) {
    border-right: none;
  }

  .tbd-client-logo {
    max-width: 128px;
    max-height: 46px;
  }
}

/* The Base Digital client logos normalization - 2026-05-26 */

.tbd-clients-row {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.tbd-client {
  min-height: 132px;
  padding: 22px 16px 18px;
  border: 1px solid rgba(0,30,43,.1) !important;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0,30,43,.045);
  gap: 12px;
}

.tbd-client::after {
  left: 22px;
  right: 22px;
  bottom: 10px;
}

.tbd-client-logo {
  max-width: min(150px, 90%);
  max-height: 58px;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal;
}

.tbd-client:hover .tbd-client-logo {
  filter: none !important;
}

.tbd-client-caption {
  display: block;
  max-width: 150px;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,30,43,.48);
}

.tbd-client:hover .tbd-client-caption {
  color: var(--ink);
}

@media (max-width: 760px) {
  .tbd-clients-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .tbd-client {
    min-height: 122px;
    padding: 18px 12px 16px;
  }

  .tbd-client-logo {
    max-width: min(124px, 92%);
    max-height: 48px;
  }
}

/* The Base Digital client logos final normalization - 2026-05-26 */

.tbd-client {
  min-height: 124px;
  padding: 20px 18px;
  background: linear-gradient(180deg, #ffffff 0%, #faf9f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tbd-client-logo {
  max-width: 132px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
  transform: translateZ(0);
}

.tbd-client-caption {
  display: none !important;
}

.tbd-client:has(img[src*="erdicoai-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="nyc-yapi-logo"]) .tbd-client-logo {
  max-width: 72px;
  max-height: 64px;
}

.tbd-client:has(img[src*="egeipek-og"]) .tbd-client-logo {
  max-width: 144px;
  max-height: 62px;
}

.tbd-client:has(img[src*="teos-logo"]) {
  background: linear-gradient(180deg, #002b37 0%, #003e4f 100%);
}

.tbd-client:has(img[src*="teos-logo"]) .tbd-client-logo {
  max-width: 126px;
  max-height: 58px;
}

.tbd-client:has(img[src*="mudo"]) .tbd-client-logo,
.tbd-client:has(img[src*="globalbilgi"]) .tbd-client-logo {
  max-width: 148px;
}

.tbd-client:has(img[src*="dentaizmir-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="keller-williams"]) .tbd-client-logo,
.tbd-client:has(img[src*="nipergo"]) .tbd-client-logo,
.tbd-client:has(img[src*="fuarexpora"]) .tbd-client-logo {
  max-width: 150px;
  max-height: 54px;
}

@supports not selector(:has(*)) {
  .tbd-client-logo {
    max-width: 136px;
    max-height: 52px;
  }
}

@media (max-width: 760px) {
  .tbd-client {
    min-height: 104px;
    padding: 16px 12px;
  }

  .tbd-client-logo {
    max-width: 118px;
    max-height: 42px;
  }
}

/* The Base Digital client logos round 4 - 2026-05-26 */

.tbd-client:has(img[src*="turkcell-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="aktar-diyari-logo"]) .tbd-client-logo {
  max-width: 152px;
  max-height: 48px;
}

.tbd-client:has(img[src*="turkcell-logo"]) {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.tbd-client:has(img[src*="aktar-diyari-logo"]) {
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf4 100%);
}

@media (max-width: 760px) {
  .tbd-client:has(img[src*="turkcell-logo"]) .tbd-client-logo,
  .tbd-client:has(img[src*="aktar-diyari-logo"]) .tbd-client-logo {
    max-width: 128px;
    max-height: 42px;
  }
}

/* The Base Digital client logos flat wall - 2026-05-26 */

.tbd-clients {
  background: #f4f2ed;
}

.tbd-clients-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(22px, 3vw, 42px) clamp(24px, 4vw, 56px);
  max-width: 1360px;
  margin: 0 auto;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tbd-client,
.tbd-client:hover,
.tbd-client:has(img[src*="teos-logo"]),
.tbd-client:has(img[src*="turkcell-logo"]),
.tbd-client:has(img[src*="aktar-diyari-logo"]) {
  min-height: 76px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tbd-client::after {
  display: none !important;
}

.tbd-client-logo,
.tbd-client:hover .tbd-client-logo,
.tbd-client:has(img[src*="erdicoai-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="nyc-yapi-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="egeipek-og"]) .tbd-client-logo,
.tbd-client:has(img[src*="teos-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="mudo"]) .tbd-client-logo,
.tbd-client:has(img[src*="globalbilgi"]) .tbd-client-logo,
.tbd-client:has(img[src*="dentaizmir-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="keller-williams"]) .tbd-client-logo,
.tbd-client:has(img[src*="nipergo"]) .tbd-client-logo,
.tbd-client:has(img[src*="fuarexpora"]) .tbd-client-logo,
.tbd-client:has(img[src*="turkcell-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="aktar-diyari-logo"]) .tbd-client-logo {
  width: auto;
  max-width: 150px;
  max-height: 46px;
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.tbd-client:has(img[src*="erdicoai-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="nyc-yapi-logo"]) .tbd-client-logo {
  max-width: 78px;
  max-height: 54px;
}

.tbd-client:has(img[src*="teos-logo"]) .tbd-client-logo {
  max-width: 132px;
  max-height: 50px;
}

.tbd-client-caption {
  display: none !important;
}

@media (max-width: 760px) {
  .tbd-clients-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 22px;
  }

  .tbd-client,
  .tbd-client:hover {
    min-height: 64px;
  }

  .tbd-client-logo,
  .tbd-client:hover .tbd-client-logo {
    max-width: 126px;
    max-height: 40px;
  }
}

/* The Base Digital client logos equal visual size - 2026-05-26 */

.tbd-clients-row {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 52px 62px;
  align-items: center;
}

.tbd-client {
  min-height: 84px;
}

.tbd-client-logo,
.tbd-client:hover .tbd-client-logo,
.tbd-client:has(img[src*="erdicoai-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="nyc-yapi-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="egeipek-og"]) .tbd-client-logo,
.tbd-client:has(img[src*="teos-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="mudo"]) .tbd-client-logo,
.tbd-client:has(img[src*="globalbilgi"]) .tbd-client-logo,
.tbd-client:has(img[src*="dentaizmir-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="keller-williams"]) .tbd-client-logo,
.tbd-client:has(img[src*="nipergo"]) .tbd-client-logo,
.tbd-client:has(img[src*="fuarexpora"]) .tbd-client-logo,
.tbd-client:has(img[src*="turkcell-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="aktar-diyari-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="batigoz"]) .tbd-client-logo {
  width: auto;
  height: 46px;
  max-width: 178px;
  max-height: none;
  object-fit: contain;
}

.tbd-client:has(img[src*="mudo"]) .tbd-client-logo {
  height: 56px;
}

.tbd-client:has(img[src*="nyc-yapi-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="teos-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="erdicoai-logo"]) .tbd-client-logo {
  height: 62px;
}

.tbd-client:has(img[src*="egeipek-og"]) .tbd-client-logo {
  height: 58px;
}

.tbd-client:has(img[src*="keller-williams"]) .tbd-client-logo {
  height: 50px;
}

.tbd-client:has(img[src*="aktar-diyari-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="fuarexpora"]) .tbd-client-logo,
.tbd-client:has(img[src*="nipergo"]) .tbd-client-logo,
.tbd-client:has(img[src*="dentaizmir-logo"]) .tbd-client-logo {
  height: 48px;
}

@media (max-width: 1200px) {
  .tbd-clients-row {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 42px 44px;
  }
}

@media (max-width: 760px) {
  .tbd-clients-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 24px;
  }

  .tbd-client-logo,
  .tbd-client:hover .tbd-client-logo {
    height: 38px;
    max-width: 136px;
  }

  .tbd-client:has(img[src*="nyc-yapi-logo"]) .tbd-client-logo,
  .tbd-client:has(img[src*="teos-logo"]) .tbd-client-logo,
  .tbd-client:has(img[src*="erdicoai-logo"]) .tbd-client-logo {
    height: 48px;
  }
}

/* The Base Digital client logos polish - 2026-05-26 */

.tbd-client:has(img[src*="egeipek-logo-clean"]) .tbd-client-logo,
.tbd-client:has(img[src*="erdicoai-logo-clean"]) .tbd-client-logo {
  height: 52px;
  max-width: 164px;
}

.tbd-client:has(img[src*="mudo"]) .tbd-client-logo {
  height: 48px;
}

.tbd-client:has(img[src*="nyc-yapi-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="teos-logo"]) .tbd-client-logo {
  height: 58px;
}

.tbd-client:has(img[src*="batigoz"]) .tbd-client-logo,
.tbd-client:has(img[src*="turkcell-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="dentaizmir-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="aktar-diyari-logo"]) .tbd-client-logo,
.tbd-client:has(img[src*="fuarexpora"]) .tbd-client-logo,
.tbd-client:has(img[src*="nipergo"]) .tbd-client-logo {
  height: 44px;
}

@media (max-width: 760px) {
  .tbd-client:has(img[src*="egeipek-logo-clean"]) .tbd-client-logo,
  .tbd-client:has(img[src*="erdicoai-logo-clean"]) .tbd-client-logo {
    height: 42px;
    max-width: 134px;
  }
}

/* The Base Digital client logos optical balance - 2026-05-26 */

.tbd-clients-row {
  gap: 42px 58px;
}

.tbd-client-logo,
.tbd-client:hover .tbd-client-logo {
  width: auto;
  max-width: 168px;
  max-height: none;
  object-fit: contain;
}

.tbd-client:has(img[src*="batigoz"]) .tbd-client-logo {
  height: 38px;
}

.tbd-client:has(img[src*="keller-williams"]) .tbd-client-logo {
  height: 46px;
}

.tbd-client:has(img[src*="turkcell-logo"]) .tbd-client-logo {
  height: 42px;
}

.tbd-client:has(img[src*="nipergo"]) .tbd-client-logo {
  height: 45px;
}

.tbd-client:has(img[src*="nyc-yapi-logo"]) .tbd-client-logo {
  height: 78px;
}

.tbd-client:has(img[src*="mudo"]) .tbd-client-logo {
  height: 44px;
}

.tbd-client:has(img[src*="fuarexpora"]) .tbd-client-logo {
  height: 52px;
}

.tbd-client:has(img[src*="teos-logo"]) .tbd-client-logo {
  height: 76px;
}

.tbd-client:has(img[src*="dentaizmir-logo"]) .tbd-client-logo {
  height: 46px;
}

.tbd-client:has(img[src*="erdicoai-logo-clean"]) .tbd-client-logo {
  height: 54px;
}

.tbd-client:has(img[src*="egeipek-logo-clean"]) .tbd-client-logo {
  height: 58px;
}

.tbd-client:has(img[src*="aktar-diyari-logo"]) .tbd-client-logo {
  height: 48px;
}

@media (max-width: 760px) {
  .tbd-client:has(img[src*="batigoz"]) .tbd-client-logo { height: 32px; }
  .tbd-client:has(img[src*="keller-williams"]) .tbd-client-logo { height: 38px; }
  .tbd-client:has(img[src*="turkcell-logo"]) .tbd-client-logo { height: 36px; }
  .tbd-client:has(img[src*="nipergo"]) .tbd-client-logo { height: 38px; }
  .tbd-client:has(img[src*="nyc-yapi-logo"]) .tbd-client-logo { height: 58px; }
  .tbd-client:has(img[src*="mudo"]) .tbd-client-logo { height: 36px; }
  .tbd-client:has(img[src*="fuarexpora"]) .tbd-client-logo { height: 42px; }
  .tbd-client:has(img[src*="teos-logo"]) .tbd-client-logo { height: 58px; }
  .tbd-client:has(img[src*="dentaizmir-logo"]) .tbd-client-logo { height: 38px; }
  .tbd-client:has(img[src*="erdicoai-logo-clean"]) .tbd-client-logo { height: 44px; }
  .tbd-client:has(img[src*="egeipek-logo-clean"]) .tbd-client-logo { height: 46px; }
  .tbd-client:has(img[src*="aktar-diyari-logo"]) .tbd-client-logo { height: 40px; }
}

/* The Base Digital client logos chrome balance - 2026-05-26 */
.tbd-client-logos,
.partner-logo-grid,
.client-logo-grid {
  align-items: center !important;
}

.tbd-client,
.partner-logo-card,
.client-logo-card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 96px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tbd-client-logo,
.partner-logo-card img,
.client-logo-card img {
  width: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  max-height: none !important;
  max-width: 172px !important;
  display: block !important;
}

.tbd-client-logo[alt*="Batıgöz"] {
  height: 31px !important;
  max-width: 148px !important;
}

.tbd-client-logo[alt*="Keller"],
.tbd-client-logo[alt*="KW"] {
  height: 38px !important;
  max-width: 142px !important;
}

.tbd-client-logo[alt*="Turkcell"] {
  height: 37px !important;
  max-width: 156px !important;
}

.tbd-client-logo[alt*="Nipergo"] {
  height: 39px !important;
  max-width: 148px !important;
}

.tbd-client-logo[alt*="NYC"] {
  height: 98px !important;
  max-width: 118px !important;
}

.tbd-client-logo[alt*="Mudo"] {
  height: 35px !important;
  max-width: 146px !important;
}

.tbd-client-logo[alt*="Expora"],
.tbd-client-logo[alt*="Fuar"] {
  height: 48px !important;
  max-width: 142px !important;
}

.tbd-client-logo[alt*="Teos"] {
  height: 98px !important;
  max-width: 110px !important;
}

.tbd-client-logo[alt*="Denta"] {
  height: 41px !important;
  max-width: 154px !important;
}

.tbd-client-logo[alt*="Erdico"] {
  height: 58px !important;
  max-width: 132px !important;
}

.tbd-client-logo[alt*="Ege"] {
  height: 63px !important;
  max-width: 142px !important;
}

.tbd-client-logo[alt*="Aktar"] {
  height: 42px !important;
  max-width: 158px !important;
}

@media (max-width: 767px) {
  .tbd-client,
  .partner-logo-card,
  .client-logo-card {
    min-height: 76px !important;
  }

  .tbd-client-logo[alt*="Batıgöz"] { height: 27px !important; }
  .tbd-client-logo[alt*="Keller"],
  .tbd-client-logo[alt*="KW"] { height: 33px !important; }
  .tbd-client-logo[alt*="Turkcell"] { height: 33px !important; }
  .tbd-client-logo[alt*="Nipergo"] { height: 34px !important; }
  .tbd-client-logo[alt*="NYC"] { height: 78px !important; }
  .tbd-client-logo[alt*="Mudo"] { height: 31px !important; }
  .tbd-client-logo[alt*="Expora"],
  .tbd-client-logo[alt*="Fuar"] { height: 40px !important; }
  .tbd-client-logo[alt*="Teos"] { height: 78px !important; }
  .tbd-client-logo[alt*="Denta"] { height: 35px !important; }
  .tbd-client-logo[alt*="Erdico"] { height: 48px !important; }
  .tbd-client-logo[alt*="Ege"] { height: 52px !important; }
  .tbd-client-logo[alt*="Aktar"] { height: 36px !important; }
}

/* The Base Digital client logos chrome balance pass 2 - 2026-05-26 */
.tbd-client,
.partner-logo-card,
.client-logo-card {
  min-height: 100px !important;
}

.tbd-client-logo[alt*="Batıgöz"] {
  height: 28px !important;
  max-width: 134px !important;
}

.tbd-client-logo[alt*="Keller"],
.tbd-client-logo[alt*="KW"] {
  height: 37px !important;
  max-width: 136px !important;
}

.tbd-client-logo[alt*="Turkcell"] {
  height: 35px !important;
  max-width: 146px !important;
}

.tbd-client-logo[alt*="Nipergo"] {
  height: 38px !important;
  max-width: 142px !important;
}

.tbd-client-logo[alt*="NYC"] {
  height: 116px !important;
  max-width: 132px !important;
}

.tbd-client-logo[alt*="Mudo"] {
  height: 29px !important;
  max-width: 126px !important;
}

.tbd-client-logo[alt*="Expora"],
.tbd-client-logo[alt*="Fuar"] {
  height: 49px !important;
  max-width: 140px !important;
}

.tbd-client-logo[alt*="Teos"] {
  height: 116px !important;
  max-width: 126px !important;
}

.tbd-client-logo[alt*="Denta"] {
  height: 39px !important;
  max-width: 148px !important;
}

.tbd-client-logo[alt*="Erdico"] {
  height: 62px !important;
  max-width: 138px !important;
}

.tbd-client-logo[alt*="Ege"] {
  height: 66px !important;
  max-width: 148px !important;
}

.tbd-client-logo[alt*="Aktar"] {
  height: 40px !important;
  max-width: 150px !important;
}

/* The Base Digital client logos chrome balance pass 3 - 2026-05-26 */
.tbd-client-logo[alt*="NYC"] {
  height: 96px !important;
  max-width: 116px !important;
}

.tbd-client-logo[alt*="Teos"] {
  height: 88px !important;
  max-width: 96px !important;
}

.tbd-client-logo[alt*="Erdico"] {
  height: 78px !important;
  max-width: 160px !important;
}

.tbd-client-logo[alt*="Ege"] {
  height: 78px !important;
  max-width: 164px !important;
}

.tbd-client-logo[alt*="Denta"] {
  height: 38px !important;
  max-width: 144px !important;
}

/* The Base Digital about section readability pass - 2026-05-26 */
.tbd-about {
  background:
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(114,180,205,.16) 0%, transparent 58%),
    linear-gradient(180deg, #f4f1eb 0%, #f8f6f1 100%) !important;
  color: var(--ink) !important;
  padding-top: clamp(84px, 9vh, 118px) !important;
  padding-bottom: clamp(88px, 10vh, 126px) !important;
  border-top: 1px solid rgba(0,30,43,.08) !important;
  border-bottom: 1px solid rgba(0,30,43,.08) !important;
}

.tbd-about::before {
  color: rgba(0,30,43,.035) !important;
  right: -70px !important;
  top: -110px !important;
}

.tbd-about::after {
  background: radial-gradient(circle, rgba(0,163,224,.08) 0%, transparent 70%) !important;
  opacity: .8 !important;
}

.tbd-about .tbd-ey-sky {
  color: #0089bd !important;
}

.tbd-about .tbd-h2-light {
  color: var(--ink) !important;
  max-width: 760px !important;
  text-wrap: balance !important;
}

.tbd-about .tbd-lead-light {
  color: rgba(0,30,43,.62) !important;
  max-width: 560px !important;
  line-height: 1.72 !important;
}

.tbd-about-quote {
  font-family: inherit !important;
  font-style: normal !important;
  font-size: clamp(18px, 1.35vw, 24px) !important;
  line-height: 1.58 !important;
  letter-spacing: 0 !important;
  color: rgba(0,30,43,.86) !important;
  background: rgba(255,255,255,.56) !important;
  border: 1px solid rgba(0,30,43,.08) !important;
  border-left: 3px solid var(--sky) !important;
  border-radius: 8px !important;
  padding: 24px 28px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 22px 70px rgba(0,30,43,.07) !important;
}

.tbd-about-pts {
  background: rgba(255,255,255,.38) !important;
  border: 1px solid rgba(0,30,43,.07) !important;
  border-radius: 8px !important;
  padding: 6px 22px !important;
}

.tbd-about-pt {
  border-bottom-color: rgba(0,30,43,.08) !important;
  padding: 18px 0 !important;
}

.tbd-about-pt:hover {
  padding-left: 0 !important;
}

.tbd-about-dot {
  background: #0089bd !important;
  box-shadow: 0 0 0 5px rgba(0,137,189,.1) !important;
}

.tbd-about-pt-text {
  color: rgba(0,30,43,.64) !important;
  font-size: 14px !important;
  line-height: 1.78 !important;
}

.tbd-about-pt-text strong {
  color: var(--ink) !important;
  font-weight: 650 !important;
}

.tbd-about .tbd-btn-ink {
  color: var(--ink) !important;
}

.tbd-feat-section {
  padding-top: clamp(96px, 11vh, 132px) !important;
}

@media (max-width: 760px) {
  .tbd-about {
    padding-inline: 20px !important;
  }

  .tbd-about-quote {
    padding: 20px !important;
  }

  .tbd-about-pts {
    padding: 4px 16px !important;
  }
}

/* The Base Digital about section button fix - 2026-05-26 */
.tbd-about .tbd-btn-ink {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 0 22px !important;
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 4px !important;
  color: var(--paper) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.tbd-about .tbd-btn-ink:hover {
  background: #003247 !important;
  border-color: #003247 !important;
  transform: translateY(-1px) !important;
}

/* =============================================================
   The Base Digital — Typography Fix v2.0 (2026-05-26)
   Appended to site.css — covers both design systems
   ============================================================= */

/* ─── 1. HERO H1 — line-height too tight for large DM Serif ─── */
.hero h1 {
  line-height: 1.18 !important;
}

/* ─── 2. SLIDE TITLE (home hero h1) — same problem ─── */
.slide-title {
  line-height: 1.18 !important;
  letter-spacing: -.025em !important;
}

/* ─── 3. HERO SUBTITLE (.slide-sub) — too thin, too small ─── */
.slide-sub {
  font-size: 17px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.65 !important;
  max-width: 540px !important;
}

/* ─── 4. HERO .muted on dark hero ─── */
.hero p.muted,
.hero .muted {
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

/* ─── 5. SECTION HEADINGS — line-height too tight ─── */
.section-head h2,
.section-title {
  line-height: 1.15 !important;
}

/* ─── 6. SECTION LEAD — too light weight, too muted ─── */
.section-lead {
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
}

/* ─── 7. GENERAL MUTED TEXT — weight 300 is too thin everywhere ─── */
.card .muted,
.muted {
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.70 !important;
}

/* ─── 8. SECTION KICKER — 10px is critically small ─── */
.section-head .kicker {
  font-size: 11px !important;
  letter-spacing: .18em !important;
}

/* ─── 9. DARK SECTION LEAD — improve readability ─── */
.section-dark .section-lead {
  color: rgba(233, 238, 243, 0.90) !important;
  font-weight: 400 !important;
}

/* ─── 10. DARK CARDS (hizmet kartları koyu zemin üzerinde) ─── */
.section .grid a.card[href*="-ajansi"] .muted,
.section .grid a.card[href*="-pazarlama"] .muted {
  color: rgba(244, 242, 237, 0.75) !important;
  font-weight: 400 !important;
}

/* ─── 11. FEATURE CARDS — description text too small and faint ─── */
.feature-card {
  padding: 24px 20px !important;
}
.feature-card > div:last-child,
.feature-card > p {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: rgba(183, 194, 205, 0.92) !important;
}

/* ─── 12. SERVICE PREMIUM CARDS — weight fix ─── */
.service-premium-desc {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

/* ─── 13. BLOG CARD TEXT ─── */
.blog-card .muted,
.blog-card h3 {
  font-weight: 400 !important;
}

/* ─── 14. PARTNER CARD TEXT ─── */
.partner-card {
  font-weight: 500 !important;
}

/* ─── TBD DESIGN SYSTEM (service pages, about, blog) ─── */

.tbd-h2 {
  line-height: 1.20 !important;
}

.tbd-lead {
  font-size: 17px !important;
  font-weight: 400 !important;
}

.tbd-lead-light {
  color: rgba(244, 242, 237, 0.78) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
}

.tbd-hero-sub {
  font-size: 17px !important;
  font-weight: 400 !important;
  max-width: 460px !important;
  line-height: 1.65 !important;
  color: rgba(244, 242, 237, 0.85) !important;
}

.tbd-sr-dt {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: rgba(244, 242, 237, 0.84) !important;
}

.tbd-about-pt-text {
  font-size: 15.5px !important;
  font-weight: 400 !important;
  color: rgba(244, 242, 237, 0.82) !important;
  line-height: 1.72 !important;
}

.tbd-feat-body {
  font-size: 14.5px !important;
  font-weight: 400 !important;
  color: rgba(244, 242, 237, 0.76) !important;
  line-height: 1.65 !important;
}

.tbd-feat-title {
  font-size: clamp(15px, 1.3vw, 17px) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.tbd-blog-card.featured .tbd-blog-excerpt {
  color: rgba(244, 242, 237, 0.76) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

.tbd-cta-sub {
  font-size: 17px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.65 !important;
  max-width: 560px !important;
}

.tbd-met-label {
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

.tbd-hr-stat-k {
  color: rgba(244, 242, 237, 0.70) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
}

/* ─── GLOBAL: DM Sans weight 300 → 400 fix ─── */
/* Prevents weight 300 from leaking into any remaining text */
body {
  font-weight: 400 !important;
}