/* =====================================================================
   Ghati Web Solutions — style.css
   Single stylesheet. Sections are appended in order, one per turn.
   Breakpoints: 576 · 768 · 992 · 1200 (desktop nav)
   ===================================================================== */


/* =====================================================================
   ===== BASE: DESIGN TOKENS =====
   ===================================================================== */
:root {
  /* Brand */
  --accent: #DA3D3D;
  --accent-hover: #C13535;
  --primary: #091E3E;
  --primary-dark: #06152B;
  --navy-700: #0E2A52;       /* elevated panels */
  --navy-600: #15365F;       /* panel hover */

  /* Neutrals */
  --white: #FFFFFF;
  --off-white: #F7F8FA;
  --light-gray: #EAEDF2;
  --text: rgba(255, 255, 255, 0.92);
  --text-soft: rgba(255, 255, 255, 0.64);
  --text-muted: #9AA6BD;     /* muted text on navy (AA contrast) */
  --gray-500: #7A8395;       /* brand muted — for light sections */

  /* Surfaces & lines */
  --surface: var(--navy-700);
  --surface-hover: var(--navy-600);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* Supporting */
  --gold: #FBBF24;
  --success: #22C55E;
  --whatsapp: #25D366;

  /* Typography */
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --tracking-tight: -0.02em;
  --tracking-mono: 0.08em;

  /* Shape & motion */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: all 0.25s var(--ease);

  /* Layout */
  --container: 1280px;
  --gutter: 16px;
  --topbar-h: 38px;
  --header-h: 68px;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}

@media (min-width: 1200px) {
  :root { --gutter: 40px; }
}


/* =====================================================================
   ===== BASE: RESET =====
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100vh;
  background: var(--primary);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

address {
  font-style: normal;
}

figure {
  margin: 0;
}

p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

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

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =====================================================================
   ===== BASE: TYPOGRAPHY =====
   ===================================================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 4rem); }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem); }
h3 { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 600; }

p { text-wrap: pretty; }


/* =====================================================================
   ===== BASE: UTILITIES & SHARED COMPONENTS =====
   ===================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--white);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform 0.25s var(--ease);
}

.skip-link:focus-visible {
  transform: none;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----- Mono kickers & tags ----- */
.mono-label {
  display: inline-block;     /* wraps like text on narrow screens */
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.sep-slash {
  margin-inline: 6px;
  color: var(--accent);
  letter-spacing: 0;
}

.tag-mono {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: var(--radius-xs);
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-mono);
  white-space: nowrap;
}

.tag-accent {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(218, 61, 61, 0.45);
  border-radius: var(--radius-xs);
  background: rgba(6, 21, 43, 0.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FF7A7A;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-mono);
}

/* ----- Buttons ----- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: var(--transition);
}

.btn .icon {
  font-size: 16px;
}

.btn-arrow {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.3s var(--ease);
}

.btn:hover .btn-arrow {
  transform: translate(2px, -2px);
}

.btn-sm {
  min-height: 38px;
  padding: 9px 14px;
  font-size: 0.75rem;
}

.btn-block {
  width: 100%;
}

/* Primary — red with a darker sweep fill on hover */
.btn-primary {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 8px 22px -10px rgba(218, 61, 61, 0.7);
}

.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent-hover);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--ease);
}

.btn-primary:hover::before {
  transform: scaleX(1);
  transform-origin: left center;
}

.btn-primary:hover {
  box-shadow: 0 12px 28px -10px rgba(218, 61, 61, 0.85);
}

.btn-ghost {
  border-color: var(--line-strong);
  color: var(--white);
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.05);
}

.btn-whatsapp {
  background: var(--whatsapp);
  color: var(--primary-dark);
}

.btn-whatsapp:hover {
  background: #1FBE5A;
}

/* ----- Scroll progress ----- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #FF6B6B);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}


/* =====================================================================
   ===== SECTION 01: HEADER =====
   ===================================================================== */

/* ----- 01a: Utility Topbar ----- */
.topbar {
  background: var(--primary-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--topbar-h);
}

.topbar__group {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.topbar-item,
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.topbar-item .icon,
.topbar-link .icon {
  font-size: 13px;
  color: var(--accent);
}

.topbar-link {
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s var(--ease);
}

.topbar-link:hover {
  color: var(--white);
}

.topbar-socials {
  display: flex;
  align-items: stretch;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.topbar-social {
  display: grid;
  place-items: center;
  width: var(--topbar-h);
  height: var(--topbar-h);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  transition: var(--transition);
}

.topbar-social:hover {
  background: var(--accent);
  color: var(--white);
}

.topbar-social--whatsapp:hover {
  background: var(--whatsapp);
  color: var(--primary-dark);
}

@media (max-width: 991.98px) {
  .topbar-hide-mobile { display: none; }
}

@media (max-width: 767.98px) {
  .topbar-hide-sm { display: none; }
  .topbar__group { gap: 14px; }
}


/* ----- 01b: Sticky Header -----
   Glass lives on ::before so dropdown panels can run their own backdrop blur. */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-h);
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #E2E8F0;
  box-shadow: 0 4px 20px rgba(9, 30, 62, 0.04);
  transition: box-shadow 0.35s var(--ease), background-color 0.35s var(--ease);
}

.header.is-scrolled::before {
  background: #FFFFFF;
  box-shadow: 0 10px 30px -10px rgba(9, 30, 62, 0.12);
  border-bottom-color: #CBD5E1;
}

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}

/* Brand — transparent logo on white navbar */
.header-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: auto;
  transition: opacity 0.2s var(--ease);
}

.header-brand:hover {
  opacity: 0.85;
}

.header-brand img {
  width: auto;
  height: 50px;
  object-fit: contain;
}

/* ----- Primary nav ----- */
.nav {
  position: static;          /* mega panel + indicator position against .header__inner */
  display: none;
  align-self: stretch;
}

.nav-list {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.nav-item {
  display: flex;
  align-items: stretch;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-inline: 14px;
  color: #0E2A52;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

/* Hairline separators between items */
.nav-item + .nav-item > .nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  background: #E2E8F0;
  translate: 0 -50%;
}

.nav-link:hover,
.nav-link:focus-visible,
.has-dropdown.is-open > .nav-link {
  color: var(--accent);
}

.nav-link.is-active {
  color: var(--accent);
}

.nav-chevron {
  font-size: 13px;
  opacity: 0.65;
  transition: transform 0.3s var(--ease);
}

.has-dropdown.is-open .nav-chevron {
  transform: rotate(180deg);
}

/* Sliding indicator (positioned by JS) */
.nav-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s var(--ease), width 0.4s var(--ease), opacity 0.25s var(--ease);
}

.nav-indicator.is-ready {
  opacity: 1;
}

/* No-JS fallback: static underline on the active link */
.no-indicator .nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
}

/* ----- Dropdown panels (shared) ----- */
.has-dropdown {
  position: relative;
}

.has-dropdown.has-mega {
  position: static;          /* mega panel aligns to .header__inner */
}

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  z-index: 10;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  background: rgba(14, 42, 82, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 48px -8px rgba(3, 12, 30, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.22s;
}

.has-dropdown.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* Hover bridge — fills the 10px gap between header and panel */
.has-dropdown.is-open::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}

.has-mega.is-open::after {
  left: var(--gutter);
  right: var(--gutter);
}

.dropdown__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

/* ----- Services mega menu ----- */
.mega {
  left: var(--gutter);
  right: var(--gutter);
}

.mega-all {
  color: var(--text-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  transition: color 0.2s var(--ease);
}

.mega-all:hover {
  color: var(--accent);
}

.mega__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-right: 1px solid var(--line);
}

.mega__grid > li {
  display: flex;
}

.mega-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 20px 20px 22px;
  background: var(--surface);
  transition: background-color 0.25s var(--ease);
}

/* Glowing border line rising from bottom to up on hover */
.mega-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--accent), #FF6B6B);
  box-shadow: 0 -2px 10px rgba(218, 61, 61, 0.5);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.4, 1);
}

.mega-item:hover,
.mega-item:focus-visible {
  background: var(--surface-hover);
}

.mega-item:hover::after,
.mega-item:focus-visible::after {
  transform: translateY(0);
}

.mega-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.mega-item__index {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  transition: color 0.25s var(--ease);
}

.mega-item__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  transition: var(--transition);
}

.mega-item__title {
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}

.mega-item__desc {
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.mega-item:hover .mega-item__index,
.mega-item:focus-visible .mega-item__index {
  color: var(--accent);
}

.mega-item:hover .mega-item__icon,
.mega-item:focus-visible .mega-item__icon {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}

/* Featured aside */
.mega-feature {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.mega-feature__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-bottom: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.mega-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
  transition: transform 0.6s var(--ease);
}

.mega-feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 21, 43, 0) 40%, rgba(6, 21, 43, 0.7) 100%);
}

.mega-feature:hover .mega-feature__media img {
  transform: scale(1.04);
}

.mega-feature__media .tag-accent {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

.mega-feature__title {
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
}

.mega-feature__title span {
  color: var(--accent);
}

.mega-feature__sub {
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.mega-feature .btn {
  align-self: flex-start;
  margin-top: 6px;
}

/* ----- About dropdown ----- */
.about-menu {
  left: 50%;
  width: 380px;
  translate: -50% 0;
}

.about-menu__list {
  display: grid;
  padding: 6px;
}

.about-link {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  transition: background-color 0.2s var(--ease);
}

.about-link:hover,
.about-link:focus-visible {
  background: var(--surface-hover);
}

.about-link__index {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  transition: color 0.2s var(--ease);
}

.about-link__body {
  display: grid;
  gap: 2px;
}

.about-link__title {
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.about-link__desc {
  color: var(--text-muted);
  font-size: 0.78125rem;
  line-height: 1.4;
}

.about-link__arrow {
  color: var(--accent);
  font-size: 15px;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: var(--transition);
}

.about-link:hover .about-link__index,
.about-link:focus-visible .about-link__index {
  color: var(--accent);
}

.about-link:hover .about-link__arrow,
.about-link:focus-visible .about-link__arrow {
  opacity: 1;
  transform: none;
}

/* ----- Header actions ----- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.badge-rating {
  display: none;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding-inline: 12px;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-sm);
  background: #F8FAFC;
  color: #0E2A52;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

.badge-star {
  color: #EAB308;
  font-size: 0.875rem;
}

.badge-sub {
  color: #64748B;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.header-cta {
  display: none;
  min-height: 42px;
  padding-inline: 18px;
}

/* Hamburger → X */
.nav-toggle {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid #CBD5E1;
  border-radius: var(--radius-sm);
  background: #F8FAFC;
  transition: var(--transition);
}

.nav-toggle:hover {
  border-color: #94A3B8;
  background: #F1F5F9;
}

.nav-toggle__bar {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: #0E2A52;
  transition: transform 0.4s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle__bar:nth-child(1) { top: 14px; }
.nav-toggle__bar:nth-child(2) { top: 20px; }
.nav-toggle__bar:nth-child(3) { top: 26px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 768px) {
  .badge-rating { display: inline-flex; }
  .header-cta { display: inline-flex; }
}

@media (min-width: 1200px) {
  .header-brand { margin-right: 0; }
  .nav { display: block; margin-inline: auto; }
  .header-actions { margin-left: 0; }
  .nav-toggle { display: none; }
}

@media (min-width: 1200px) and (max-width: 1319.98px) {
  .badge-rating { display: none; }
  .nav-link { padding-inline: 12px; }
}


/* ----- 01c: Mobile Drawer ----- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(6, 21, 43, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}

.drawer {
  position: fixed;
  top: var(--drawer-top, var(--header-h));
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-left: 1px solid var(--line);
  background: var(--primary);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
}

.is-drawer-open .drawer-backdrop {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.is-drawer-open .drawer {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.is-scroll-locked {
  overflow: hidden;
}

.drawer__label {
  margin-bottom: 8px;
}

.drawer-link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  text-align: left;
  transition: color 0.2s var(--ease);
}

.drawer-link:hover {
  color: var(--accent);
}

.drawer-link[aria-current="page"] {
  color: var(--accent);
}

.drawer-link__index {
  width: 20px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
}

.drawer-link__chevron {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 18px;
  transition: transform 0.35s var(--ease), color 0.2s var(--ease);
}

.drawer-acc[aria-expanded="true"] .drawer-link__chevron {
  color: var(--accent);
  transform: rotate(180deg);
}

.drawer-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.4s var(--ease), visibility 0s linear 0.4s;
}

.drawer-acc[aria-expanded="true"] + .drawer-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}

.drawer-panel__inner {
  overflow: hidden;
}

.drawer-sub {
  display: grid;
  padding: 6px 0 12px 34px;
  border-bottom: 1px solid var(--line);
}

.drawer-sub a {
  display: block;
  padding: 8px 0;
  color: var(--text-soft);
  font-size: 0.9375rem;
  transition: color 0.2s var(--ease);
}

.drawer-sub a:hover {
  color: var(--white);
}

.drawer-sub .drawer-sub__all {
  color: var(--accent);
  font-weight: 600;
}

.drawer__footer {
  display: grid;
  gap: 14px;
  margin-top: auto;
  padding-top: 28px;
}

.drawer-contact {
  display: grid;
  gap: 10px;
  color: var(--text-soft);
  font-size: 0.875rem;
  line-height: 1.4;
}

.drawer-contact > * {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.drawer-contact .icon {
  margin-top: 2px;
  color: var(--accent);
  font-size: 14px;
}

.drawer-contact a:hover {
  color: var(--white);
}

.drawer__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

@media (min-width: 1200px) {
  .drawer-backdrop,
  .drawer {
    display: none;
  }
}


/* ----- 01d: Mobile Sticky Action Bar ----- */
.action-bar {
  display: none;
}

@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 997;
    display: grid;
    grid-template-columns: 1fr 1fr 1.15fr;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(9, 30, 62, 0.95);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

.action-bar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  transition: var(--transition);
}

.action-bar__item .icon {
  font-size: 17px;
}

.action-bar__item:active {
  transform: scale(0.97);
}

.action-bar__item--whatsapp {
  border-color: transparent;
  background: var(--whatsapp);
  color: var(--primary-dark);
}

.action-bar__item--audit {
  border-color: transparent;
  background: var(--accent);
}


/* =====================================================================
   ===== SECTION 02: HERO SLIDER =====
   ===================================================================== */

/* ----- Shared additions (reused by later sections) ----- */
.btn-lg {
  min-height: 52px;
  padding: 16px 26px;
}

.btn-glass {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white);
}

.btn-glass:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.1);
}

.icon-whatsapp {
  color: var(--whatsapp);
}

.pulse-dot {
  position: relative;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-ring 2s var(--ease) infinite;
}

@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(3.2); opacity: 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes heroProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}


/* ----- 02: Shell ----- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--primary-dark);
}

.hero__stage {
  position: relative;
}

/* Slides stack in one grid cell — the stage takes the tallest slide's height */
.hero__viewport {
  display: grid;
  touch-action: pan-y;       /* horizontal swipes reach the slider JS */
}

.hero__slide {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  min-height: 560px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s var(--ease), visibility 0s linear 0.8s;
}

.hero__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

@media (min-width: 992px) {
  .hero__slide {
    min-height: clamp(600px, calc(100svh - var(--topbar-h) - var(--header-h) - 96px), 800px);
  }
}

/* Background photo + navy overlay */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--primary-dark);
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 7s linear;
}

.hero__slide.is-active .hero__bg img {
  transform: scale(1);
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px circle at 85% 15%, rgba(218, 61, 61, 0.12), transparent 60%),
    linear-gradient(120deg, rgba(6, 21, 43, 0.94) 30%, rgba(9, 30, 62, 0.82) 100%);
}

.hero__slide--brand .hero__bg::after {
  background:
    radial-gradient(700px circle at 85% 15%, rgba(218, 61, 61, 0.12), transparent 60%),
    linear-gradient(135deg, rgba(6, 21, 43, 0.95) 25%, rgba(9, 30, 62, 0.85) 100%);
}

.hero__inner {
  display: grid;
  align-items: center;
  gap: 48px;
  width: 100%;
  padding-block: 48px 112px;
}

@media (min-width: 992px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(32px, 4vw, 64px);
    padding-block: 64px 128px;
  }
}


/* ----- 02a: Slide content ----- */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: rgba(9, 30, 62, 0.55);
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-mono);
}

.hero__title {
  margin-top: 22px;
  color: var(--white);
  font-size: clamp(2.2rem, 1.35rem + 2.6vw, 3.8rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.hero__accent {
  color: var(--accent);
}

.hero__text {
  max-width: 560px;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Staggered entrance for the active slide */
.hero__content > *,
.hero__visual {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 0.6s var(--ease), translate 0.9s var(--ease);
}

.hero__slide.is-active .hero__content > *,
.hero__slide.is-active .hero__visual {
  opacity: 1;
  translate: 0 0;
}

.hero__slide.is-active .hero__content > :nth-child(1) { transition-delay: 0.15s; }
.hero__slide.is-active .hero__content > :nth-child(2) { transition-delay: 0.25s; }
.hero__slide.is-active .hero__content > :nth-child(3) { transition-delay: 0.35s; }
.hero__slide.is-active .hero__content > :nth-child(4) { transition-delay: 0.45s; }
.hero__slide.is-active .hero__visual                  { transition-delay: 0.3s; }

@media (max-width: 575.98px) {
  .hero__actions .btn {
    width: 100%;
  }
}


/* ----- 02b: Visuals (desktop only — mobile keeps slides compact) ----- */
.hero__visual {
  position: relative;
  display: none;
  container-type: inline-size;
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  aspect-ratio: 1.15 / 1;
}

@media (min-width: 992px) {
  .hero__visual { display: block; }
}

/* Laptop */
.mockup-laptop {
  position: absolute;
  top: 14%;
  left: 0;
  width: 84%;
  transform: perspective(1800px) rotateY(-14deg) rotateX(4deg);
  filter: drop-shadow(0 40px 50px rgba(3, 12, 30, 0.6));
}

.laptop-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 580 / 360;
  border: 1.4cqi solid #0B1A33;
  border-bottom-width: 2cqi;
  border-radius: 2.2cqi 2.2cqi 0 0;
  background: #0B1A33;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.laptop-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.laptop-overlay-card {
  position: absolute;
  left: 4%;
  bottom: 7%;
  padding: 2cqi 2.8cqi;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: 1cqi;
  background: rgba(9, 30, 62, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.laptop-tag {
  color: #FF7A7A;
  font-family: var(--font-mono);
  font-size: 1.6cqi;
  letter-spacing: 0.12em;
  line-height: 1;
}

.laptop-heading {
  margin-top: 0.8cqi;
  color: var(--white);
  font-size: 3.6cqi;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.laptop-base {
  position: relative;
  height: 2.4cqi;
  margin-inline: -7%;
  border-radius: 0 0 2.6cqi 2.6cqi;
  background: linear-gradient(180deg, #D5DDEA 0%, #93A1B8 55%, #5E6E89 100%);
}

.laptop-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 16%;
  height: 0.9cqi;
  border-radius: 0 0 1cqi 1cqi;
  background: rgba(9, 30, 62, 0.35);
  translate: -50% 0;
}

/* Phone */
.mockup-phone {
  position: absolute;
  right: 3%;
  bottom: 3%;
  z-index: 2;
  width: 27%;
  filter: drop-shadow(0 30px 40px rgba(3, 12, 30, 0.65));
  animation: float 7s ease-in-out infinite;
}

.phone-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 200 / 380;
  border: 1.2cqi solid #0B1A33;
  border-radius: 4.5cqi;
  background: #0B1A33;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.phone-screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 36%;
  height: 2.4cqi;
  border-radius: 0 0 1.6cqi 1.6cqi;
  background: #0B1A33;
  translate: -50% 0;
}

.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone-badge {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 6%;
  padding: 1.6cqi 1cqi;
  border-radius: 1.2cqi;
  background: var(--accent);
  box-shadow: 0 8px 20px -6px rgba(218, 61, 61, 0.7);
  color: var(--white);
  font-size: 1.9cqi;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

/* Handwritten doodle */
.hero-doodle {
  position: absolute;
  top: -2%;
  right: 2%;
  display: flex;
  align-items: flex-start;
  gap: 1cqi;
  color: rgba(255, 255, 255, 0.9);
  transform: rotate(-6deg);
}

.doodle-text {
  font-family: 'Caveat', 'Segoe Print', cursive;
  font-size: clamp(18px, 4.6cqi, 28px);
  font-weight: 600;
  line-height: 0.95;
  text-align: right;
}

.doodle-arrow {
  width: 6cqi;
  margin-top: 12cqi;
  color: var(--accent);
}

/* Floating metric badges */
/* Floating metric badges — Multi-Color & Dynamic Support */
.hero-float {
  --float-color: #22C55E;
  --float-bg: rgba(34, 197, 94, 0.14);
  --float-border: rgba(255, 255, 255, 0.14);
  --float-glow: rgba(34, 197, 94, 0.12);
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--float-border);
  border-radius: 10px;
  background: rgba(9, 30, 62, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow:
    0 18px 36px -12px rgba(3, 12, 30, 0.6),
    0 0 16px var(--float-glow);
  color: var(--text-soft);
  font-size: 0.8125rem;
  line-height: 1.2;
  white-space: nowrap;
  animation: float 6s ease-in-out infinite;
  transition: all 0.3s var(--ease);
}

.hero-float strong {
  margin-right: 3px;
  color: var(--white);
  font-weight: 800;
}

.hero-float__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--float-bg);
  color: var(--float-color);
  font-size: 16px;
  transition: all 0.3s var(--ease);
}

/* Preset Color Theme Classes for CMS / Slider */
/* Green / WhatsApp / Growth */
.hero-float--green {
  --float-color: #25D366;
  --float-bg: rgba(37, 211, 102, 0.14);
  --float-border: rgba(37, 211, 102, 0.25);
  --float-glow: rgba(37, 211, 102, 0.15);
}

/* Cyan / Tech / Next.js */
.hero-float--cyan {
  --float-color: #38BDF8;
  --float-bg: rgba(56, 189, 248, 0.14);
  --float-border: rgba(56, 189, 248, 0.25);
  --float-glow: rgba(56, 189, 248, 0.15);
}

/* Purple / Violet / Speed */
.hero-float--purple {
  --float-color: #A78BFA;
  --float-bg: rgba(167, 139, 250, 0.14);
  --float-border: rgba(167, 139, 250, 0.25);
  --float-glow: rgba(167, 139, 250, 0.15);
}

/* Amber / Gold / SEO Rank */
.hero-float--amber {
  --float-color: #F59E0B;
  --float-bg: rgba(245, 158, 11, 0.14);
  --float-border: rgba(245, 158, 11, 0.25);
  --float-glow: rgba(245, 158, 11, 0.15);
}

/* Red / Crimson / Flagship */
.hero-float--red {
  --float-color: #DA3D3D;
  --float-bg: rgba(218, 61, 61, 0.14);
  --float-border: rgba(218, 61, 61, 0.25);
  --float-glow: rgba(218, 61, 61, 0.15);
}

.hero-float__icon--whatsapp {
  background: rgba(37, 211, 102, 0.14);
  color: #25D366;
}

.hero-float--growth { left: -3%;  bottom: 12%; animation-delay: -2s; }
.hero-float--lead   { left: 6%;   top: 2%;     animation-delay: -4s; }
.hero-float--seo    { left: -3%;  top: 30%;    animation-delay: -1s; }
.hero-float--sales  { right: -2%; bottom: 14%; animation-delay: -3.5s; }

/* Browser frame (slides 2 & 3) */
.mockup-browser {
  position: absolute;
  inset: 9% 0 9% 5%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--navy-700);
  box-shadow: 0 40px 80px -24px rgba(3, 12, 30, 0.7);
}

.mockup-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.mockup-browser__bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF5F57;
}

.mockup-browser__bar i:nth-child(2) { background: #FEBC2E; }
.mockup-browser__bar i:nth-child(3) { background: #28C840; }

.mockup-browser__bar span {
  margin-left: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.mockup-browser img {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: cover;
}

/* Tech chips */
.hero-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(9, 30, 62, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 36px -12px rgba(3, 12, 30, 0.6);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  animation: float 6s ease-in-out infinite;
}

.hero-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--white);
}

.hero-chip--1 { top: 3%;    left: -2%;  animation-delay: -1s; }
.hero-chip--2 { top: 46%;   right: -3%; animation-delay: -3s; }
.hero-chip--3 { bottom: 3%; left: 12%;  animation-delay: -5s; }

.hero-chip--2 i { background: #3178C6; }
.hero-chip--3 i { background: #61DAFB; }


/* ----- 02c: Controls ----- */
.hero__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}

.hero__controls > * {
  pointer-events: auto;
}

.hero__nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hero__counter {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.hero__counter-current {
  color: var(--white);
  font-weight: 500;
}

.hero__counter-sep {
  color: var(--accent);
}

.hero__dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero__dot {
  position: relative;
  width: 18px;
  height: 20px;
  transition: width 0.4s var(--ease);
}

.hero__dot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  translate: 0 -50%;
  transition: background-color 0.3s var(--ease);
}

.hero__dot:hover::after {
  background: rgba(255, 255, 255, 0.6);
}

.hero__dot.is-active {
  width: 36px;
}

.hero__dot.is-active::after {
  background: var(--accent);
}

.hero__arrows {
  display: flex;
  gap: 8px;
}

.hero__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(9, 30, 62, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white);
  font-size: 18px;
  transition: var(--transition);
}

.hero__arrow:hover {
  border-color: var(--accent);
  background: var(--accent);
}

.hero__arrow--prev .icon {
  transform: rotate(180deg);
}

.hero__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
}

.hero__progress-bar {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.hero__progress-bar.is-running {
  animation: heroProgress var(--hero-interval, 6000ms) linear forwards;
}

.hero.is-paused .hero__progress-bar {
  animation-play-state: paused;
}

@media (max-width: 991.98px) {
  .hero__controls { bottom: 24px; }
  .hero__arrow { width: 42px; height: 42px; font-size: 16px; }
}


/* ----- 02d: Docked stats strip ----- */
.hero__stats {
  position: relative;
  z-index: 2;
  max-width: none;           /* full-bleed band; content width comes from padding below */
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  border-top: 1px solid var(--line);
  background: var(--primary);
}

.hero__stats-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 16px;
}

.hero__stat:nth-child(even) {
  border-left: 1px solid var(--line);
}

.hero__stat:nth-child(n + 3) {
  border-top: 1px solid var(--line);
}

.hero__stat-value {
  color: var(--white);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.hero__stat-star {
  margin-left: 2px;
  color: var(--gold);
  font-size: 0.75em;
  vertical-align: 0.15em;
}

.hero__stat-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .hero__stats-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero__stat {
    padding: 26px 28px;
  }

  .hero__stat:first-child {
    padding-left: 0;
  }

  .hero__stat + .hero__stat {
    border-left: 1px solid var(--line);
  }

  .hero__stat:nth-child(n + 3) {
    border-top: 0;
  }
}

.hero__stat-value {
  font-variant-numeric: tabular-nums;   /* counter digits don't jitter */
}


/* =====================================================================
   ===== SECTION 03: TRUST BAR & TECH MARQUEE (LIGHT) =====
   Alternating contrast: dark hero → light trust bar.
   ===================================================================== */

/* ----- Shared additions (reused by later sections) ----- */
:root {
  /* Light-section palette */
  --light-bg: #F8FAFC;
  --light-bg-alt: #F1F5F9;
  --light-border: #EAEDF2;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --shadow-soft: 0 4px 20px rgba(9, 30, 62, 0.05);
  --shadow-lift: 0 12px 30px rgba(9, 30, 62, 0.1);
}

.section {
  position: relative;
  padding-block: clamp(72px, 9vw, 120px);
}

.section--light {
  background: var(--light-bg);
  color: var(--primary);
}

.section--light h2,
.section--light h3 {
  color: var(--primary);
}

.text-dark   { color: var(--primary); }
.text-muted  { color: var(--slate-500); }
.text-accent { color: var(--accent); }

.mono-label--dark {
  color: var(--slate-500);
}

/* Status pill — styled for light surfaces */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid var(--light-border);
  border-radius: var(--radius-full);
  background: var(--light-bg);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.status-pill--green {
  border-color: #A7F3D0;
  background: #ECFDF5;
  color: #047857;
}

.status-pill--green .pulse-dot,
.status-pill--green .pulse-dot::after {
  background: #10B981;
}

.card-index {
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  transition: color 0.25s var(--ease);
}

/* Scroll reveal with stagger — hidden state only applies when JS is running */
.js [data-reveal] {
  opacity: 0;
  translate: 0 28px;
}

.js [data-reveal].is-revealed {
  opacity: 1;
  translate: 0 0;
}


/* ----- 03: Shell ----- */
.trust-bar {
  overflow: clip;
  padding-bottom: 0;         /* marquee strip closes the section flush */
}


/* ----- 03a: Header ----- */
.trust-bar__head {
  display: grid;
  gap: 20px;
}

.trust-bar__title {
  max-width: 20ch;
  margin-top: 18px;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}

.trust-bar__desc {
  max-width: 460px;
  font-size: 1rem;
  line-height: 1.7;
}

@media (min-width: 992px) {
  .trust-bar__head {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: end;
    gap: 48px;
  }

  .trust-bar__desc {
    justify-self: end;
    padding-bottom: 6px;
  }
}


/* ----- 03b: Industry grid (white cards, soft elevation, cursor-tracking border beam) ----- */
.industry-grid {
  display: grid;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
}

@media (min-width: 640px) {
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.industry-grid > li {
  display: flex;
}

.industry-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 26px;
  border: 1px solid var(--light-border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  transition:
    opacity 0.7s var(--ease) calc(var(--d, 0) * 90ms),
    translate 0.9s var(--ease) calc(var(--d, 0) * 90ms),
    transform 0.35s var(--ease),
    border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

/* Border beam: red light that follows the cursor along the card edge */
.industry-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(218, 61, 61, 0.9), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

/* Soft inner spotlight */
.industry-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(218, 61, 61, 0.045), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.industry-card:hover {
  border-color: rgba(218, 61, 61, 0.45);
  box-shadow: var(--shadow-lift), 0 0 15px rgba(218, 61, 61, 0.12);
  transform: translateY(-4px);
}

.industry-card:hover::before,
.industry-card:hover::after {
  opacity: 1;
}

.industry-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.industry-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--light-border);
  border-radius: 10px;
  background: var(--light-bg);
  color: var(--primary);
  font-size: 22px;
  transition: var(--transition);
}

.industry-card:hover .industry-card__icon {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}

.industry-card:hover .card-index {
  color: var(--accent);
}

.industry-card__title {
  margin-top: 28px;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}

.industry-card__scope {
  margin-top: 10px;
  color: var(--slate-500);
  font-size: 0.875rem;
  line-height: 1.6;
}

.industry-card__foot {
  margin-top: auto;
  padding-top: 24px;
}


/* ----- 03c: Dual-line marquee (light track) ----- */
.marquee-strip {
  margin-top: clamp(56px, 7vw, 88px);
  border-top: 1px solid var(--light-border);
  background: var(--light-bg-alt);
}

.marquee {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--light-border);
  /* Edge fades — on desktop the label's gradient handles the left edge */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

@media (min-width: 992px) {
  .marquee {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent);
  }
}

/* Fixed label chip on the left edge */
.marquee__label {
  position: relative;
  z-index: 2;
  display: none;
  flex-shrink: 0;
  align-self: stretch;
  align-items: center;
  gap: 8px;
  min-width: calc(var(--gutter) + 300px);   /* both rows start at the same x */
  padding-inline: var(--gutter) 64px;
  background: linear-gradient(90deg, var(--light-bg-alt) calc(100% - 56px), transparent);
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  white-space: nowrap;
}

@media (min-width: 992px) {
  .marquee__label { display: inline-flex; }
}

.marquee__track {
  display: flex;
  flex-shrink: 0;
  width: max-content;
  animation: marqueeRoll 45s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee--reverse .marquee__track {
  animation-direction: reverse;
  animation-duration: 40s;
}

@keyframes marqueeRoll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee__list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee__list li {
  display: inline-flex;
  align-items: center;
  padding-block: 22px;
  color: var(--primary);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}

.marquee__list li span {
  margin-left: 6px;
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 0.6em;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ✦ separator */
.marquee__list li::after {
  content: "✦";
  margin-inline: clamp(20px, 3vw, 36px);
  color: var(--accent);
  font-size: 0.7em;
}

.marquee__list li:hover {
  color: var(--accent);
}

/* Tech row: mono, quieter */
.marquee--tech .marquee__list li {
  padding-block: 16px;
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.marquee--tech .marquee__list li:hover {
  color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}


/* =====================================================================
   ===== SECTION 04: PROBLEM (LIGHT) =====
   ===================================================================== */

/* ----- Shared additions ----- */
.mono-label--red {
  color: var(--accent);
}


/* ----- 04: Shell & dark background with technical grid ----- */
.problem-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0B0E14;
  background-image:
    /* Technical engineering grid overlay matching reference screenshot */
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    /* Soft ambient crimson glow behind title */
    radial-gradient(700px circle at 15% 25%, rgba(218, 61, 61, 0.08) 0%, transparent 70%);
  background-size: 36px 36px, 36px 36px, 100% 100%;
  border-block: 1px solid rgba(255, 255, 255, 0.07);
}

/* Header layout matching reference screenshot */
.problem-head {
  display: grid;
  gap: 20px;
}

@media (min-width: 992px) {
  .problem-head {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: end;
    gap: 48px;
  }

  .problem-head__right {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

.problem-title {
  max-width: 16ch;
  margin-top: 14px;
  font-size: clamp(1.875rem, 1.25rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: #FFFFFF;
}

.problem-sub {
  max-width: 460px;
  color: #94A3B8;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

.btn-problem {
  margin-top: 4px;
}

.btn-problem:hover {
  box-shadow: 0 16px 36px -10px rgba(218, 61, 61, 0.6);
  transform: translateY(-2px);
}

.btn-problem:active {
  box-shadow: 0 6px 16px -8px rgba(218, 61, 61, 0.6);
  transform: translateY(0) scale(0.98);
}

/* ----- 04b: Problem cards grid ----- */
.problem-grid {
  display: grid;
  gap: 16px;
  margin-top: clamp(36px, 4vw, 56px);
}

@media (min-width: 640px) {
  .problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 992px) {
  .problem-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

.problem-grid > li {
  display: flex;
}

/* Dark Technical Glass Cards — Sharp Engineering Geometry */
.problem-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 26px 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: #11141B;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition:
    opacity 0.7s var(--ease) calc(var(--d, 0) * 80ms),
    translate 0.9s var(--ease) calc(var(--d, 0) * 80ms),
    border-color 0.25s var(--ease),
    background 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

/* Top Row: Icon on left, index on right */
.problem-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.problem-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: rgba(218, 61, 61, 0.05);
  border: 1px solid rgba(218, 61, 61, 0.18);
  color: #DA3D3D;
  font-size: 20px;
  box-shadow: 0 0 12px rgba(218, 61, 61, 0.12);
  transition: all 0.25s var(--ease);
}

.problem-card__icon .icon {
  stroke-width: 1.5;
}

.problem-card__index {
  color: #475569;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-mono);
  transition: color 0.25s var(--ease);
}

/* Card Body */
.problem-card__body {
  margin-top: 24px;
  margin-bottom: 24px;
}

.problem-card__title {
  color: #FFFFFF;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 8px 0;
}

.problem-card__desc {
  color: #8B949E;
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}

/* Bottom Status Row */
.problem-card__status {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Neon Green Status Indicator (exact screenshot match: OSHAD SF COMPLIANT) */
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #10B981;
  box-shadow: 0 0 8px #10B981, 0 0 14px rgba(16, 185, 129, 0.5);
  transition: box-shadow 0.25s var(--ease);
}

.status-label {
  color: #CBD5E1;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===== EXACT HOVER STATE (Matching user's cropped screenshot) =====
   - Sharp 1px solid crimson perimeter border
   - Top-left ambient red atmospheric glow inside and outside
   - Grounded baseline (no translateY jump)
   - Luminous red icon glow
*/
.problem-card:hover {
  border-color: #DA3D3D;
  background:
    radial-gradient(300px circle at 15% 15%, rgba(218, 61, 61, 0.12) 0%, transparent 70%),
    #11141B;
  box-shadow:
    0 0 20px rgba(218, 61, 61, 0.32),
    0 0 45px rgba(218, 61, 61, 0.12),
    inset 0 0 16px rgba(218, 61, 61, 0.04);
}

.problem-card:hover .problem-card__icon {
  background: rgba(218, 61, 61, 0.12);
  border-color: rgba(218, 61, 61, 0.45);
  box-shadow: 0 0 18px rgba(218, 61, 61, 0.4);
}

.problem-card:hover .problem-card__index {
  color: #94A3B8;
}

.problem-card:hover .status-dot {
  box-shadow: 0 0 10px #10B981, 0 0 18px rgba(16, 185, 129, 0.6);
}


/* =====================================================================
   ===== SECTION 05: CORE SERVICES (LIGHT / WHITE) =====
   ===================================================================== */

/* ----- Shared additions: section header pattern (reused by later sections) ----- */
.section-head {
  display: grid;
  gap: 20px;
}

.section-title {
  max-width: 20ch;
  margin-top: 18px;
  font-size: clamp(1.875rem, 1.25rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
}

.section-lede {
  max-width: 460px;
  color: var(--slate-500);
  font-size: 1rem;
  line-height: 1.7;
}

@media (min-width: 992px) {
  .section-head {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: end;
    gap: 48px;
  }

  .section-lede {
    justify-self: end;
    padding-bottom: 6px;
  }
}


/* ----- 05: Shell ----- */
.services-section {
  border-block: 1px solid #E2E8F0;
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 50%, #F8FAFC 100%);
}


/* ----- 05b: Service cards ----- */
.services-grid {
  display: grid;
  gap: 20px;
  margin-top: clamp(40px, 5vw, 64px);
}

@media (min-width: 640px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.services-grid > li {
  display: flex;
}

/* Base Service Card — Glossy Crystal Glass Finish */
.service-card {
  --card-accent: var(--accent);
  --card-accent-light: #FF6B6B;
  --card-spotlight: rgba(218, 61, 61, 0.13);
  --card-glow: rgba(218, 61, 61, 0.05);
  --card-bg-tint: rgba(218, 61, 61, 0.04);
  --mx: 50%;
  --my: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 26px 24px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow:
    0 4px 20px rgba(9, 30, 62, 0.04),
    0 1px 3px rgba(9, 30, 62, 0.02),
    inset 0 1.5px 0.5px #FFFFFF;
  transition:
    opacity 0.7s var(--ease) calc(var(--d, 0) * 80ms),
    translate 0.9s var(--ease) calc(var(--d, 0) * 80ms),
    transform 0.35s var(--ease),
    border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

/* Individual Card Color Themes — Light, Soft & Elegant */
/* 01: Digital Marketing & SEO (Electric Blue) */
.services-grid > li:nth-child(1) .service-card {
  --card-accent: #2563EB;
  --card-accent-light: #60A5FA;
  --card-spotlight: rgba(37, 99, 235, 0.13);
  --card-glow: rgba(37, 99, 235, 0.05);
  --card-bg-tint: rgba(37, 99, 235, 0.04);
}

/* 02: Web Design & Development (Ghati Crimson Flagship) */
.services-grid > li:nth-child(2) .service-card {
  --card-accent: #DA3D3D;
  --card-accent-light: #FF6B6B;
  --card-spotlight: rgba(218, 61, 61, 0.13);
  --card-glow: rgba(218, 61, 61, 0.05);
  --card-bg-tint: rgba(218, 61, 61, 0.04);
}

/* 03: Branding & Creative (Royal Violet) */
.services-grid > li:nth-child(3) .service-card {
  --card-accent: #7C3AED;
  --card-accent-light: #A78BFA;
  --card-spotlight: rgba(124, 58, 237, 0.13);
  --card-glow: rgba(124, 58, 237, 0.05);
  --card-bg-tint: rgba(124, 58, 237, 0.04);
}

/* 04: Lead Generation & Ads (Sunset Amber / Orange) */
.services-grid > li:nth-child(4) .service-card {
  --card-accent: #EA580C;
  --card-accent-light: #FB923C;
  --card-spotlight: rgba(234, 88, 12, 0.13);
  --card-glow: rgba(234, 88, 12, 0.05);
  --card-bg-tint: rgba(234, 88, 12, 0.04);
}

/* 05: AI & Automation (Cyber Emerald / Teal) */
.services-grid > li:nth-child(5) .service-card {
  --card-accent: #059669;
  --card-accent-light: #34D399;
  --card-spotlight: rgba(5, 150, 105, 0.13);
  --card-glow: rgba(5, 150, 105, 0.05);
  --card-bg-tint: rgba(5, 150, 105, 0.04);
}

/* 06: Mobile App Development (Electric Cyan / Sky) */
.services-grid > li:nth-child(6) .service-card {
  --card-accent: #0284C7;
  --card-accent-light: #38BDF8;
  --card-spotlight: rgba(2, 132, 199, 0.13);
  --card-glow: rgba(2, 132, 199, 0.05);
  --card-bg-tint: rgba(2, 132, 199, 0.04);
}

/* Content stays firmly above background & spotlight layers */
.service-card > :not(.service-card__spotlight) {
  position: relative;
  z-index: 3;
}

/* Inner Glossy Glass Panel:
   1. Diagonal crystal sheen reflection across the face
   2. Specular rim bevels
*/
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background:
    /* Diagonal Specular Sheen — crystal glass gloss highlight */
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.82) 32%,
      rgba(255, 255, 255, 0.58) 48%,
      rgba(255, 255, 255, 0.76) 65%,
      rgba(246, 248, 252, 0.9) 100%
    );
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1.5px 0.5px #FFFFFF,
    inset 1px 0 0.5px rgba(255, 255, 255, 0.85),
    inset 0 -1px 1px rgba(0, 0, 0, 0.02);
  z-index: 0;
  pointer-events: none;
}

/* Dedicated Active Cursor Spotlight:
   - Light, soft, wide-spread diffused illumination
   - Smoothly reveals only under the cursor on hover
*/
.service-card__spotlight {
  position: absolute;
  inset: 0;
  border-radius: 15px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  background:
    /* Delicate soft white sheen under cursor */
    radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.5) 0%, transparent 65%),
    /* Light & widely spread colored ambient illumination */
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--card-spotlight) 0%, var(--card-glow) 50%, transparent 80%);
}

.service-card:hover .service-card__spotlight {
  opacity: 1;
}

.service-card:hover {
  border-color: var(--card-accent);
  box-shadow:
    0 16px 36px -8px rgba(9, 30, 62, 0.08),
    0 2px 6px rgba(9, 30, 62, 0.02),
    inset 0 1.5px 0.5px #FFFFFF;
  transform: translateY(-5px);
}

/* Keyboard focus on the title link highlights the whole card */
.service-card:has(.service-title a:focus-visible) {
  outline: 2px solid var(--card-accent);
  outline-offset: 3px;
}

.service-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.service-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.service-index {
  color: #64748B;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-mono);
  transition: color 0.25s var(--ease);
}

.service-badge {
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  background: var(--card-accent);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* Icon Box with matching glass background */
.service-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--card-bg-tint) 0%, rgba(255, 255, 255, 0.9) 100%);
  border: 1px solid var(--card-glow);
  box-shadow: 0 4px 10px var(--card-bg-tint);
  color: var(--card-accent);
  font-size: 20px;
  transition: all 0.3s var(--ease);
}

/* Icon Smooth 360° Rotation on Hover */
.service-icon .icon {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-card:hover .service-icon {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--card-accent);
  color: var(--card-accent);
  box-shadow: 0 4px 14px var(--card-spotlight);
  transform: translateY(-2px);
}

.service-card:hover .service-icon .icon {
  transform: rotate(360deg) scale(1.1);
}

.service-card:hover .service-index {
  color: var(--card-accent);
}

.service-title {
  margin-top: 18px;
  margin-bottom: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.service-title a {
  color: var(--primary);
  text-decoration: none;
  outline: none;
  transition: color 0.2s ease;
}

.service-card:hover .service-title a {
  color: var(--primary);
}

/* Stretched link — the whole card is clickable */
.service-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.service-desc {
  margin-top: 10px;
  margin-bottom: 0;
  color: #64748B;
  font-size: 0.885rem;
  line-height: 1.6;
}

.service-tags {
  position: relative;
  z-index: 4;                /* above stretched link so pills can be hovered */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}

.service-tags span {
  padding: 4px 9px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #475569;
  font-size: 0.73rem;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 1px 3px rgba(9, 30, 62, 0.03), inset 0 1px 0 #FFFFFF;
  transition: all 0.2s var(--ease);
}

.service-tags span:hover {
  border-color: var(--card-accent);
  background: var(--card-bg-tint);
  color: var(--card-accent);
  transform: translateY(-1px);
}

.service-cta {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #EAEFF5;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.cta-arrow {
  display: inline-block;
  color: var(--card-accent);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.25s var(--ease);
}

.service-card:hover .service-cta {
  color: var(--card-accent);
}

.service-card:hover .cta-arrow,
.service-cta:hover .cta-arrow {
  transform: translateX(6px);
}


/* ----- 05c: Conversion banner (navy, APS style) ----- */
.services-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-top: clamp(40px, 5vw, 56px);
  padding: 32px 28px;
  border-radius: 16px;
  background:
    radial-gradient(520px circle at 100% 0%, rgba(218, 61, 61, 0.22), transparent 60%),
    linear-gradient(120deg, var(--primary) 0%, var(--navy-700) 100%);
  box-shadow: 0 20px 40px -16px rgba(9, 30, 62, 0.35);
  transition: opacity 0.8s var(--ease), translate 0.9s var(--ease);
}

.services-banner__title {
  max-width: 28ch;
  margin-top: 10px;
  color: var(--white);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
}

@media (min-width: 768px) {
  .services-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 36px 40px;
  }
}

@media (max-width: 575.98px) {
  .services-banner .btn {
    width: 100%;
  }
}


/* =====================================================================
   ===== SECTION 06: CASE STUDIES (DARK STAGE — NAVY, 3D SHOWCASE) =====
   ===================================================================== */

/* ----- Shared additions: dark-section utilities ----- */
.section--dark {
  color: var(--text);
}

.text-light      { color: var(--white); }
.text-muted-dark { color: var(--text-muted); }

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

.btn-outline-light:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}


/* ----- 06: Shell ----- */
.case-studies {
  --sx: 50%;
  --sy: 30%;
  isolation: isolate;
  overflow: clip;
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary) 100%);
}

/* Cursor spotlight — faint red light that follows the pointer across the stage */
.case-studies::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at var(--sx) var(--sy), rgba(218, 61, 61, 0.13), rgba(21, 54, 95, 0.25) 40%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}

.case-studies.is-spotlit::before {
  opacity: 1;
}


/* ----- 06a: Header ----- */
.cases-head {
  display: grid;
  justify-items: center;
  gap: 24px;
  text-align: center;
}

.cases-eyebrow {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cases-title {
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
}

.cases-sub {
  margin-top: 8px;
  color: #94A3B8;
  font-size: 15px;
}

.btn-cases-all {
  min-height: 0;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
}

@media (min-width: 992px) {
  .cases-head {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .cases-head__text {
    grid-column: 2;
  }

  .btn-cases-all {
    grid-column: 3;
    justify-self: end;
    align-self: start;
    margin-top: 6px;
  }
}


/* ----- 06b: Filter pills ----- */
.cases-filters {
  display: flex;
  gap: 8px;
  margin: clamp(28px, 4vw, 40px) calc(var(--gutter) * -1) 0;
  padding: 2px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}

.cases-filters::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .cases-filters {
    flex-wrap: wrap;
    justify-content: center;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

.filter-btn {
  flex-shrink: 0;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: #CBD5E1;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  transition: var(--transition);
}

.filter-btn:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.filter-btn.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}


/* ----- 06c: 3D showcase cards ----- */
.case-grid {
  display: grid;
  gap: 24px;
  margin-top: clamp(32px, 4vw, 48px);
  perspective: 1200px;
}

@media (min-width: 640px) and (max-width: 991px) {
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* <li> owns reveal + filter transitions; the card owns the tilt */
.case-grid > li {
  display: flex;
  transition:
    opacity 0.7s var(--ease) calc(var(--d, 0) * 90ms),
    translate 0.9s var(--ease) calc(var(--d, 0) * 90ms),
    scale 0.25s var(--ease);
}

.case-grid > li.is-fading {
  opacity: 0;
  scale: 0.96;
  transition-delay: 0s;
}

.case-grid > li.is-hidden {
  display: none;
}

.case-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 16px;
  background: #0E131E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 36px rgba(3, 10, 24, 0.5);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.45s var(--ease), box-shadow 0.45s ease, border-color 0.35s ease;
}

.case-card:hover {
  border-color: rgba(218, 61, 61, 0.4);
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.6), 0 0 24px rgba(218, 61, 61, 0.16);
}

/* Card glare — soft light tracking the cursor */
.case-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.18), transparent 60%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}

.case-card:hover::after {
  opacity: 1;
}

.case-card:has(.case-card__link:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ----- Logo Showcase Stage ----- */
.case-card__logo-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  padding: 20px 24px;
  background: radial-gradient(circle at 50% 50%, rgba(218, 61, 61, 0.07) 0%, rgba(11, 15, 24, 0.95) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.case-card__logo-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

/* Floating category pill */
.case-card__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(14, 20, 32, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #E2E8F0;
}

.case-card__badge .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #DA3D3D;
  box-shadow: 0 0 6px rgba(218, 61, 61, 0.8);
}

/* Floating scope/location tag */
.case-card__scope {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  color: #64748B;
  letter-spacing: 0.04em;
}

/* Elevated White Emblem Plate */
.case-card__logo-plate {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 220px;
  height: 84px;
  padding: 12px 20px;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease;
}

.case-card:hover .case-card__logo-plate {
  transform: scale(1.04);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
}

.case-card__logo {
  max-height: 58px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}

/* ----- Card Body ----- */
.case-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
  background: #0E131E;
  text-align: left;
}

.case-card__service {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #94A3B8;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.case-card__service .service-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.case-card__title {
  margin: 0 0 12px;
  color: #FFFFFF;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}

/* Metric Banner */
.case-card__metric-box {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: rgba(218, 61, 61, 0.08);
  border: 1px solid rgba(218, 61, 61, 0.22);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.case-card:hover .case-card__metric-box {
  background: rgba(218, 61, 61, 0.14);
  border-color: rgba(218, 61, 61, 0.4);
}

.case-card__metric-val {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  color: #DA3D3D;
  line-height: 1;
  text-shadow: 0 0 14px rgba(218, 61, 61, 0.35);
}

.case-card__metric-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: #CBD5E1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.case-card__desc {
  margin: 0 0 18px;
  color: #94A3B8;
  font-size: 13.5px;
  line-height: 1.55;
  flex: 1;
}

/* Footer Link */
.case-card__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  outline: none;
  transition: color 0.25s ease;
}

.case-card:hover .case-card__link {
  color: #DA3D3D;
}

.case-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

.case-card__link .btn-arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

.case-card:hover .case-card__link .btn-arrow {
  transform: translateX(4px);
}

/* Empty state */
.cases-empty {
  margin-top: 32px;
  padding: 28px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  color: var(--text-muted);
  font-size: 15px;
  text-align: center;
}

.cases-empty a {
  color: var(--white);
  font-weight: 600;
  white-space: nowrap;
}

.cases-empty a:hover {
  color: var(--accent);
}


/* =====================================================================
   ===== SECTION 07: TESTIMONIALS (LIGHT) =====
   ===================================================================== */

/* ----- Shared additions ----- */
.text-red      { color: var(--accent); }
.font-semibold { font-weight: 600; }

.stars {
  display: inline-flex;
  gap: 2px;
  color: #F59E0B;
  font-size: 16px;
}


/* ----- 07: Shell ----- */
.testimonials.section {
  padding-block: 96px;
}

.testimonials {
  background:
    radial-gradient(circle at 50% 0%, rgba(218, 61, 61, 0.025) 0%, transparent 60%),
    #F8FAFC;
  padding-block: clamp(70px, 8vw, 100px);
}


/* ----- 07a: Header with Controls ----- */
.testimonials-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(36px, 5vw, 48px);
}

.testimonials-title {
  margin: 0 0 8px;
  color: var(--primary);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}

.testimonials-sub {
  max-width: 600px;
  margin: 0;
  color: var(--slate-500);
  font-size: 16px;
}

.testimonials-nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.testimonials-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 2px 10px rgba(9, 30, 62, 0.04);
  cursor: pointer;
  transition: all 0.25s var(--ease);
}

.testimonials-nav-btn:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(9, 30, 62, 0.15);
  transform: scale(1.05);
}

.testimonials-nav-btn:active {
  transform: scale(0.95);
}


/* ----- 07b: Showcase (3-Card Carousel + 1 Google Card) ----- */
.testimonials-showcase {
  display: grid;
  gap: 20px;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .testimonials-showcase {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }
}

@media (max-width: 1023px) {
  .testimonials-showcase {
    grid-template-columns: 1fr;
  }
}

.testimonials-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 16px;
  cursor: grab;
}

.testimonials-carousel:active {
  cursor: grabbing;
}

.testimonials-track {
  display: flex;
  gap: 20px;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.testimonials-track .testimonial-card {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 1023px) and (min-width: 600px) {
  .testimonials-track .testimonial-card {
    flex: 0 0 calc((100% - 20px) / 2);
  }
}

@media (max-width: 599px) {
  .testimonials-track .testimonial-card {
    flex: 0 0 100%;
  }
}

.testimonial-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 24px;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 4px 20px rgba(9, 30, 62, 0.04);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.testimonial-card:hover {
  border-color: rgba(218, 61, 61, 0.25);
  box-shadow: 0 12px 30px rgba(9, 30, 62, 0.09);
  transform: translateY(-4px);
}

.testimonial-stars {
  color: #F59E0B;
  font-size: 17px;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 14px;
  user-select: none;
}

.testimonial-card__quote {
  flex: 1;
  margin: 0;
}

.testimonial-card__quote p {
  color: #334155;
  font-size: 14px;
  font-style: normal;
  line-height: 1.6;
  font-weight: 400;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* No photo uploaded yet, so the card shows the client's initial. The originals
   were stock pictures of strangers captioned as clients — a false claim about
   real people, and worse than an honest monogram. */
.testimonial-avatar--initials {
  display: grid;
  place-items: center;
  background: var(--light-gray);
  color: var(--primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.testimonial-author-meta {
  display: flex;
  flex-direction: column;
}

.testimonial-card__name {
  display: block;
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.testimonial-card__role {
  display: block;
  margin-top: 1px;
  color: var(--slate-500);
  font-size: 12px;
}


/* ----- 07c: Google Review Card (Always Visible) ----- */
.testimonial-card--google {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 26px 22px;
  border: 1px solid #E2E8F0;
  background: var(--white);
}

.google-score-box {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  margin-bottom: 24px;
}

.google-g-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.google-score-meta {
  display: flex;
  flex-direction: column;
}

.google-score-num {
  color: var(--primary);
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.google-score-sub {
  margin-top: 4px;
  color: var(--slate-500);
  font-size: 11.5px;
  font-weight: 500;
}

.btn-google-reviews {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(218, 61, 61, 0.28);
  transition: background-color 0.25s var(--ease), transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
}

.btn-google-reviews:hover {
  background: var(--accent-hover);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(218, 61, 61, 0.38);
  transform: translateY(-2px);
}





/* =====================================================================
   ===== SECTION 08: PORTFOLIO & GALLERY (LIGHT) =====
   ===================================================================== */

/* ----- Shared additions ----- */
.btn-outline-dark {
  border: 1px solid #CBD5E1;
  color: var(--primary);
}

.btn-outline-dark:hover {
  border-color: var(--accent);
  background: rgba(218, 61, 61, 0.04);
  color: var(--accent);
  transform: translateY(-2px);
}


/* ----- 08: Shell ----- */
.portfolio-section {
  border-top: 1px solid var(--light-border);
  background: var(--white);
}


/* ----- 08a: Header ----- */
.portfolio-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
}

.portfolio-eyebrow {
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portfolio-title {
  margin: 0;
  color: var(--primary);
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
}

.btn-portfolio-all {
  min-height: 0;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s var(--ease);
}


/* ----- 08b: Filters ----- */
.portfolio-filters {
  display: flex;
  gap: 6px;
  margin: 28px calc(var(--gutter) * -1) 0;
  padding: 2px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}

.portfolio-filters::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .portfolio-filters {
    flex-wrap: wrap;
    justify-content: center;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

.portfolio-filter-btn {
  flex-shrink: 0;
  padding: 7px 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--slate-500);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.portfolio-filter-btn:hover {
  background: var(--light-bg-alt);
  color: var(--primary);
}

.portfolio-filter-btn.is-active {
  padding-inline: 20px;
  background: var(--accent);
  color: var(--white);
  font-weight: 600;
}


/* ----- 08c: Showcase grid — responsive: 1 col on mobile, 2 cols tablet, 4 cols desktop ----- */
ul.portfolio-grid {                        /* beats the ul[role=list] padding reset */
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  overflow: visible;
}

@media (min-width: 576px) {
  ul.portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 992px) {
  ul.portfolio-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

/* <li> owns reveal + filter transitions */
.portfolio-item {
  display: flex;
  transition:
    opacity 0.7s var(--ease) calc(var(--d, 0) * 80ms),
    translate 0.9s var(--ease) calc(var(--d, 0) * 80ms),
    scale 0.25s var(--ease);
}

.portfolio-item.is-fading {
  opacity: 0;
  scale: 0.95;
  transition-delay: 0s;
}

.portfolio-item.is-hidden {
  display: none;
}

.portfolio-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 11;                   /* landscape-friendly on phones */
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  background: var(--primary);
  box-shadow: 0 4px 20px rgba(9, 30, 62, 0.06);
}

@media (min-width: 576px) {
  .portfolio-card {
    aspect-ratio: 4 / 5;                   /* portrait on tablet and desktop */
  }
}

.portfolio-card:has(.portfolio-card__link:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.portfolio-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.portfolio-card:hover .portfolio-card__img,
.portfolio-card:focus-within .portfolio-card__img {
  transform: scale(1.08);
}


/* ----- 08d: Card drawer / info overlay ----- */
/* Default for mobile and tablets (< 992px): permanently visible bottom overlay */
.portfolio-card__drawer {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 16px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(0deg, rgba(9, 30, 62, 0.96) 0%, rgba(9, 30, 62, 0.82) 75%, transparent 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: left;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.3s ease;
}

/* Red accent streak on the drawer */
.portfolio-card__drawer::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: auto;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #DA3D3D, #FF6B6B);
}

/* On desktop (>= 992px): signature right-side hover slide drawer */
@media (min-width: 992px) {
  .portfolio-card__drawer {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 76%;
    padding: 28px 22px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(270deg, rgba(9, 30, 62, 0.94) 0%, rgba(9, 30, 62, 0.82) 100%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateX(101%);
    pointer-events: none;
  }

  .portfolio-card__drawer::before {
    top: 0;
    bottom: 0;
    left: -1px;
    right: auto;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, #DA3D3D, #FF6B6B);
  }

  .portfolio-card:hover .portfolio-card__drawer,
  .portfolio-card:focus-within .portfolio-card__drawer {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
}

.portfolio-badge {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 3px 9px;
  border: 1px solid rgba(218, 61, 61, 0.4);
  border-radius: 9999px;
  background: rgba(218, 61, 61, 0.2);
  color: #FF8080;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.portfolio-card .portfolio-card__title {   /* beats .section--light h3 */
  margin: 0 0 6px;
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

@media (min-width: 992px) {
  .portfolio-card .portfolio-card__title {
    font-size: 17px;
    margin-bottom: 8px;
  }
}

.portfolio-card__desc {
  margin: 0 0 12px;
  color: #CBD5E1;
  font-size: 12.5px;
  line-height: 1.5;
}

@media (min-width: 992px) {
  .portfolio-card__desc {
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.55;
  }
}

.portfolio-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #FF6B6B;
  font-size: 13px;
  font-weight: 700;
  outline: none;
  transition: transform 0.2s ease;
}

/* Stretched link — the whole card opens the project */
.portfolio-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.portfolio-card__link .arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.portfolio-card:hover .portfolio-card__link .arrow {
  transform: translateX(4px);
}



/* =====================================================================
   ===== SECTION 09: BLOG & INSIGHTS (LIGHT) =====
   ===================================================================== */

/* ----- 09: Shell ----- */
.blog-section {
  border-block: 1px solid var(--light-border);
  background: var(--white);
}


/* ----- 09a: Header ----- */
.blog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
}

.blog-title {
  margin: 0 0 8px;
  color: var(--primary);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
}

.blog-sub {
  margin: 0;
  color: var(--slate-500);
  font-size: 16px;
}

.btn-blog-all {
  min-height: 0;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s var(--ease);
}


/* ----- 09b: Blog cards ----- */
ul.blog-grid {
  display: grid;
  gap: 24px;
  margin-top: clamp(32px, 4vw, 48px);
}

@media (min-width: 768px) {
  ul.blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.blog-grid > li {
  display: flex;
  transition:
    opacity 0.7s var(--ease) calc(var(--d, 0) * 90ms),
    translate 0.9s var(--ease) calc(var(--d, 0) * 90ms);
}

.blog-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 4px 20px rgba(9, 30, 62, 0.04);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.blog-card:hover {
  border-color: rgba(218, 61, 61, 0.3);
  box-shadow: 0 16px 36px rgba(9, 30, 62, 0.08);
  transform: translateY(-5px);
}

.blog-card:has(.blog-card__title a:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.blog-card__media {
  position: relative;
  overflow: hidden;
  height: 210px;
  background: var(--light-bg-alt);
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-card__media img {
  transform: scale(1.06);
}

.blog-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
}

.blog-card .blog-card__title {             /* beats .section--light h3 */
  margin: 0 0 12px;
  color: var(--primary);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.blog-card__title a {
  color: inherit;
  outline: none;
}

/* Stretched link — the whole card opens the article */
.blog-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.blog-card:hover .blog-card__title {
  color: var(--accent);
}

.blog-card__meta {
  margin: 0 0 16px;
  color: var(--slate-500);
  font-size: 13px;
}

.sep-dot {
  margin-inline: 4px;
  color: var(--slate-400);
}

.blog-card__category {
  color: var(--primary);
  font-weight: 600;
}

.blog-card__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.blog-card__link .arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

.blog-card:hover .blog-card__link .arrow {
  transform: translateX(4px);
}



/* =====================================================================
   ===== SECTION 10: GET IN TOUCH — "Let's Build Something Great Together" =====
   ===================================================================== */

/* ----- 10: Shell ----- */
.audit-section.section {
  padding-block: clamp(70px, 8vw, 96px);
}

.audit-section {
  overflow: clip;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 18% 50%, rgba(218, 61, 61, 0.22) 0%, transparent 65%),
    linear-gradient(135deg, var(--primary-dark) 0%, #1B1733 50%, var(--primary) 100%);
}

.contact-grid {
  display: grid;
  gap: 36px;
  align-items: start;
}

@media (min-width: 992px) {
  .contact-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    gap: clamp(40px, 5vw, 64px);
  }
}


/* ----- 10a: Left Column — Contact Info & Offices ----- */
.badge-pill-outline {
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 14px;
  border: 1px solid rgba(218, 61, 61, 0.35);
  border-radius: 9999px;
  background: rgba(218, 61, 61, 0.08);
  color: #FF6B6B;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-title {
  font-family: var(--font-serif);
  margin: 0 0 16px;
  color: var(--white);
  font-size: clamp(2.3rem, 3.8vw, 3.4rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.contact-title .text-accent {
  color: #FF5A5A;
}

.contact-sub {
  max-width: 480px;
  margin: 0 0 32px;
  color: #94A3B8;
  font-size: 15.5px;
  line-height: 1.6;
}

/* Call Card */
.contact-call-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: #0C1729;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.contact-call-card:hover {
  border-color: rgba(218, 61, 61, 0.45);
  transform: translateY(-2px);
}

.contact-call-card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent);
  box-shadow: 0 8px 20px rgba(218, 61, 61, 0.35);
  color: var(--white);
}

.contact-call-card__label {
  display: block;
  color: #94A3B8;
  font-size: 12.5px;
  font-weight: 500;
}

.contact-call-card__num {
  display: block;
  margin-top: 2px;
  color: var(--white);
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.contact-call-card__num:hover {
  color: #FF6B6B;
}

/* Office Cards */
.contact-office-card {
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: #0C1729;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.contact-office-card:hover {
  border-color: rgba(218, 61, 61, 0.4);
  transform: translateY(-2px);
}

.contact-office-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-office-card__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  color: #CBD5E1;
  font-size: 13.5px;
  line-height: 1.5;
}

.contact-office-card__row:last-child {
  margin-bottom: 0;
}

.contact-office-card__row svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #64748B;
}

.contact-office-card__row a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.contact-office-card__row a:hover {
  color: var(--accent);
}


/* ----- 10b: Right Column — Send Us a Message Form ----- */
.contact-form-wrap {
  padding: clamp(28px, 4vw, 44px);
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.contact-form__title {
  font-family: var(--font-serif);
  margin: 0 0 6px;
  color: var(--primary);
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.contact-form__sub {
  margin: 0 0 24px;
  color: var(--slate-500);
  font-size: 14px;
}

.contact-form {
  display: grid;
  gap: 14px;
}

.form-row {
  display: grid;
  gap: 14px;
}

@media (min-width: 576px) {
  .form-row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
}

.form-control {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #F8FAFC;
  color: var(--primary);
  font-size: 14px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.form-control::placeholder {
  color: #94A3B8;
}

.form-control:focus {
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(218, 61, 61, 0.14);
  outline: none;
}

.form-textarea {
  min-height: 100px;
  height: auto;
  padding: 12px 14px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 16px;
  cursor: pointer;
  padding-right: 40px;
}

.form-select:invalid {
  color: #94A3B8;
}

.form-checkbox {
  margin-top: 4px;
  margin-bottom: 8px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--slate-500);
  font-size: 12.5px;
  cursor: pointer;
  line-height: 1.4;
}

.checkbox-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.btn-submit-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  min-height: 0;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  box-shadow: 0 6px 20px rgba(218, 61, 61, 0.35);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.btn-submit-message:hover {
  background: var(--accent-hover);
  box-shadow: 0 8px 24px rgba(218, 61, 61, 0.45);
  transform: translateY(-2px);
}

.btn-submit-message svg {
  transition: transform 0.2s ease;
}

.btn-submit-message:hover svg {
  transform: translateX(4px) translateY(-2px);
}

.btn-submit-message[disabled] {
  cursor: progress;
  opacity: 0.85;
  transform: none;
}

.audit-success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 16px;
  border: 1px solid #A7F3D0;
  border-radius: 8px;
  background: #ECFDF5;
  color: #047857;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  animation: fadeUp 0.35s var(--ease);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
}

.audit-form__error {
  margin: 0;
  color: #B91C1C;
  font-size: 13px;
  font-weight: 600;
}




/* ===================================================================
   ===== SECTION 11: AGENCY MASTER FOOTER =====
   Deepest navy on the page (still navy — never black), crimson glow top-right.
   =================================================================== */
.site-footer {
  position: relative;
  padding: clamp(60px, 7vw, 84px) 0 32px;
  color: var(--text-muted);
  background:
    radial-gradient(circle at 85% 0%, rgba(218, 61, 61, 0.08) 0%, transparent 50%),
    var(--primary-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 15px;
  line-height: 1.6;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 44px clamp(32px, 4vw, 56px);
  }

  .footer-col--brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1025px) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1.2fr 1fr 1.4fr;
    gap: clamp(32px, 4vw, 56px);
  }

  .footer-col--brand {
    grid-column: auto;
  }
}

/* ----- 11a: Brand & NAP ----- */
.footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s var(--ease);
}

.footer-logo:hover {
  opacity: 0.85;
}

.footer-logo img {
  width: auto;
  height: 48px;
  object-fit: contain;
}

.footer-tagline {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #FF6B6B;
}

.footer-desc {
  margin: 14px 0 0;
  max-width: 44ch;
  font-size: 14px;
  color: var(--text-muted);
}

.footer-nap {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  font-style: normal;
  font-size: 14px;
}

.footer-nap__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #CBD5E1;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-nap__item .icon {
  flex: none;
  margin-top: 3px;
  font-size: 15px;
  color: var(--accent);
}

a.footer-nap__item:hover {
  color: #FFFFFF;
}

ul.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.footer-socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: #CBD5E1;
  font-size: 16px;
  transition: all 0.25s ease;
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px -6px rgba(218, 61, 61, 0.55);
}

/* ----- 11b–d: Link columns ----- */
.site-footer .footer-col__title {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #FFFFFF;
}

ul.footer-links {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  position: relative;
  display: inline-block;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

/* Red lead-in dash that grows on hover */
.footer-links a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  width: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: #FFFFFF;
  transform: translateX(4px);
}

.footer-links a:hover::before,
.footer-links a:focus-visible::before {
  opacity: 1;
  transform: translateY(-50%) scaleX(1);
}

/* ----- 11e: Newsletter ----- */
.footer-newsletter__desc {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--text-muted);
}

.footer-newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-newsletter__input {
  flex: 1 1 170px;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  font: inherit;
  font-size: 14px;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.footer-newsletter__input::placeholder {
  color: var(--gray-500);
}

.footer-newsletter__input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(218, 61, 61, 0.2);
}

.footer-newsletter-form.was-validated .footer-newsletter__input:invalid {
  border-color: #FF6B6B;
}

.footer-newsletter__btn {
  flex: 1 0 auto;
  height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
}

.footer-newsletter__btn .icon {
  font-size: 15px;
}

.footer-newsletter__status {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #4ADE80;
}

.footer-newsletter__status:empty {
  display: none;
}

.footer-newsletter__status.is-error {
  color: #FF6B6B;
}

.footer-newsletter__note {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--gray-500);
}

/* ----- 11f: Legal bar ----- */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: var(--slate-500);
}

.footer-bottom__copy {
  margin: 0;
}

.footer-bottom__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.footer-bottom__links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-bottom__links a:hover,
.footer-bottom__links a:focus-visible {
  color: #FFFFFF;
}

.footer-bottom .sep {
  color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 767.98px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-links a,
  .footer-socials a {
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .footer-links a:hover,
  .footer-links a:focus-visible,
  .footer-socials a:hover,
  .footer-socials a:focus-visible {
    transform: none;
  }
}

.footer-bottom__made {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-flag {
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}



/* ===================================================================
   ===== FLOATING ACTIONS: WhatsApp FAB + Scroll-to-top progress ring =====
   =================================================================== */
.fab-whatsapp,
.fab-top {
  position: fixed;
  bottom: 24px;
  z-index: 990;               /* below drawer overlay (998) */
  -webkit-tap-highlight-color: transparent;
}

/* ----- Shared hover tooltip (navy card, never black) ----- */
.fab-tip {
  position: absolute;
  top: 50%;
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(9, 30, 62, 0.96);
  box-shadow: 0 14px 32px -12px rgba(9, 30, 62, 0.6);
  color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.fab-tip::before {             /* little pointer */
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  background: inherit;
  border: inherit;
  transform: translateY(-50%) rotate(45deg);
}

.fab-tip--right {
  left: calc(100% + 16px);
  transform: translate(-8px, -50%);
}

.fab-tip--right::before {
  left: -6px;
  border-width: 0 0 1px 1px;
}

.fab-tip--left {
  right: calc(100% + 16px);
  transform: translate(8px, -50%);
}

.fab-tip--left::before {
  right: -6px;
  border-width: 1px 1px 0 0;
}

.fab-tip__title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.fab-tip__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

/* no flex gap here — keeps "62% read" tight */
.fab-tip__meta--mono {
  gap: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

.fab-tip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.2);
}

@media (hover: hover) and (pointer: fine) {
  .fab-whatsapp:hover .fab-tip,
  .fab-top:hover .fab-tip {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

.fab-whatsapp:focus-visible .fab-tip,
.fab-top:focus-visible .fab-tip {
  opacity: 1;
  transform: translate(0, -50%);
}

/* ----- WhatsApp (bottom-left) ----- */
.fab-whatsapp {
  left: 24px;
  display: none;              /* mobile uses the action bar */
  border-radius: 50%;
  text-decoration: none;
}

@media (min-width: 768px) {
  .fab-whatsapp {
    display: block;
    animation: fab-enter 0.6s 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

.fab-whatsapp__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2EE06F 0%, #1DA851 100%);
  color: #FFFFFF;
  font-size: 28px;
  box-shadow:
    0 12px 28px -8px rgba(29, 168, 81, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.fab-whatsapp__btn .icon {
  position: relative;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Soft sonar rings — two staggered pulses, then a pause */
.fab-whatsapp__ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.55);
  opacity: 0;
  animation: fab-ripple 4.5s ease-out infinite;
}

.fab-whatsapp__ripple--late {
  animation-delay: 0.45s;
}

.fab-whatsapp__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid #FFFFFF;
  border-radius: 999px;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.fab-whatsapp:hover .fab-whatsapp__btn,
.fab-whatsapp:focus-visible .fab-whatsapp__btn {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 18px 34px -10px rgba(29, 168, 81, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.fab-whatsapp:hover .fab-whatsapp__btn .icon {
  transform: rotate(-12deg) scale(1.06);
}

.fab-whatsapp:focus-visible {
  outline: 2px solid #25D366;
  outline-offset: 4px;
}

@keyframes fab-ripple {
  0%   { opacity: 0.9; transform: scale(1); }
  40%  { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(1.7); }
}

@keyframes fab-enter {
  from { opacity: 0; transform: translateY(20px) scale(0.8); }
  to   { opacity: 1; transform: none; }
}

/* ----- Scroll-to-top (bottom-right) ----- */
.fab-top {
  --ring: 157.08;             /* 2πr, r = 25 */
  right: 24px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(9, 30, 62, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -10px rgba(9, 30, 62, 0.55);
  color: #FFFFFF;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.85);
  transition:
    opacity 0.35s ease,
    visibility 0.35s,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s ease;
}

.fab-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.fab-top__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);   /* start at 12 o'clock */
  fill: none;
  stroke-width: 3;
}

.fab-top__track {
  stroke: rgba(255, 255, 255, 0.12);
}

.fab-top__progress {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: var(--ring);
  stroke-dashoffset: var(--ring);
  filter: drop-shadow(0 0 4px rgba(218, 61, 61, 0.55));
  transition: stroke-dashoffset 0.12s linear;
}

/* Two stacked arrows: on hover the first flies out the top, the second rises in */
.fab-top__arrow {
  position: relative;
  width: 20px;
  height: 20px;
  overflow: hidden;
  font-size: 20px;
}

.fab-top__arrow .icon {
  position: absolute;
  inset: 0;
  stroke-width: 2.4;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.fab-top__arrow .icon + .icon {
  transform: translateY(120%);
}

.fab-top:hover,
.fab-top:focus-visible {
  background: var(--navy-700);
}

.fab-top:hover .fab-top__arrow .icon:first-child,
.fab-top:focus-visible .fab-top__arrow .icon:first-child {
  transform: translateY(-120%);
}

.fab-top:hover .fab-top__arrow .icon + .icon,
.fab-top:focus-visible .fab-top__arrow .icon + .icon {
  transform: translateY(0);
}

.fab-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.fab-top:active {
  transform: scale(0.94);
}

/* Mobile: sit above the sticky action bar */
@media (max-width: 767.98px) {
  .fab-top {
    right: 16px;
    bottom: calc(64px + 16px + env(safe-area-inset-bottom));
    width: 50px;
    height: 50px;
  }
}

/* Hide both while the mobile drawer is open */
.is-drawer-open .fab-whatsapp,
.is-drawer-open .fab-top {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .service-card::before,
  .problem-card::before {
    animation: none;
  }

  .fab-whatsapp,
  .fab-whatsapp__ripple {
    animation: none;
  }

  .fab-top,
  .fab-top__arrow .icon,
  .fab-top__progress,
  .fab-whatsapp__btn,
  .fab-tip {
    transition-duration: 0.01ms;
  }
}


/* =====================================================================
   ===== SUB-PAGE HEADER (reusable: About, Services, Portfolio, …) =====
   Photo + navy tint + crimson glow. Type stays at full contrast.
   ===================================================================== */
.page-header {
  position: relative;
  isolation: isolate;
  padding: clamp(56px, 7vw, 92px) 0 clamp(56px, 6.5vw, 88px);
  background: var(--primary-dark);
  color: var(--white);
  overflow: clip;
}

.page-header__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* Parallax Scroll (docs/Effects.txt): the photo drifts slower than the page.
   Pre-scaled so the drift never uncovers an edge. --py is set by HeaderParallax. */
.page-header.has-parallax .page-header__media {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.12);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .page-header.has-parallax .page-header__media {
    transform: none;
  }
}

.page-header__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(0.85) contrast(1.05);
}

/* Navy tint: dark enough for AA text, light enough to keep the photo alive */
.page-header__tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 21, 43, 0.9) 0%, rgba(6, 21, 43, 0.72) 45%, rgba(9, 30, 62, 0.4) 100%),
    linear-gradient(180deg, rgba(6, 21, 43, 0.9) 0%, rgba(6, 21, 43, 0.28) 48%, rgba(6, 21, 43, 0.92) 100%);
}

.page-header__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 18%, rgba(218, 61, 61, 0.28) 0%, transparent 55%);
  mix-blend-mode: screen;
}

/* Hairline plinth: ties the hero into the next section instead of a hard cut */
.page-header__edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(218, 61, 61, 0.55) 22%, rgba(255, 255, 255, 0.16) 60%, transparent);
}

.page-header__inner {
  position: relative;
  display: grid;
  justify-items: start;
}

.page-header--center .page-header__inner {
  justify-items: center;
  text-align: center;
}

/* ----- Breadcrumbs ----- */
.breadcrumbs {
  margin-bottom: 22px;
}

ol.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full, 999px);
  background: rgba(9, 30, 62, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.breadcrumbs__item a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumbs__item a:hover,
.breadcrumbs__item a:focus-visible {
  color: var(--white);
}

.breadcrumbs__item [aria-current="page"] {
  color: var(--accent);
}

.breadcrumbs__sep {
  color: rgba(255, 255, 255, 0.24);
}

/* ----- Header type ----- */
.page-header__badge {
  margin-bottom: 14px;
}

.page-header__title {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(2.125rem, 1.3rem + 3.4vw, 3.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: var(--tracking-tight, -0.02em);
  color: var(--white);
  text-wrap: balance;
}

.page-header__sub {
  max-width: 62ch;
  margin: 20px 0 0;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.7;
  color: #CBD5E1;
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}


/* =====================================================================
   ===== ABOUT PAGE =====
   ===================================================================== */

/* ----- A1: Company story ----- */
.about-story__grid {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
}

@media (min-width: 992px) {
  .about-story__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }
}

.about-story__lede {
  margin: 22px 0 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--primary);
}

.about-story__text {
  margin: 16px 0 0;
  color: var(--slate-500);
  line-height: 1.75;
}

ul.about-story__points {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.about-story__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--primary);
}

.about-story__points .icon {
  flex: none;
  margin-top: 3px;
  font-size: 15px;
  color: var(--accent);
}

/* Media column: photo + floating badge + brand mark */
.about-story__media {
  position: relative;
  padding-bottom: 28px;
}

.about-story__figure {
  margin: 0;
  border: 1px solid var(--light-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 26px 60px -30px rgba(9, 30, 62, 0.55);
}

.about-story__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.about-story__badge {
  position: absolute;
  left: -8px;
  bottom: 44px;
  display: grid;
  gap: 2px;
  padding: 14px 20px;
  border-radius: 14px;
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 20px 40px -18px rgba(9, 30, 62, 0.65);
}

.about-story__badge-value {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1;
}

.about-story__badge-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.about-story__mark {
  position: absolute;
  right: 6px;
  bottom: -6px;
  display: grid;
  text-align: right;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--primary);
}

@media (max-width: 575.98px) {
  .about-story__badge {
    left: 0;
    bottom: 32px;
    padding: 11px 15px;
  }

  .about-story__mark {
    display: none;
  }
}

/* ----- A2: Founder & leadership ----- */
.about-team {
  background:
    radial-gradient(circle at 15% 0%, rgba(218, 61, 61, 0.1) 0%, transparent 48%),
    var(--primary);
}

.about-team .section-lede,
.about-journey .section-lede {
  color: var(--text-muted);
}

.about-founder {
  display: grid;
  gap: 28px;
  margin-top: 48px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: linear-gradient(140deg, rgba(14, 42, 82, 0.9) 0%, rgba(6, 21, 43, 0.9) 100%);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.6);
}

@media (min-width: 768px) {
  .about-founder {
    grid-template-columns: 148px minmax(0, 1fr);
    align-items: start;
    gap: 36px;
  }
}

.about-founder__portrait {
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border: 1px solid rgba(218, 61, 61, 0.45);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(218, 61, 61, 0.28) 0%, rgba(9, 30, 62, 0.9) 70%);
}

@media (min-width: 768px) {
  .about-founder__portrait {
    width: 148px;
    height: 148px;
  }
}

.about-founder__initials {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--white);
}

.about-founder__name {
  margin: 10px 0 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  color: var(--white);
}

.about-founder__quote {
  max-width: 62ch;
  margin: 16px 0 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #CBD5E1;
}

ul.about-founder__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.about-founder__facts li {
  display: grid;
  gap: 4px;
}

.about-founder__fact-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}

.about-founder__fact-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

ul.about-team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 16px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 992px) {
  ul.about-team__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.team-card {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.team-card:hover {
  border-color: rgba(218, 61, 61, 0.45);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-4px);
}

.team-card__avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(218, 61, 61, 0.14);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
}

.team-card__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
}

.team-card__role {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* ----- A3: Mission & values ----- */
.about-mission__top {
  display: grid;
  gap: 32px;
}

@media (min-width: 992px) {
  .about-mission__top {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 64px;
  }
}

.about-mission__statements {
  display: grid;
  gap: 18px;
}

.about-mission__statement {
  padding: 22px 24px;
  border: 1px solid var(--light-border);
  border-left: 3px solid var(--accent);
  border-radius: 0 14px 14px 0;
  background: var(--white);
  box-shadow: var(--shadow-soft, 0 10px 30px -18px rgba(9, 30, 62, 0.35));
}

.about-mission__statement p {
  margin: 8px 0 0;
  color: var(--slate-500);
  line-height: 1.7;
}

.about-mission__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

ul.about-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.value-card {
  position: relative;
  height: 100%;
  padding: 26px 24px 28px;
  border: 1px solid var(--light-border);
  border-radius: 18px;
  background: var(--white);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.value-card:hover {
  border-color: rgba(218, 61, 61, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 24px 46px -30px rgba(9, 30, 62, 0.5);
}

.value-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(218, 61, 61, 0.1);
  color: var(--accent);
  font-size: 21px;
}

.about-mission .value-card .value-card__title {
  margin: 18px 0 8px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--primary);
}

.value-card__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--slate-500);
}

.value-card__index {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #CBD5E1;
}

/* ----- A4: Milestones & metrics ----- */
.about-journey {
  background:
    radial-gradient(circle at 85% 8%, rgba(218, 61, 61, 0.12) 0%, transparent 50%),
    var(--primary-dark);
}

ol.journey {
  display: grid;
  gap: 0;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.journey__item {
  display: grid;
  gap: 8px;
  padding: 26px 0 26px 26px;
  border-left: 1px solid var(--line-strong);
}

@media (min-width: 768px) {
  .journey__item {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 32px;
    padding-left: 36px;
  }
}

.journey__item:first-child {
  padding-top: 0;
}

.journey__item:last-child {
  padding-bottom: 0;
}

/* Node on the spine */
.journey__marker {
  position: relative;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.journey__marker::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -33px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--primary-dark);
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  .journey__marker::before {
    left: -42px;
  }
}

.about-journey .journey__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
}

.journey__text {
  max-width: 68ch;
  margin: 8px 0 0;
  line-height: 1.7;
  color: var(--text-muted);
}

ul.about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(40px, 6vw, 64px) 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--line);
  list-style: none;
  overflow: hidden;
}

@media (min-width: 768px) {
  ul.about-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.about-stats li {
  display: grid;
  gap: 6px;
  padding: 26px 24px;
  background: rgba(9, 30, 62, 0.72);
}

.about-stats__value {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--white);
}

.about-stats__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ----- A5: Why work with us ----- */
ul.about-why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
  margin: clamp(36px, 5vw, 52px) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 992px) {
  ul.about-why__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.why-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--light-border);
  border-radius: 16px;
  background: var(--white);
  transition: border-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.why-card:hover {
  border-color: rgba(218, 61, 61, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -30px rgba(9, 30, 62, 0.5);
}

.why-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--white);
  font-size: 20px;
}

.about-why .why-card .why-card__title {
  margin: 2px 0 6px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--primary);
}

.why-card__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--slate-500);
}

/* ----- A6: Closing CTA ----- */
.about-cta {
  position: relative;
  padding-block: clamp(64px, 8vw, 104px);
  background:
    radial-gradient(circle at 20% 20%, rgba(218, 61, 61, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 82% 80%, rgba(218, 61, 61, 0.14) 0%, transparent 50%),
    var(--primary);
  color: var(--white);
  overflow: clip;
}

.about-cta__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.about-cta__title {
  max-width: 18ch;
  margin: 14px 0 0;
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: var(--tracking-tight, -0.02em);
  color: var(--white);
}

.about-cta__text {
  max-width: 58ch;
  margin: 18px 0 0;
  line-height: 1.7;
  color: #CBD5E1;
}

.about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}

.about-cta__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 26px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.about-cta__meta .icon {
  font-size: 14px;
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .team-card:hover,
  .value-card:hover,
  .why-card:hover {
    transform: none;
  }
}


/* ----- StoryBlock: transparent cut-out variant (floating person/product PNG) -----
   Floating Elements effect (docs/Effects.txt): the subject drifts gently while its
   ground shadow breathes in sync, so it reads as lifted off the page. */
.about-story__media--cutout {
  display: grid;
  place-items: center;
  padding-bottom: 0;
}

.cutout {
  position: relative;
  display: grid;
  place-items: end center;
  width: min(100%, 380px);
  padding-bottom: 26px;
}

/* Soft brand halo behind the subject */
.cutout__glow {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 118%;
  height: 82%;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 50% 58%, rgba(218, 61, 61, 0.16) 0%, rgba(218, 61, 61, 0.06) 42%, transparent 68%),
    radial-gradient(circle at 50% 85%, rgba(9, 30, 62, 0.12) 0%, transparent 62%);
  transform: translateX(-50%);
  filter: blur(4px);
}

/* Hairline ring: quiet geometry, no cartoon wireframe */
.cutout__ring {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 300px;
  height: 300px;
  border: 1px dashed rgba(9, 30, 62, 0.14);
  border-radius: 50%;
  transform: translateX(-50%);
}

.cutout__img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 373px;
  height: auto;
  filter: drop-shadow(0 28px 38px rgba(9, 30, 62, 0.26));
  animation: cutout-float 6.5s ease-in-out infinite;
}

.cutout__shadow {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 58%;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(9, 30, 62, 0.3) 0%, rgba(9, 30, 62, 0.12) 45%, transparent 72%);
  transform: translateX(-50%);
  animation: cutout-shadow 6.5s ease-in-out infinite;
}

@keyframes cutout-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

@keyframes cutout-shadow {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.55; }
  50%      { transform: translateX(-50%) scale(0.88); opacity: 0.35; }
}

/* Metric chip rides beside the laptop rather than the photo frame */
.about-story__media--cutout .about-story__badge {
  left: 0;
  bottom: 104px;
  z-index: 2;
}

.about-story__media--cutout .about-story__mark {
  right: 0;
  bottom: 16px;
}

@media (max-width: 575.98px) {
  .cutout {
    width: min(100%, 300px);
  }

  .cutout__ring {
    width: 240px;
    height: 240px;
  }

  .about-story__media--cutout .about-story__badge {
    bottom: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cutout__img,
  .cutout__shadow {
    animation: none;
  }
}


/* =====================================================================
   ===== TEAM CARDS (about leadership row + /teams roster) =====
   Photos are required in production; the initials monogram is the fallback
   while the client's photos are pending (docs/09-ADMIN-PANEL-STRUCTURE.md).
   ===================================================================== */

/* Founder portrait can hold a real photo */
.about-founder__portrait img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.about-founder__portrait {
  overflow: hidden;
}

/* About page shows a short leadership row, not the whole roster */
@media (min-width: 768px) {
  ul.about-team__grid--leadership {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  ul.about-team__grid--leadership {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.team-card__avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.team-card__avatar:has(img) {
  padding: 0;
  background: none;
}

.about-team__more {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

/* ----- /teams roster ----- */
ul.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: clamp(36px, 5vw, 52px) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 992px) {
  ul.teams-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

ul.teams-grid--lead {
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  ul.teams-grid--lead {
    grid-template-columns: minmax(0, 1fr);
  }
}

.person-card {
  display: grid;
  height: 100%;
  border: 1px solid var(--light-border);
  border-radius: 18px;
  background: var(--white);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.person-card:hover {
  border-color: rgba(218, 61, 61, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 24px 46px -30px rgba(9, 30, 62, 0.5);
}

.person-card__photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 50% 40%, rgba(218, 61, 61, 0.12) 0%, transparent 62%),
    var(--light-bg-alt);
  overflow: hidden;
}

.person-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-card__initials {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--primary);
  opacity: 0.55;
}

.person-card__body {
  padding: 18px 20px 22px;
}

.teams-roster .person-card .person-card__name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--primary);
}

.person-card__role {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.person-card__focus {
  margin: 10px 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--slate-500);
}

/* Founder card runs wide on desktop */
@media (min-width: 768px) {
  .person-card--featured {
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: center;
  }

  .person-card--featured .person-card__body {
    padding: 28px 32px;
  }

  .teams-roster .person-card--featured .person-card__name {
    font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  }

  .person-card--featured .person-card__focus {
    max-width: 52ch;
    font-size: 0.9375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .person-card:hover {
    transform: none;
  }
}


/* =====================================================================
   ===== EFFECTS (docs/Effects.txt) =====
   1. Text Mask Reveal   — sub-page header type rises out of a mask on load
   2. Bento Grid Hover Glow — person cards light up towards the cursor
   3. Image Hover Zoom   — the portrait breathes in on hover
   ===================================================================== */

/* ----- 1. Text Mask Reveal (page header, on load) ----- */
.js .page-header__badge,
.js .page-header__title,
.js .page-header__sub,
.js .page-header__actions,
.js .breadcrumbs {
  animation: header-in 0.5s ease-out backwards;
}

.js .breadcrumbs            { animation-delay: 0.02s; }
.js .page-header__badge     { animation-delay: 0.06s; }
.js .page-header__title     { animation-delay: 0.1s; }
.js .page-header__sub       { animation-delay: 0.16s; }
.js .page-header__actions   { animation-delay: 0.22s; }

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

/* ----- 2. Bento Grid Hover Glow (person cards) ----- */
.person-card.has-glow {
  position: relative;
  isolation: isolate;
}

.person-card.has-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 0%),
    rgba(218, 61, 61, 0.14) 0%,
    rgba(218, 61, 61, 0.05) 38%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.person-card.has-glow:hover::before {
  opacity: 1;
}

/* The lit border edge */
.person-card.has-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid transparent;
  border-radius: inherit;
  background: radial-gradient(
      200px circle at var(--mx, 50%) var(--my, 0%),
      rgba(218, 61, 61, 0.55),
      transparent 65%
    )
    border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.person-card.has-glow:hover::after {
  opacity: 1;
}

.person-card__photo,
.person-card__body {
  position: relative;
  z-index: 2;
}

/* ----- 3. Image Hover Zoom (person portrait) ----- */
.person-card__photo img,
.person-card__initials {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.person-card:hover .person-card__photo img {
  transform: scale(1.07);
}

.person-card:hover .person-card__initials {
  transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .js .page-header__badge,
  .js .page-header__title,
  .js .page-header__sub,
  .js .page-header__actions,
  .js .breadcrumbs {
    animation: none;
  }

  .person-card__photo img,
  .person-card__initials {
    transition: none;
  }

  .person-card:hover .person-card__photo img,
  .person-card:hover .person-card__initials {
    transform: none;
  }
}


/* =====================================================================
   ===== SERVICES HUB =====
   Effects (docs/Effects.txt): Icon Line Draw, Bento Grid Hover Glow,
   Accordion Animation.
   ===================================================================== */

/* Hub reuses the homepage .services-grid / .service-card exactly.
   Only extra here: Icon Line Draw on this page (docs/Effects.txt) — the sprite
   stroke draws itself when a card reveals. stroke-dasharray inherits into <use>. */
.js .services-hub .service-icon .icon {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
}

.js .services-hub .service-card.is-revealed .service-icon .icon {
  animation: icon-draw 1.1s 0.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes icon-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .services-hub .service-icon .icon {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
}


/* ----- Process rail ----- */
.services-process {
  background:
    radial-gradient(circle at 12% 0%, rgba(218, 61, 61, 0.1) 0%, transparent 46%),
    var(--primary);
}

.services-process .section-lede {
  color: var(--text-muted);
}

ol.process-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin: clamp(40px, 5vw, 60px) 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--line);
  list-style: none;
  overflow: hidden;
}

@media (min-width: 992px) {
  ol.process-rail {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.process-step {
  position: relative;
  padding: 28px 22px 30px;
  background: rgba(9, 30, 62, 0.72);
  transition: background-color 0.3s ease;
}

.process-step:hover {
  background: rgba(14, 42, 82, 0.9);
}

.process-step__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.services-process .process-step .process-step__title {
  margin: 12px 0 8px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--white);
}

.process-step__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ----- FAQ accordion ----- */
.services-faq__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}

@media (min-width: 992px) {
  .services-faq__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
}

.services-faq__note {
  margin: 18px 0 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--slate-500);
}

.services-faq__note a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.services-faq__note a:hover {
  text-decoration: underline;
}

/* ----- Services FAQ: left column proof + contact -----
   The FAQ list grows as answers open, so a static left column emptied out and
   left half the section blank. It sticks instead, and carries the two things
   worth having beside questions: proof, and a way to ask one.

   Figures come from Site Stats and the phone/WhatsApp from Site Settings —
   nothing about the business is written into the stylesheet or the markup. */

@media (min-width: 992px) {
  .services-faq__intro {
    position: sticky;
    /* Clears the sticky site header. */
    top: calc(var(--header-h) + 28px);
  }
}

.faq-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--light-gray);
}

.faq-proof__item { display: grid; gap: 2px; }

.faq-proof__value {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.faq-proof__star { color: var(--gold); font-size: 0.85em; }

.faq-proof__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--gray-500);
  line-height: 1.35;
}

.faq-contact { display: grid; gap: 10px; margin-top: 24px; }

.faq-contact__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-lg);
  background: var(--white);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.faq-contact__row .icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent);
}

.faq-contact__row--whatsapp .icon { color: var(--whatsapp); }

.faq-contact__text { display: grid; gap: 1px; min-width: 0; }

.faq-contact__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--gray-500);
}

.faq-contact__value {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--primary);
}

@media (hover: hover) and (pointer: fine) {
  .faq-contact__row:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -18px rgba(9, 30, 62, 0.45);
  }
}

.faq-cta { margin-top: 18px; width: 100%; justify-content: center; }

/* Below 768px the fixed action bar already pins Call, WhatsApp and Get Audit
   to the bottom of every screen, so repeating them here is three duplicate
   controls in one viewport. The proof figures stay — those are not repeated
   anywhere else on the page. */
@media (max-width: 767.98px) {
  .faq-contact,
  .faq-cta {
    display: none;
  }

  .faq-proof {
    margin-bottom: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-contact__row { transition: none; }
  .faq-contact__row:hover { transform: none; }
}

ul.faq-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-item {
  border: 1px solid var(--light-border);
  border-radius: 14px;
  background: var(--white);
  transition: border-color 0.25s ease, box-shadow 0.3s ease;
}

.faq-item[open] {
  border-color: rgba(218, 61, 61, 0.3);
  box-shadow: 0 18px 40px -30px rgba(9, 30, 62, 0.5);
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--primary);
  cursor: pointer;
  list-style: none;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 14px;
}

/* Plus → minus */
.faq-item__sign {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}

.faq-item__sign::before,
.faq-item__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.faq-item__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-item__sign::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* Accordion Animation — animate the row height, not height:auto */
.faq-item__panel {
  display: grid;
  grid-template-rows: 1fr;
  padding: 0 20px 18px;
}

.faq-item__a {
  margin: 0;
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--slate-500);
}

@supports (interpolate-size: allow-keywords) {
  .faq-item {
    interpolate-size: allow-keywords;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .service-tile__icon .icon {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }

  .service-tile:hover {
    transform: none;
  }
}


/* =====================================================================
   ===== SERVICE DETAIL PAGE =====
   Effects (docs/Effects.txt): Sticky Sub-Nav with Scrollspy,
   Image Clip Reveal.
   ===================================================================== */

/* ----- Sticky sub-nav ----- */
.service-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  border-bottom: 1px solid var(--light-border);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.service-nav__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 56px;
}

.service-nav__label {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}

@media (max-width: 767.98px) {
  .service-nav__label {
    display: none;
  }
}

ul.service-nav__list {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.service-nav__list::-webkit-scrollbar {
  display: none;
}

.service-nav__link {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--radius-full, 999px);
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--slate-500);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.service-nav__link:hover {
  color: var(--primary);
  background: var(--light-bg-alt);
}

.service-nav__link.is-active {
  color: var(--accent);
  background: rgba(218, 61, 61, 0.09);
}

/* ----- Overview ----- */
.service-intro__grid {
  display: grid;
  gap: clamp(26px, 4vw, 56px);
}

@media (min-width: 992px) {
  .service-intro__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }
}

.service-intro .section-title {
  max-width: 24ch;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  line-height: 1.3;
}

.service-intro__text {
  margin: 0 0 16px;
  line-height: 1.8;
  color: var(--slate-500);
}

.service-intro__techs {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--light-border);
}

.service-intro__techs-label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.service-intro__techs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-intro__techs li {
  padding: 6px 12px;
  border: 1px solid var(--light-border);
  border-radius: var(--radius-full, 999px);
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--primary);
}

/* ----- Capabilities ----- */
.service-caps {
  background: var(--light-bg-alt);
}

.service-caps__list {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  margin-top: clamp(36px, 5vw, 56px);
}

.capability {
  display: grid;
  gap: 0;
  border: 1px solid var(--light-border);
  border-radius: 20px;
  background: var(--white);
  overflow: hidden;
  scroll-margin-top: 90px;
}

@media (min-width: 900px) {
  .capability {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: stretch;
  }

  /* Alternate the photo side so the page does not read as a list of slabs */
  .capability:nth-child(even) .capability__media {
    order: 2;
  }
}

.capability__media {
  position: relative;
  margin: 0;
  min-height: 220px;
  background: var(--light-bg-alt);
  overflow: hidden;
}

.capability__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image Clip Reveal — the photo wipes open when the block enters view */
.js .capability[data-reveal] .capability__media img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.1s, scale 1.2s ease;
  scale: 1.06;
}

.js .capability[data-reveal].is-revealed .capability__media img {
  clip-path: inset(0 0 0 0);
  scale: 1;
}

.capability__body {
  padding: clamp(22px, 3vw, 36px);
}

.capability__index {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.service-caps .capability .capability__title {
  margin: 10px 0 4px;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--primary);
}

.capability__subtitle {
  margin: 0 0 14px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
}

.capability__desc {
  margin: 0;
  line-height: 1.75;
  color: var(--slate-500);
}

.service-caps .capability .capability__headline {
  margin: 22px 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
}

.capability__intro {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--slate-500);
}

ul.capability__points {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.capability__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--slate-500);
}

.capability__points .icon {
  flex: none;
  margin-top: 3px;
  font-size: 15px;
  color: var(--accent);
}

.capability__points strong {
  color: var(--primary);
}

.capability__callout {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--light-bg);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--slate-500);
}

/* ----- Why this service ----- */
.service-why {
  background:
    radial-gradient(circle at 85% 0%, rgba(218, 61, 61, 0.1) 0%, transparent 48%),
    var(--primary);
}

.service-why .section-lede {
  color: var(--text-muted);
}

ul.service-why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: clamp(36px, 5vw, 52px) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 992px) {
  ul.service-why__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.reason-card {
  position: relative;
  height: 100%;
  padding: 26px 22px 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.reason-card:hover {
  border-color: rgba(218, 61, 61, 0.42);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-4px);
}

.reason-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(218, 61, 61, 0.14);
  color: var(--accent);
  font-size: 20px;
}

.service-why .reason-card .reason-card__title {
  margin: 16px 0 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--white);
}

.reason-card__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.reason-card__index {
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.16);
}

/* ----- Other services ----- */
ul.service-other__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.other-link {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid var(--light-border);
  border-radius: 14px;
  background: var(--white);
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.other-link:hover {
  border-color: rgba(218, 61, 61, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -30px rgba(9, 30, 62, 0.5);
}

.other-link__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(218, 61, 61, 0.1);
  color: var(--accent);
  font-size: 19px;
}

.other-link__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.other-link__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--primary);
}

.other-link__sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--slate-500);
}

.other-link__arrow {
  flex: none;
  font-size: 16px;
  color: var(--accent);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.other-link:hover .other-link__arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .js .capability[data-reveal] .capability__media img,
  .js .capability[data-reveal].is-revealed .capability__media img {
    clip-path: none;
    scale: 1;
    transition: none;
  }

  .reason-card:hover,
  .other-link:hover {
    transform: none;
  }
}


/* =====================================================================
   ===== CONTACT PAGE =====
   Effects (docs/Effects.txt): Floating Label Fields, Inline Validation
   Feedback, Submit Button Morph, Map Pin Drop, Success Checkmark Draw.
   ===================================================================== */

/* ----- Lead section ----- */
.contact-lead {
  background:
    radial-gradient(circle at 15% 10%, rgba(218, 61, 61, 0.14) 0%, transparent 50%),
    var(--primary);
}

.contact-lead__grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
}

@media (min-width: 992px) {
  .contact-lead__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }
}

.contact-lead__text {
  margin: 18px 0 0;
  line-height: 1.75;
  color: #CBD5E1;
}

ol.contact-lead__steps {
  display: grid;
  gap: 14px;
  margin: 30px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.contact-lead__steps li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.contact-lead__step-no {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* ----- The form card ----- */
.lead-form {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--light-border);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.6);
}

.lead-form__row {
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) {
  .lead-form__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Floating Label Fields */
.field {
  position: relative;
}

.field__input {
  width: 100%;
  height: 54px;
  padding: 20px 14px 6px;
  border: 1px solid var(--light-border);
  border-radius: 10px;
  background: var(--light-bg);
  color: var(--primary);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.field__input--area {
  height: auto;
  min-height: 116px;
  padding-top: 26px;
  resize: vertical;
}

.field__label {
  position: absolute;
  top: 17px;
  left: 15px;
  font-size: 0.9375rem;
  color: var(--gray-500);
  pointer-events: none;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), font-size 0.2s ease, color 0.2s ease;
  transform-origin: left top;
}

/* Raise the label once the field has content or focus */
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label,
.field--select .field__input:valid + .field__label {
  transform: translateY(-11px) scale(0.78);
  color: var(--slate-500);
}

.field__input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(218, 61, 61, 0.14);
}

.field--select .field__input {
  padding-right: 40px;
  appearance: none;
  cursor: pointer;
}

.field__chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  font-size: 16px;
  color: var(--gray-500);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Inline Validation Feedback */
.field.has-error .field__input {
  border-color: #DC2626;
  background: #FEF2F2;
  animation: field-shake 0.32s ease;
}

.field__error {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #DC2626;
}

@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

/* Submit Button Morph */
.lead-form__submit {
  justify-content: center;
  width: 100%;
  margin-top: 4px;
  transition: width 0.3s ease, opacity 0.2s ease;
}

.lead-form.is-sending .lead-form__submit {
  opacity: 0.85;
  cursor: progress;
}

.lead-form__note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--gray-500);
  text-align: center;
}

/* ----- Channels ----- */
ul.contact-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.channel-card {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--light-border);
  border-radius: 16px;
  background: var(--white);
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.channel-card:hover {
  border-color: rgba(218, 61, 61, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 24px 46px -30px rgba(9, 30, 62, 0.5);
}

.channel-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: rgba(218, 61, 61, 0.1);
  color: var(--accent);
  font-size: 20px;
}

.channel-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.channel-card__value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--primary);
}

.channel-card__note {
  font-size: 0.8125rem;
  color: var(--slate-500);
}

/* ----- Map ----- */
.contact-map {
  display: grid;
  gap: 0;
  margin-top: 20px;
  border: 1px solid var(--light-border);
  border-radius: 20px;
  background: var(--white);
  overflow: hidden;
}

@media (min-width: 900px) {
  .contact-map {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

.contact-map__card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(24px, 3vw, 34px);
}

.contact-map__address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--primary);
}

.contact-map__address .icon {
  flex: none;
  margin-top: 4px;
  color: var(--accent);
}

.contact-map__phones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: 0.9375rem;
}

.contact-map__phones a {
  color: var(--slate-500);
  text-decoration: none;
}

.contact-map__phones a:hover {
  color: var(--accent);
}

.contact-map__card .btn {
  justify-self: start;
}

.contact-map__frame {
  position: relative;
  min-height: 300px;
  background: var(--light-bg-alt);
}

.contact-map__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
  filter: grayscale(0.25) contrast(1.05);
}

/* Map Pin Drop — a single drop + ripple when the section reveals */
.contact-map__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(218, 61, 61, 0.25);
  transform: translate(-50%, -140%);
  opacity: 0;
  pointer-events: none;
}

.js .contact-map[data-reveal].is-revealed .contact-map__pin {
  animation: pin-drop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

@keyframes pin-drop {
  0%   { opacity: 0; transform: translate(-50%, -260%) scale(0.6); }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ----- Thank you ----- */
.thank-you {
  position: relative;
  padding-block: clamp(72px, 10vw, 128px);
  background:
    radial-gradient(circle at 25% 15%, rgba(218, 61, 61, 0.2) 0%, transparent 55%),
    var(--primary);
  color: var(--white);
}

.thank-you__inner {
  display: grid;
  justify-items: center;
  max-width: 720px;
  text-align: center;
}

/* Success Checkmark Draw */
.thanks-check {
  width: 74px;
  height: 74px;
  margin-bottom: 26px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thanks-check__ring {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 3;
}

.thanks-check__tick {
  stroke: var(--accent);
  stroke-width: 5;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: tick-draw 0.7s 0.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes tick-draw {
  to { stroke-dashoffset: 0; }
}

.thank-you__title {
  max-width: 18ch;
  margin: 14px 0 0;
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: var(--tracking-tight, -0.02em);
  color: var(--white);
}

.thank-you__text {
  max-width: 56ch;
  margin: 18px 0 0;
  line-height: 1.75;
  color: #CBD5E1;
}

.thank-you__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

.thank-you__next {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  width: 100%;
}

.thank-you__next-label {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.thank-you__next ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.thank-you__next a {
  color: var(--text-muted);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.thank-you__next a:hover {
  color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .channel-card:hover {
    transform: none;
  }

  .field.has-error .field__input,
  .js .contact-map[data-reveal].is-revealed .contact-map__pin,
  .thanks-check__tick {
    animation: none;
  }

  .contact-map__pin {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .thanks-check__tick {
    stroke-dashoffset: 0;
  }
}

/* A case-study card with no logo yet — the client's initial on the plate,
   rather than a broken image. */
.case-card__logo-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-head, inherit);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--navy-700, #123a6b);
  opacity: 0.45;
}
/* =====================================================================
   BLOG ARTICLE
   The reading page. Loaded after style.css, so it inherits every token.

   The one rule behind all of this: a long article is read, not scanned.
   Measure is capped near 68 characters, the type is a size bigger than the
   marketing pages, and the line height is looser. Everything else — the table
   of contents, the anchors, the callout — stays out of the way.
   ===================================================================== */

.article {
  background: var(--white);
  color: var(--primary-dark);
}

/* ── Header ──────────────────────────────────────────────────────────── */
.article__head {
  /* The extra bottom padding is the room the cover image is pulled up into —
     see .article__cover. Without it the image would sit over the byline. */
  padding: clamp(28px, 6vw, 64px) 0 calc(clamp(20px, 3vw, 32px) + clamp(24px, 4vw, 40px));
  background: var(--primary);
  color: var(--text);
}
.article__headinner {
  max-width: 820px;
}
.article__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.8125rem;
  color: var(--text-soft);
}
.article__crumbs a {
  color: var(--text-soft);
  text-decoration: none;
}
.article__crumbs a:hover {
  color: var(--white);
  text-decoration: underline;
}

.article__eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-mono);
  color: var(--accent);
}
.article__title {
  margin: 0 0 14px;
  font-size: clamp(1.75rem, 4.4vw, 2.85rem);
  line-height: 1.16;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  /* Headlines wrap better when the last line is not a single word. */
  text-wrap: balance;
}
.article__lede {
  margin: 0 0 24px;
  max-width: 62ch;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-soft);
}

.article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.article__author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
}
.article__author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-strong);
}
.article__author > span {
  display: grid;
}
.article__author strong {
  color: var(--white);
  font-weight: 600;
}
.article__role {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.article__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.article__updated {
  color: var(--text-soft);
}

/* ── Cover ───────────────────────────────────────────────────────────── */
/* The cover overlaps the dark header so the image bridges the two bands.
   Done with a negative TOP MARGIN, not `transform: translateY`: a transform
   moves the painted pixels but leaves the element's box where it was, so the
   image slid up over the byline while still reserving its original space
   below. A margin moves the box itself, and the layout follows. */
.article__cover {
  --cover-lift: clamp(24px, 4vw, 40px);
  /* Lifted into the dark header, and given real clearance underneath.
     The bottom margin is not decoration: the box-shadow spreads 30px below the
     element and the border-radius makes it a paint layer, so with the boxes
     merely touching, the image visibly sat on top of the table of contents. */
  margin: calc(var(--cover-lift) * -1) 0 clamp(20px, 3vw, 36px);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(9, 30, 62, 0.45);
}
.article__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── Layout ──────────────────────────────────────────────────────────── */
.article__grid {
  display: grid;
  gap: 32px;
  padding-bottom: clamp(32px, 5vw, 56px);
}
@media (min-width: 1024px) {
  .article__grid {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
}

/* ── Table of contents ───────────────────────────────────────────────── */
.article__toc {
  display: none;
}
@media (min-width: 1024px) {
  .article__toc {
    display: block;
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    /* Room for the scrollbar so it never sits on top of the link text. */
    padding-right: 12px;
    font-size: 0.8125rem;

    /* Firefox. `thin` is the only width it offers, and the two colours are
       thumb then track. */
    scrollbar-width: thin;
    scrollbar-color: rgba(218, 61, 61, 0.45) transparent;
  }

  /* WebKit needs the parts styled individually. A 4px thumb rather than the
     default 15px chrome: this is a side rail, and the scrollbar should read as
     a progress hint, not as furniture. */
  .article__toc::-webkit-scrollbar {
    width: 4px;
  }
  .article__toc::-webkit-scrollbar-track {
    background: transparent;
  }
  .article__toc::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(218, 61, 61, 0.38);
    transition: background 0.18s;
  }
  .article__toc:hover::-webkit-scrollbar-thumb {
    background: rgba(218, 61, 61, 0.65);
  }
  .article__toc::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
  }
}
.article__toctitle {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-mono);
  color: var(--gray-500);
}
.article__toc ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--light-gray);
}
.article__toc li[data-level="3"] a {
  padding-left: 24px;
  font-size: 0.78rem;
}
.article__toc a {
  display: block;
  padding: 5px 0 5px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--gray-500);
  text-decoration: none;
  line-height: 1.45;
  transition: color 0.16s, border-color 0.16s;
}
.article__toc a:hover {
  color: var(--accent);
  border-left-color: var(--accent);
}

/* ── Body ────────────────────────────────────────────────────────────── */
.article__body {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.78;
  color: #26364f;
}
.article__p {
  margin: 0 0 1.35em;
}
.article__body > *:last-child {
  margin-bottom: 0;
}

.article__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article__body a:hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

.article__heading {
  position: relative;
  margin: 2.1em 0 0.7em;
  color: var(--primary-dark);
  letter-spacing: var(--tracking-tight);
  line-height: 1.28;
  scroll-margin-top: 96px;
}
h2.article__heading {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}
h3.article__heading {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  margin-top: 1.7em;
}

/* Visible on hover, and on keyboard focus — a link nobody can reach is not a
   link. */
.article__anchor {
  margin-left: 8px;
  color: var(--light-gray);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.16s, color 0.16s;
}
.article__heading:hover .article__anchor,
.article__anchor:focus-visible {
  opacity: 1;
  color: var(--accent);
}

.article__list {
  margin: 0 0 1.35em;
  padding-left: 1.3em;
}
.article__list li {
  margin-bottom: 0.5em;
  padding-left: 0.25em;
}
.article__list li::marker {
  color: var(--accent);
}
.article__list--ordered li::marker {
  font-weight: 700;
}

.article__figure {
  margin: 2em 0;
}
.article__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.article__caption {
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--gray-500);
}

.article__quote {
  margin: 2em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
}
.article__quote p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.5;
  color: var(--primary);
}
.article__cite {
  display: block;
  margin-top: 12px;
  font-size: 0.8125rem;
  font-style: normal;
  color: var(--gray-500);
}

/* The call to action. Its title is a <p>, not a heading — it must not appear
   in the article outline. */
.article__cta {
  margin: 2.4em 0;
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--radius-lg, 16px);
  background: var(--primary);
  color: var(--text);
}
.article__cta-title {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
}
.article__cta-text {
  margin: 0 0 18px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-soft);
}
/* The CTA sits inside .article__body, where `.article__body a` paints every
   link in --accent. That selector is more specific than `.btn-primary`, so the
   button's label inherited red text on a red fill and vanished. Body-copy link
   styling has to be undone for anything that is a button, not a link. */
.article__cta .btn,
.article__cta .btn:hover {
  color: var(--white);
  text-decoration: none;
}
.article__cta .btn .btn-label,
.article__cta .btn .btn-arrow {
  color: inherit;
}

/* ── Author footer ───────────────────────────────────────────────────── */
.article__about {
  display: flex;
  gap: 16px;
  max-width: 68ch;
  margin: 0 0 clamp(32px, 5vw, 56px);
  padding: 20px;
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-lg, 16px);
  background: var(--off-white);
}
@media (min-width: 1024px) {
  .article__about {
    margin-left: 258px;
  }
}
.article__about img {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.article__aboutname {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--primary-dark);
}
.article__aboutname span {
  margin-left: 8px;
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--gray-500);
}
.article__aboutbio {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #46566f;
}

/* ── Listing extras ──────────────────────────────────────────────────── */
.blog-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--light-gray), var(--off-white));
}
.blog-empty {
  padding: clamp(32px, 6vw, 64px) 0;
  text-align: center;
  color: var(--gray-500);
}
.blog-empty a {
  color: var(--accent);
}

/* ── Blog category filter ────────────────────────────────────────────────
   Real links, one page each, so a category can be shared and indexed. */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(20px, 3vw, 32px);
}
/* ── Blog listing ────────────────────────────────────────────────────────
   A section that follows the page header does not need the full band of top
   padding — the header supplies the separation, and the standard 120px read as
   an empty strip. */
.section--tight {
  padding-top: clamp(36px, 4.5vw, 56px);
  /* The bottom is trimmed too. With three cards on one row the full 120px left
     a band of empty page between the grid and the footer. */
  padding-bottom: clamp(48px, 6vw, 80px);
}

.blog-listhead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: clamp(24px, 3vw, 36px);
  padding-bottom: clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid var(--light-gray);
}
.blog-listhead__title {
  margin: 0 0 6px;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--primary-dark);
}
.blog-listhead__count {
  margin: 0;
  max-width: 52ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--gray-500);
}
/* The filter row is part of this header, so its own bottom margin would double
   up with the header's. */
.blog-listhead .blog-filters {
  margin-bottom: 0;
}

/* The base .filter-btn was written for the DARK case-studies section: pale text
   on a translucent white fill, hovering to pure white. On the light blog page
   that reads as grey on near-white, and the hover state turns white on white —
   the button disappears under the cursor. Every colour is restated here for a
   light background rather than inherited. */
.blog-filters .filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  border-color: var(--light-gray);
  background: var(--white);
  color: var(--primary);
  font-weight: 600;
}
.blog-filters .filter-btn:hover {
  border-color: var(--accent);
  background: var(--white);
  color: var(--accent);
}
.blog-filters .filter-btn:hover .blog-filters__count {
  background: rgba(218, 61, 61, 0.12);
  color: var(--accent);
}
.blog-filters .filter-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.blog-filters__count {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--light-gray);
  color: var(--gray-500);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.6;
}
.blog-filters .filter-btn[data-on] {
  background: var(--accent);
  border-color: var(--accent);
  /* Explicit: an <a> styled as a button inherits the link colour and would
     otherwise render red-on-red. */
  color: var(--white);
}
.blog-filters .filter-btn[data-on] .blog-filters__count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}
.blog-backlink {
  margin: clamp(24px, 4vw, 40px) 0 0;
  font-size: 0.9375rem;
}
.blog-backlink a {
  color: var(--gray-500);
  text-decoration: none;
}
.blog-backlink a:hover {
  color: var(--accent);
}

/* On /blogs the grid follows .blog-listhead, which already provides the
   separation — the grid's own top margin is for the homepage section, where it
   sits directly under a heading block. */
.blog-listhead + ul.blog-grid {
  margin-top: 0;
}

/* ── Route loading bar ───────────────────────────────────────────────────
   A hairline at the very top while a client-side navigation is in flight.
   Same 2px and the same gradient family as .scroll-progress, so the two read
   as one system; sits one layer above it. */
.route-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1101;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.route-progress[data-active] {
  opacity: 1;
}
.route-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, var(--accent), #FF6B6B 55%, #FFB199);
  /* A soft leading edge, so it reads as motion rather than a growing block. */
  box-shadow: 0 0 10px rgba(218, 61, 61, 0.6), 0 0 4px rgba(218, 61, 61, 0.9);
  transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .route-progress__bar {
    transition-duration: 0.01ms;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   CASE STUDIES — LIGHT GRID
   The /case-studies page ran dark from the page header all the way to the
   footer: one unbroken navy band with nothing to separate the hero from the
   work from the call to action. The cards were navy on navy, so their shadow
   and hover state had nothing to read against.

   The site's own pattern is alternating bands — the homepage does it — so the
   grid becomes a light band between the dark hero and the dark CTA.

   Scoped to `.case-studies--light` so the DARK grid on the homepage, which
   shares every one of these class names, is untouched.
   ════════════════════════════════════════════════════════════════════════ */
.case-studies--light {
  /* Overrides the dark gradient on .case-studies, which this page still needs
     for its layout and its filter behaviour. */
  background: var(--off-white);
  border-block-color: var(--light-gray);
}

/* The cursor spotlight is a 520px red circle tuned for navy. On a light surface
   it reads as a hard pink blob rather than light, so it is off here. The cards
   keep their own hover state, which is what the pointer is actually aimed at. */
.case-studies--light::before {
  display: none;
}

.case-studies--light .case-card {
  background: var(--white);
  border-color: #E2E8F0;
  /* Lighter and tighter than the dark card's shadow: the same 0.5 alpha over
     white reads as dirt rather than depth. */
  box-shadow: 0 4px 20px rgba(9, 30, 62, 0.05);
}
.case-studies--light .case-card:hover {
  border-color: rgba(218, 61, 61, 0.3);
  box-shadow: 0 16px 36px rgba(9, 30, 62, 0.1);
}
/* The 3D tilt in script.js writes an INLINE box-shadow, which beats any rule
   here. It reads these two values off the section, so the light grid gets a
   light shadow instead of the navy one. */
.case-studies--light {
  --case-rest-shadow: 0 4px 20px rgba(9, 30, 62, 0.05);
  --case-lift-shadow: 0 18px 40px -8px rgba(9, 30, 62, 0.16), 0 0 22px rgba(218, 61, 61, 0.1);
}
/* The cursor glare is a white soft-light wash — invisible on a white card. */
.case-studies--light .case-card::after {
  display: none;
}

.case-studies--light .case-card__logo-stage {
  background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F7 100%);
  border-bottom-color: #E2E8F0;
}
.case-studies--light .case-card__logo-stage::before {
  background-image:
    linear-gradient(to right, rgba(9, 30, 62, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(9, 30, 62, 0.04) 1px, transparent 1px);
}
.case-studies--light .case-card__badge {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #E2E8F0;
  color: var(--primary);
}
.case-studies--light .case-card__scope {
  color: var(--gray-500);
}

.case-studies--light .case-card__body {
  background: var(--white);
}
.case-studies--light .case-card__title {
  color: var(--primary-dark);
}
.case-studies--light .case-card__desc,
.case-studies--light .case-card__service {
  color: #52607A;
}
.case-studies--light .case-card__metric-box {
  background: rgba(218, 61, 61, 0.07);
  border: 1px solid rgba(218, 61, 61, 0.14);
}
.case-studies--light .case-card__metric-lbl {
  color: #52607A;
}
.case-studies--light .case-card__link {
  color: var(--accent);
}
.case-studies--light .case-card__link:hover {
  color: var(--accent-hover);
}

/* The filter row, restated for a light background — the base .filter-btn is
   built for the dark homepage section and goes white-on-white here. */
.case-studies--light .filter-btn {
  border-color: #E2E8F0;
  background: var(--white);
  color: var(--primary);
  font-weight: 600;
}
.case-studies--light .filter-btn:hover {
  border-color: var(--accent);
  background: var(--white);
  color: var(--accent);
}
.case-studies--light .filter-btn.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}
.case-studies--light .cases-empty {
  color: var(--gray-500);
}

/* The listing header: heading on the left, filters on the right, one rule
   underneath. Same component as /blogs so the two listings match. */
.case-studies--light .cases-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
  margin-bottom: clamp(24px, 3vw, 36px);
  padding-bottom: clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid var(--light-gray);
  text-align: left;
}
.case-studies--light .cases-head__text {
  max-width: 56ch;
}
.case-studies--light .cases-eyebrow {
  color: var(--accent);
}
.case-studies--light .cases-title {
  color: var(--primary-dark);
}
.case-studies--light .cases-sub {
  color: var(--gray-500);
}
.case-studies--light .cases-filters {
  margin: 0;
}
/* The grid's own top margin is for the homepage, where it sits straight under a
   heading block. Here .cases-head already provides the separation. */
.case-studies--light .cases-head + .sr-only + .case-grid,
.case-studies--light .case-grid {
  margin-top: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   CASE STUDY DETAIL — /case-studies/[slug]
   ────────────────────────────────────────────────────────────────────────
   Three bands, the same rhythm the listing page settled on: a DARK hero, a
   LIGHT story, then the dark quote and CTA. The page never runs navy from
   header to footer — that was the note the client gave on /case-studies.

   Everything is prefixed `.cs__` rather than reusing `.article__` from the
   blog: the two share a shape but not a layout (this page has a results rail
   and no table of contents), and the blog classes carry prose rules that would
   have to be undone one by one here.
   ════════════════════════════════════════════════════════════════════════ */

.cs__head {
  position: relative;
  background:
    radial-gradient(1000px 420px at 82% -10%, rgba(218, 61, 61, 0.14), transparent 60%),
    linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(28px, 5vw, 44px) clamp(56px, 7vw, 88px);
  overflow: hidden;
}

/* The same faint grid the card logo stage uses, so the hero reads as part of
   the same family rather than a plain navy block. */
.cs__head::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(900px 400px at 50% 0%, #000 40%, transparent 100%);
  pointer-events: none;
}

.cs__headinner {
  position: relative;
  z-index: 1;
}

.cs__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-soft);
  margin-bottom: clamp(24px, 4vw, 40px);
}
.cs__crumbs a {
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.cs__crumbs a:hover {
  color: var(--white);
}

/* Story on the left, logo + headline number on the right. The right column is
   fixed-width so the metric plate is the same size on every case study —
   a column sized by its content would make "400+" and "+210%" different
   shapes and the set would stop looking like a series. */
.cs__headgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.cs__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 16px;
}
.cs__eyebrow .sep-dot {
  color: var(--line-strong);
}

.cs__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  margin: 0 0 18px;
}

.cs__lede {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 58ch;
  margin: 0 0 24px;
}

.cs__service {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  margin: 0;
}

.cs__headside {
  display: grid;
  gap: 16px;
}

.cs__logoplate {
  display: grid;
  place-items: center;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  min-height: 120px;
}

/* height CAPPED, not just max-width: the client uploads whatever they have, and
   a square logo without this makes the plate as tall as the column is wide.
   object-fit keeps a wide logo from being squashed to reach the cap. */
.cs__logo {
  max-width: 100%;
  max-height: 96px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.cs__logofallback {
  font-size: 3rem;
  font-weight: 800;
  color: var(--primary);
}

.cs__headline {
  display: grid;
  gap: 4px;
  text-align: center;
  background: rgba(218, 61, 61, 0.12);
  border: 1px solid rgba(218, 61, 61, 0.3);
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  margin: 0;
}
.cs__headlineval {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--white);
}
.cs__headlinelbl {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-soft);
}

/* ── The story band ──────────────────────────────────────────────────── */

/* Story left, results rail right. The rail is `start`-aligned and sticky so it
   stays beside the step it belongs to while a long challenge scrolls past. */
.cs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
}

.cs__steps {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
}

/* Number in its own column so the paragraphs share one left edge — with the
   number inline, each step would start at a different x depending on whether
   it read 01 or 03. */
.cs__step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.cs__stepno {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent);
  margin: 0;
  padding-top: 4px;
  border-top: 2px solid rgba(218, 61, 61, 0.28);
}

.cs__steptitle {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--primary-dark);
  margin: 0 0 12px;
}

.cs__steptext {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #52607A;
  margin: 0;
  max-width: 68ch;
}

.cs__results {
  position: sticky;
  top: 96px;
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 28px 24px;
}

.cs__resultstitle {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}

.cs__resultlist {
  display: grid;
  gap: 18px;
  margin: 0;
}

.cs__result + .cs__result {
  border-top: 1px solid var(--light-border);
  padding-top: 18px;
}

/* <dt> is the label and <dd> the figure, but the figure reads first — so the
   pair is flipped visually with `column-reverse` rather than by putting the
   value in the <dt>, which would misdescribe the list. */
.cs__result {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
}

.cs__resultvalue {
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--primary-dark);
  margin: 0;
}

.cs__resultmetric {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--gray-500);
}

/* ── Testimonial ─────────────────────────────────────────────────────── */

.cs__quotewrap {
  background:
    radial-gradient(760px 320px at 50% 0%, rgba(218, 61, 61, 0.12), transparent 70%),
    var(--primary);
  padding-block: clamp(56px, 7vw, 88px);
}

.cs__quote {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  padding: 0 16px;
}

.cs__quotemark {
  width: 40px;
  height: 40px;
  color: rgba(218, 61, 61, 0.55);
  margin-bottom: 20px;
}

.cs__quotetext {
  margin: 0;
  border: 0;
  padding: 0;
}
.cs__quotetext p {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.5;
  color: var(--white);
  margin: 0;
}

.cs__quoteby {
  margin-top: 24px;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--text-soft);
}
.cs__quoteby::before {
  content: "— ";
}

/* ── "More work" header link ─────────────────────────────────────────── */

.cs__allink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.cs__allink:hover {
  color: var(--accent-hover);
}
.cs__allink:hover .btn-arrow {
  transform: translateX(3px);
}
.cs__allink .btn-arrow {
  transition: transform 0.2s var(--ease);
}

/* ── Narrow ──────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  /* The metric plate belongs under the story on one column, not squeezed to
     half width beside it. */
  .cs__headgrid,
  .cs__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs__headside {
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
  }

  /* Sticky with nothing beside it just pins a card mid-scroll. */
  .cs__results {
    position: static;
  }
}

@media (max-width: 560px) {
  .cs__headside {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 56px of empty gutter beside every paragraph is a lot on a phone. */
  .cs__step {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .cs__stepno {
    display: inline-block;
    padding-top: 0;
    border-top: 0;
    border-bottom: 2px solid rgba(218, 61, 61, 0.28);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   CASE STUDY DETAIL — EFFECTS
   ────────────────────────────────────────────────────────────────────────
   docs/Effects.txt pairs this page with "Reading Progress Rail + Metric Bar
   Fill" (the third in its list, Before→After Drag Slider, needs old-site and
   new-site screenshots the client has not supplied, so it is not built here).

   Both are NATIVE scroll-driven animations — `animation-timeline` — not
   scroll listeners. Rule 7 of that file prefers native CSS, and these run on
   the compositor with no JavaScript at all, so they cost nothing on a phone
   and cannot break on a client-side navigation the way a one-shot script does.

   Rule 5: nothing is hidden behind either effect. The rail is decorative, and
   the metric bar sits UNDER text that is already in the HTML at full opacity —
   a browser without `animation-timeline` support simply sees a filled bar and
   no rail, which is why both start from their finished state and are only
   animated where the feature is supported.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Staggered Step Reveal ────────────────────────────────────────────── */

/* docs/Effects.txt pairs this page with a Reading Progress Rail. It was built,
   measured, and REMOVED: the site-wide .scroll-progress in the layout is
   already a 2px gradient bar pinned to top:0 reading the same scroll position.
   Both sat at exactly the same place with the same fill (verified at five
   scroll positions), so the second one added a duplicate and nothing else.
   Stagger Animation — also from that file — is used instead, because the three
   story steps are exactly the "items appear one after another" case.

   ScrollReveal already fades each [data-reveal] step in. This adds the stagger:
   step 02 starts after 01, 03 after 02, so the story assembles in reading order
   instead of all three landing together. Delay only — the reveal itself, and
   therefore the text, is untouched. */
.cs__step[data-reveal] {
  transition-delay: 0ms;
}
.js .cs__steps .cs__step[data-reveal]:nth-child(2) {
  transition-delay: 110ms;
}
.js .cs__steps .cs__step[data-reveal]:nth-child(3) {
  transition-delay: 220ms;
}

/* ── Metric Bar Fill ──────────────────────────────────────────────────── */

/* A hairline under each result that fills as the card comes into view. The
   width is NOT tied to the figure — "+240%" and "Same day" are not on a shared
   scale, and a bar sized to a number nobody measured would be inventing data.
   It is a reveal, so every row fills the same amount. */
.cs__result {
  position: relative;
}

.cs__result::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(218, 61, 61, 0.15));
  transform-origin: left center;
  /* Finished state by default: a browser without scroll-timeline shows the
     bars already drawn rather than three invisible lines. */
  transform: scaleX(1);
}

/* The last row's bar would sit on the card's padding edge. */
.cs__result:last-child::after {
  display: none;
}

@supports (animation-timeline: view()) {
  .cs__result::after {
    animation: cs-bar linear both;
    animation-timeline: view();
    /* Finishes while the card is still comfortably on screen rather than at
       the very top of the viewport. */
    animation-range: entry 20% cover 38%;
  }
}

@keyframes cs-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Rule 1: reduced motion switches both off ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* The bars stay drawn; nothing animates, and no step waits its turn. */
  .cs__result::after {
    animation: none;
    transform: scaleX(1);
  }

  .js .cs__steps .cs__step[data-reveal]:nth-child(2),
  .js .cs__steps .cs__step[data-reveal]:nth-child(3) {
    transition-delay: 0ms;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   INDUSTRIES — /industries and /industries/[slug]
   ────────────────────────────────────────────────────────────────────────
   Alternating bands, the rule this site follows everywhere: dark hero →
   light problem → dark solution → light deliverables → light FAQ → dark CTA.
   The two dark bands are what stop five light sections running together.

   Effects (docs/Effects.txt): Accordion Animation on the FAQ and Stagger
   Animation on the card grids. Both are CSS only — the accordion is a native
   <details>, so the answer is in the HTML and readable with JavaScript off,
   which matters because the FAQ schema on this page claims it is there.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────────── */

.ind__head {
  position: relative;
  background:
    radial-gradient(900px 420px at 78% -10%, rgba(218, 61, 61, 0.15), transparent 62%),
    linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(28px, 5vw, 44px) clamp(56px, 7vw, 88px);
  overflow: hidden;
}

.ind__head::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(900px 400px at 50% 0%, #000 40%, transparent 100%);
  pointer-events: none;
}

.ind__headinner {
  position: relative;
  z-index: 1;
}

.ind__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--text-soft);
  margin-bottom: clamp(24px, 4vw, 40px);
}
.ind__crumbs a {
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.ind__crumbs a:hover {
  color: var(--white);
}

.ind__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 18px;
}

.ind__eyebrowicon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: rgba(218, 61, 61, 0.14);
  border: 1px solid rgba(218, 61, 61, 0.3);
  color: var(--accent);
}
.ind__eyebrowicon .icon {
  width: 16px;
  height: 16px;
}

.ind__title {
  font-size: clamp(2.125rem, 4.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  margin: 0 0 20px;
  max-width: 22ch;
}

.ind__lede {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 68ch;
  margin: 0;
}

.ind__pill {
  display: inline-block;
  margin: 24px 0 0;
  padding: 8px 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
}

/* ── Section headers ──────────────────────────────────────────────────── */

.ind__sechead {
  margin-bottom: clamp(28px, 4vw, 44px);
  max-width: 62ch;
}

.ind__kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.ind__sectitle {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--primary-dark);
  margin: 0;
}
/* Beats `.section--light h2` on the dark solutions band. */
.ind__solutions .ind__sectitle {
  color: var(--white);
}

/* ── Card grids ───────────────────────────────────────────────────────── */

.ind__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ind__grid > li {
  display: flex;
}

.ind-card {
  flex: 1;
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.ind-card__title {
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 12px;
}

.ind-card__text {
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0;
}

/* Problem cards — light band */
.ind-card--problem {
  background: var(--white);
  border: 1px solid var(--light-border);
  box-shadow: var(--shadow-soft);
}
.ind-card--problem .ind-card__title {
  color: var(--primary-dark);
}
.ind-card--problem .ind-card__text {
  color: #52607A;
}

/* Solution cards — dark band */
.ind__solutions {
  position: relative;
  background:
    radial-gradient(800px 360px at 20% 0%, rgba(218, 61, 61, 0.12), transparent 65%),
    var(--primary);
  padding-block: clamp(72px, 9vw, 120px);
}

.ind-card--solution {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
}
.ind-card--solution .ind-card__title {
  color: var(--white);
}
.ind-card--solution .ind-card__text {
  color: var(--text-soft);
}

.ind-card__no {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 14px;
}

@media (hover: hover) and (pointer: fine) {
  .ind-card--problem:hover {
    transform: translateY(-4px);
    border-color: rgba(218, 61, 61, 0.28);
    box-shadow: 0 16px 36px rgba(9, 30, 62, 0.1);
  }
  .ind-card--solution:hover {
    transform: translateY(-4px);
    border-color: rgba(218, 61, 61, 0.4);
    background: rgba(255, 255, 255, 0.07);
  }
}

/* ── Deliverables ─────────────────────────────────────────────────────── */

.ind__checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ind__checks > li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 1rem;
  line-height: 1.6;
  color: #3C4A63;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--light-border);
}

.ind__tick {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--accent);
  margin-top: 1px;
}

/* ── FAQ — Accordion Animation ────────────────────────────────────────── */

.ind__faqlist {
  display: grid;
  gap: 12px;
  max-width: 860px;
}

.ind__faq {
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ind__faq[open] {
  border-color: rgba(218, 61, 61, 0.28);
  box-shadow: var(--shadow-soft);
}

.ind__faqq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--primary-dark);
  cursor: pointer;
  list-style: none;
}
.ind__faqq::-webkit-details-marker {
  display: none;
}
.ind__faqq:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

/* A plus that becomes a minus — two bars, the vertical one rotating away. */
.ind__faqicon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}
.ind__faqicon::before,
.ind__faqicon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: transform 0.3s var(--ease);
}
.ind__faqicon::after {
  transform: rotate(90deg);
}
.ind__faq[open] .ind__faqicon::after {
  transform: rotate(0deg);
}

.ind__faqa {
  padding: 0 24px 22px;
  font-size: 1rem;
  line-height: 1.75;
  color: #52607A;
}
.ind__faqa p {
  margin: 0;
  max-width: 68ch;
}

/* The open/close slide. `interpolate-size` lets height: auto animate; where it
   is unsupported the panel simply appears, which is the correct fallback. */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  .ind__faq::details-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.32s var(--ease), opacity 0.25s var(--ease),
      content-visibility 0.32s allow-discrete;
    transition-behavior: allow-discrete;
  }
  .ind__faq[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

/* ── Client's closing line ────────────────────────────────────────────── */

.ind__closing {
  background: var(--off-white);
  border-top: 1px solid var(--light-gray);
  padding-block: clamp(40px, 5vw, 64px);
}

.ind__closingtext {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  line-height: 1.55;
  color: var(--primary-dark);
}

/* ── Other industries strip ───────────────────────────────────────────── */

.ind__othertitle {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--gray-500);
  margin: 0 0 20px;
}

.ind__others {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ind__others a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--primary-dark);
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-full);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.ind__others a .icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.ind__others a:hover {
  border-color: rgba(218, 61, 61, 0.35);
  color: var(--accent);
  transform: translateY(-2px);
}

/* ── Listing page: the card link ──────────────────────────────────────── */

.industry-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.industry-card__link:hover {
  color: var(--accent-hover);
}
.industry-card__link:hover .btn-arrow {
  transform: translateX(3px);
}
.industry-card__link .btn-arrow {
  transition: transform 0.2s var(--ease);
}

/* ── Stagger Animation (docs/Effects.txt) ─────────────────────────────── */

/* ScrollReveal already fades each [data-reveal] in; this only offsets WHEN,
   so a row of cards arrives one after another instead of as a block. Delay
   only — the reveal, and therefore the text, is untouched. */
.js .ind__grid > li:nth-child(3n + 2) [data-reveal],
.js .ind__grid > li:nth-child(3n + 2).ind-card,
.js .ind__checks > li:nth-child(3n + 2) {
  transition-delay: 90ms;
}
.js .ind__grid > li:nth-child(3n + 3) [data-reveal],
.js .ind__grid > li:nth-child(3n + 3).ind-card,
.js .ind__checks > li:nth-child(3n + 3) {
  transition-delay: 180ms;
}

/* ── Rule 1: reduced motion switches every effect off ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ind-card,
  .ind__others a {
    transition: none;
  }
  .ind-card--problem:hover,
  .ind-card--solution:hover,
  .ind__others a:hover {
    transform: none;
  }

  .ind__faqicon::before,
  .ind__faqicon::after,
  .ind__faq::details-content {
    transition: none;
  }

  .js .ind__grid > li [data-reveal],
  .js .ind__grid > li.ind-card,
  .js .ind__checks > li {
    transition-delay: 0ms;
  }
}

/* ── Band spacing ─────────────────────────────────────────────────────── */

/* Deliverables, FAQs and the "other industries" strip are three consecutive
   light bands, so between each pair sat 115px of bottom padding plus 115px of
   top padding — 230px of empty page in one unbroken colour, measured. There is
   no colour change to justify the gap, so the second of any two touching light
   bands drops its top padding. A light band that FOLLOWS the dark solutions
   band keeps its padding, because there the gap is doing real work. */
.ind .section--light + .section--light {
  padding-top: 0;
}

/* The strip already has its own tighter rhythm; keep a hairline instead. */
.ind .section--light + .section--tight {
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--light-border);
}

/* ── Narrow ───────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .ind__faqq {
    padding: 16px 18px;
    font-size: 1rem;
  }
  .ind__faqa {
    padding: 0 18px 18px;
  }
  .ind-card {
    padding: 22px 20px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PAGINATION — /blogs and /blogs/category/[slug]
   ────────────────────────────────────────────────────────────────────────
   Light-band only for now, which is where both listings live. If a dark
   listing ever needs it, restate the colours under a modifier rather than
   changing these — the mistake already made once with .filter-btn, which was
   written for the dark section and turned white-on-white on the light one.
   ════════════════════════════════════════════════════════════════════════ */

.pager {
  display: grid;
  gap: 18px;
  justify-items: center;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--light-border);
}

.pager__status {
  margin: 0;
  font-size: 0.875rem;
  color: var(--gray-500);
}
.pager__status strong {
  color: var(--primary-dark);
  font-weight: 600;
}

.pager__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Shared shape for numbers and the prev/next steps, so a row of them sits on
   one baseline whatever it contains. */
.pager__num,
.pager__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;           /* 44px is the touch-target floor */
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  color: var(--primary-dark);
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  a.pager__num:hover,
  a.pager__step:hover {
    border-color: rgba(218, 61, 61, 0.35);
    color: var(--accent);
  }
}

.pager__num:focus-visible,
.pager__step:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The current page. A <span>, not a link — there is nowhere to go. */
[aria-current='page'].pager__num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
  cursor: default;
}

/* Prev/next at the ends of the range: present, so the row does not reflow as
   you page through, but visibly inert. 4.6:1 on white — muted, still legible,
   which "disabled" grey usually is not. */
[aria-disabled='true'].pager__step {
  color: #7A8395;
  background: var(--light-bg-alt);
  border-color: var(--light-border);
  cursor: default;
}

.pager__gap {
  padding: 0 4px;
  color: var(--slate-400);
  user-select: none;
}

@media (max-width: 560px) {
  /* The word labels are what overflow first; the arrows still say which way. */
  .pager__step span:not([aria-hidden]) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pager__step {
    min-width: 44px;
    padding: 0 10px;
  }
  .pager__num,
  .pager__step {
    font-size: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pager__num,
  .pager__step {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PORTFOLIO — /portfolio and /portfolio/[slug]
   ────────────────────────────────────────────────────────────────────────
   The card itself (.portfolio-card and its hover drawer) already exists
   further up this file and is reused as-is — the grid on the homepage and the
   grid here are the same component. Only what is new lives below.

   Effects (docs/Effects.txt) pairs this page with "FLIP Filter Morph + Hover
   Peek + Shared-Element Lightbox". Hover Peek is the existing drawer. FLIP is
   added here and in script.js. The lightbox is left out on purpose: no project
   has gallery images yet, and a lightbox with nothing to open is dead code.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Card placeholder (no image uploaded yet) ─────────────────────────── */

/* The seeded projects ship without thumbnails so the client uploads their own
   rather than inheriting a stock photo of someone else's office. This is what
   the frame shows until then — deliberately plain, and clearly not a photo. */
.portfolio-card__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, var(--light-bg-alt) 0%, var(--light-gray) 100%);
  border-bottom: 1px solid var(--light-border);
}

.portfolio-card__placeholder span {
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: rgba(9, 30, 62, 0.14);
}

/* The listing page subtitle under "Selected work". */
.portfolio-sub {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gray-500);
}

/* ── FLIP Filter Morph ────────────────────────────────────────────────── */

/* script.js measures each card before and after a filter, then sets --fx/--fy
   to the distance it moved and lets this transition carry it back to zero, so
   the cards GLIDE to their new positions instead of snapping. The properties
   animated are transform only.

   .is-flipping is applied for one frame with the transition off, which is what
   makes the card start from its old position. */
.portfolio-item.is-flipping {
  transition: none;
  translate: var(--fx, 0) var(--fy, 0);
}

/* ── Detail page: hero ────────────────────────────────────────────────── */

.pj__head {
  position: relative;
  background:
    radial-gradient(900px 420px at 80% -10%, rgba(218, 61, 61, 0.15), transparent 62%),
    linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(28px, 5vw, 44px) clamp(48px, 6vw, 72px);
  overflow: hidden;
}

.pj__head::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(900px 400px at 50% 0%, #000 40%, transparent 100%);
  pointer-events: none;
}

.pj__headinner {
  position: relative;
  z-index: 1;
}

.pj__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--text-soft);
  margin-bottom: clamp(24px, 4vw, 40px);
}
.pj__crumbs a {
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.pj__crumbs a:hover {
  color: var(--white);
}

.pj__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
  padding: 6px 14px;
  background: rgba(218, 61, 61, 0.12);
  border: 1px solid rgba(218, 61, 61, 0.28);
  border-radius: var(--radius-full);
}

.pj__title {
  font-size: clamp(2.125rem, 4.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  margin: 0 0 20px;
  max-width: 20ch;
}

.pj__lede {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 68ch;
  margin: 0;
}

/* Facts, not claims — client, engagement length, tools. */
.pj__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.pj__facts > div {
  min-width: 0;
}
.pj__facts dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.pj__facts dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--white);
}

.pj__visit {
  margin: 28px 0 0;
}

/* ── Lead image ───────────────────────────────────────────────────────── */

/* Pulled up over the band edge so it overlaps the hero, the way the article
   cover does. Negative margin, NOT transform: transform moves the pixels and
   leaves the box where it was, which is what put the blog cover on top of the
   byline. */
.pj__hero {
  margin: clamp(-56px, -5vw, -32px) 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(9, 30, 62, 0.22);
}
.pj__hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Clearance so the next band does not start under the shadow. */
.pj__hero + * {
  margin-top: 40px;
}

/* ── Section headers ──────────────────────────────────────────────────── */

.pj__sechead {
  margin-bottom: clamp(28px, 4vw, 44px);
  max-width: 62ch;
}

.pj__kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.pj__sectitle {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--primary-dark);
  margin: 0;
}

/* ── Approach steps ───────────────────────────────────────────────────── */

.pj__steps {
  display: grid;
  gap: clamp(28px, 3.5vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

/* Number in its own column so every paragraph shares one left edge. */
.pj__steps > li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.pj__stepno {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent);
  margin: 0;
  padding-top: 4px;
  border-top: 2px solid rgba(218, 61, 61, 0.28);
}

.pj__steptitle {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--primary-dark);
  margin: 0 0 10px;
}

.pj__steptext {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #52607A;
  margin: 0;
  max-width: 68ch;
}

/* ── Gallery ──────────────────────────────────────────────────────────── */

.pj__gallerywrap {
  background: var(--off-white);
  border-block: 1px solid var(--light-gray);
  padding-block: clamp(48px, 6vw, 80px);
}

.pj__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pj__gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--light-border);
}

/* ── Deliverables ─────────────────────────────────────────────────────── */

.pj__checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pj__checks > li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 1rem;
  line-height: 1.6;
  color: #3C4A63;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--light-border);
}

.pj__tick {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--accent);
  margin-top: 1px;
}

/* ── Client quote ─────────────────────────────────────────────────────── */

.pj__quotewrap {
  background:
    radial-gradient(760px 320px at 50% 0%, rgba(218, 61, 61, 0.12), transparent 70%),
    var(--primary);
  padding-block: clamp(56px, 7vw, 88px);
}

.pj__quote {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  padding: 0 16px;
}

.pj__quotetext {
  margin: 0;
  border: 0;
  padding: 0;
}
.pj__quotetext p {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.5;
  color: var(--white);
  margin: 0;
}

.pj__quoteby {
  margin-top: 24px;
  font-size: 0.875rem;
  color: var(--text-soft);
}
.pj__quoteby::before {
  content: "— ";
}

/* ── Band spacing ─────────────────────────────────────────────────────── */

/* Same trap the industry pages hit: two touching light bands stack 115px of
   bottom padding on 115px of top padding, and there is no colour change to
   justify the gap. */
.pj .section--light + .section--light {
  padding-top: 0;
}

/* ── Narrow ───────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  /* 56px of empty gutter beside every paragraph is a lot on a phone. */
  .pj__steps > li {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .pj__stepno {
    display: inline-block;
    padding-top: 0;
    border-top: 0;
    border-bottom: 2px solid rgba(218, 61, 61, 0.28);
  }

  .pj__facts {
    gap: 16px 28px;
  }
}

/* ── Rule 1: reduced motion switches every effect off ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  .portfolio-item.is-flipping {
    translate: none;
  }
  .pj__crumbs a {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PORTFOLIO CARDS — REBUILT FOR WIDE DEVICE MOCKUPS
   ────────────────────────────────────────────────────────────────────────
   The old card was `aspect-ratio: 4/5` (portrait) in a 4-column grid, built
   for cropped photography. The images going in are device mockups — a desktop,
   laptop and phone showing one site, roughly 1300x630, so 2:1 — and that shape
   squeezed into a quarter-width portrait frame leaves the screens unreadable,
   which is the only part anyone is looking at.

   TWO COLUMNS, 2:1 FRAMES. One mockup per card at roughly 586px wide on a
   1200px container, so the site inside it is legible.

   `object-fit: contain`, NOT `cover`. A mockup is a composed image with air
   around the devices; `cover` crops the edges off the outer screens, which is
   exactly the part that says "this is a real site". The frame gets a light
   plate behind it so a mockup on white does not float on nothing.

   The drawer is now a BAND UNDER the image rather than an overlay on it. An
   overlay on a photograph is fine; an overlay across a mockup covers the
   screen you are meant to be reading.

   These rules come after the originals in this file, so they win on order
   without needing to out-specify anything.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Grid: two columns, never four ────────────────────────────────────── */

@media (min-width: 576px) {
  ul.portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 28px);
  }
}

/* Overrides the 4-column rule above — one wide mockup per card is the point. */
@media (min-width: 992px) {
  ul.portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 2.4vw, 32px);
  }
}

/* ── Card: auto height, image band + text band ────────────────────────── */

.portfolio-card {
  display: flex;
  flex-direction: column;
  /* The card is now as tall as its content. A fixed aspect-ratio on the CARD
     would force the text band to share the 2:1 box with the image. */
  aspect-ratio: auto;
  background: var(--white);
  border-color: var(--light-border);
}

@media (min-width: 576px) {
  .portfolio-card {
    aspect-ratio: auto;
  }
}

/* ── Image frame ──────────────────────────────────────────────────────── */

/* The 2:1 lives HERE, on the frame, so every card's image band is identical
   whatever the uploaded file's own proportions are. */
.portfolio-card__img,
.portfolio-card__placeholder {
  aspect-ratio: 16 / 10;
  width: 100%;
  height: auto;
  /* contain, not cover — see the note at the top. */
  object-fit: contain;
  background: linear-gradient(160deg, #F4F6FA 0%, #E9EDF4 100%);
  border-bottom: 1px solid var(--light-border);
}

/* A mockup is already a composed image; scaling it up on hover pushes the
   devices past the frame edge. A slight lift on the whole card reads better. */
.portfolio-card:hover .portfolio-card__img,
.portfolio-card:focus-within .portfolio-card__img {
  transform: none;
}

.portfolio-card__placeholder {
  aspect-ratio: 16 / 10;
}

@media (hover: hover) and (pointer: fine) {
  .portfolio-item:not(.is-flipping) .portfolio-card {
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
      border-color 0.3s var(--ease);
  }
  .portfolio-card:hover {
    transform: translateY(-4px);
    border-color: rgba(218, 61, 61, 0.3);
    box-shadow: 0 18px 44px rgba(9, 30, 62, 0.14);
  }
}

/* ── Text band ────────────────────────────────────────────────────────── */

/* Restated from an absolutely-positioned overlay to a normal block in flow.
   Every positioning property the old rule set has to be undone explicitly —
   leaving `position: absolute` and only changing the colours would keep it
   sitting on top of the image. */
.portfolio-card__drawer {
  position: static;
  inset: auto;
  width: auto;
  flex: 1;
  padding: 0;
  background: var(--white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top: 0;
  opacity: 1;
  transform: none;
  transition: none;
}

/* The red streak sat on the drawer's top edge as an overlay seam; on a card
   with a real border there is nothing for it to separate. */
.portfolio-card__drawer::before {
  display: none;
}

.portfolio-card__drawer-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  padding: 22px 24px 24px;
  /* The overlay version centred and shifted its content; both have to go. */
  transform: none;
  text-align: left;
}

.portfolio-badge {
  color: var(--accent);
  background: rgba(218, 61, 61, 0.08);
  border: 1px solid rgba(218, 61, 61, 0.2);
}

.portfolio-card .portfolio-card__title {
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--primary-dark);
  margin: 0;
}

/* Beats the original's own @media (min-width: 992px) font-size. */
@media (min-width: 992px) {
  .portfolio-card .portfolio-card__title {
    font-size: clamp(1.125rem, 1.7vw, 1.375rem);
    margin: 0;
  }
}

.portfolio-card .portfolio-card__desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #52607A;
  margin: 0;
  /* Two lines, so a long description cannot make one card taller than the one
     beside it. The full text is on the project page. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 992px) {
  .portfolio-card .portfolio-card__desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0;
  }
}

.portfolio-card .portfolio-card__link {
  /* Pushed to the bottom so the link sits on one line across both cards in a
     row even when their descriptions differ in length. */
  margin-top: auto;
  padding-top: 4px;
  color: var(--accent);
  font-weight: 600;
}
.portfolio-card__link:hover {
  color: var(--accent-hover);
}

/* The placeholder letter sat on a navy card; the card is white now. */
.portfolio-card__placeholder span {
  color: rgba(9, 30, 62, 0.13);
}

/* ── Narrow ───────────────────────────────────────────────────────────── */

@media (max-width: 575px) {
  /* One column, and the mockup keeps its shape — a 2:1 image at phone width is
     still legible, a cropped one is not. */
  ul.portfolio-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .portfolio-card__drawer-inner {
    padding: 18px 20px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-card {
    transition: none;
  }
  .portfolio-card:hover {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   LOCATIONS — /locations and /locations/[slug]
   ────────────────────────────────────────────────────────────────────────
   The FAQ accordion is reused from the industry pages (.ind__faq and friends)
   rather than restated — it is the same component doing the same job, and a
   second copy is a second thing to keep in step.

   Bands alternate dark → light → dark → light, the rule this site follows
   everywhere, so the page never runs one colour end to end.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hub tiles ────────────────────────────────────────────────────────── */

.loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.loc-grid > li {
  display: flex;
}

.loc-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  padding: 28px 26px;
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.loc-tile__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--gray-500);
}
.loc-tile__eyebrow .icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.loc-tile__tag {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(218, 61, 61, 0.08);
  border: 1px solid rgba(218, 61, 61, 0.2);
  color: var(--accent);
  letter-spacing: 0.04em;
}

.loc-tile__title {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
}
.loc-tile__title a {
  color: var(--primary-dark);
  text-decoration: none;
}
/* The whole tile is the target, but the link stays the accessible name. */
.loc-tile__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.loc-tile {
  position: relative;
}

.loc-tile__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #52607A;
}

.loc-tile__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .loc-tile:hover {
    transform: translateY(-4px);
    border-color: rgba(218, 61, 61, 0.3);
    box-shadow: 0 16px 36px rgba(9, 30, 62, 0.1);
  }
  .loc-tile:hover .btn-arrow {
    transform: translateX(3px);
  }
  .loc-tile .btn-arrow {
    transition: transform 0.2s var(--ease);
  }
}

/* ── City page: hero ──────────────────────────────────────────────────── */

.loc__head {
  position: relative;
  background:
    radial-gradient(900px 420px at 80% -10%, rgba(218, 61, 61, 0.15), transparent 62%),
    linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(28px, 5vw, 44px) clamp(56px, 7vw, 88px);
  overflow: hidden;
}

.loc__head::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(900px 400px at 50% 0%, #000 40%, transparent 100%);
  pointer-events: none;
}

.loc__headinner {
  position: relative;
  z-index: 1;
}

.loc__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--text-soft);
  margin-bottom: clamp(24px, 4vw, 40px);
}
.loc__crumbs a {
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.loc__crumbs a:hover {
  color: var(--white);
}

.loc__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-soft);
}
.loc__eyebrow .icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.loc__officetag {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: rgba(218, 61, 61, 0.14);
  border: 1px solid rgba(218, 61, 61, 0.3);
  color: var(--white);
}

.loc__title {
  font-size: clamp(2.125rem, 4.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  margin: 0 0 20px;
  max-width: 20ch;
}

.loc__lede {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 68ch;
  margin: 0;
}

.loc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* ── The local angle ──────────────────────────────────────────────────── */

.loc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.loc__sechead {
  margin-bottom: clamp(20px, 3vw, 32px);
  max-width: 62ch;
}

.loc__kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.loc__sectitle {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--primary-dark);
  margin: 0;
}
/* Beats `.section--light h2` on the dark band. */
.loc__why .loc__sectitle {
  color: var(--white);
}

.loc__body {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: #52607A;
  margin: 0;
  max-width: 68ch;
  /* Paragraph breaks the client typed are real breaks, not collapsed space. */
  white-space: pre-line;
}

.loc__nearby {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--light-border);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--gray-500);
}
.loc__nearby strong {
  color: var(--primary-dark);
}

.loc__areas {
  position: sticky;
  top: 96px;
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 28px 24px;
}

.loc__areastitle {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

.loc__areas ul {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.loc__areas li {
  padding-left: 18px;
  position: relative;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #3C4A63;
}
.loc__areas li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.loc__office {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--light-border);
}
.loc__address {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #3C4A63;
  margin-bottom: 10px;
}
.loc__office a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

/* ── Why us, dark band ────────────────────────────────────────────────── */

.loc__why {
  position: relative;
  background:
    radial-gradient(800px 360px at 20% 0%, rgba(218, 61, 61, 0.12), transparent 65%),
    var(--primary);
  padding-block: clamp(72px, 9vw, 120px);
}

.loc__whygrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.loc__whygrid > li {
  display: flex;
}

.loc-card {
  flex: 1;
  padding: 28px 26px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}

.loc-card__no {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 14px;
}

.loc-card__title {
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  margin: 0 0 12px;
}

.loc-card__text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  .loc-card:hover {
    transform: translateY(-4px);
    border-color: rgba(218, 61, 61, 0.4);
    background: rgba(255, 255, 255, 0.07);
  }
}

/* ── Map ──────────────────────────────────────────────────────────────── */

.loc__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--light-border);
  box-shadow: var(--shadow-soft);
  /* aspect-ratio rather than a fixed height: the iframe reserves its box
     before it loads, so the map cannot shift the page as it arrives. */
  aspect-ratio: 16 / 7;
}
.loc__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 700px) {
  .loc__map {
    aspect-ratio: 4 / 3;
  }
}

/* ── Band spacing ─────────────────────────────────────────────────────── */

/* Same trap the industry pages hit: two touching light bands stack 115px of
   bottom padding on 115px of top padding with no colour change to justify it. */
.loc .section--light + .section--light {
  padding-top: 0;
}

/* ── Narrow ───────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .loc__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Sticky with nothing beside it just pins a card mid-scroll. */
  .loc__areas {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loc-tile,
  .loc-card {
    transition: none;
  }
  .loc-tile:hover,
  .loc-card:hover {
    transform: none;
  }
  .loc-tile:hover .btn-arrow {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   REVIEWS — /reviews
   ────────────────────────────────────────────────────────────────────────
   The card itself (.testimonial-card and its children) already exists further
   up this file and is reused as-is — the homepage carousel and this grid share
   one component, so only the LAYOUT around it is new.

   The homepage rules size the card for a horizontal carousel track, so the few
   that assume that context are restated here for a grid.
   ════════════════════════════════════════════════════════════════════════ */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.reviews-grid > li {
  display: flex;
}

/* In the carousel each card is a fixed-width slide. In a grid it fills its
   column and matches its row's height, so a long quote and a short one sit on
   one baseline. */
.reviews-grid .testimonial-card {
  flex: 1;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  margin: 0;
  scroll-snap-align: none;
}

/* The quote grows and the author line is pushed to the foot, so every card's
   attribution lines up across a row. */
.reviews-grid .testimonial-card__quote {
  flex: 1;
}

/* ── The Google link in the page header ───────────────────────────────── */

.reviews-google {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: var(--primary-dark);
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.reviews-google__meta {
  display: grid;
  gap: 1px;
  line-height: 1.3;
}
.reviews-google__meta strong {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}
.reviews-google__meta span {
  font-size: 0.8125rem;
  color: var(--gray-500);
}

.reviews-google .btn-arrow {
  color: var(--accent);
  transition: transform 0.2s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .reviews-google:hover {
    border-color: rgba(218, 61, 61, 0.3);
    transform: translateY(-2px);
  }
  .reviews-google:hover .btn-arrow {
    transform: translate(2px, -2px);
  }
}

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

@media (max-width: 560px) {
  /* The header stacks; a nowrap pill at full width would overflow. */
  .reviews-google {
    white-space: normal;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-google,
  .reviews-google .btn-arrow {
    transition: none;
  }
  .reviews-google:hover,
  .reviews-google:hover .btn-arrow {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   404 — app/(site)/not-found.tsx
   ────────────────────────────────────────────────────────────────────────
   Dark band, like the thank-you page, because both sit between the navbar and
   the footer with nothing above them to alternate against.

   The oversized "404" is the only decorative thing here. Everything else is a
   route somebody might have been looking for — a 404 that apologises and stops
   is a dead end, and this site's own pages are the most useful thing to put on
   one.
   ════════════════════════════════════════════════════════════════════════ */

.notfound {
  position: relative;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(218, 61, 61, 0.16), transparent 62%),
    linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding-block: clamp(56px, 8vw, 104px);
  overflow: hidden;
}

.notfound::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(900px 420px at 50% 0%, #000 40%, transparent 100%);
  pointer-events: none;
}

.notfound__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

/* Decorative, and marked aria-hidden in the markup — the <h1> below says what
   happened in words. */
.notfound__code {
  margin: 0 0 8px;
  font-size: clamp(5rem, 16vw, 9rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.14);
  user-select: none;
}

.notfound__title {
  margin: 14px 0 16px;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
}

.notfound__text {
  margin: 0 auto 36px;
  max-width: 54ch;
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  line-height: 1.7;
  color: var(--text-soft);
}

/* ── The destinations ─────────────────────────────────────────────────── */

.notfound__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  text-align: left;
}

.notfound__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  height: 100%;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.notfound__link-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
}

.notfound__link-note {
  grid-column: 1;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-soft);
}

.notfound__link .btn-arrow {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--accent);
  transition: transform 0.2s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .notfound__link:hover {
    transform: translateY(-2px);
    border-color: rgba(218, 61, 61, 0.4);
    background: rgba(255, 255, 255, 0.07);
  }
  .notfound__link:hover .btn-arrow {
    transform: translateX(3px);
  }
}

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

/* ── Actions ──────────────────────────────────────────────────────────── */

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
}

.notfound__call {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-soft);
}
.notfound__call a {
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.notfound__call a:hover {
  border-bottom-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .notfound__link,
  .notfound__link .btn-arrow {
    transition: none;
  }
  .notfound__link:hover,
  .notfound__link:hover .btn-arrow {
    transform: none;
  }
}