@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* --- CSS Reset & Base Styles --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Colors */
  --bg-light: #F7F4EE;         /* Warm parchment */
  --bg-cream: #FAF8F3;         /* Warm white */
  --bg-dark: #0E0E0E;          /* Near-black */
  --text-primary: #0E0E0E;     /* Near-black */
  --text-secondary: #6B6358;   /* Warm gray */
  --accent-blue: #FF5C2E;      /* Signal orange — primary brand accent */
  --accent-orange: #7C3AED;    /* Plum — CTA action color */
  --cta-golden: #7C3AED;       /* Plum CTA */
  --cta-golden-hover: #6D28D9; /* Darker plum hover */
  --white: #FFFFFF;

  /* Borders */
  --border-light: #E8E3D8;
  --border-dark: rgba(255,255,255,0.1);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.12), 0 4px 6px rgba(0,0,0,0.08);
  --shadow-accent: 0 4px 16px rgba(255, 92, 46, 0.25);
  --shadow-cta: 0 4px 16px rgba(124, 58, 237, 0.45);

  /* Fonts */
  --display-font: 'Space Grotesk', sans-serif;
  --serif-font: 'Space Grotesk', sans-serif;
  --sans-font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing Scale (based on 8px grid) */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 128px;
  --space-4xl: 160px;

  /* Border Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px; /* Slightly larger for a softer, modern look */
  --radius-full: 9999px; /* For pill-shaped elements */

  /* Max Widths */
  --max-width-content: 760px; /* Slightly wider content area for better readability */
  --max-width-page: 2200px;  /* Wider page container */

  /* Transitions */
  --transition-speed: 0.25s;
  --transition-ease: ease-in-out;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-light);
  color: var(--text-primary);
  font-family: var(--sans-font);
  font-size: 1.0625rem; /* ~17px, slightly larger base for readability */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Layout --- */
.container {
  width: 92%;
  margin: 0 auto;
  padding: 0;
}

.container--narrow {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* --- Typography --- */
h1, h2, h3, h4 {
  font-family: var(--serif-font);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.5rem, 4.2vw, 4rem); }
h2 { font-size: clamp(1.9rem, 2.8vw, 2.75rem); } /* 35.2px to 51.2px */
h3 { font-size: clamp(1.6rem, 2.5vw, 2rem); }  /* 25.6px to 32px */
h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); } /* 20px to 24px */

p {
  color: var(--text-secondary);
  line-height: 1.75;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-ease);
}

strong {
  color: var(--text-primary);
  font-weight: 600; /* Slightly bolder for emphasis */
}

em {
  font-style: italic;
}

ul, ol {
  padding-left: 0;
  list-style: none;
}

.eyebrow {
  font-family: var(--sans-font);
  font-size: 0.75rem; /* ~12px */
  font-weight: 600;
  letter-spacing: 0.12em; /* Wider for distinctiveness */
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: var(--space-sm);
  display: block;
  opacity: 0.8;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.875rem 1.75rem; /* ~14px 28px */
  border-radius: var(--radius-sm);
  font-family: var(--sans-font);
  font-size: 0.9375rem; /* ~15px */
  font-weight: 600; /* Bolder for impact */
  cursor: pointer;
  transition: all var(--transition-speed) var(--transition-ease);
  border: none;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.btn--primary {
  background: var(--cta-golden);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--cta-golden-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta);
}

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border-light);
  box-shadow: none; /* No shadow by default */
}
.btn--secondary:hover {
  border-color: var(--text-primary);
  background: var(--text-primary);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn--outline-light {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.3);
  box-shadow: none;
}
.btn--outline-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn--dark {
  background: var(--text-primary);
  color: var(--white);
}
.btn--dark:hover {
  background: var(--accent-blue); /* More vibrant on hover */
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.btn--lg {
  padding: 1.0625rem 2.25rem; /* ~17px 36px */
  font-size: 1rem; /* ~16px */
  border-radius: var(--radius-md);
}

/* --- Navigation --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.97);
  border-bottom: 1px solid rgba(255, 92, 46, 0.15);
  backdrop-filter: blur(12px);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  max-width: var(--max-width-page);
  margin: 0 auto;
  position: relative;
}

.nav__logo {
  font-family: 'Pacifico', cursive;
  font-size: 1.55rem;
  color: var(--white);
  letter-spacing: 0em;
  font-weight: 400;
}
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.7; }
}
.nav__dot {
  display: inline-block;
  color: var(--accent-blue);
  animation: dot-pulse 1.8s ease-in-out infinite;
  transform-origin: center;
}

.nav__links {
  display: none;
  gap: var(--space-lg);
  align-items: center;
}

.nav__links.open {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  background: rgba(10, 10, 10, 0.98);
  padding: var(--space-lg);
  gap: var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .nav__links.open {
  background: rgba(10, 10, 10, 0.98);
}
.nav__links a {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  position: relative;
}
.nav__links a:hover {
  color: var(--white);
}
.nav__links a::after { /* Underline effect */
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--accent-blue);
  transition: width var(--transition-speed) var(--transition-ease);
}
.nav__links a:hover::after {
  width: 100%;
}

.nav__cta {
  margin-left: var(--space-sm);
}

.nav__toggle {
  display: flex;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  position: relative;
  z-index: 101;
  margin-left: auto;
  margin-right: var(--space-sm);
}
.nav__toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--white);
  margin: 6px 0;
  transition: all var(--transition-speed) var(--transition-ease);
  border-radius: 2px;
}

.nav__toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- Hero Section --- */
.hero {
  padding: var(--space-4xl) 0 var(--space-3xl);
  text-align: left;
  background: var(--bg-dark);
}
.hero h1, .hero h2, .hero h3 { color: var(--white); }
.hero .hero__sub { color: rgba(255, 255, 255, 0.7); }
.hero .eyebrow { color: var(--accent-blue); }
.hero .btn--secondary {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
}
.hero .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}

.hero__content {
  margin: 0;
}

.hero__title {
  font-family: var(--display-font);
  font-weight: 400;
  margin-bottom: var(--space-md);
  letter-spacing: 0.01em;
  line-height: 1.0;
}
.hero__title em,
h1 em, h2 em, h3 em {
  color: var(--accent-blue);
  font-style: normal;
}

.hero__sub {
  font-size: 1.3125rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
  max-width: 780px;
}

.hero__actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: var(--space-3xl);
}

.hero__proof {
  display: flex;
  gap: var(--space-2xl);
  flex-wrap: wrap;
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  justify-content: flex-start;
}

.hero__proof-item strong {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-family: var(--display-font);
  color: var(--accent-blue);
  display: block;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-xxs);
}
.hero__proof-item span {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

/* --- Section Global Styles --- */
.section {
  padding: var(--space-3xl) 0; /* Consistent large padding */
}

.section--alt {
  background: var(--bg-cream);
}

.section--dark {
  background: var(--bg-dark);
}
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--white);
}
.section--dark p {
  color: rgba(255,255,255,0.7);
}
.section--dark .eyebrow {
  color: var(--cta-golden);
}
.section--dark .timeline__role {
  color: rgba(255,255,255,0.9);
}

.section__header {
  margin-bottom: var(--space-lg);
  text-align: left; /* Default alignment */
}

/* Compact headers for sections with carousels (work page) */
.section--has-carousel .section__header {
  max-width: 1050px;
}
.section__header--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section__title {
  margin-bottom: var(--space-md);
}

.section__sub {
  font-size: 1.1875rem;
  color: var(--text-secondary);
  text-align: justify;
}

.section__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.section__content p {
  font-size: 1.1875rem;
  text-align: left;
  margin: 0;
}
.section__sub--center {
  margin: 0 auto;
}

/* --- Problem Section --- */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #0F0F0F;
  border: 2px solid #0F0F0F;
  margin-top: var(--space-xl);
}

.problem-item {
  background: var(--bg-cream);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  transition: background 0.2s ease;
}
.problem-item:hover {
  background: #FAFAF6;
}

.problem-item__number {
  font-family: var(--display-font);
  font-size: 64px;
  line-height: 1;
  color: var(--accent-blue);
  display: block;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.problem-item h4 {
  margin-bottom: var(--space-xs);
  font-weight: 600;
}
.problem-item p {
  font-size: 1.125rem;
  line-height: 1.65;
}

/* Dark CTA cell inside the problem grid */
.problem-cta-card {
  background: #0F0F0F !important;
  padding: 36px 32px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  border-radius: 0;
}
.problem-cta-card p {
  font-family: var(--serif-font);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--white) !important;
  line-height: 1.4;
  margin-bottom: 0;
}

/* DARK MODE - Cream to stand out from dark cards */
html[data-theme="dark"] .problem-cta-card {
  background: #FEFCE8 !important;
  color: #0A0916 !important;
}
html[data-theme="dark"] .problem-cta-card p {
  color: #0A0916 !important;
}
html[data-theme="dark"] .problem-cta-card .btn--outline-light {
  border-color: #0A0916 !important;
  color: #0A0916 !important;
  font-weight: 600 !important;
}

/* Light mode button specifically */
.problem-cta-card .btn {
  color: #0A0916 !important;
  border-color: #0A0916 !important;
  background: transparent !important;
}
.problem-cta-card .btn--outline-light {
  border-color: rgba(255,255,255,0.5);
  padding: 0.75rem 1.25rem; /* Smaller CTA for contrast */
  font-size: 0.875rem; /* ~14px */
}
.problem-cta-card .btn--outline-light:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--white);
}

/* --- Service Cards --- */
.service-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-speed) var(--transition-ease);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(255, 92, 46, 0.2);
}

.card--featured {
  background: linear-gradient(145deg, var(--white) 0%, #F5F5F0 100%);
}
.card--featured:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(255, 92, 46, 0.3);
}

/* Blue border and triangle only on flipped cards */
.card.flipped {
  border-color: var(--accent-blue);
}
.card.flipped::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 60px 60px 0;
  border-color: transparent var(--accent-blue) transparent transparent;
  opacity: 0.2;
  z-index: 10;
}

.card__tag {
  display: inline-block;
  font-size: 0.6875rem; /* ~11px */
  font-weight: 700; /* Extra bold */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px; /* More padding for tags */
  border-radius: var(--radius-full); /* Pill shape */
  margin-bottom: var(--space-sm);
}
.card__tag--door { background: #EAE6D2; color: #807D52; }
.card__tag--blue { background: rgba(255, 92, 46, 0.12); color: var(--accent-blue); }
.card__tag--green { background: rgba(124,58,237,0.1); color: #7C3AED; }

.card__title {
  margin-bottom: var(--space-xs);
  font-size: 1.5rem; /* ~24px, more prominent title */
  font-weight: 500;
}
.card__price {
  font-size: clamp(2rem, 3.5vw, 2.5rem); /* ~32-40px */
  font-family: var(--serif-font);
  color: var(--text-primary);
  margin: var(--space-sm) 0 var(--space-xs);
  letter-spacing: -0.01em;
  font-weight: 500;
}
.card__price span {
  font-size: 0.9375rem; /* ~15px */
  font-family: var(--sans-font);
  color: var(--text-secondary);
  font-weight: 400;
  opacity: 0.8;
}

.card__meta {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

.card__icp {
  background: var(--bg-cream);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: 1.1875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  border: 1px solid var(--border-light);
}
.card__icp strong {
  color: var(--accent-blue);
  font-size: 0.625rem; /* ~10px */
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-xxs);
}

.card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  flex: 1; /* Allows the button to stick to the bottom */
}
.card__list li {
  font-size: 1.1875rem;
  color: var(--text-primary);
  padding-left: var(--space-lg);
  position: relative;
  line-height: 1.6;
}
.card__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent-blue);
  font-size: 1rem; /* ~16px */
  line-height: 1;
  top: 0.2rem;
  font-weight: 700;
}

.card .btn {
  margin-top: auto;
  align-self: flex-start; /* Align button to start */
  padding: 0.75rem 1.5rem; /* Slightly smaller button for card context */
  font-size: 0.875rem; /* ~14px */
}

/* --- Add-on Strip --- */
.addon-strip {
  background: var(--bg-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl); /* More padding */
  margin-top: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-lg); /* Increased gap */
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.addon-strip__content .eyebrow {
  margin-bottom: var(--space-xxs);
}
.addon-strip h4 {
  font-size: 1.25rem; /* ~20px */
  margin-bottom: var(--space-xxs);
  color: var(--text-primary);
}
.addon-strip p {
  font-size: 0.875rem; /* ~14px */
  color: var(--text-secondary);
}

.addon-strip__price-info {
  text-align: right;
  flex-shrink: 0;
}
.addon-strip__price {
  font-family: var(--serif-font);
  font-size: 1.875rem; /* ~30px */
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.addon-strip__price-duration {
  font-size: 0.875rem; /* ~14px */
  color: var(--text-secondary);
}
.addon-strip .btn {
  margin-top: var(--space-sm);
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  align-self: flex-end; /* Align to the right within its flex item */
}

/* --- Credibility Section --- */
.credibility-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.credibility-grid h2 {
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  font-weight: 800;
  font-family: var(--serif-font);
}
.credibility-grid p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}
.credibility-grid p:last-of-type {
  margin-bottom: var(--space-xl);
}

.experience-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md); /* Space between experience cards */
}
.experience-card {
  background: rgba(255,255,255,0.07); /* Slightly brighter dark background */
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  transition: all var(--transition-speed) var(--transition-ease);
  position: relative;
  overflow: hidden;
}
.experience-card::before { /* Subtle background gradient/pattern */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top left, rgba(255,255,255,0.03) 0%, transparent 70%);
  opacity: 0.5;
}
.experience-card:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.experience-card__company {
  font-size: 0.8125rem; /* ~13px */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-xxs);
  /* Specific colors from brand guidelines, will define below with specific classes */
}
.experience-card__role {
  color: var(--white);
  font-size: 1rem; /* ~16px */
  line-height: 1.5;
}

/* Specific Brand Colors for experience cards */
.experience-card--youtube .experience-card__company { color: #5A9BD4; }
.experience-card--cloudflare .experience-card__company { color: #F6821F; }
.experience-card--linkedin .experience-card__company { color: #0A66C2; }
.experience-card--ey .experience-card__company { color: #FFE14D; }


/* --- Diagnostic CTA Section --- */
.cta-diagnostic {
  padding: var(--space-4xl) 0 !important;
  text-align: center !important;
  background-color: #F0F0EB !important;
  background: #F0F0EB !important;
  color: #0A0916 !important;
}
.cta-diagnostic h2 {
  margin-bottom: var(--space-md);
  font-weight: 500;
  color: #0A0916 !important;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.cta-diagnostic .container--narrow {
  max-width: 900px;
}
.cta-diagnostic p {
  font-size: 1.125rem;
  margin-bottom: var(--space-xl);
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  color: #0A0916 !important;
}
.cta-diagnostic .eyebrow {
  color: var(--accent-blue) !important;
}
.cta-diagnostic .btn {
  margin-bottom: var(--space-sm);
}
.cta-diagnostic__contact-link {
  font-size: 0.875rem; /* ~14px */
  color: var(--text-secondary);
}
.cta-diagnostic__contact-link a {
  color: var(--accent-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 500;
}
.cta-diagnostic__contact-link a:hover {
  color: var(--text-primary);
}


/* --- Footer --- */
.footer {
  background: var(--bg-dark);
  border-top: 3px solid var(--accent-blue);
  padding: var(--space-3xl) 0 var(--space-md);
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border-dark);
}

.footer__brand {
  font-family: 'Pacifico', cursive;
  font-size: 1.625rem;
  color: var(--white);
  margin-bottom: var(--space-xs);
  letter-spacing: 0em;
}
.footer__tagline {
  font-size: 0.9375rem; /* ~15px */
  color: rgba(255,255,255,0.6);
  max-width: 320px;
  line-height: 1.7;
}

.footer__col-head {
  font-size: 0.75rem; /* ~12px */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-sm);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.footer__links a {
  font-size: 0.9375rem; /* ~15px */
  color: rgba(255,255,255,0.6);
  font-weight: 400;
}
.footer__links a:hover {
  color: var(--white);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-md);
  font-size: 0.875rem; /* ~14px */
  color: rgba(255,255,255,0.4);
}
.footer__bottom a {
  color: rgba(255,255,255,0.6);
}
.footer__bottom a:hover {
  color: var(--white);
}

/* --- Utilities --- */
.mt-xxs { margin-top: var(--space-xxs); }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }
.mb-xxs { margin-bottom: var(--space-xxs); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.text-center { text-align: center; }
.text-muted { color: var(--text-secondary); }
.italic { font-style: italic; }
.divider { border: none; border-top: 1px solid var(--border-light); margin: var(--space-2xl) 0; }

/* --- Services Page Specific --- */
.offer {
  padding: var(--space-2xl) 0;
  border-bottom: 1px solid var(--border-light);
}
.offer:last-of-type {
  border-bottom: none;
}
.offer__header {
  margin-bottom: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* Align title and price bottom */
  flex-wrap: wrap;
  gap: var(--space-md);
}
.offer__header h3 {
  font-size: clamp(1.8rem, 3vw, 2.2rem); /* Larger service titles */
  line-height: 1.1;
  font-weight: 500;
}
.offer__price-details {
  text-align: right;
  flex-shrink: 0;
}
.offer__price {
  font-size: clamp(2.5rem, 4vw, 3rem); /* Very large prices */
  font-family: var(--serif-font);
  letter-spacing: -0.02em;
  color: var(--accent-blue);
  line-height: 1;
}
.offer__duration {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  margin-top: var(--space-xxs);
  display: block;
}

.offer__icp {
  background: var(--bg-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  max-width: 760px; /* Wider for full content */
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}
.offer__icp .label {
  font-size: 0.6875rem; /* ~11px */
  color: var(--accent-blue);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
  display: block;
}
.offer__icp p {
  font-size: 1.0625rem;
  line-height: 1.65;
}

.offer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2xl); /* More space between columns */
}
.offer__col-label {
  font-size: 0.75rem; /* ~12px */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  opacity: 0.8;
}
.offer__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.offer__items li {
  font-size: 1.0625rem;
  color: var(--text-primary);
  padding-left: var(--space-lg);
  position: relative;
  line-height: 1.6;
}
.offer__items li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent-blue);
  font-size: 1rem;
  line-height: 1;
  top: 0.2rem;
  font-weight: 700;
}

.offer__note {
  font-size: 0.875rem; /* ~14px */
  color: var(--text-secondary);
  margin-top: var(--space-xl);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-cream);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--cta-golden); /* Thicker border */
  line-height: 1.6;
  box-shadow: var(--shadow-sm);
}

.conversion-path {
  background: var(--bg-dark);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-top: var(--space-3xl); /* More margin to separate */
  box-shadow: var(--shadow-lg);
}
.conversion-path h3 {
  color: var(--white);
  margin-bottom: var(--space-md);
  font-weight: 500;
}
.conversion-path__steps {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.conversion-path__step {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  flex-grow: 1; /* Allow steps to grow */
  text-align: center;
}
.conversion-path__step strong {
  color: var(--white);
  display: block;
  font-size: 1rem; /* ~16px */
  font-weight: 600;
  margin-bottom: var(--space-xxs);
}
.conversion-path__step span {
  font-size: 0.8125rem; /* ~13px */
  color: rgba(255,255,255,0.6);
}
.conversion-path__arrow {
  color: var(--cta-golden);
  font-size: 1.5rem; /* ~24px */
  flex-shrink: 0; /* Prevent arrow from shrinking */
  margin: 0 var(--space-xxs);
}
.conversion-path__note {
  font-size: 0.875rem; /* ~14px */
  color: rgba(255,255,255,0.6);
  margin-top: var(--space-md);
}

/* --- Work Page Specific --- */
.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-lg);
}

.case-study {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-speed) var(--transition-ease);
}
.case-study:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.case-study__header {
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--border-light);
}
.case-study__tags {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}
.case-study__tag {
  font-size: 0.6875rem; /* ~11px */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  background: var(--bg-light);
}
.case-study__title {
  font-size: 1.625rem; /* ~26px */
  margin-bottom: var(--space-xs);
  font-weight: 500;
}
.case-study__context {
  font-size: 1.25rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.case-study__body {
  padding: var(--space-lg);
}
.case-study__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-cream);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  border: 1px solid var(--border-light);
}
.case-study__stat {
  text-align: center;
  padding: var(--space-sm);
}
.case-study__stat strong {
  font-size: clamp(2rem, 3.5vw, 2.5rem); /* ~32-40px */
  font-family: var(--serif-font);
  color: var(--accent-blue);
  display: block;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xxs);
}
.case-study__stat span {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.case-study__section {
  margin-bottom: var(--space-lg);
}
.case-study__section-label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
  opacity: 0.8;
}
.case-study__section p {
  font-size: 1.1875rem;
  line-height: 1.65;
}
.case-study__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}
.case-study__bullets li {
  font-size: 1.1875rem;
  color: var(--text-primary);
  padding-left: var(--space-md);
  position: relative;
  line-height: 1.6;
}
.case-study__bullets li::before {
  content: '•'; /* Solid bullet point */
  position: absolute;
  left: 0;
  color: var(--accent-blue);
  font-size: 1.25rem; /* Larger bullet */
  line-height: 1;
  top: 0.2rem;
}

.case-study__insight {
  background: var(--bg-cream);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-top: var(--space-xl);
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.7;
  border-left: 4px solid var(--cta-golden);
  box-shadow: var(--shadow-sm);
}
.case-study__insight strong {
  color: var(--accent-blue);
  font-size: 0.6875rem; /* ~11px */
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-xs);
}

/* --- About Page Specific --- */
.timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: var(--space-md); /* Space for line */
  margin-top: var(--space-xl);
}
.timeline::before { /* Vertical line */
  content: '';
  position: absolute;
  left: calc(var(--space-sm) + 2px); /* Align with dot */
  top: 0;
  height: 100%;
  width: 2px;
  background: var(--border-light);
}

.timeline__item {
  padding: var(--space-lg) var(--space-sm) var(--space-lg) var(--space-lg); /* Padding around items */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}
.timeline__item::before { /* Dot on the line */
  content: '';
  position: absolute;
  left: var(--space-sm);
  top: var(--space-lg);
  width: 10px;
  height: 10px;
  background: var(--accent-blue);
  border-radius: var(--radius-full);
  z-index: 1;
  border: 2px solid var(--white); /* White border to stand out */
}

.timeline__company {
  font-size: 0.8125rem; /* ~13px */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-blue);
}
.timeline__role {
  font-size: 1.25rem; /* ~20px */
  font-family: var(--serif-font);
  color: var(--text-primary);
  margin-bottom: var(--space-xxs);
  font-weight: 500;
}
.timeline__dates {
  display: inline-block;
  font-size: 0.8125rem;
  font-family: var(--sans-font);
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 10px;
  letter-spacing: 0;
  text-transform: none;
}
.timeline__desc {
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.expertise-grid--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .expertise-grid--three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .expertise-grid--three { grid-template-columns: 1fr; } }

/* Shared card icon box */
.card-ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,92,46,0.10);
  color: var(--accent-blue);
  margin-bottom: 14px;
}
.card-ico svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Supply -> monetization flow diagram */
.flow {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}
.flow__node {
  flex: 1 1 200px;
  background: var(--bg-cream);
  border: 1.5px solid var(--border-light);
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
}
.flow__node .n {
  font-family: var(--display-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.flow__node h4 {
  font-family: var(--display-font);
  font-size: 1.1rem;
  margin: 8px 0 4px;
  color: var(--text-primary);
}
.flow__node p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
}
.flow__node--block {
  border-color: var(--cta-golden);
  background: var(--bg-cream);
  box-shadow: 0 0 0 1px var(--cta-golden);
}
.flow__node--block .tag {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--cta-golden);
  border: 1px solid var(--cta-golden);
  border-radius: 999px;
  padding: 2px 10px;
}
.flow__arrow {
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-blue);
  font-size: 26px;
  font-weight: 700;
}
@media (max-width: 720px) {
  .flow__arrow { flex-basis: 100%; transform: rotate(90deg); height: 34px; }
}
.expertise-item {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-speed) var(--transition-ease);
}
.expertise-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.expertise-item h4 {
  font-size: 1.25rem;
  margin-bottom: var(--space-xs);
  font-weight: 500;
}
.expertise-item p {
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* --- Diagnostic Page Specific --- */
.diagnostic-embed {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 700px; /* Taller embed area */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-xl);
  box-shadow: var(--shadow-lg); /* Prominent shadow for the interactive element */
}
.diagnostic-embed iframe {
  width: 100%;
  height: 100%; /* Fill the parent container */
  border: none;
}

/* --- Flip Cards - Simple Toggle --- */
.card {
  position: relative;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
.card__front {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.card__back {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.card.flipped .card__front {
  display: none;
}
.card.flipped .card__back {
  display: flex;
}

/* --- Dark Mode --- */
html[data-theme="dark"] {
  --bg-light: #1A1A1A;
  --bg-cream: #252525;
  --bg-dark: #0A0A0A;
  --text-primary: #ffffff;
  --text-secondary: #AAAAAA;
  --accent-blue: #FF7A45;
  --cta-golden: #8B5CF6;
  --cta-golden-hover: #7C3AED;
  --border-light: #404040;
  --white: #ffffff;
}

html[data-theme="dark"] body {
  background: var(--bg-dark);
  color: rgba(255,255,255,0.85);
}

html[data-theme="dark"] .section {
  background: var(--bg-dark);
}

html[data-theme="dark"] .section--alt {
  background: var(--bg-dark);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .problem-item,
html[data-theme="dark"] .expertise-item,
html[data-theme="dark"] .case-study {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}

html[data-theme="dark"] a {
  color: var(--accent-blue);
}

html[data-theme="dark"] .nav__logo {
  color: var(--white);
}
html[data-theme="dark"] .nav__dot {
  color: var(--accent-blue);
}

html[data-theme="dark"] .btn--secondary {
  border-color: rgba(255,255,255,0.25);
  color: var(--white);
}

html[data-theme="dark"] .btn--secondary:hover {
  background: rgba(255,255,255,0.1);
  color: var(--white);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
  color: var(--white);
}

html[data-theme="dark"] p {
  color: rgba(255,255,255,0.65);
}

html[data-theme="dark"] .section__sub {
  color: rgba(255,255,255,0.6);
}

html[data-theme="dark"] .timeline__company,
html[data-theme="dark"] .timeline__role,
html[data-theme="dark"] .timeline__desc {
  color: rgba(255,255,255,0.75);
}

html[data-theme="dark"] .card__icp,
html[data-theme="dark"] .card__list {
  color: var(--text-secondary);
}

html[data-theme="dark"] .btn--primary {
  background: var(--cta-golden);
  color: #ffffff;
}

html[data-theme="dark"] .btn--primary:hover {
  background: var(--cta-golden-hover);
}

html[data-theme="dark"] section.cta-diagnostic {
  background: #141414 !important;
}

@media (prefers-color-scheme: dark) {
  .cta-diagnostic {
    background: #141414 !important;
  }
}

html[data-theme="dark"] .cta-diagnostic h2 {
  color: #ffffff !important;
  margin-bottom: var(--space-md);
}

html[data-theme="dark"] .cta-diagnostic .eyebrow {
  color: #FF7A45 !important;
}

html[data-theme="dark"] .cta-diagnostic p {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 1.125rem;
  margin-bottom: var(--space-xl);
}

html[data-theme="dark"] .cta-diagnostic .btn--primary {
  background: #8B5CF6 !important;
  color: #ffffff !important;
  font-weight: 600;
}

html[data-theme="dark"] .cta-diagnostic .btn--primary:hover {
  background: #7C3AED !important;
}

html[data-theme="dark"] .cta-diagnostic__contact-link {
  color: rgba(255, 255, 255, 0.5) !important;
}

html[data-theme="dark"] .cta-diagnostic__contact-link a {
  color: #FF7A45 !important;
  text-decoration: underline;
}

/* CTA band stays dark text on green in dark mode */
html[data-theme="dark"] .cta-band__title {
  color: var(--bg-dark);
}
html[data-theme="dark"] .cta-band p {
  color: rgba(10,10,10,0.65);
}
html[data-theme="dark"] .cta-band .eyebrow {
  color: rgba(10,10,10,0.55);
}

.dark-mode-toggle {
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.dark-mode-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: left 0.25s ease;
}
.dark-mode-toggle:hover { background: rgba(255,255,255,0.32); }
[data-theme="dark"] .dark-mode-toggle { background: var(--accent-blue); }
[data-theme="dark"] .dark-mode-toggle:hover { background: var(--cta-golden-hover); }
[data-theme="dark"] .dark-mode-toggle__knob { left: 25px; }

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
  .nav__links {
    gap: var(--space-md);
  }
  .hero__title {
    font-size: clamp(2.5rem, 6vw, 4rem);
  }
  .hero__sub {
    font-size: 1.125rem;
  }
  .hero__proof {
    gap: var(--space-xl);
    justify-content: flex-start;
  }
  .credibility-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .credibility-grid > div:first-child {
    text-align: center;
  }
  .credibility-grid .btn {
    align-self: center;
  }
  .credibility-grid p {
    max-width: var(--max-width-content);
    margin-left: auto;
    margin-right: auto;
  }
  .footer__inner {
    grid-template-columns: 1fr 1fr; /* Two columns on tablets */
  }
  .footer__brand, .footer__tagline {
    max-width: none;
  }
  .addon-strip {
    flex-direction: column;
    align-items: flex-start;
  }
  .addon-strip__price-info {
    text-align: left;
  }
  .addon-strip .btn {
    align-self: flex-start;
  }
  .case-study__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .timeline::before { /* Shift line for tablet */
    left: 10px;
  }
  .timeline__item::before {
    left: 0;
  }
  .timeline__item {
    padding-left: var(--space-lg);
  }
}

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: block; }

  .nav__links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, 0.98);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: var(--space-md) var(--space-lg);
    gap: var(--space-sm);
    z-index: 99;
    box-shadow: var(--shadow-md);
    animation: fadeInDown 0.3s var(--transition-ease) forwards;
  }
  .nav__links.open a {
    color: rgba(255,255,255,0.8);
    font-size: 1rem;
    padding: var(--space-xs) 0;
  }
  .nav__links.open a:hover {
    color: var(--white);
  }
  .nav__links.open .nav__cta {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: var(--space-xs);
    color: var(--white);
  }
  .nav__links.open a::after {
    display: none;
  }

  @keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .container, .container--narrow {
    padding: 0 var(--space-md); /* Tighter padding on smaller screens */
  }
  .nav__inner {
    padding: var(--space-sm) var(--space-md);
  }
  .hero {
    padding: var(--space-3xl) 0 var(--space-xl);
  }
  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero__proof {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-lg);
  }
  .section {
    padding: var(--space-2xl) 0;
  }
  .section__header, .section__sub {
    text-align: center;
  }
  .problem-grid, .service-cards-grid, .offer__cols, .case-studies-grid, .expertise-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .problem-item, .problem-cta-card, .card, .experience-card, .expertise-item {
    padding: var(--space-md);
  }
  .addon-strip {
    padding: var(--space-md);
  }
  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: center;
  }
  .footer__bottom {
    flex-direction: column;
    gap: var(--space-xs);
  }
  .footer__links {
    align-items: center;
  }
  .offer__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .offer__price-details {
    text-align: left;
  }
  .conversion-path__steps {
    flex-direction: column;
    align-items: stretch;
  }
  .conversion-path__step {
    text-align: left;
  }
  .conversion-path__arrow {
    transform: rotate(90deg); /* Rotate arrow for vertical flow */
    margin: var(--space-xs) auto;
  }
  .case-study__stats {
    grid-template-columns: 1fr; /* Stack stats on small mobile */
  }
}

@media (max-width: 480px) {
  body {
    font-size: 1rem; /* Base 16px for smallest screens */
  }
  h1 { font-size: clamp(2.2rem, 8vw, 2.8rem); }
  h2 { font-size: clamp(1.8rem, 6vw, 2.2rem); }
  h3 { font-size: clamp(1.4rem, 5vw, 1.6rem); }
  .btn--lg {
    padding: 0.9375rem 1.75rem; /* Slightly smaller large buttons */
    font-size: 0.9375rem;
  }
  .hero {
    padding: var(--space-2xl) 0 var(--space-xl);
  }
  .hero__proof-item strong {
    font-size: 2rem;
  }
  .section {
    padding: var(--space-xl) 0;
  }
  .section__header {
    margin-bottom: var(--space-lg);
  }
  .problem-item, .card, .experience-card, .expertise-item {
    padding: var(--space-md) var(--space-sm);
  }
  .problem-cta-card {
    padding: var(--space-md);
  }
  .footer__inner {
    padding-bottom: var(--space-xl);
  }
}

/* --- Carousel --- */
.carousel-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xl) auto;
  position: relative;
  max-width: 100%;
}

.carousel-container {
  flex: 1;
  overflow: hidden;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

[data-theme="dark"] .carousel-container {
  background: var(--bg-dark);
  border-color: rgba(255, 255, 255, 0.1);
}

.carousel {
  display: flex;
  transition: transform 0.35s ease-in-out;
}

.carousel-slide {
  width: 100%;
  padding: var(--space-lg) var(--space-xl);
  flex-shrink: 0;
  overflow: hidden;
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 100%;
}

.service-card__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

[data-theme="dark"] .service-card__title {
  color: var(--white);
}

.service-card__icp {
  padding: var(--space-md);
  background: var(--bg-light);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

[data-theme="dark"] .service-card__icp {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.service-card__icp .label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: var(--space-xs);
}

[data-theme="dark"] .service-card__icp .label {
  color: var(--cta-golden);
}

.service-card__icp p {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

[data-theme="dark"] .service-card__icp p {
  color: rgba(255, 255, 255, 0.7);
}

.service-card__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.service-card__col-label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
  margin-bottom: var(--space-sm);
  display: block;
}

[data-theme="dark"] .service-card__col-label {
  color: var(--white);
}

.service-card__items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-card__items li {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  line-height: 1.5;
  padding-left: 1.75em;
  position: relative;
}

.service-card__items li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent-blue);
  font-weight: 600;
  width: 1.5em;
}

[data-theme="dark"] .service-card__items li {
  color: rgba(255, 255, 255, 0.75);
}

[data-theme="dark"] .service-card__items li::before {
  color: var(--cta-golden);
}

.carousel-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--text-primary);
  transition: all var(--transition-speed) var(--transition-ease);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.carousel-btn:hover {
  color: var(--accent-blue);
  transform: scale(1.15);
}

.carousel-indicators {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}

.carousel-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-light);
  border: none;
  cursor: pointer;
  transition: all var(--transition-speed) var(--transition-ease);
  padding: 0;
}

.carousel-indicator.active {
  background: var(--accent-blue);
  width: 24px;
  border-radius: 4px;
}

.carousel-indicator:hover {
  background: var(--text-secondary);
}

.carousel-indicator--tab {
  width: auto;
  height: auto;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1.5px solid var(--border-light);
  padding: 6px 16px;
  font-size: 0.8125rem;
  font-family: var(--sans-font);
  font-weight: 600;
  color: var(--text-secondary);
}
.carousel-indicator--tab.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: var(--white);
  width: auto;
  border-radius: var(--radius-full);
}
.carousel-indicator--tab:hover {
  background: var(--bg-light);
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .carousel-wrapper {
    gap: 0;
    padding: 0;
    margin: var(--space-lg) 0;
  }

  .carousel-btn {
    display: none;
  }

  .carousel-slide {
    padding: var(--space-md);
  }

  .service-card__content {
    grid-template-columns: 1fr;
  }

  .service-card__title {
    font-size: 1.25rem;
  }
}

/* --- Case Study Insight Toggle --- */
.case-study__insight {
  background: var(--bg-light);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  margin-top: var(--space-xl);
}

[data-theme="dark"] .case-study__insight {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.insight-toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  font-size: 1rem;
  color: var(--text-primary);
  transition: all var(--transition-speed) var(--transition-ease);
}

[data-theme="dark"] .insight-toggle {
  color: var(--white);
}

.insight-toggle:hover {
  color: var(--accent-blue);
}

.insight-icon {
  font-size: 1.5rem;
  font-weight: bold;
  transition: transform var(--transition-speed) var(--transition-ease);
}

.insight-toggle[aria-expanded="true"] .insight-icon {
  transform: rotate(45deg);
}

.insight-content {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
  line-height: 1.7;
  animation: slideDown 0.3s ease-in-out;
}

[data-theme="dark"] .insight-content {
  border-top-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Floating Contact Button --- */
.float-contact {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cta-golden);
  color: var(--white);
  padding: 14px 22px;
  border-radius: 50px;
  font-family: var(--sans-font);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.float-contact:hover {
  background: var(--cta-golden-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.5);
  color: var(--white);
  text-decoration: none;
}
.float-contact__icon {
  font-size: 1rem;
  line-height: 1;
}
@media (max-width: 480px) {
  .float-contact {
    bottom: 20px;
    right: 16px;
    padding: 12px 18px;
    font-size: 0.8125rem;
  }
}

/* --- Experience Strip --- */
.experience-strip {
  background: #0F0F0F;
  padding: 80px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.experience-strip__header {
  margin-bottom: 48px;
}
.experience-strip__headline {
  font-family: var(--serif-font);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.experience-strip__headline em {
  color: var(--accent-blue);
  font-style: normal;
}
.experience-strip__sub {
  font-family: var(--sans-font);
  font-size: 19px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
  max-width: 820px;
  margin-bottom: 18px;
}
.experience-strip__sub:last-of-type {
  margin-bottom: 0;
}
.experience-strip__logos {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  flex-wrap: wrap;
}
.logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
/* CDN image logos */
.logo-item__img {
  height: 40px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.5;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.logo-item:hover .logo-item__img {
  opacity: 1;
}
.logo-item--youtube:hover .logo-item__img { filter: none; }
.logo-item--google:hover .logo-item__img  { filter: none; }
.logo-item--cloudflare:hover .logo-item__img { filter: none; }
/* Inline SVG logos */
.logo-item__svg {
  height: 40px;
  width: auto;
  display: block;
  fill: rgba(255, 255, 255, 0.5);
  transition: fill 0.25s ease;
}
.logo-item--linkedin:hover .logo-item__svg { fill: #0A66C2; }
/* Multi-colour inline SVG logos (filter approach, same as <img>) */
.logo-item__svgimg {
  height: 40px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.5;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.logo-item--ey:hover .logo-item__svgimg {
  filter: none;
  opacity: 1;
}
/* Label under all logos */
.logo-item__name {
  font-family: var(--sans-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 1100px) {
  .experience-strip { padding: 56px 0; }
  .logo-item__img,
  .logo-item__svg,
  .logo-item__svgimg { height: 28px; }
  .experience-strip__logos { gap: 20px; }
}

/* ─── HERO HOME (scoped overrides for index.html) ─── */
.hero--home {
  position: relative;
}
.hero--home::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-blue);
}
.hero__kicker {
  font-family: var(--sans-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 20px;
}
.hero--home .hero__title {
  font-size: clamp(46px, 6vw, 82px);
  line-height: 0.95;
  margin-bottom: 28px;
}
.hero__stats {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.stat__number {
  font-family: var(--display-font);
  font-size: 48px;
  line-height: 1;
  color: var(--accent-blue);
  display: block;
}
.stat__label {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
  font-family: var(--sans-font);
}

/* ─── DISPLAY DEMO ("The Real Problem") ─── */
.display-demo {
  background: #0A0A0A;
  padding: 60px 0;
  overflow: hidden;
  position: relative;
}
.display-demo__ticker {
  font-family: var(--display-font);
  font-size: clamp(40px, 6vw, 80px);
  color: rgba(255,255,255,0.05);
  white-space: nowrap;
  letter-spacing: 0.05em;
  line-height: 1;
  overflow: hidden;
  user-select: none;
}
.display-demo__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-page);
  margin: -28px auto 0;
  padding: 0 var(--space-lg);
}
.display-demo__inner .eyebrow {
  margin-bottom: 12px;
}
.display-demo__quote {
  font-family: var(--serif-font);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.4;
  max-width: 820px;
}
.display-demo__quote em {
  font-style: normal;
  color: var(--accent-blue);
}

/* ─── HOMEPAGE SERVICE GRID ─── */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.svc-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-top: 3px solid var(--accent-blue);
  padding: 36px 28px;
  border-radius: 4px;
}
.svc-card__tag {
  font-family: var(--sans-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 16px;
  display: block;
}
.svc-card__title {
  font-family: var(--serif-font);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 16px;
}
.svc-card__icp {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  margin-bottom: 24px;
}
.svc-card__icp strong {
  display: block;
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.svc-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}
.svc-card__list li {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.svc-card__list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent-blue);
  font-size: 12px;
}
.section--services {
  background: var(--bg-dark);
}
.section--services h2,
.section--services h3 {
  color: var(--white);
}
.section--services .eyebrow {
  color: var(--accent-blue);
}
.section--services p {
  color: rgba(255,255,255,0.6);
}

/* Dark service cards on homepage */
.section--services .card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-top: 3px solid var(--accent-blue);
  border-radius: 4px;
}
.section--services .card:hover {
  box-shadow: 0 8px 28px rgba(255, 92, 46, 0.25);
  transform: translateY(-4px);
}
.section--services .card.flipped {
  border-color: var(--accent-blue);
}
.section--services .card__tag--door { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
.section--services .card__tag--blue { background: rgba(255,92,46,0.12); color: var(--accent-blue); }
.section--services .card__tag--green { background: rgba(255,92,46,0.12); color: var(--accent-blue); }
.section--services .card__title { color: var(--white); }
.section--services .card__icp {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
}
.section--services .card__icp strong { color: rgba(255,255,255,0.85); }
.section--services .card__list li { color: rgba(255,255,255,0.7); }
.section--services .card .btn--secondary {
  color: var(--white);
  border-color: rgba(255,255,255,0.3);
}
.section--services .card .btn--secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
}
/* hint text on front */
.section--services .card__flip-hint { color: rgba(255,92,46,0.7); }
.addon-strip--new {
  background: rgba(255,92,46,0.08);
  border: 1px solid rgba(255,92,46,0.25);
  border-radius: 4px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.addon-strip--new h4 {
  font-family: var(--serif-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}
.addon-strip--new p {
  font-size: 17px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
}
.btn--outline-green {
  background: transparent;
  color: var(--accent-blue);
  border: 1.5px solid var(--accent-blue);
  padding: 14px 24px;
  border-radius: 4px;
  font-family: var(--sans-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
  display: inline-block;
}
.btn--outline-green:hover {
  background: rgba(255,92,46,0.1);
  color: var(--accent-blue);
  text-decoration: none;
}

/* ─── EXP CARDS (credibility section) ─── */
.exp-cards {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.exp-card {
  padding: 22px 28px;
  background: var(--bg-dark);
  border-left: 3px solid var(--accent-blue);
}
.exp-card__company {
  font-family: var(--serif-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}
.exp-card__role {
  font-size: 15px;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
}

/* ─── CTA BAND (green) ─── */
.cta-band {
  background: var(--accent-blue);
  padding: 80px 0;
  text-align: center;
}
.cta-band .eyebrow {
  color: rgba(10,10,10,0.55);
}
.cta-band__title {
  font-family: var(--display-font);
  font-size: clamp(36px, 4.5vw, 58px);
  line-height: 0.95;
  color: var(--bg-dark);
  margin-bottom: 24px;
  letter-spacing: 0.01em;
}
.cta-band p {
  font-size: 16px;
  color: rgba(10,10,10,0.65);
  max-width: 480px;
  margin: 0 auto 36px;
  line-height: 1.65;
}
.btn--band {
  background: var(--bg-dark);
  color: var(--white);
  font-family: var(--sans-font);
  font-size: 14px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  letter-spacing: 0.02em;
  border: 2px solid rgba(255,255,255,0.25);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.btn--band:hover {
  background: #111;
  color: var(--white);
  text-decoration: none;
}

/* ─── EYEBROW DARK VARIANT ─── */
.eyebrow--dark {
  color: var(--text-secondary);
}

/* ─── RESPONSIVE — new sections ─── */
@media (max-width: 768px) {
  .problem-grid {
    grid-template-columns: 1fr;
  }
  .svc-grid {
    grid-template-columns: 1fr;
  }
  .addon-strip--new {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero__stats {
    gap: 28px;
  }
  .cta-band__title {
    font-size: clamp(40px, 12vw, 64px);
  }
}
@media (max-width: 1024px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
  .problem-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── COMPARISON TABLE ─── */
.comparison-table {
  overflow-x: auto;
  margin: var(--space-xl) 0;
}
.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.0625rem;
}
.comparison-table th {
  padding: var(--space-md);
  text-align: left;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--border-light);
  color: var(--text-secondary);
}
.comparison-table th.col--highlight {
  color: var(--accent-blue);
}
.comparison-table td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  line-height: 1.55;
  vertical-align: top;
}
.comparison-table td:first-child {
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  color: var(--text-secondary);
}
.comparison-table td.col--highlight {
  background: rgba(255, 92, 46, 0.06);
  font-weight: 500;
}
.comparison-table tr:last-child td {
  border-bottom: none;
}
[data-theme="dark"] .comparison-table th {
  border-bottom-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.45);
}
[data-theme="dark"] .comparison-table th.col--highlight {
  color: var(--accent-blue);
}
[data-theme="dark"] .comparison-table td {
  border-bottom-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
}
[data-theme="dark"] .comparison-table td:first-child {
  color: rgba(255,255,255,0.45);
}
[data-theme="dark"] .comparison-table td.col--highlight {
  background: rgba(255, 92, 46, 0.07);
}

/* ─── NEWSLETTER SECTION ─── */
.newsletter-section {
  background: var(--bg-dark);
  padding: 56px 0;
}
.newsletter__inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  max-width: var(--max-width-page);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.newsletter__text {
  flex: 1;
  min-width: 0;
}
.newsletter__title {
  font-family: var(--serif-font);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 var(--space-sm);
}
.newsletter__body {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  margin: 0;
  max-width: 480px;
}
.newsletter__form {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.newsletter__input {
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.07);
  color: var(--white);
  font-size: 0.9375rem;
  font-family: var(--sans-font);
  width: 260px;
  outline: none;
  transition: border-color 0.2s ease;
}
.newsletter__input::placeholder {
  color: rgba(255,255,255,0.3);
}
.newsletter__input:focus {
  border-color: var(--accent-blue);
}
.newsletter__btn {
  padding: 12px 22px;
  background: var(--accent-blue);
  color: var(--bg-dark);
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: var(--sans-font);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.newsletter__btn:hover {
  opacity: 0.85;
}
@media (max-width: 1100px) {
  .newsletter__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .newsletter__form {
    width: 100%;
    flex-direction: column;
  }
  .newsletter__input {
    width: 100%;
  }
  .newsletter__btn {
    width: 100%;
  }
}

/* ─── SERVICE CARD OUTCOME STATEMENT ─── */
.service-card__outcome {
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--accent-blue);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-lg);
  line-height: 1.45;
}
[data-theme="dark"] .service-card__outcome {
  color: var(--accent-blue);
}

/* ─── ROI SECTION ─── */
.roi-intro {
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
}
.roi-closer {
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-top: var(--space-xl);
}
[data-theme="dark"] .roi-intro,
[data-theme="dark"] .roi-closer {
  color: rgba(255,255,255,0.6);
}

/* ─── AI PAGE ─── */
.ai-statement {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--space-lg);
  line-height: 1.55;
}
[data-theme="dark"] .ai-statement {
  color: var(--white);
}
.ai-closing {
  background: var(--bg-dark);
  padding: 56px var(--space-lg);
  text-align: center;
}
.ai-closing p {
  font-size: 1.5rem;
  font-family: var(--serif-font);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  max-width: 680px;
  margin: 0 auto var(--space-xl);
  line-height: 1.55;
}

/* ─── WHY PAGE ─── */
.hero--why .hero__title {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
}
.hero--why .hero__sub {
  font-size: 1.3125rem;
  line-height: 1.7;
  max-width: 1100px;
}

.why-page {
  padding: var(--space-xl) 0 var(--space-2xl);
}
.why-article {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.why-article__block .eyebrow {
  margin-bottom: 10px;
}
.why-article__title {
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  font-weight: 600;
  font-family: var(--serif-font);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  line-height: 1.2;
}
[data-theme="dark"] .why-article__title {
  color: var(--white);
}
.why-article__block p {
  font-size: 1.25rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}
.why-article__block p:last-child {
  margin-bottom: 0;
}
[data-theme="dark"] .why-article__block p {
  color: rgba(255,255,255,0.65);
}
.why-closing-band {
  background: var(--bg-dark);
  padding: 64px var(--space-lg);
  text-align: center;
}
.why-closing-band p {
  font-size: 1.5rem;
  font-family: var(--serif-font);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  max-width: 680px;
  margin: 0 auto var(--space-xl);
  line-height: 1.55;
}
.why-end-list {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.why-end-list li {
  font-size: 1.25rem;
  color: var(--text-secondary);
  padding-left: 1.5em;
  position: relative;
  line-height: 1.6;
}
.why-end-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent-blue);
  font-weight: 600;
}
[data-theme="dark"] .why-end-list li {
  color: rgba(255,255,255,0.65);
}

/* ─── CONTACT HERO ─── */
.hero--contact {
  background: var(--bg-dark);
  padding: var(--space-2xl) 0 var(--space-xl);
}
.hero--contact .hero__title {
  font-size: clamp(40px, 5.5vw, 66px);
  line-height: 0.95;
  color: #fff;
  margin-bottom: var(--space-md);
}
.hero--contact .hero__title em {
  color: var(--accent-blue);
}
.hero--contact .hero__sub {
  color: rgba(255,255,255,0.65);
  max-width: 1100px;
}

/* ─── CONTACT PAGE ─── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-2xl);
  align-items: start;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form__field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  font-family: var(--sans-font);
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1.5px solid var(--border-color, #E0DDD5);
  border-radius: 6px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  border-color: var(--accent-blue);
}

.contact-form__field textarea {
  resize: vertical;
  line-height: 1.6;
}

.contact-form__field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6860' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.contact-form__submit {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

.contact-form__note {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.contact-form__note a {
  color: var(--text-primary);
  text-decoration: underline;
}

/* Aside */
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-top: 4px;
}

.contact-aside__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-aside__block p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.contact-aside__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  counter-reset: steps;
}

.contact-aside__steps li {
  counter-increment: steps;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
  padding-left: 2em;
  position: relative;
}

.contact-aside__steps li::before {
  content: counter(steps);
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--accent-blue);
  font-size: 0.875rem;
}

/* Dark mode overrides */
[data-theme="dark"] .contact-form__field input,
[data-theme="dark"] .contact-form__field select,
[data-theme="dark"] .contact-form__field textarea {
  background: #1A1A1A;
  border-color: #333;
  color: rgba(255,255,255,0.85);
}

[data-theme="dark"] .contact-form__field input::placeholder,
[data-theme="dark"] .contact-form__field textarea::placeholder {
  color: rgba(255,255,255,0.3);
}

/* Responsive */
@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .contact-aside {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-lg);
  }
  .contact-aside__block {
    flex: 1 1 260px;
  }
}

@media (max-width: 560px) {
  .contact-form__row {
    grid-template-columns: 1fr;
  }
  .contact-aside {
    flex-direction: column;
  }
}

.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-form__group-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.required {
  color: var(--accent-blue);
  font-style: normal;
}
.form-status {
  font-size: 1rem;
  padding: 14px 18px;
  border-radius: 6px;
}
.form-status--success {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.3);
}
.form-status--error {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.25);
}
[data-theme="dark"] .form-status--success {
  color: var(--accent-blue);
}
.contact-section {
  padding-top: var(--space-2xl);
}

/* ─── MOBILE OPTIMIZATIONS ─── */

/* Comparison table: force min-width so columns stay readable when scrolling horizontally */
.comparison-table table {
  min-width: 640px;
}

@media (max-width: 768px) {
  /* Fix: problem-grid must be 1 column on mobile (overrides the 1024px block ordering) */
  .problem-grid {
    grid-template-columns: 1fr !important;
  }

  /* Contact form submit button: full width on mobile */
  .contact-form__submit {
    width: 100%;
    align-self: stretch;
    text-align: center;
  }

  /* Home hero title: reduce so long lines don't overflow at 375px */
  .hero--home .hero__title {
    font-size: clamp(44px, 12vw, 72px);
  }

  /* Contact hero title: reduce for small screens */
  .hero--contact .hero__title {
    font-size: clamp(44px, 12vw, 72px);
  }

  /* Float button: icon only on mobile so it doesn't block content */
  .float-contact span:not(.float-contact__icon) {
    display: none;
  }
  .float-contact {
    padding: 14px;
    border-radius: 50%;
    gap: 0;
  }

  /* Carousel overlay nav arrows on mobile */
  .carousel-wrapper {
    position: relative;
  }
  .carousel-btn {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.45);
    color: var(--white);
    border-radius: 50%;
    font-size: 1rem;
    border: 1.5px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
  }
  .carousel-btn--prev {
    left: 10px;
  }
  .carousel-btn--next {
    right: 10px;
  }

  /* Services page: hint that table scrolls */
  .comparison-table::before {
    content: "← scroll to compare →";
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: var(--space-sm);
    opacity: 0.6;
  }

  /* Why page article text: tighter font on mobile */
  .why-article__block p {
    font-size: 1.0625rem;
  }
  .why-article__title {
    font-size: clamp(1.5rem, 5vw, 1.875rem);
  }

  /* Experience strip: reduce sub text */
  .experience-strip__sub {
    font-size: 1rem;
  }

  /* AI closing band */
  .ai-closing p {
    font-size: 1.125rem;
  }
  .ai-closing {
    padding: var(--space-xl) var(--space-md);
  }

  /* Why closing band */
  .why-closing-band p {
    font-size: 1.125rem;
  }
  .why-closing-band {
    padding: var(--space-xl) var(--space-md);
  }

  /* Case study section labels */
  .case-study__section-label {
    font-size: 0.875rem;
  }

  /* Diagnostic form container padding */
  .diagnostic-form-container {
    padding: var(--space-md);
  }

  /* Hero sub text slightly smaller */
  .hero__sub {
    font-size: 1rem;
  }
}
/* ── Homepage services: four-card grid + "Also available" pair ───────────── */
.svc-grid.svc-grid--four { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px)  { .svc-grid.svc-grid--four { grid-template-columns: 1fr; } }

.addon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 860px) { .addon-grid { grid-template-columns: 1fr; } }
.addon-grid .addon-strip--new {
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.addon-grid .addon-strip--new > div { flex: 1 1 auto; }

.card__tag--teal { background: rgba(13,148,136,0.12); color: #0D9488; }
.section--services .card__tag--teal { background: rgba(255,92,46,0.12); color: var(--accent-blue); }

/* Secondary button on the dark Background strip needs light text in both themes */
.experience-strip .btn--secondary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}
.experience-strip .btn--secondary:hover {
  background: #ffffff;
  color: #0F0F0F;
  border-color: #ffffff;
}

/* Sun / moon indicator inside the existing toggle knob (shape and colours unchanged) */
.dark-mode-toggle__knob::after {
  content: "\2600";              /* sun, light mode */
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: #0F0F0F;
}
[data-theme="dark"] .dark-mode-toggle__knob::after {
  content: "\263E";              /* moon, dark mode */
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME SEPARATION
   1. Dark mode kept its section rhythm: --alt is lifted off the base tone.
   2. The services section is now genuinely light in light mode, using tinted
      brand orange and plum rather than a flat neutral.
   ═════════════════════════════════════════════════════════════════════════ */

/* 1. Restore alternation in dark mode */
html[data-theme="dark"] .section--alt { background: #151515; }
html[data-theme="dark"] .section--services { background: #0A0A0A; }

/* 2. Light-mode services section */
html:not([data-theme="dark"]) .section--services {
  background: linear-gradient(180deg, #FFF4EF 0%, #FAF3FB 100%);
}
html:not([data-theme="dark"]) .section--services h2,
html:not([data-theme="dark"]) .section--services h3,
html:not([data-theme="dark"]) .section--services .card__title {
  color: var(--text-primary);
}
html:not([data-theme="dark"]) .section--services p {
  color: var(--text-secondary);
}

/* Cards read as white paper on the tinted ground */
html:not([data-theme="dark"]) .section--services .card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--accent-blue);
}
html:not([data-theme="dark"]) .section--services .card:hover {
  box-shadow: 0 8px 28px rgba(255, 92, 46, 0.18);
}
html:not([data-theme="dark"]) .section--services .card__icp {
  background: rgba(14,14,14,0.03);
  border-color: var(--border-light);
  color: var(--text-secondary);
}
html:not([data-theme="dark"]) .section--services .card__icp strong { color: var(--text-primary); }
html:not([data-theme="dark"]) .section--services .card__list li { color: #4A4439; }
html:not([data-theme="dark"]) .section--services .card__flip-hint { color: #D8431B; }
html:not([data-theme="dark"]) .section--services .card .btn--secondary {
  color: var(--text-primary);
  border-color: var(--border-light);
}
html:not([data-theme="dark"]) .section--services .card .btn--secondary:hover {
  background: var(--text-primary);
  color: #FFFFFF;
  border-color: var(--text-primary);
}

/* Stage tags: neutral, orange, plum, teal */
html:not([data-theme="dark"]) .section--services .card__tag--door  { background: #EFEBDD; color: #6B6358; }
html:not([data-theme="dark"]) .section--services .card__tag--blue  { background: rgba(255,92,46,0.14); color: #C9410F; }
html:not([data-theme="dark"]) .section--services .card__tag--green { background: rgba(124,58,237,0.12); color: #6D28D9; }
html:not([data-theme="dark"]) .section--services .card__tag--teal  { background: rgba(13,148,136,0.12); color: #0B7C71; }

/* Also available: One Take in orange, On Air in plum */
html:not([data-theme="dark"]) .addon-strip--new h4 { color: var(--text-primary); }
html:not([data-theme="dark"]) .addon-strip--new p  { color: var(--text-secondary); }
html:not([data-theme="dark"]) .addon-grid .addon-strip--new:first-child {
  background: rgba(255,92,46,0.07);
  border-color: rgba(255,92,46,0.32);
}
html:not([data-theme="dark"]) .addon-grid .addon-strip--new:last-child {
  background: rgba(124,58,237,0.06);
  border-color: rgba(124,58,237,0.3);
}
html:not([data-theme="dark"]) .addon-grid .addon-strip--new:last-child .btn--outline-green {
  color: #6D28D9;
  border-color: #6D28D9;
}
html:not([data-theme="dark"]) .addon-grid .addon-strip--new:last-child .btn--outline-green:hover {
  background: #6D28D9;
  color: #FFFFFF;
}

/* ── Services section: dialled back ────────────────────────────────────────
   Flat tint instead of a two-colour wash, one tag colour, both "Also
   available" strips in plum.
   ───────────────────────────────────────────────────────────────────────── */
html:not([data-theme="dark"]) .section--services {
  background: #FFF4EF;
}

/* One tag colour across Diagnose / Build / Scale / Activate */
html:not([data-theme="dark"]) .section--services .card__tag--door,
html:not([data-theme="dark"]) .section--services .card__tag--blue,
html:not([data-theme="dark"]) .section--services .card__tag--green,
html:not([data-theme="dark"]) .section--services .card__tag--teal {
  background: rgba(255,92,46,0.14);
  color: #C9410F;
}
html[data-theme="dark"] .section--services .card__tag--door,
html[data-theme="dark"] .section--services .card__tag--blue,
html[data-theme="dark"] .section--services .card__tag--green,
html[data-theme="dark"] .section--services .card__tag--teal {
  background: rgba(255,122,69,0.14);
  color: #FF7A45;
}

/* Both strips plum, in both themes */
html:not([data-theme="dark"]) .addon-grid .addon-strip--new,
html:not([data-theme="dark"]) .addon-grid .addon-strip--new:first-child,
html:not([data-theme="dark"]) .addon-grid .addon-strip--new:last-child {
  background: rgba(124,58,237,0.06);
  border-color: rgba(124,58,237,0.3);
}
html:not([data-theme="dark"]) .addon-grid .addon-strip--new .btn--outline-green {
  color: #6D28D9;
  border-color: #6D28D9;
}
html:not([data-theme="dark"]) .addon-grid .addon-strip--new .btn--outline-green:hover {
  background: #6D28D9;
  color: #FFFFFF;
  border-color: #6D28D9;
}
html[data-theme="dark"] .addon-grid .addon-strip--new {
  background: rgba(139,92,246,0.10);
  border-color: rgba(139,92,246,0.35);
}
html[data-theme="dark"] .addon-grid .addon-strip--new .btn--outline-green {
  color: #A78BFA;
  border-color: #A78BFA;
}
html[data-theme="dark"] .addon-grid .addon-strip--new .btn--outline-green:hover {
  background: #A78BFA;
  color: #0F0F0F;
  border-color: #A78BFA;
}

/* ── Scroll experience ─────────────────────────────────────────────────────
   Progress bar, reveal-on-scroll, and smooth in-page anchors. All of it
   degrades to a normal static page if JS is off or motion is reduced.
   ───────────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; }

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--accent-blue);
  z-index: 200;
  pointer-events: none;
  transition: width 0.08s linear;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .scroll-progress { transition: none; }
}

/* ── Cross-dissolve stage (homepage top) ───────────────────────────────────
   Three full-screen panels stacked in one pinned viewport. Scroll drives
   opacity instead of travel, so the top of the page changes slide rather
   than scrolling past. Off by default: JS adds .is-armed only when the
   viewport is big enough and motion is not reduced, so the fallback is a
   completely normal stacked page.
   ───────────────────────────────────────────────────────────────────────── */
/* Four panels, three handovers. Height is 100vh for the pinned viewport plus
   one long runway per handover, so each panel holds for a while. */
.dissolve-stage.is-armed {
  position: relative;
  height: 440vh;
}
.dissolve-stage.is-armed .dissolve-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.dissolve-stage.is-armed .dissolve-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0;
  opacity: 0;
  will-change: opacity, transform;
}
.dissolve-stage.is-armed .dissolve-panel:first-child { opacity: 1; }
/* Leave .container alone: its side gutters come from its own width: 92%. */
.dissolve-stage.is-armed .dissolve-panel > .container {
  max-height: 100vh;
}
/* The background strip carries a photo and a logo row, so it needs to be
   more compact inside a fixed-height panel than it is in normal flow. */
.dissolve-stage.is-armed .experience-strip { padding: 0; }
.dissolve-stage.is-armed .experience-strip__logos { margin-top: 8px; }
.dissolve-stage.is-armed .experience-strip img[alt^="Aishu"] {
  width: clamp(180px, 20vw, 260px) !important;
  height: clamp(180px, 20vw, 260px) !important;
}
.dissolve-stage.is-armed .hero { padding: 0; width: 100%; }
.dissolve-stage.is-armed .section { padding: 0; width: 100%; }

/* The section after the stage is the final dissolve target itself, heading and
   cards together, so there is no empty panel. It overlaps the last screen of
   pinned scroll and JS fades it in over the Background strip. */
.dissolve-stage.is-armed + section {
  position: relative;
  z-index: 5;
  margin-top: -100vh;
  will-change: opacity, transform;
}

/* ── Services carousel: unboxed, full container width ──────────────────────
   The slides used to sit in a bordered frame containing another bordered
   card. Both are gone: each service now runs at the same width as every
   other section, with the arrows sitting in the page gutter.
   ───────────────────────────────────────────────────────────────────────── */
.carousel-wrapper {
  display: block;
  position: relative;
  margin: var(--space-xl) auto;
}
.carousel-container,
[data-theme="dark"] .carousel-container {
  background: none;
  border: none;
  border-radius: 0;
  overflow: hidden;
}
.carousel-slide { overflow: visible; }

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  background: transparent;
  border: 1.5px solid var(--border-light);
  color: var(--text-primary);
}
.carousel-btn:hover {
  transform: translateY(-50%) scale(1.08);
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}
.carousel-btn--prev { left: -60px; }
.carousel-btn--next { right: -60px; }

/* Once the page gutter is too narrow to hold them, bring the arrows inside
   and give them a solid backing so they stay legible over the content. */
@media (max-width: 1180px) {
  .carousel-btn { background: var(--bg-cream); box-shadow: var(--shadow-sm); }
  .carousel-btn--prev { left: 0; }
  .carousel-btn--next { right: 0; }
  [data-theme="dark"] .carousel-btn { background: #1A1A1A; }
}

/* Tabs now sit above the carousel rather than under it. */
.carousel-indicators {
  margin-top: 0;
  margin-bottom: var(--space-md);
}
.carousel-wrapper { margin-top: 0; }

/* Carousel frame follows the active slide's height instead of the tallest. */
.carousel-container { transition: height 0.35s ease-in-out; }
.carousel { align-items: flex-start; }

/* ── Stop squeezing copy into narrow columns ───────────────────────────────
   Hero and CTA text was capped well below the width of the page container,
   which forced short lines to wrap for no reason.
   ───────────────────────────────────────────────────────────────────────── */
.hero__sub { max-width: none; }
.cta-diagnostic h2,
.cta-diagnostic .container--narrow { max-width: 1100px; }
.cta-band__title { max-width: none; }
.hero--contact .hero__sub,
.hero--why .hero__sub { max-width: none; }

/* Scroll cue, hero panel only. */
.scroll-cue {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-2xl);
  font-family: var(--sans-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.scroll-cue__arrow {
  font-size: 1rem;
  animation: scroll-cue-bob 1.9s ease-in-out infinite;
}
@keyframes scroll-cue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue__arrow { animation: none; }
}

/* ── Legibility pass: size only, nothing else changed ──────────────────────
   Everything below was under 14px. Bumped by 1-2px each. Weights, letter
   spacing, colours and layout are untouched.
   ───────────────────────────────────────────────────────────────────────── */
.card__icp strong        { font-size: 0.75rem; }   /* was 10px  */
.card__tag,
.svc-card__tag,
.case-study__tag,
.case-study__insight strong,
.svc-card__icp strong,
.flow__node .n,
.flow__node--block .tag,
.hero__kicker,
.offer__icp .label,
.logo-item__name         { font-size: 0.75rem; }   /* was 11px  */
.eyebrow,
.footer__col-head,
.offer__col-label        { font-size: 0.8rem; }    /* was 12px  */
.scroll-cue              { font-size: 0.82rem; }   /* was 12.5px */
.carousel-indicator--tab,
.float-contact,
.stat__label,
.timeline__company,
.timeline__dates,
.experience-card__company,
.svc-card__icp,
.conversion-path__step span { font-size: 0.85rem; } /* was 13px */
.flow__node p            { font-size: 0.9rem; }    /* was 13.6px */
.card__flip-hint         { font-size: 0.85rem !important; } /* was 13px, set inline */

/* Time-based engagements label, matching the plum used on its two cards. */
.section--services .eyebrow--plum { color: #6D28D9; }
html[data-theme="dark"] .section--services .eyebrow--plum { color: #A78BFA; }

/* ── Prose size standardisation ────────────────────────────────────────────
   Two sizes doing two jobs: 19px for section-level prose, 17px for
   descriptions inside card grids. Size only.
   ───────────────────────────────────────────────────────────────────────── */
.problem-item p,
.timeline__desc,
.card__icp        { font-size: 1.0625rem; }   /* 18-19px -> 17px */

/* ── Mobile: keep the grid dividers hairline ───────────────────────────────
   .problem-grid draws its dividers by showing a dark background through a
   2px gap. The responsive block widened that gap to 24px, which turned the
   hairlines into thick black bars once the cards stacked.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .problem-grid { gap: 2px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE PASS
   Fixes found by rendering the site at 390px: the price chip broke mid-number,
   headings were centred while everything under them was left aligned, and
   justified body text opened ragged gaps in a narrow column.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Headings were centred while cards and body copy stayed left aligned,
     which read as two different layouts stacked on top of each other. */
  .section__header,
  .section__sub,
  .section__title,
  .section__header .eyebrow {
    text-align: left;
  }

  /* Justified text in a ~330px column produces rivers and stranded words. */
  .section__sub { text-align: left; }

  /* Full-width buttons so a stacked pair lines up instead of stepping. */
  .hero__actions { align-items: stretch; width: 100%; }
  .hero__actions .btn { width: 100%; text-align: center; }

  /* The price chip is inline-flex, so "SGD 500" was wrapping mid-number. */
  .consult-price {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }
  .consult-price strong { white-space: nowrap; }
  .consult-price span { line-height: 1.5; }

  /* Tighten the gap between hero copy and whatever follows it. */
  .hero__sub { margin-bottom: var(--space-lg); }
  .scroll-cue { margin-top: var(--space-lg); }
}

@media (max-width: 480px) {
  .hero__title { line-height: 1.08; }
  .hero__sub { font-size: 1.05rem; }
}


/* Country shapes are drawn by masking a coloured box. Some Android in-app
   WebViews drop mask-image, which would leave a row of solid orange squares,
   so only paint the box where masking is actually supported. */
.case-map__shape { background-color: transparent; }
@supports (-webkit-mask-image: url(#m)) or (mask-image: url(#m)) {
  .case-map__shape { background-color: var(--accent-blue); }
}

/* ══════════════════════════════════════════════════════════════════════════
   TOUCH DEVICES, REGARDLESS OF REPORTED WIDTH
   LinkedIn's in-app browser on Android ignores width=device-width and lays
   the page out at roughly 945px, so every max-width: 768px rule was skipped
   and phones got the desktop grid. Keying off pointer type instead of width
   catches those cases, because a phone reports a coarse pointer whatever it
   claims its width to be.
   ══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) and (max-width: 1024px) {

  .problem-grid,
  .svc-grid,
  .svc-grid.svc-grid--four,
  .addon-grid,
  .expertise-grid,
  .case-studies-grid,
  .carousel-slide .expertise-grid,
  .case-study__body {
    grid-template-columns: 1fr !important;
  }

  /* The dividers are a dark background showing through a 2px gap, so the
     larger stacked gap would render as thick bars. */
  .problem-grid { gap: 2px; }

  .hero { padding: var(--space-2xl) 0 var(--space-xl); }
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__actions .btn { width: 100%; text-align: center; }

  .section__header,
  .section__title,
  .section__sub { text-align: left; }

  .consult-price {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }
  .consult-price strong { white-space: nowrap; }

  .flow { flex-direction: column; align-items: stretch; }
  .flow__arrow { transform: rotate(90deg); }
}