/*
Theme Name: The Design PK
Theme URI: https://thedesignpk.com
Author: The Design PK (Private) Limited
Author URI: https://thedesignpk.com
Description: Custom-built agency theme for The Design PK - light pastel agency style with smooth animations. Built from scratch, no page builder.
Version: 2.4.27
License: Proprietary
Text Domain: thedesignpk
*/

:root {
  --bg: #F8F7F4;
  --bg-soft: #F3F1EC;
  --heading: #101210;
  --text: #3E443E;
  --muted: #8A8F88;
  --dark: #23231D;
  --dark-soft: #26261F;
  --nav-text: #F2EFE6;
  --pill: #EFF3F5;
  --pill-mint: #D8F3E4;
  --pill-sky: #D9E9F7;
  --pill-peach: #F7E7D5;
  --card: #FFFFFF;
  --card-tint: #F3F6F8;
  --icon-slate: #7A8B99;
  --hairline: #E5E3DC;
  --accent-grad: linear-gradient(90deg, #E3D81B, #8FD14F);
  --hero-mesh: linear-gradient(135deg, #F6F2D8 0%, #E6EBD5 35%, #F5E4D3 65%, #E4EBE2 100%);
  --mint-grad: linear-gradient(135deg, #8FD8B4, #B9E8CE);
  --lav-grad: linear-gradient(135deg, #C9A9E0, #E3CDEB);
  --blue-grad: linear-gradient(135deg, #93B4E4, #BCD2EE);
  --shadow-soft: 0 20px 60px rgba(16, 18, 16, 0.08);
  --shadow-card: 0 8px 30px rgba(16, 18, 16, 0.06);
  --radius: 24px;
  --radius-sm: 16px;
  --radius-lg: 40px;
  --font: "Plus Jakarta Sans", "Sora", -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 17px; line-height: 1.7; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font); color: var(--heading); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; }
::selection { background: #E3D81B; color: var(--heading); }
.container { width: min(1280px, 92%); margin: 0 auto; }
.section { padding: clamp(90px, 10vw, 150px) 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  background: var(--pill); color: var(--heading);
  padding: 8px 18px; border-radius: 100px; margin-bottom: 20px;
}
.eyebrow::before { content: "\2726"; font-size: 14px; }
.eyebrow.mint { background: var(--pill-mint); }
.eyebrow.sky { background: var(--pill-sky); }
.eyebrow.peach { background: var(--pill-peach); }

.sec-title { font-size: clamp(2.5rem, 4.5vw, 4rem); margin-bottom: 16px; }
.sec-sub { font-size: 1.05rem; color: var(--muted); max-width: 640px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; font-size: 1rem; padding: 16px 30px; border-radius: 12px;
  transition: transform 0.3s var(--ease-out), background 0.3s, box-shadow 0.3s;
  cursor: pointer; border: none;
}
.btn-dark { background: var(--dark); color: #fff; }
.btn-dark:hover { background: #35352c; transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn-light { background: #E5E5E0; color: var(--heading); }
.btn-light:hover { background: #d8d8d2; transform: translateY(-2px); }

.topbar { font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--hairline); padding: 10px 0; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; }
.topbar a:hover { color: var(--heading); }
.topbar .tb-mail { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.topbar .socials { display: flex; gap: 14px; }

.site-header { position: sticky; top: 16px; z-index: 100; padding: 12px 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { font-weight: 800; font-size: 1.4rem; color: var(--heading); letter-spacing: -0.02em; }
.logo span { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.pill-nav { background: var(--dark-soft); border-radius: 100px; padding: 8px; display: flex; gap: 4px; box-shadow: var(--shadow-card); }
.pill-nav a { color: var(--nav-text); font-size: 14px; font-weight: 500; padding: 10px 20px; border-radius: 100px; transition: background 0.3s; }
.pill-nav a:hover, .pill-nav a.active { background: rgba(255,255,255,0.16); }
.header-cta { display: flex; align-items: center; gap: 12px; }

.hero {
  background: var(--hero-mesh);
  margin: 0; width: 100%;
  padding: clamp(80px, 9vw, 140px) clamp(24px, 5vw, 80px);
  text-align: center; position: relative; overflow: hidden;
}
.hero h1 { font-size: clamp(3rem, 7vw, 6rem); margin-bottom: 24px; min-height: 3.3em; }
.hero .rotating {
  /* v2.4.13: darkened gradient stops (same yellow-to-green hues, deep
     end) so the rotating word stays readable on the light hero wash;
     --accent-grad itself is unchanged (still used on dark surfaces). */
  background: linear-gradient(90deg, #7A6200, #2F6B1A); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; display: inline-block;
}
.hero p { font-size: 1.15rem; color: var(--text); max-width: 620px; margin: 0 auto 36px; }
.hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }


.scroll-hint { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-size: 12px; letter-spacing: 0.2em; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.scroll-hint::after { content: ""; width: 2px; height: 60px; background: linear-gradient(var(--muted), transparent); animation: scrollDot 2s ease-in-out infinite; }
@keyframes scrollDot { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

.marquee { overflow: hidden; white-space: nowrap; padding: 28px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin: 60px 0; }
.marquee-track { display: inline-flex; gap: 0; animation: marquee 30s linear infinite; will-change: transform; }
.marquee-track span { font-size: 1.1rem; font-weight: 600; color: var(--muted); padding-right: 48px; }
.marquee-track span::before { content: "\2726  "; color: #8FD14F; }
@keyframes marquee { to { transform: translateX(-50%); } }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; }
.mini-card { display: block; background: var(--card-tint); border-radius: var(--radius-sm); padding: 32px 28px; transition: transform 0.35s var(--ease-out), box-shadow 0.35s; }
.mini-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.mini-card .icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px; color: var(--icon-slate); background: #fff; }
.mini-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.mini-card p { font-size: 0.95rem; color: var(--muted); }

.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; margin-bottom: 24px; }
.split-text { border-radius: var(--radius); padding: clamp(36px, 4vw, 60px); display: flex; flex-direction: column; justify-content: center; }
.split-text.mint { background: #E3F2E8; }
.split-text.blue { background: #E9EFF3; }
.split-text.cream { background: #F6F1E7; }
.split-text.peach { background: #F7E9D8; }
.split-text h3 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); margin: 14px 0 12px; }
.split-text p { color: var(--text); }
.split-media { border-radius: var(--radius); min-height: 320px; background: var(--card-tint); display: flex; align-items: center; justify-content: center; font-size: 4rem; overflow: hidden; }
.split-row.reverse .split-text { order: 2; }
.split-row.reverse .split-media { order: 1; }

.achieve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; }
.achieve-card { background: var(--card); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card); text-align: center; transition: transform 0.35s var(--ease-out); }
.achieve-card:hover { transform: translateY(-6px); }
.achieve-top { height: 130px; display: flex; align-items: center; justify-content: center; }
.achieve-top.mint { background: var(--mint-grad); }
.achieve-top.lav { background: var(--lav-grad); }
.achieve-top.blue { background: var(--blue-grad); }
.achieve-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.55); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.achieve-body { padding: 28px 24px 32px; }
.achieve-body .num { font-size: 2.6rem; font-weight: 800; color: var(--heading); letter-spacing: -0.02em; }
.achieve-body p { color: var(--muted); font-size: 0.95rem; margin-top: 6px; }

.stat-pills { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.stat-pill { background: #fff; border-radius: 100px; padding: 12px 26px; box-shadow: var(--shadow-card); font-weight: 700; color: var(--heading); }
.stat-pill b { font-size: 1.4rem; }

.stepper { display: flex; align-items: center; justify-content: center; gap: 0; margin: 50px auto; max-width: 700px; background: var(--pill); border-radius: 100px; padding: 12px 24px; }
.step { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--heading); }
.step .n { width: 40px; height: 40px; border-radius: 50%; background: var(--dark); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.step-line { flex: 1; height: 2px; background: var(--hairline); margin: 0 16px; min-width: 40px; }
.process-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; text-align: center; }
.process-cols h3 { margin-bottom: 10px; }
.process-cols p { color: var(--muted); font-size: 0.95rem; }

/* ============================================================
   TESTIMONIALS v2 (draft — append to style.css at deploy time,
   replacing the old .testi-* block at lines ~167–178 + the
   .testi-card .stars rule at line ~419; bump theme to 2.3.3)
   Uses the theme's existing variables; brand green --brand: #016C5A
   is introduced here (logo green, also the SiteChat widget colour).
   ============================================================ */
:root { --brand: #016C5A; --fiverr: #1DBF73; }

.testi-hint {
  margin-top: 14px; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}

/* ---- Rail: horizontal scroll-snap + drag-to-scroll ---- */
.testi-track {
  display: flex; gap: 24px; overflow-x: auto;
  padding: 20px 4px 30px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-track.is-dragging {
  cursor: grabbing; scroll-snap-type: none;
  scroll-behavior: auto !important;
}
.testi-track.is-dragging * { user-select: none !important; }
.testi-track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius-sm); }

/* ---- Card ---- */
.testi-card {
  flex: 0 0 340px; width: 340px; max-width: 86vw;
  scroll-snap-align: center;
  border-radius: var(--radius-sm);
  padding: 36px 32px 30px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.testi-card.mint  { background: var(--pill-mint); }
.testi-card.lav   { background: #EDE4F5; }
.testi-card.cream { background: var(--pill-peach); }

/* Single client-review card at the end of project pages (v2.4.5) */
.project-review-card { display: flex; justify-content: center; margin-top: 10px; }
.project-review-card .testi-card { flex: 0 1 340px; }

.testi-card .avatar {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 50% 50% 50% 8px;
  background: var(--dark); color: #fff;
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700;
}
.testi-card .stars { color: var(--gold, #B08A1E); letter-spacing: 4px; font-size: 1.05rem; margin-bottom: 12px; }
.testi-card blockquote { font-size: 1.02rem; color: var(--heading); margin-bottom: 18px; }

/* ---- Meta: name (+ Fiverr icon), sub-line, tier badge ---- */
.testi-meta { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.testi-card cite {
  font-style: normal; font-weight: 700; color: var(--heading);
  font-size: 0.98rem; display: inline-flex; align-items: center; gap: 6px;
}
.fiverr-ic { flex: 0 0 auto; vertical-align: middle; }
.testi-sub { font-weight: 600; color: var(--muted); font-size: 0.86rem; line-height: 1.45; }

.testi-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1;
  padding: 6px 12px; border-radius: 100px; margin-top: 4px;
  background: var(--pill); color: var(--heading);
  border: 1px solid var(--hairline);
}
.testi-badge .testi-badge-n { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: 0.75; }
.testi-badge.tier-returning { background: #fff; border-color: var(--hairline); color: var(--text); }
.testi-badge.tier-loyal {
  background: var(--pill-sky); border-color: #BCD2EE; color: var(--heading);
}
.testi-badge.tier-top {
  background: var(--brand); border-color: var(--brand); color: #fff;
  font-size: 0.78rem; padding: 8px 16px;
  box-shadow: 0 8px 20px rgba(1, 108, 90, 0.35);
}

/* ---- Dots (auto-hidden by JS when there are too many cards) ---- */
.testi-dots { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.testi-dots span { width: 8px; height: 8px; border-radius: 100px; background: #D5D3CC; transition: all 0.3s; cursor: pointer; }
.testi-dots span.active { width: 28px; background: var(--heading); }

/* ---- Progress bar (fallback indicator for long rails) ---- */
.testi-progress {
  height: 4px; border-radius: 100px; background: var(--hairline);
  margin: 14px auto 0; max-width: 280px; overflow: hidden;
}
.testi-progress span { display: block; height: 100%; width: 12%; background: var(--brand); border-radius: 100px; transition: width 0.25s var(--ease-out); }

@media (max-width: 960px) {
  .testi-card { flex-basis: 300px; width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .testi-track { scroll-behavior: auto; }
}

.cta { background: var(--bg-soft); border-radius: var(--radius-lg); padding: clamp(70px, 8vw, 110px) 40px; text-align: center; position: relative; overflow: hidden; }
.cta h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); margin-bottom: 18px; }
.cta p { color: var(--muted); max-width: 520px; margin: 0 auto 36px; }
.cta .hero-btns { position: relative; z-index: 2; }
.blob { position: absolute; border-radius: 50%; opacity: 0.5; animation: float 7s ease-in-out infinite; }
.blob.b1 { width: 120px; height: 120px; border: 14px solid #F5A623; top: 15%; left: 8%; background: transparent; }
.blob.b2 { width: 90px; height: 90px; background: #A8C8F0; bottom: 20%; right: 10%; }
.blob.b3 { width: 60px; height: 60px; background: #B9E8CE; top: 25%; right: 18%; animation-delay: 2s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

.site-footer { padding: 70px 0 30px; }
.footer-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; padding-bottom: 30px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 26px; font-size: 14px; font-weight: 500; }
.footer-links a:hover { color: var(--heading); }
.footer-bottom { border-top: 1px solid var(--hairline); padding-top: 26px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); flex-wrap: wrap; gap: 12px; }

.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

.fill-heading .word { color: #D8D6CF; transition: color 0.4s; }
.fill-heading .word.lit { color: var(--heading); }

.rot-wrap { display: block; position: relative; }
.rot-word { display: inline-block; white-space: nowrap; transition: opacity 0.35s, transform 0.35s; }
/* v2.4.13: rotating hero word one size step larger (mobile keeps a
   smaller bump so the longest word still fits the narrow heading). */
.hero .rot-word { font-size: 1.14em; }
@media (max-width: 640px) { .hero .rot-word { font-size: 1.06em; } }
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(2.1rem, 10vw, 3rem); }
  .stepper { flex-direction: column; align-items: flex-start; gap: 12px; border-radius: 28px; padding: 18px 20px; }
  .step-line { display: none; }
}
.rot-word.out { opacity: 0; transform: translateY(14px); }
.count { font-variant-numeric: tabular-nums; }

.portfolio-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 50px; }
.portfolio-card { background: var(--card); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.35s var(--ease-out); min-width: 0; }
.portfolio-card:hover { transform: translateY(-6px); }
.portfolio-card .thumb { height: 220px; background: var(--card-tint); display: flex; align-items: center; justify-content: center; font-size: 3rem; overflow: hidden; }
.portfolio-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-card .body { padding: 24px; }
.portfolio-card .tag { display: inline-block; font-size: 12px; font-weight: 600; background: var(--pill); padding: 4px 12px; border-radius: 100px; margin-bottom: 10px; color: var(--heading); }
.portfolio-card h3 { font-size: 1.2rem; margin-bottom: 6px; }
.portfolio-card p { font-size: 0.9rem; color: var(--muted); }

@media (max-width: 960px) {
  .services-grid, .achieve-grid, .process-cols { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-card .thumb { height: 180px; }
  .split-row { grid-template-columns: 1fr; }
  .split-row.reverse .split-text { order: 1; }
  .split-row.reverse .split-media { order: 2; }
  .pill-nav { display: none; }
  .scroll-hint { display: none; }
}

/* ============================================================
   STICKY STACKING CARDS (Digital Solutions)
   ============================================================ */
.stack-section { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.stack-left { position: sticky; top: 110px; }
.stack-left h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: 18px; }
.stack-left p { color: var(--muted); margin-bottom: 28px; }
.view-more { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; color: var(--heading); }
.view-more .plus {
  width: 44px; height: 44px; border-radius: 50%; background: #E5E5E0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 400; transition: transform 0.3s var(--ease-out), background 0.3s;
}
.view-more:hover .plus { transform: rotate(90deg); background: var(--dark); color: #fff; }
.stack-cards { display: flex; flex-direction: column; gap: 24px; padding-bottom: 40px; }
.stack-card {
  display: block; position: sticky; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-soft); background: #fff;
}
.stack-card .stack-media { height: 260px; display: flex; align-items: center; justify-content: center; font-size: 4.5rem; }
.stack-card .stack-cap {
  margin: 16px; padding: 22px 24px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.72); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.stack-card .stack-cap h3 { font-size: 1.3rem; margin-bottom: 4px; }
.stack-card .stack-cap p { font-size: 0.9rem; color: var(--muted); }
.stack-card .stack-cap .go {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
@media (max-width: 960px) {
  .stack-section { grid-template-columns: 1fr; }
  .stack-left { position: static; }
  .stack-card { position: static; }
}
/* ============================================================
   INNER PAGES — v2 light design language
   (About, Services, Products, Pricing, Contact, Work, Case Study)
   Appended to style.css so every template class is styled.
   ============================================================ */
:root {
  --gold: #B08A1E;
  --gold-light: #C9A227;
  --border-gold: rgba(201, 162, 39, 0.45);
  --text-dim: var(--text);
  --text-faint: var(--muted);
  --font-display: var(--font);
}
.gold { color: var(--gold); }
.arrow { display: inline-block; transition: transform 0.25s var(--ease-out); }
a:hover .arrow, .btn:hover .arrow { transform: translateX(4px); }

/* Buttons (gold variants used by inner templates) */
.btn-gold { background: var(--accent-grad); color: var(--heading); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn-ghost { background: transparent; color: var(--heading); border: 1.5px solid var(--hairline); }
.btn-ghost:hover { border-color: var(--heading); transform: translateY(-2px); }

/* Page hero */
.page-hero { position: relative; padding: clamp(70px, 9vw, 120px) 0 clamp(40px, 5vw, 64px); overflow: hidden; }
.page-hero .hero-mesh { position: absolute; inset: 0; background: var(--hero-mesh); opacity: 0.65; z-index: -1; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 900px; margin: 18px 0 16px; }
.page-hero .lede { font-size: 1.15rem; color: var(--text); max-width: 640px; }
.section-title { font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* Case / content blocks (About, Case Study) */
.case-block { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(28px, 4vw, 44px); margin-bottom: 28px; box-shadow: var(--shadow-card); }
.case-block h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.case-block h2 .num { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 12px; background: var(--pill-mint); font-size: 1rem; }
.case-block p { color: var(--text); }
.case-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.case-meta span { background: var(--card); border: 1px solid var(--hairline); border-radius: 100px; padding: 6px 14px; font-size: 0.85rem; font-weight: 600; color: var(--heading); }
.case-hero-img { border-radius: var(--radius); overflow: hidden; margin: 10px 0 36px; box-shadow: var(--shadow-soft); }
.case-hero-img img { width: 100%; }
.result-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }

/* Stats bar */
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 48px 0; }
.stats-bar.stats-3 { grid-template-columns: repeat(3, 1fr); }
.stat { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 26px 20px; text-align: center; box-shadow: var(--shadow-card); }
.stat strong { display: block; font-size: 2rem; color: var(--heading); font-weight: 800; letter-spacing: -0.02em; }
.stat span { font-size: 0.9rem; color: var(--muted); font-weight: 600; }

/* CTA band */
.cta-band { background: var(--dark); color: var(--nav-text); border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 72px); text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 14px; }
.cta-band p { color: rgba(242, 239, 230, 0.75); max-width: 560px; margin: 0 auto 28px; }

/* Intent cards (Services, Pricing) */
.intent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.intent-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 34px 30px; box-shadow: var(--shadow-card); transition: transform 0.3s var(--ease-out); }
.intent-card:hover { transform: translateY(-4px); }
.intent-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.intent-card p { font-size: 0.98rem; margin-bottom: 16px; }
.intent-card .intent-icon { font-size: 2rem; margin-bottom: 16px; }
.intent-card .go { font-weight: 700; color: var(--heading); }

/* Products */
.product-grid { display: grid; gap: 28px; }
.product-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(30px, 4vw, 48px); box-shadow: var(--shadow-card); }
.product-card .badge { display: inline-block; background: var(--pill-mint); color: var(--heading); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; margin-bottom: 18px; }
.product-card .badge.soon { background: var(--pill-peach); }
.product-logo { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 800; color: var(--heading); letter-spacing: -0.02em; margin-bottom: 16px; }
.product-card p { margin-bottom: 24px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: start; }
.contact-info .row { display: flex; gap: 16px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow-card); }
.contact-info .row .ic { font-size: 1.4rem; line-height: 1.3; }
.contact-info .row strong { color: var(--heading); display: block; margin-bottom: 2px; }
.contact-info .row p { font-size: 0.95rem; margin: 0; }
.contact-info .row a { font-weight: 600; color: var(--gold); }
.tdp-form { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(26px, 4vw, 40px); box-shadow: var(--shadow-card); }
.tdp-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tdp-form .field { margin-bottom: 18px; }
.tdp-form label { display: block; font-weight: 700; color: var(--heading); font-size: 0.9rem; margin-bottom: 7px; }
.tdp-form input, .tdp-form select, .tdp-form textarea { width: 100%; font: inherit; font-size: 0.98rem; color: var(--heading); background: var(--bg-soft); border: 1.5px solid var(--hairline); border-radius: 12px; padding: 13px 15px; }
.tdp-form textarea { min-height: 130px; resize: vertical; }
.tdp-form input:focus, .tdp-form select:focus, .tdp-form textarea:focus { outline: none; border-color: var(--gold-light); background: #fff; }
.tdp-form .form-note { font-size: 0.85rem; color: var(--muted); text-align: center; margin-top: 14px; }

/* Work archive */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.filter-btn { font: inherit; font-size: 0.9rem; font-weight: 600; background: var(--card); color: var(--heading); border: 1.5px solid var(--hairline); border-radius: 100px; padding: 9px 20px; cursor: pointer; transition: all 0.25s; }
.filter-btn:hover { border-color: var(--heading); }
.filter-btn.active { background: var(--dark); color: #fff; border-color: var(--dark); }
.work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.work-card { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 340px; display: flex; align-items: flex-end; background: var(--dark-soft); box-shadow: var(--shadow-card); }
.work-media { position: absolute; inset: 0; }
.work-media img { width: 100%; height: 100%; object-fit: cover; }
.work-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--nav-text); font-weight: 700; letter-spacing: 0.06em; background: linear-gradient(135deg, #3A3A30, #23231D); padding: 20px; }
.work-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,18,16,0) 35%, rgba(16,18,16,0.82) 100%); }
.view-case { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--heading); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; z-index: 3; }
.work-body { position: relative; z-index: 2; padding: 26px; width: 100%; }
.work-body h3 { color: #fff; font-size: 1.45rem; margin: 8px 0 6px; }
.work-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.work-tags span { background: rgba(255,255,255,0.18); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 100px; backdrop-filter: blur(4px); }
.work-result { color: rgba(255,255,255,0.88); font-size: 0.92rem; }
.work-result strong { color: #8FD14F; }
.work-link { position: absolute; inset: 0; z-index: 4; }
.work-card.is-hidden { display: none; }
.nav-links { display: flex; gap: 10px; justify-content: center; }
.nav-links .page-numbers { padding: 9px 16px; border-radius: 100px; border: 1.5px solid var(--hairline); background: var(--card); font-weight: 600; }
.nav-links .page-numbers.current { background: var(--dark); color: #fff; border-color: var(--dark); }

/* Team + founder (About) */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; }
.team-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 0; overflow: hidden; text-align: center; box-shadow: var(--shadow-card); transition: translate 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
.team-card:hover { translate: 0 -6px; box-shadow: var(--shadow-soft); }
.team-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: 0; margin: 0; transition: transform 0.6s var(--ease-out); }
.team-card:hover img { transform: scale(1.05); }
.team-photo-link { display: block; }
.team-info { padding: 18px 20px 20px; }
.team-card h3 { font-size: 1.02rem; margin-bottom: 4px; }
.team-card p { font-size: 0.86rem; color: var(--muted); font-weight: 600; margin: 0; }
.team-socials { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.team-socials a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--hairline); color: var(--heading); }
.team-socials a:hover { background: var(--dark); color: #fff; border-color: var(--dark); }
.team-socials svg.social-icon { display: block; width: 15px; height: 15px; }
.prod-link { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prod-link:hover { text-decoration-color: var(--heading); }
.founder-flex { display: flex; gap: 26px; align-items: flex-start; }
.founder-photo { width: 170px; height: 170px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.testi-card img.avatar { object-fit: cover; }
.stack-card .stack-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .founder-flex { flex-direction: column; }
}
@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* Footer NAP / socials */
.footer-nap { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; border-top: 1px solid var(--hairline); margin-top: 26px; padding-top: 22px; font-size: 0.92rem; color: var(--muted); }
.footer-nap a { font-weight: 600; color: var(--heading); }
.footer-nap .socials { display: flex; gap: 10px; }
.footer-nap .socials a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--hairline); font-size: 0.78rem; font-weight: 800; color: var(--heading); }
.footer-nap .socials a:hover { background: var(--dark); color: #fff; border-color: var(--dark); }
.topbar .socials a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--hairline); color: var(--heading); }
.topbar .socials a:hover { background: var(--dark); color: #fff; border-color: var(--dark); }
.socials svg.social-icon { display: block; }
.topbar .socials svg.social-icon { width: 15px; height: 15px; }
.footer-nap .socials svg.social-icon { width: 17px; height: 17px; }
img.site-logo-img { height: 60px; width: auto; display: inline-block; vertical-align: middle; }

@media (max-width: 900px) {
  .intent-grid { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stats-bar.stats-3 { grid-template-columns: repeat(2, 1fr); }
  .result-metrics { grid-template-columns: 1fr; }
  .tdp-form .two { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .work-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   v2.2 — Message pages, service detail pages, misc helpers
   ============================================================ */
.msg-photo { width: 230px; height: auto; border-radius: var(--radius); flex-shrink: 0; box-shadow: var(--shadow-card); }
.msg-body p + p { margin-top: 14px; }
.msg-body blockquote { border-left: 3px solid var(--gold-light); padding-left: 18px; margin: 20px 0; font-size: 1.06rem; color: var(--heading); }
.msg-sign { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.msg-sign .sig-name { font-size: 1.25rem; font-weight: 800; color: var(--heading); letter-spacing: -0.01em; }
.msg-sign .sig-role { color: var(--muted); font-weight: 600; font-size: 0.95rem; }
.msg-contact { margin-top: 26px; color: var(--muted); font-size: 0.97rem; }
.msg-contact a { color: var(--gold); font-weight: 600; }
.skill-bars { margin-top: 28px; }
.skill-bar { margin-top: 16px; }
.skill-bar .skill-top { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; color: var(--heading); font-size: 0.97rem; margin-bottom: 7px; }
.skill-bar .skill-pct { color: var(--gold); font-weight: 700; }
.skill-track { height: 8px; border-radius: 99px; background: var(--hairline); overflow: hidden; }
.skill-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold-light), var(--gold)); }
@media (max-width: 900px) { .msg-photo { width: 170px; height: auto; } }

.check-list { list-style: none; padding: 0; margin: 4px 0 6px; }
.check-list li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--text); }
.check-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold-light); font-weight: 700; }
.case-block h3 { font-size: 1.15rem; margin-bottom: 8px; }
.svc-more { display: inline-block; margin-top: 18px; font-weight: 700; color: var(--heading); }
.svc-more:hover { color: var(--gold); }

/* ============================================================
   BLOG — v2.3.1 (listing page + single article)
   ============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.blog-card-media { display: block; aspect-ratio: 3 / 2; background: var(--card-tint); overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 220px; font-size: 3rem; color: var(--gold); background: var(--hero-mesh); }
.blog-card-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.blog-cat { display: inline-block; background: var(--pill); color: var(--heading); padding: 4px 12px; border-radius: 100px; font-size: 0.76rem; }
.blog-cat:hover { background: var(--pill-mint); }
.blog-card h2 { font-size: 1.32rem; line-height: 1.25; margin-bottom: 10px; }
.blog-card h2 a:hover { color: var(--gold); }
.blog-card-body > p { color: var(--muted); font-size: 0.96rem; line-height: 1.65; flex: 1; }
.blog-readmore { margin-top: 18px; font-weight: 700; color: var(--heading); }
.blog-readmore:hover { color: var(--gold); }
.blog-empty { color: var(--muted); font-size: 1.05rem; }

.blog-article-wrap { max-width: 860px; }
.blog-article-meta { margin-bottom: 0; }
.blog-featured { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); margin: 6px 0 40px; }
.blog-featured img { width: 100%; }
.blog-content { color: var(--text); font-size: 1.04rem; line-height: 1.8; overflow-wrap: break-word; }
.blog-content p { margin: 0 0 1.25em; }
.blog-content h2, .blog-content h3, .blog-content h4 { color: var(--heading); margin: 1.6em 0 0.6em; line-height: 1.2; }
.blog-content h2 { font-size: clamp(1.55rem, 3vw, 2rem); }
.blog-content h3 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); }
.blog-content h4 { font-size: 1.2rem; }
.blog-content ul, .blog-content ol { margin: 0 0 1.25em; padding-left: 1.45em; }
.blog-content li { margin-bottom: 0.45em; }
.blog-content a { color: var(--gold); font-weight: 600; }
.blog-content a:hover { text-decoration: underline; }
.blog-content img { border-radius: var(--radius-sm); margin: 28px auto; }
.blog-content figure { margin: 28px 0; }
.blog-content figcaption { color: var(--muted); font-size: 0.9rem; text-align: center; margin-top: 10px; }
.blog-content blockquote { border-left: 3px solid var(--gold-light); padding-left: 18px; margin: 24px 0; font-size: 1.06rem; color: var(--heading); }
.blog-content pre { background: var(--dark); color: var(--nav-text); border-radius: var(--radius-sm); padding: 20px; overflow-x: auto; margin: 0 0 1.25em; }
.blog-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 1.25em; }
.blog-content iframe, .blog-content video { max-width: 100%; }
.blog-tags { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 0.95rem; }
.blog-tags span { font-weight: 700; color: var(--heading); margin-right: 6px; }
.blog-tags a { color: var(--gold); font-weight: 600; }
.blog-back { margin-top: 34px; }

@media (max-width: 1100px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card-body { padding: 22px; }
}

/* ============================================================
   v2.4.0 — Loop sliders (related work), package prices,
   service sub-service chips
   ============================================================ */
/* "Starting from" price lines (pricing page + service packages) */
.price-line { margin: 12px 0 14px; }
.price-from {
  display: block; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 2px;
}
.price-amt {
  font-family: var(--font-display); font-size: 40px; font-weight: 800;
  color: var(--gold-light); line-height: 1.1;
}

/* Sub-service chips (SEO page) */
.subsvc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.subsvc-chips span {
  background: var(--pill); border: 1px solid var(--hairline);
  border-radius: 100px; padding: 8px 16px;
  font-size: 0.9rem; font-weight: 700; color: var(--heading);
}

/* Related-work rail: same rail mechanics as .testi-track
   (flex + scroll-snap + drag), generic so the loop engine in
   main.js can drive it. Cards keep the archive .work-card look. */
.testi-rail-wrap { position: relative; }
.rel-track {
  display: flex; gap: 24px; overflow-x: auto;
  padding: 16px 4px 26px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; -webkit-overflow-scrolling: touch;
}
.rel-track::-webkit-scrollbar { display: none; }
.rel-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto !important; }
.rel-track.is-dragging * { user-select: none !important; }
.rel-track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius-sm); }
.rel-track .work-card {
  flex: 0 0 calc((100% - 48px) / 3); width: calc((100% - 48px) / 3); max-width: 84vw; min-height: 300px;
  scroll-snap-align: center;
}
.rel-block { padding-bottom: 20px; }
.rel-block .rel-track { margin: 0 -6px; }
@media (max-width: 640px) {
  .rel-track .work-card { flex-basis: 300px; width: 300px; min-height: 260px; }
}
/* Service-page review rails reuse the testimonial rail itself */
.testi-rail-wrap .testi-track { padding-left: 4px; padding-right: 4px; }

/* ============================================================
   v2.4.7 — Mobile fixes (2026-10-28): working mobile navigation,
   hero rotating-word centering, approach stepper, footer columns
   ============================================================ */
.nav-toggle { display: none; }

@media (max-width: 960px) {
  .header-inner { position: relative; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: stretch;
    gap: 5px; width: 46px; height: 46px; padding: 13px 12px; flex-shrink: 0;
    background: var(--dark-soft); border: 0; border-radius: 50%; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; }
  .pill-nav.open {
    display: flex; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px; border-radius: 24px; z-index: 120;
  }
  .pill-nav.open a { text-align: center; padding: 13px 20px; }
}

@media (max-width: 640px) {
  /* Hero: center the heading + rotating word; size so the longest word fits fully */
  .hero h1 { text-align: center; font-size: clamp(2rem, 8.5vw, 3rem); }
  .hero .rot-wrap { display: block; width: 100%; text-align: center; }
  .hero .rot-word { max-width: 100%; letter-spacing: -0.03em; }

  /* Our approach: hide the numbered stepper row (the blocks below carry the same headings) */
  .stepper { display: none; }

  /* Footer navigation: two clean columns */
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; width: 100%; }
  .footer-links a { padding: 4px 0; }
}

/* ============ v2.4.9 — Pricing billing toggle (Part 8) + Founder contact lines (Part 10) ============ */
.billing-toggle { display: inline-flex; gap: 4px; background: var(--dark-soft); padding: 6px; border-radius: 100px; margin-bottom: 30px; box-shadow: var(--shadow-card); }
.bt-opt { border: 0; cursor: pointer; background: transparent; color: var(--nav-text); font: inherit; font-size: 14.5px; font-weight: 600; padding: 10px 22px; border-radius: 100px; display: inline-flex; align-items: center; gap: 8px; }
.bt-opt.is-active { background: rgba(255, 255, 255, 0.16); color: #ffffff; }
.bt-badge, .save-badge { background: var(--accent-grad); color: var(--heading); font-weight: 800; letter-spacing: 0.02em; border-radius: 100px; }
.bt-badge { font-size: 11px; padding: 3px 9px; }
.intent-card { position: relative; }
.save-badge { position: absolute; top: 16px; right: 16px; font-size: 11px; padding: 4px 10px; }
.save-badge[hidden], .price-equiv[hidden] { display: none; }
.price-equiv { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 3px; }
body.billing-annual .intent-card { border-color: var(--border-gold); }
@media (max-width: 640px) {
  .billing-toggle { display: flex; width: 100%; }
  .bt-opt { flex: 1; justify-content: center; padding: 10px 8px; font-size: 13.5px; }
  body.page-id-74 .msg-contact { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
  body.page-id-74 .msg-contact .mc-dot { display: none; }
}

/* ============ v2.4.10 — Legal pages mobile side padding (Part 11) ============ */
@media (max-width: 640px) {
  .legal-content { padding-left: 20px; padding-right: 20px; }
}

/* ============ v2.4.12 — Our Clients logo slider (homepage) ============
   White band in the marquee's hairline language; the track reuses the
   marquee keyframes (translateX -50%) with the set cloned x4 in main.js.
   v2.4.13 visibility fix: logos now rest in FULL COLOUR at full opacity
   (the old grayscale + 0.6 opacity washed pale logos out to near-white
   on the white band), and the band no longer carries the .reveal class,
   so it can never sit at opacity 0 if the reveal JS fails. */
.clients-band { background: #fff; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-top: 54px; padding: 36px 0; }
.clients-strip { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.clients-track { display: flex; align-items: center; width: max-content; animation: marquee 48s linear infinite; will-change: transform; }
.clients-strip:hover .clients-track { animation-play-state: paused; }
.client-item { display: flex; align-items: center; padding-right: 76px; }
.client-item a { display: inline-flex; align-items: center; }
.client-item img { height: 54px; width: auto; max-width: 185px; object-fit: contain; transition: transform 0.35s var(--ease-out); }
.client-item:hover img { transform: scale(1.05); }
@media (max-width: 640px) {
  .clients-band { margin-top: 40px; padding: 26px 0; }
  .client-item { padding-right: 48px; }
  .client-item img { height: 42px; max-width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 26px; }
  .client-item { padding-right: 38px; }
}

/* ============ v2.4.13 — Pass 3 (owner order 2026-10-28) ============
   WhatsApp hero button icon, Our Products section, testimonial bubble
   wall + new card internals, back-to-top, About profile band and the
   Company Profile flipbook. */

/* WhatsApp glyph inside buttons */
.btn .wa-ic { flex: none; display: block; }

/* ---------- Our Products (homepage) ---------- */
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.product-card-lg { display: flex; flex-direction: column; gap: 10px; padding: 32px 26px; border-radius: var(--radius); border: 1px solid var(--hairline); text-decoration: none; color: var(--ink); transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.product-card-lg.mint { background: var(--mint); }
.product-card-lg.sky { background: var(--sky); }
.product-card-lg.cream { background: var(--cream); }
.product-card-lg.lav { background: var(--lav); }
.product-card-lg:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(24, 48, 38, 0.13); }
.product-card-lg .icon { font-size: 42px; line-height: 1.1; }
.product-card-lg h3 { font-size: 23px; margin: 0; }
.product-card-lg p { color: var(--text); font-size: 15px; margin: 0; flex: 1; }
.product-card-lg .go { font-weight: 700; color: var(--teal-deep); font-size: 14.5px; }
@media (max-width: 1024px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .products-grid { grid-template-columns: 1fr; } }

/* ---------- Testimonial card internals (shared: homepage slider + rails) ----------
   Layout: avatar (Fiverr badge on its corner for Fiverr reviews) and
   stars on the top row, review text, then Name, Country, Service each
   on its own line, tier badge last. Order counts are never shown. */
.testi-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.testi-card .testi-top .stars { margin: 0; }
.avatar-wrap { position: relative; display: inline-flex; flex: none; }
.testi-card .avatar-wrap .avatar { margin: 0; }
.avatar-wrap .avatar-initial { display: flex; }
.fiverr-badge { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(20, 40, 30, 0.25); display: flex; align-items: center; justify-content: center; }
.fiverr-badge svg { width: 20px; height: 20px; display: block; }
.testi-meta cite { display: block; }
.testi-line { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.testi-meta .testi-badge { margin-top: 10px; }

/* ---------- Testimonial slider (homepage, v2.4.19) ----------
   Scroll-snap track holding the full ordered review pool: three
   cards per view on desktop, one on mobile. Autoplay, per-view
   dots, arrows and drag live in main.js. */
.testi-slider { position: relative; margin-top: 46px; text-align: left; }
.ts-track {
  display: flex; gap: 22px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 6px 2px 14px; cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.ts-track::-webkit-scrollbar { display: none; }
.ts-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto !important; }
.ts-track.is-dragging * { user-select: none !important; }
.ts-track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius-sm); }
.ts-slide { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; display: flex; }
.ts-slide .testi-card { flex: 1 1 auto; width: 100%; max-width: none; height: 100%; margin: 0; }
/* Review text clamped to about six lines so slides stay near-uniform;
   hover (desktop) or the .ts-open tap toggle reveals the full text. */
.testi-slider .testi-card blockquote {
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.testi-slider .testi-card:hover blockquote,
.testi-slider .testi-card.ts-open blockquote {
  display: block; -webkit-line-clamp: unset; overflow: visible;
}
.ts-arrow {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--hairline); background: #fff; color: var(--heading);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 8px 22px rgba(20, 40, 30, 0.16); font: inherit; padding: 0;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.ts-arrow:hover { background: var(--ink); color: #fff; }
.ts-arrow svg { width: 20px; height: 20px; display: block; }
.ts-prev { left: -14px; }
.ts-next { right: -14px; }
.ts-dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; padding: 0 52px; }
.ts-dots button {
  width: 8px; height: 8px; border-radius: 100px; border: 0; padding: 0;
  background: #D5D3CC; cursor: pointer; transition: all 0.3s; font: inherit;
}
.ts-dots button.active { width: 26px; background: var(--heading); }
@media (max-width: 760px) {
  .ts-slide { flex-basis: 100%; }
  .ts-arrow { width: 40px; height: 40px; }
  .ts-prev { left: 2px; }
  .ts-next { right: 2px; }
  .ts-dots { padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-track { scroll-behavior: auto; }
}

/* ---------- Back to top ----------
   Fixed stack bottom-right: SiteChat launcher (56px at bottom:20px)
   sits below; this 48px button rests directly above it (bottom:88px),
   horizontally centred on the launcher. The open chat window covers
   it, which is intended. Hidden at page top. */
.to-top { position: fixed; right: 24px; bottom: 88px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #101210; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 99990; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0.3s; box-shadow: 0 10px 26px rgba(20, 40, 30, 0.28); font: inherit; padding: 0; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: #016C5A; }
.to-top svg { display: block; width: 22px; height: 22px; stroke: #FFFFFF; flex: none; }
.to-top:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }

/* ---------- About: Company Profile band ---------- */
.profile-band { display: flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--hero-mesh); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 38px 40px; }
.profile-band-text h2 { font-size: clamp(24px, 3.4vw, 34px); margin: 6px 0 10px; }
.profile-band-text p { color: var(--text); max-width: 560px; margin: 0; }
.profile-band .btn { flex: none; }
@media (max-width: 760px) {
  .profile-band { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
}

/* ---------- Company Profile flipbook ---------- */
.flip-wrap { max-width: 900px; margin: 6px auto 0; }
.flip-stage { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 28px 22px; box-shadow: 0 24px 50px rgba(24, 48, 38, 0.10); }
.flip-book { margin: 0 auto; }
.flip-page { background: #fff; overflow: hidden; }
.flip-page img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flip-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.flip-btn { border: 0; background: var(--ink); color: #fff; border-radius: 999px; padding: 11px 24px; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background 0.25s var(--ease-out), opacity 0.25s; }
.flip-btn:hover:not(:disabled) { background: var(--teal-deep); }
.flip-btn:disabled { opacity: 0.35; cursor: default; }
.flip-count { font-weight: 700; color: var(--heading); min-width: 92px; text-align: center; font-size: 14.5px; }
.flip-download { text-align: center; margin-top: 30px; }
.flip-note { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 12px; }

/* ============================================================
   FOUNDER PAGE: LINKEDIN RECOMMENDATIONS (added 2026-10-29;
   card grid since 2.4.15; 2 columns + hover expand since 2.4.16)
   Server-rendered cards sit in a 2-column grid (1 column on
   small mobile), each with the recommender's real LinkedIn
   photo. Quotes are clamped to about 4 lines by pure CSS;
   hovering a card (mouse), focusing it (keyboard) or tapping
   it (touch, .is-open via main.js) shows the full text in
   place. Texts short enough to fit simply show in full.
   ============================================================ */
.reco-block { margin-top: 56px; }
.reco-heading { margin: 10px 0 8px; }
.reco-intro { color: var(--muted); margin: 0 0 26px; }
.reco-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; }
.reco-card { border-radius: var(--radius-sm); padding: 28px 26px 24px; transition: box-shadow 0.25s ease; }
.reco-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.reco-card.mint  { background: var(--pill-mint); }
.reco-card.lav   { background: #EDE4F5; }
.reco-card.cream { background: var(--pill-peach); }
.reco-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.reco-photo { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: #fff; }
.reco-avatar { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; background: var(--dark); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; }
.reco-who cite { display: block; font-style: normal; font-weight: 700; color: var(--heading); font-size: 1rem; line-height: 1.35; }
.reco-headline { display: block; font-weight: 600; color: var(--muted); font-size: 0.84rem; line-height: 1.45; margin-top: 2px; }
.reco-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.reco-date { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.reco-source { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; padding: 6px 12px; border-radius: 100px; background: #fff; border: 1px solid var(--hairline); color: var(--heading); }
.reco-quote { margin: 0; color: var(--heading); font-size: 0.98rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.reco-card:focus-within .reco-quote,
.reco-card.is-open .reco-quote { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
@media (hover: hover) and (pointer: fine) {
  .reco-card:hover { box-shadow: 0 14px 34px rgba(31, 41, 55, 0.13); position: relative; z-index: 2; }
  .reco-card:hover .reco-quote { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
}
@media (max-width: 640px) {
  .reco-grid { grid-template-columns: 1fr; }
  .reco-card { padding: 24px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .reco-card { transition: none; }
}

/* Pass 26 (SEO completion): breadcrumb trail + crawlable work-type links */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; color: var(--text-dim); margin-bottom: 16px; }
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--heading); text-decoration: underline; }
.crumbs .sep { opacity: .5; }
.crumbs [aria-current] { color: var(--heading); font-weight: 600; }
.work-type-links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 18px; font-size: 14px; }
.work-type-links span { color: var(--text-dim); font-weight: 600; }
.work-type-links a { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; } }