/**
 * Fox Logic — global styles
 * Mobile-first, CSS variables, minimal specificity where possible.
 */

:root {
  /* Desert Teal — Palette K */
  --color-primary: #1a1714;
  --color-primary-soft: #2f2a26;
  --color-accent: #14b8a6;
  --color-accent-hover: #0d9488;
  --color-bg: #faf9f7;
  --color-bg-muted: #f0ebe6;
  --color-text: #1a1714;
  --color-text-muted: #5c564f;
  --color-white: #ffffff;

  /* Semantic surfaces (additive — for new rules; existing hardcoded values left intact) */
  --color-dark-1: #1a1714;
  --color-dark-2: #141210;
  --color-dark-3: #0f0e0c;
  --color-accent-12: rgba(20, 184, 166, 0.12);
  --color-accent-18: rgba(20, 184, 166, 0.18);
  --color-accent-32: rgba(20, 184, 166, 0.32);
  --color-on-dark-strong: rgba(255, 255, 255, 0.92);
  --color-on-dark: rgba(255, 255, 255, 0.84);
  --color-on-dark-muted: rgba(255, 255, 255, 0.65);
  --color-border-light: rgba(26, 23, 20, 0.08);
  --color-border-dark: rgba(255, 255, 255, 0.12);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-btn: 5px;
  --shadow-sm: 0 8px 24px rgba(26, 23, 20, 0.08);
  --shadow-md: 0 16px 48px rgba(26, 23, 20, 0.12);
  --shadow-lg: 0 24px 64px rgba(26, 23, 20, 0.16);
  --shadow-hover: 0 22px 56px rgba(26, 23, 20, 0.12);

  /* Spacing scale (8px base) — use for new rules; existing fine-grained values left intact */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 2.5rem;   /* 40px */
  --space-8: 3rem;     /* 48px */
  --space-9: 4rem;     /* 64px */

  /* Focus ring — single source of truth */
  --focus-ring: 2px solid var(--color-accent);
  --focus-offset: 3px;

  /* Stacking context — documented z-index ladder */
  --z-base: 1;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-header: 50;
  --z-header-home: 60;
  --z-skip-link: 1000;
  --z-overlay: 9999;

  /* Container widths */
  --container: min(1320px, 92vw);
  --container-narrow: min(720px, 92vw);
  --container-wide: min(1320px, 94vw);

  --header-h: 72px;
  --header-safe-top: env(safe-area-inset-top, 0px);
  --header-stack: calc(var(--header-h) + var(--header-safe-top));
  --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --section-pad-y: clamp(3.25rem, 7vw, 5rem);
  --fl-scroll: 0;

  /* Inner-page hero — single source of truth for every page that's not the homepage.
     Symmetrical height across About, Services, Portfolio, Pricing, Blog, Quote,
     Contact, Legal, every service detail page, and every regional landing page.
     Generous and balanced so even content-heavy heroes never feel cramped. */
  --hero-inner-h: clamp(560px, 64vh, 680px);

  scroll-padding-top: calc(var(--header-stack) + 16px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 1.0625rem;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  text-decoration-thickness: 0;
  text-underline-offset: 0;
  transition:
    color 0.2s ease,
    opacity 0.2s ease,
    transform 0.22s ease,
    border-color 0.2s ease;
}

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

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

a:focus:not(:focus-visible) {
  outline: none;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.container.narrow {
  width: min(720px, 92vw);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 10px 14px;
  background: var(--color-white);
  color: var(--color-primary);
  z-index: 1000;
  border-radius: var(--radius-sm);
}

.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;
}

/* ---------- Header (fixed overlay; glass tightens on scroll) ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  padding-top: var(--header-safe-top);
  background: transparent;
  box-shadow: none;
  /* Promote the header to its own composite layer so the autoplay hero
     video underneath doesn't trigger nav re-paints on every frame.
     `contain: paint` would clip the "What We Build" dropdown (which
     extends below the header) so we use only `isolation` + transform
     for a stacking context without paint clipping. */
  transform: translateZ(0);
  isolation: isolate;
  transition:
    background 0.35s ease,
    backdrop-filter 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.site-header.is-scrolled {
  background: rgba(26, 23, 20, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(26, 23, 20, 0.18);
}

/* Scroll-driven accent edge (intensity follows --fl-scroll 0–1 from JS) */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  opacity: calc(0.15 + var(--fl-scroll, 0) * 0.75);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(20, 184, 166, 0.15) 22%,
    var(--color-accent) 50%,
    rgba(20, 184, 166, 0.15) 78%,
    transparent 100%
  );
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

/* Offset content when there is no full-bleed hero under the fixed header */
main#main-content:not(:has(.page-hero-full)) {
  padding-top: var(--header-stack);
}

.logo img {
  display: block;
}

/* Logo on dark UI — align raster mark with Desert Teal palette */
.brand-logo-img--on-dark {
  filter: brightness(1.08) contrast(1.06) saturate(1.12)
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
    drop-shadow(0 6px 26px rgba(20, 184, 166, 0.42));
}

.brand-logo-img--on-light {
  filter: brightness(0.98) contrast(1.08) saturate(1.08)
    drop-shadow(0 4px 22px rgba(20, 184, 166, 0.28));
}

/* Vector wordmark — skip heavy photo filters; keep a controlled rim glow */
.brand-logo-img--svg {
  filter: none;
}

.brand-logo-img--svg.brand-logo-img--on-dark {
  filter: drop-shadow(0 0 22px rgba(20, 184, 166, 0.42));
}

.brand-logo-img--svg.brand-logo-img--on-light {
  filter: drop-shadow(0 6px 26px rgba(20, 184, 166, 0.28));
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
  margin-inline: auto;
  border-radius: 2px;
}

.nav-toggle-bar {
  position: relative;
}

.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform 0.2s ease;
}

.nav-toggle-bar::before {
  top: -7px;
}

.nav-toggle-bar::after {
  top: 7px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.nav-list a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  transition: color 0.22s ease;
}

.nav-list a:hover,
.nav-list a:focus-visible {
  color: var(--color-accent);
}

.btn-nav-cta {
  flex-shrink: 0;
}

.site-nav__drawer-head,
.site-nav__drawer-close {
  display: none;
}

.site-nav-overlay {
  display: none;
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Slide-in left drawer. Sits above page chrome but below the chatbot panel.
     Body scroll-lock and overlay are controlled by main.js. */
  .site-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 86vw);
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, #1a1714 0%, #232018 100%);
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    gap: 0.75rem;
    z-index: 95;
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.35);
    border-right: 1px solid rgba(20, 184, 166, 0.18);
  }

  body.nav-open .site-nav {
    transform: translateX(0);
    visibility: visible;
  }

  .site-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 94;
    background: rgba(10, 8, 6, 0.62);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }

  body.nav-open .site-nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  body.nav-open {
    overflow: hidden;
  }

  .site-nav__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .site-nav__drawer-logo img {
    height: 36px;
    width: auto;
    display: block;
  }

  .site-nav__drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .site-nav__drawer-close:hover {
    background: rgba(20, 184, 166, 0.18);
    border-color: rgba(20, 184, 166, 0.4);
  }

  .nav-list {
    flex-direction: column;
    gap: 0;
    margin: 0.25rem 0 1rem;
  }

  .nav-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .nav-list li:last-child {
    border-bottom: none;
  }

  .nav-list a {
    display: flex;
    align-items: center;
    padding: 0.95rem 0.25rem;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    width: 100%;
  }

  .nav-list a:hover,
  .nav-list a:focus-visible {
    color: var(--color-accent);
  }

  .btn-nav-cta {
    margin-top: auto;
    text-align: center;
    justify-content: center;
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  min-height: 2.5rem;
  box-sizing: border-box;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.25;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  min-height: 3rem;
  font-size: 1rem;
  letter-spacing: 0.005em;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
  text-decoration: none;
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-white);
  box-shadow: 0 8px 26px rgba(20, 184, 166, 0.32);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn-ghost-light:focus-visible,
.btn-ghost-dark:focus-visible,
.btn-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Text-style button (no chrome) — used for tertiary CTAs alongside primary/secondary */
.btn-link {
  background: transparent;
  color: var(--color-accent-hover);
  border-color: transparent;
  padding: 0.5rem 0.4rem;
  text-decoration: none;
}

.btn-link:hover {
  color: var(--color-accent);
  transform: translateX(2px);
}

.btn-secondary {
  background: var(--color-white);
  color: var(--color-primary);
  border: 2px solid rgba(26, 23, 20, 0.14);
  text-decoration: none;
  box-shadow: none;
}

.btn-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 8px 22px rgba(26, 23, 20, 0.06);
}

.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: rgba(26, 23, 20, 0.18);
  text-decoration: none;
}

.btn-ghost:hover {
  border-color: var(--color-primary);
  box-shadow: 0 6px 18px rgba(26, 23, 20, 0.06);
}

.btn-ghost-light {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}

.btn-ghost-light:hover {
  border-color: var(--color-white);
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}

.btn-block {
  width: 100%;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(3rem, 8vw, 5.5rem) 0;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(20, 184, 166, 0.12), transparent 55%),
    radial-gradient(900px 500px at 10% 20%, rgba(26, 23, 20, 0.06), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, var(--color-bg) 100%);
  z-index: -1;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.hero-title {
  font-size: clamp(2rem, 4vw, 2.85rem);
  line-height: 1.12;
  margin: 0 0 1rem;
  color: var(--color-primary);
}

.hero-lead {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin: 0 0 1.5rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.hero-trust {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin: 0;
}

.hero-visual picture,
.hero-visual img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 0.75rem;
}

/* Small accent line before every eyebrow — gives the label more presence
   without competing with the H2. Inherits color from currentColor so the
   on-dark / on-hero variants stay readable automatically. The
   .blog-featured eyebrow has its own dot element and is excluded. */
.eyebrow:not(.blog-featured__eyebrow)::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 26px;
  height: 1.5px;
  margin-right: 0.6rem;
  margin-bottom: 0.18em;
  background: currentColor;
  opacity: 0.72;
  border-radius: 1px;
}

/* ---------- Sections ---------- */
.section {
  padding: var(--section-pad-y) 0;
}

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

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.1vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 0.75rem;
  color: var(--color-primary);
  /* Balanced wrapping prevents jagged centered headlines on multi-line. */
  text-wrap: balance;
}

.section-lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.section-head {
  margin-bottom: 2rem;
  margin-inline: auto;
  max-width: 850px;
  text-align: center;
}

.section-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  margin-top: 2rem;
}

.cta-inline {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.cta-inline a {
  font-weight: 600;
}

.split {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  align-items: center;
}

@media (min-width: 880px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split-reverse > :first-child {
    order: 2;
  }

  .split-reverse > :last-child {
    order: 1;
  }
}

.bullet-list {
  padding-left: 1.2rem;
  color: var(--color-text-muted);
}

.bullet-list.columns-2 {
  columns: 1;
}

@media (min-width: 700px) {
  .bullet-list.columns-2 {
    columns: 2;
    gap: 2rem;
  }
}

.bullet-list li {
  margin-bottom: 0.5rem;
}

.bullet-list--checks {
  list-style: none;
  padding-left: 0;
}

.bullet-list--checks li {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin-bottom: 0.55rem;
}

.bullet-list--checks .fl-li-icon {
  flex-shrink: 0;
  margin-top: 0.18rem;
  color: var(--color-accent);
}

.bullet-list--checks.bullet-list--on-dark .fl-li-icon {
  color: #5eead4;
}

.reveal-stack {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  gap: 1.25rem;
}

.card-grid-3 {
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .card-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(26, 23, 20, 0.07);
  overflow: hidden;
}

.card-title {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  color: var(--color-primary);
}

.card-title--with-icon {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.card-title__icon {
  flex-shrink: 0;
  margin-top: 0.12rem;
  color: var(--color-accent);
}

.solution-card {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  border-left: 4px solid var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.stats-bar {
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-soft));
  color: var(--color-white);
  padding: 2rem 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  text-align: center;
}

@media (min-width: 800px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-num {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--color-white);
}

.stat-label {
  font-size: 0.85rem;
  opacity: 0.88;
}

.stat-count {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-height: 1.15em;
}

.quote-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin: 0;
  box-shadow: var(--shadow-sm);
}

.quote-card footer {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.section-services-closer .container--reading > p.reveal {
  text-align: center;
}

.page-about .container.narrow > .section-title {
  text-align: center;
}

.page-about-story {
  max-width: 38rem;
}

.page-about-story-figure {
  margin: 0;
}

.page-about-story-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.page-about-story-caption {
  margin: 0.75rem 0 0;
  padding: 0 0.15rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.page-about-story__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
  margin-top: 1.35rem;
}

.page-about-story__actions .text-link--inline-cta {
  flex: 1 1 100%;
  margin-top: 0.15rem;
  font-weight: 600;
}

@media (min-width: 520px) {
  .page-about-story__actions .text-link--inline-cta {
    flex: 0 1 auto;
    margin-top: 0;
  }
}

.page-about-principles-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

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

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

.page-about-after-steps {
  margin-top: 2rem;
}

.page-about-after-procurement {
  margin-top: 1.75rem;
}

/* ---------- 404 ---------- */
.page-404-details .section-title {
  text-align: center;
}

.page-404-path {
  margin: 0 0 0.65rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  text-align: center;
}

.page-404-path-code {
  margin: 0;
  text-align: center;
}

.page-404-path-code code {
  display: inline-block;
  max-width: 100%;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(26, 23, 20, 0.06);
  border: 1px solid rgba(26, 23, 20, 0.1);
  font-size: 0.9rem;
  word-break: break-all;
}

.page-404-cta-spacing {
  margin-top: 2rem;
}

.card-grid .card-title--with-icon {
  justify-content: center;
}

/* ---------- FAQ (basic accordion fallback) ---------- */
.accordion-item {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 0.25rem 1rem;
  margin-bottom: 0.65rem;
  box-shadow: var(--shadow-sm);
}

.accordion-item summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.85rem 0;
  color: var(--color-primary);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.accordion-item summary::-webkit-details-marker {
  display: none;
}

.accordion-item summary::marker {
  content: "";
}

.accordion-item p {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary) 0%, #120e36 100%);
  color: var(--color-white);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      118deg,
      transparent,
      transparent 44px,
      rgba(255, 255, 255, 0.055) 44px,
      rgba(255, 255, 255, 0.055) 45px
    ),
    repeating-linear-gradient(
      -118deg,
      transparent,
      transparent 52px,
      rgba(20, 184, 166, 0.09) 52px,
      rgba(20, 184, 166, 0.09) 53px
    );
  opacity: 0.95;
}

.cta-band > .container {
  position: relative;
  z-index: 1;
}

.cta-band-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

@media (max-width: 767px) {
  .cta-band-inner {
    align-items: center;
    text-align: center;
  }

  .cta-actions {
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .cta-band-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}

.cta-title {
  margin: 0 0 0.35rem;
  font-size: 1.55rem;
}

.cta-text {
  margin: 0;
  opacity: 0.92;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

/* Desktop: keep CTA buttons on one clean horizontal line. */
@media (min-width: 768px) {
  .cta-band-inner .cta-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.85rem;
  }

  .cta-band-inner .cta-actions .btn {
    white-space: nowrap;
  }
}

/* Mobile: stack buttons full-width for clean tap targets. */
@media (max-width: 767px) {
  .cta-band-inner .cta-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .cta-band-inner .cta-actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: clamp(2.5rem, 6vw, 4rem) 0 1rem;
  background: linear-gradient(180deg, #ffffff 0%, var(--color-bg) 100%);
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.5vw, 2.5rem);
  margin: 0 0 0.75rem;
  color: var(--color-primary);
  line-height: 1.15;
}

.page-intro {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  max-width: 62ch;
  margin: 0 0 1rem;
}

.lead {
  font-size: 1.05rem;
  color: var(--color-text-muted);
}

.contact-highlights--icons li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}

.contact-highlight-icon {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--color-accent);
  display: inline-flex;
}

.contact-highlights--icons .fl-icon {
  display: block;
}

.contact-direct--icons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.contact-direct-line {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.contact-direct-line .contact-highlight-icon {
  margin-top: 0;
}

.rounded-media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.services-visual-frame {
  overflow: hidden;
  padding: 3px;
  border-radius: calc(var(--radius-lg) + 4px);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.42), rgba(26, 23, 20, 0.28));
  box-shadow: var(--shadow-md);
}

.services-visual-frame img {
  border-radius: var(--radius-lg);
  box-shadow: none;
}

/* ---------- Services blocks ---------- */
.service-block {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

.service-block h2 {
  color: var(--color-primary);
  margin-top: 0;
}

.service-block h3 {
  color: var(--color-text);
}

/* ---------- Steps ---------- */
.steps-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

@media (min-width: 800px) {
  .steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(26, 23, 20, 0.07);
  overflow: hidden;
  text-align: center;
}

.step-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.step-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
}

.step-head .step-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 10px;
  background: rgba(20, 184, 166, 0.12);
  color: var(--color-accent);
}

.step-head .step-title {
  margin: 0;
  padding-top: 0.2rem;
}

@media (hover: hover) and (pointer: fine) {
  .step-head .step-icon {
    transition:
      transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      background 0.32s ease,
      color 0.32s ease;
  }

  .step:hover .step-head .step-icon {
    transform: translateY(-2px) scale(1.04);
    background: rgba(20, 184, 166, 0.18);
  }
}

/* ---------- Portfolio ---------- */
.portfolio-grid {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 720px) {
  .portfolio-grid:not(.portfolio-grid--masonry) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Masonry columns — portfolio & blog lists */
.portfolio-grid--masonry {
  display: block;
  column-count: 1;
  column-gap: 1.75rem;
}

@media (min-width: 560px) {
  .portfolio-grid--masonry {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .portfolio-grid--masonry {
    column-count: 3;
  }
}

.portfolio-grid--masonry .portfolio-card {
  break-inside: avoid;
  margin-bottom: 1.75rem;
  display: inline-block;
  width: 100%;
  vertical-align: top;
}

.portfolio-grid--masonry .portfolio-thumb img {
  aspect-ratio: auto;
  height: auto;
  max-height: 320px;
  object-fit: cover;
}

.blog-list--masonry {
  display: block;
  column-count: 1;
  column-gap: 1.75rem;
}

@media (min-width: 560px) {
  .blog-list--masonry {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .blog-list--masonry {
    column-count: 3;
  }
}

.blog-list--masonry .blog-card {
  break-inside: avoid;
  margin-bottom: 1.75rem;
  display: inline-block;
  width: 100%;
  vertical-align: top;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 36px rgba(26, 23, 20, 0.08);
}

/* Masonry: stacked cards (variable heights); overrides split layout below */
.blog-list--masonry .blog-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-list--masonry .blog-thumb {
  position: relative;
}

.blog-list--masonry .blog-thumb img {
  aspect-ratio: 16 / 10;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: cover;
}

.blog-list--masonry .blog-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 1.35rem 1.4rem 1.65rem;
}

.blog-list--masonry .blog-meta {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent);
}

.blog-list--masonry .blog-title {
  font-size: clamp(1.12rem, 2.4vw, 1.32rem);
  line-height: 1.28;
  margin-bottom: 0.55rem;
}

.blog-list--masonry .blog-card-body > p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.62;
  color: var(--color-text-muted);
  flex-grow: 1;
}

.blog-list--masonry .blog-card-body .text-link {
  margin-top: 0.85rem;
  align-self: flex-start;
  font-size: 0.9rem;
}

.blog-list--masonry .blog-card:nth-child(3n + 1) .blog-card-body {
  padding-bottom: 1.85rem;
}

.blog-list--masonry .blog-card:nth-child(3n + 2) .blog-title {
  font-size: clamp(1.18rem, 2.5vw, 1.38rem);
}

.section--portfolio-page-cta {
  text-align: center;
}

.section--portfolio-page-cta .section-title,
.section--portfolio-page-cta .container.narrow > p:not(.section-cta-row) {
  margin-left: auto;
  margin-right: auto;
  max-width: 42rem;
}

.section--portfolio-page-cta .section-cta-row {
  justify-content: center;
  flex-wrap: wrap;
}

.portfolio-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(26, 23, 20, 0.06);
}

/* Blog-card-style image treatment — fixed aspect ratio so every card
   in the grid lines up regardless of the source image's natural size. */
.portfolio-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 120 / 63;
  background: var(--color-bg);
}

.portfolio-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .portfolio-card:hover .portfolio-thumb img {
    transform: scale(1.04);
  }
}

.pricing-desc {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.pricing-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  width: 100%;
  max-width: 18rem;
}

.portfolio-body {
  padding: 1.25rem 1.35rem 1.5rem;
  text-align: center;
}

.portfolio-meta {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.portfolio-title {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  color: var(--color-primary);
}

/* ---------- Pricing ---------- */
.pricing-flow-explainer .lead {
  margin-bottom: 1rem;
  margin-inline: auto;
  max-width: 40rem;
  text-align: left;
}

.pricing-flow-steps {
  margin: 0 auto;
  padding-left: 1.25rem;
  max-width: 36rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  text-align: left;
}

.pricing-flow-explainer .container.narrow {
  text-align: center;
}

.pricing-compare-wrap {
  margin-top: 1.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid rgba(26, 23, 20, 0.08);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.pricing-compare {
  width: 100%;
  min-width: min(560px, 100%);
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.5;
}

@media (min-width: 480px) {
  .pricing-compare {
    min-width: 560px;
  }
}

.pricing-compare th,
.pricing-compare td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid rgba(26, 23, 20, 0.08);
  text-align: left;
  vertical-align: top;
}

.pricing-compare thead th {
  background: linear-gradient(180deg, rgba(20, 184, 166, 0.14) 0%, rgba(20, 184, 166, 0.06) 100%);
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--color-primary);
  border-bottom-color: rgba(20, 184, 166, 0.22);
}

.pricing-compare tbody tr:last-child td {
  border-bottom: none;
}

.pricing-compare tbody tr:nth-child(even) td {
  background: rgba(26, 23, 20, 0.02);
}

.pricing-addons-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

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

.pricing-addons-grid article {
  margin: 0;
  padding: 1.15rem 1.2rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(26, 23, 20, 0.08);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.pricing-addons-grid h3 {
  margin: 0 0 0.45rem;
  font-size: 1.02rem;
  color: var(--color-primary);
}

.pricing-addons-grid p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.pricing-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

.pricing-grid-2 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .pricing-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pricing-card {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(26, 23, 20, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pricing-card-featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  position: relative;
}

.pricing-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  margin: 0;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  text-transform: uppercase;
}

.pricing-name {
  margin: 0 0 0.35rem;
  color: var(--color-primary);
}

.pricing-for {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.pricing-price {
  font-size: 1.25rem;
  margin: 0 0 1rem;
}

.pricing-list {
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
  flex-grow: 1;
  width: 100%;
  max-width: 22rem;
  color: var(--color-text-muted);
  text-align: left;
}

.note {
  margin-top: 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.note--center {
  text-align: center;
}

.section-cta-row--center {
  justify-content: center;
}

.section-cta-spacing {
  margin-top: 2rem;
}

.section-head + .card-grid,
.section-head + .bento-grid,
.section-head + .steps-grid,
.section-head + .process-premium-grid,
.section-head + .blog-list,
.section-head + .home-brands-track,
.section-head + .home-portfolio-carousel,
.section-head + .portfolio-grid {
  margin-top: 0.25rem;
}

/* ---------- Blog ---------- */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.blog-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(26, 23, 20, 0.07);
}

.blog-card-link {
  display: grid;
  gap: 0;
  color: inherit;
  text-decoration: none;
}

@media (min-width: 768px) {
  .blog-card-link {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: stretch;
  }

  .blog-list--masonry .blog-card-link {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
  }
}

.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  min-height: 0;
}

@media (min-width: 768px) {
  .blog-thumb img {
    aspect-ratio: auto;
    min-height: 220px;
  }
}

.blog-card-body {
  padding: 1.5rem 1.5rem 1.75rem;
  text-align: center;
}

.blog-meta {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.blog-title {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  color: var(--color-primary);
}

/* Inline editorial link (used inside flowing paragraph text). Stays in normal
   flow with no inline-block side-effects. Subtle underline that strengthens on
   hover so links read clearly without "boxed" weight. */
/* Inline editorial link.
   No font-weight or font-size override — the link inherits identical
   metrics from its parent (400 weight, parent line-height, parent size),
   guaranteeing the same baseline as surrounding body copy. Visual emphasis
   comes purely from the brand color, with a hover transition.

   This is a ground-up rewrite of `.text-link` to eliminate every possible
   source of metric drift (font-weight change, vertical-align value, line-
   height change, display-mode change) that previous iterations introduced. */
.text-link {
  color: var(--color-accent-hover);
  text-decoration: none;
  transition: color 0.2s ease;
}

.text-link:hover {
  color: var(--color-primary);
}

/* Standalone CTA variant (e.g. "Read More →") — opt-in inline-block with lift */
.text-link--cta {
  display: inline-block;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .text-link--cta:hover {
    transform: translateY(-1px);
  }
}

.article-body.prose a {
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .article-body.prose a:hover {
    color: var(--color-accent-hover);
  }
}

.article-body--below-hero {
  padding-top: clamp(2rem, 5vw, 3rem);
}

.article-body.prose h2 {
  font-size: 1.35rem;
  margin-top: 2rem;
  color: var(--color-primary);
}

.article-body.prose p {
  color: var(--color-text-muted);
}

.article-footer {
  padding: 2rem 0 3rem;
}

/* ---------- Contact ---------- */
.contact-highlights {
  margin: 1rem 0;
}

.contact-direct {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.contact-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-md);
}

.contact-form .form-row {
  margin-bottom: 1rem;
}

.contact-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--color-primary);
}

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

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(26, 23, 20, 0.14);
  font: inherit;
  background: #fafaf8;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid rgba(20, 184, 166, 0.35);
  border-color: var(--color-accent);
}

.honeypot {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}

.form-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.75rem;
}

.alert {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.alert-success {
  background: #e8f7ee;
  color: #1e5c36;
  border: 1px solid #b8e2c8;
}

.alert-error {
  background: #fdecec;
  color: #8c1c1c;
  border: 1px solid #f0b4b4;
}

.alert-warning {
  background: #fff6e8;
  color: #7a4a12;
  border: 1px solid #f5d39f;
}

/* ---------- Footer ---------- */
.site-footer {
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.55;
  font-weight: 400;
  background: linear-gradient(180deg, #1a1714 0%, #141210 42%, #0f0e0c 100%);
  color: rgba(255, 255, 255, 0.88);
  padding: clamp(2.75rem, 6vw, 4rem) 0 0;
  border-top: 1px solid rgba(20, 184, 166, 0.28);
  box-shadow: 0 -24px 80px rgba(26, 23, 20, 0.38);
}

.footer-grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 800px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: clamp(1.75rem, 4vw, 2.75rem);
  }
}

.footer-logo {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-white);
  text-decoration: none;
}

.footer-logo.footer-logo-mark {
  font-size: 0;
  line-height: 0;
}

.footer-logo-mark {
  display: inline-block;
  margin-bottom: 0.35rem;
  text-decoration: none;
}

.footer-logo-mark img {
  display: block;
  width: min(176px, 52vw);
  height: auto;
}

.footer-tagline {
  margin: 0.75rem 0 0;
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9375rem;
  line-height: 1.55;
  font-weight: 400;
}

.footer-heading {
  font-family: var(--font);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 1rem;
  padding: 0;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  line-height: 1.35;
}

.footer-links,
.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li,
.footer-contact li {
  margin-bottom: 0.5rem;
}

.footer-links li:last-child,
.footer-contact li:last-child {
  margin-bottom: 0;
}

.footer-links a,
.footer-contact a {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--color-white);
}

.footer-contact--icons li {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.6rem;
  min-height: 1.5rem;
}

.footer-contact--icons li:last-child {
  margin-bottom: 0;
}

.footer-contact-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  color: rgba(255, 255, 255, 0.88);
}

.footer-contact--icons .footer-contact-icon .fl-icon {
  display: block;
}

.footer-contact-text {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  padding-top: 0;
  color: rgba(255, 255, 255, 0.84);
}

.footer-contact--icons a {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  padding-top: 0;
}

.footer-links--grid.footer-links--explore a:hover {
  color: var(--color-accent);
}

/* Privacy policy & terms of service — article-card layout.
   The page hero and footer span the full 1320px container; the legal copy
   itself sits inside a centered white card on a soft background. This gives
   a clear "document" feel and avoids the orphaned-narrow-strip look of a
   tight column floating in a wide page frame. */
.section--legal {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(1100px 460px at 50% 0%, rgba(20, 184, 166, 0.06), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--color-bg) 100%);
}

.section--legal > .container.prose-legal {
  /* Wider article-card — matches the visual weight of the standard 1320
     site container while keeping line length capped via the inner column. */
  width: min(1120px, 100% - 2rem);
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.75rem, 5vw, 4rem);
  background: var(--color-white);
  border-radius: 20px;
  border: 1px solid rgba(26, 23, 20, 0.06);
  box-shadow: 0 24px 60px rgba(26, 23, 20, 0.06);
}

/* Inner content stretches to the card's content edge — no inner cap
   so paragraphs/headings fill the full container width. */
.section--legal > .container.prose-legal > p,
.section--legal > .container.prose-legal > h2,
.section--legal > .container.prose-legal > h3,
.section--legal > .container.prose-legal > ul {
  max-width: none;
}

/* Privacy policy & terms of service — premium legal reading layout. */
.legal-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0.45rem 0.95rem;
  background: rgba(20, 184, 166, 0.08);
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 999px;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--color-accent-hover);
  font-weight: 600;
}

.legal-meta strong {
  color: var(--color-accent-hover);
  font-weight: 700;
}

.prose-legal {
  /* Width is controlled by the article-card wrapper above. */
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
}

.prose-legal > p:first-of-type,
.prose-legal > p:nth-of-type(2) {
  font-size: 1.0625rem;
  color: var(--color-text);
}

.prose-legal h2 {
  margin: 2.5rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-primary);
  line-height: 1.3;
}

.prose-legal h2:first-of-type {
  margin-top: 1.25rem;
}

.prose-legal h3 {
  margin: 1.5rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
}

.prose-legal p {
  margin: 0 0 1.05rem;
  color: var(--color-text);
}

.prose-legal strong {
  color: var(--color-primary);
  font-weight: 600;
}

.prose-legal ul {
  margin: 0 0 1.25rem 0;
  padding-left: 1.35rem;
}

.prose-legal ul li {
  margin-bottom: 0.55rem;
  padding-left: 0.25rem;
  color: var(--color-text);
}

.prose-legal ul li::marker {
  color: var(--color-accent);
}

.prose-legal a {
  color: var(--color-accent-hover);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.prose-legal a:hover {
  color: var(--color-primary);
}

.footer-col--nav {
  min-width: 0;
}

.footer-links--grid.footer-links--explore {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  align-content: start;
  max-width: 16rem;
}

.footer-links--grid.footer-links--explore li {
  margin-bottom: 0;
}

.footer-links--grid.footer-links--explore a {
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.84);
}

@media (min-width: 520px) {
  .footer-links--grid.footer-links--explore {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 6vw, 3.5rem);
    row-gap: 0.5rem;
    max-width: 26rem;
  }
}

.footer-social {
  display: flex;
  gap: 0.65rem;
  margin-top: 1rem;
}

.social-link {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
}

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

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2.5rem;
  padding: 1rem 0;
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.5;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.68);
}

.footer-copy {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

@media (min-width: 768px) {
  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}

.footer-note {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* ---------- Motion / a11y ---------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal--left {
  transform: translate3d(-18px, 0, 0);
}

.reveal--left.is-visible {
  transform: translate3d(0, 0, 0);
}

.reveal--right {
  transform: translate3d(18px, 0, 0);
}

.reveal--right.is-visible {
  transform: translate3d(0, 0, 0);
}

.reveal--scale {
  transform: translate3d(0, 16px, 0) scale(0.98);
}

.reveal--scale.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn:active {
    transform: none;
  }

  .hero-video {
    display: none;
  }
}

/* ---------- Premium home (Voltro-inspired) ---------- */
.page-home .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: rgba(26, 23, 20, 0.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
  transition: background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.page-home .site-header.is-scrolled {
  background: rgba(26, 23, 20, 0.92);
  border-bottom-color: rgba(20, 184, 166, 0.12);
  box-shadow: 0 12px 40px rgba(26, 23, 20, 0.28);
}

.page-home .skip-link:focus {
  z-index: 70;
}

.hero--premium {
  position: relative;
  min-height: min(100vh, 960px);
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + clamp(2rem, 6vw, 4rem)) 0 clamp(3rem, 8vw, 5rem);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.hero-media-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(26, 23, 20, 0.92) 0%, rgba(47, 42, 38, 0.45) 45%, rgba(20, 18, 16, 0.9) 100%),
    radial-gradient(ellipse 90% 70% at 78% 18%, rgba(20, 184, 166, 0.28), transparent 52%);
  pointer-events: none;
}

.hero-media-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.09;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero--premium .hero-inner {
  position: relative;
  z-index: 3;
}

.hero-title--premium {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(2.15rem, 4.8vw, 3.35rem);
  color: #fff;
  text-wrap: balance;
}

.hero-lead--on-dark {
  color: rgba(255, 255, 255, 0.82);
  max-width: 52ch;
}

.hero-trust--on-dark {
  color: rgba(255, 255, 255, 0.65);
}

.eyebrow--on-dark {
  color: #99f6e4;
}

.eyebrow--on-dark-muted {
  color: rgba(153, 246, 228, 0.88);
}

.hero-visual-frame {
  position: relative;
  border-radius: calc(var(--radius-lg) + 4px);
  padding: 3px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.55), rgba(255, 255, 255, 0.14), rgba(26, 23, 20, 0.72));
  box-shadow:
    0 24px 80px rgba(26, 23, 20, 0.42),
    0 0 0 1px rgba(20, 184, 166, 0.18) inset;
}

.hero-visual-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.hero-visual-badge {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(26, 23, 20, 0.82);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid rgba(20, 184, 166, 0.18);
}

.hero-visual-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 14px rgba(20, 184, 166, 0.75);
  flex-shrink: 0;
}

.media-brand {
  position: relative;
}

.media-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(20, 184, 166, 0.14), transparent 44%, rgba(26, 23, 20, 0.18));
  mix-blend-mode: multiply;
}

.stats-bar--premium {
  position: relative;
  background: linear-gradient(90deg, #121110 0%, #1a2422 48%, #121110 100%);
  border-block: 1px solid rgba(20, 184, 166, 0.1);
  box-shadow: 0 20px 50px rgba(26, 23, 20, 0.18);
}

.stats-bar--light {
  position: relative;
  background: linear-gradient(180deg, #fafaf8 0%, #f3faf8 48%, #eef6f4 100%);
  border-block: 1px solid rgba(20, 184, 166, 0.14);
  box-shadow: 0 12px 40px rgba(26, 23, 20, 0.06);
}

.stats-bar--light .stat-num {
  color: var(--color-primary);
}

.stats-bar--light .stat-label {
  color: var(--color-text-muted);
  opacity: 1;
}

.section--mesh {
  position: relative;
  background: linear-gradient(180deg, var(--color-bg) 0%, #eef6f4 100%);
}

.section--mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(20, 184, 166, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.55;
  pointer-events: none;
}

.section--mesh > .container {
  position: relative;
  z-index: 1;
}

.solution-card--premium {
  border-left-width: 5px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.solution-card--on-dark {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.solution-card--on-dark .card-title {
  color: #fff;
}

.solution-card--on-dark p {
  color: rgba(255, 255, 255, 0.72);
}

.text-link-premium {
  display: inline-block;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.2s ease,
    transform 0.22s ease;
}

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

@media (hover: hover) and (pointer: fine) {
  .text-link-premium:hover {
    transform: translateY(-1px);
  }
}

.section--dark {
  position: relative;
  background: radial-gradient(1200px 520px at 10% 0%, rgba(20, 184, 166, 0.14), transparent 52%),
    radial-gradient(900px 420px at 92% 68%, rgba(13, 148, 136, 0.08), transparent 48%),
    linear-gradient(180deg, #141210 0%, #1a2220 46%, #131110 100%);
  color: rgba(255, 255, 255, 0.92);
}

.section--dark .section-title--light,
.ai-vis-section .section-title--light,
.section-title.section-title--light {
  color: #fff;
}

.section-head--center {
  max-width: 850px;
}

.section-lead--muted-light {
  color: rgba(255, 255, 255, 0.72);
}

.bento-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .bento-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(0, auto);
  }

  .bento-card--half {
    grid-column: span 6;
  }

  .bento-card--third {
    grid-column: span 4;
  }

  .bento-card--full {
    grid-column: span 12;
  }
}

.bento-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.35rem 1.35rem 1.15rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.bento-card:hover {
  border-color: rgba(20, 184, 166, 0.42);
  background: rgba(255, 255, 255, 0.072);
  box-shadow:
    0 20px 56px rgba(26, 23, 20, 0.28),
    0 0 0 1px rgba(20, 184, 166, 0.12);
  transform: translateY(-5px);
}

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

.bento-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(20, 184, 166, 0.14);
  color: #99f6e4;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, color 0.35s ease,
    box-shadow 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .bento-card:hover .bento-icon {
    transform: translateY(-2px) scale(1.04);
    background: rgba(20, 184, 166, 0.22);
    color: #ccfbf1;
    box-shadow: 0 8px 24px rgba(20, 184, 166, 0.2);
  }
}

.bento-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: #fff;
}

.bento-card-desc {
  margin: 0;
  flex-grow: 1;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}

.bento-card-cta {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.bento-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.btn-ghost-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  cursor: pointer;
}

.btn-ghost-dark:hover {
  border-color: #fff;
  color: #fff;
}

.section--lift {
  position: relative;
}

.quote-card--premium {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(26, 23, 20, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}

/* `.accordion-item--premium` is fully styled by the unified accordion
   block in enhancements.css. Keep this empty so older overrides don't
   leak into the new design. */
.accordion-item--premium {
  position: relative;
}

.cta-band--premium {
  background: linear-gradient(115deg, #1a1714 0%, #2f2a26 45%, #161412 100%);
}

.cta-band--premium::after {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 0;
  background: radial-gradient(circle at 30% 40%, rgba(20, 184, 166, 0.24), transparent 46%);
  pointer-events: none;
}

/* (Drawer styling now lives in the main mobile-nav block above.) */

/* ---------- Full-width page hero (all templates; under fixed header) ---------- */
.page-hero-full {
  position: relative;
  isolation: isolate;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

main#main-content .page-hero-full {
  min-height: var(--hero-inner-h);
  height: var(--hero-inner-h);
  box-sizing: border-box;
  padding-top: calc(var(--header-stack) + clamp(1.75rem, 5vw, 3.5rem));
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  display: flex;
}

main#main-content .page-hero-full .page-hero-full__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Homepage: full viewport height; inner block centers content vertically */
.page-hero-full.page-hero-full--home {
  overflow-x: hidden;
  overflow-y: visible;
}

main#main-content .page-hero-full.page-hero-full--home {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  padding-top: 0;
  padding-bottom: 0;
}

.page-hero-full.page-hero-full--home .page-hero-full__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-top: calc(var(--header-stack) + clamp(1rem, 4vw, 2rem));
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
}

.page-hero-full__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--page-hero-bg);
  background-size: cover;
  background-position: var(--page-hero-bg-pos, center 28%);
  transform: scale(1.03);
}

.page-hero-full__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Isolate the YouTube iframe's frame paints to this wrap so they don't
     trigger global re-paints (which manifested as laggy cursor while the
     video plays). `contain: layout paint` clips painting AND scopes
     layout calculations to this element. The wrap covers the full hero
     so visual fidelity is preserved. */
  contain: layout paint;
  transform: translateZ(0);
}

.page-hero-full__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
}

/* YouTube background variant: a div placeholder that holds the poster image
   until the iframe is injected on idle. The iframe is sized to fill while
   maintaining 16:9 (cover-style) — wider than the viewport in tall screens,
   taller in wide screens — and rendered non-interactive. */
.page-hero-full__video--yt {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  /* Override the legacy `transform: scale(1.05)` from `.page-hero-full__video`
     — that was for the old <video> element where slight overscale hid edge
     ringing. The YT iframe cover-sizing already handles overflow. */
  transform: none;
}

.page-hero-full__video--yt iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 16:9 cover sizing using viewport units (the hero is full-viewport on
     the homepage). On wide screens width = 100vw and the aspect ratio
     derives height; on tall screens height = 100vh and width derives
     from aspect ratio. Either way the iframe always covers the hero
     completely with no black bars. */
  width: max(100vw, calc(100vh * 16 / 9));
  height: max(100vh, calc(100vw * 9 / 16));
  /* translateZ promotes the iframe to its own compositor layer so video
     frame paints don't slow down cursor / nav repaints. */
  transform: translate(-50%, -50%) translateZ(0);
  will-change: transform;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.page-hero-full__video--yt.is-yt-ready iframe {
  opacity: 1;
}


.page-hero-full--has-video .page-hero-full__media {
  display: none;
}

@media (max-width: 719px) {
  .page-hero-full__media {
    background-position: center 22%;
  }

  main#main-content .page-hero-full:not(.page-hero-full--home) {
    min-height: clamp(480px, 72vh, 600px);
    height: clamp(480px, 72vh, 600px);
    padding-top: calc(var(--header-stack) + clamp(1.5rem, 6vw, 2.5rem));
    padding-bottom: clamp(2rem, 6vw, 3rem);
  }

  main#main-content .page-hero-full.page-hero-full--home {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    padding-top: 0;
    padding-bottom: 0;
  }

  .page-hero-full.page-hero-full--home .page-hero-full__inner {
    padding-top: calc(var(--header-stack) + clamp(0.85rem, 4vw, 1.5rem));
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  }

  .page-hero-full__actions {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
  }

  .page-hero-full__actions .btn {
    width: 100%;
    max-width: 22rem;
    justify-content: center;
    text-align: center;
  }
}

.page-hero-full__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      105deg,
      rgba(26, 23, 20, 0.88) 0%,
      rgba(47, 42, 38, 0.72) 42%,
      rgba(20, 18, 16, 0.9) 100%
    ),
    radial-gradient(ellipse 85% 65% at 72% 12%, rgba(20, 184, 166, 0.26), transparent 52%);
}

.page-hero-full--inner.page-hero-full--has-media .page-hero-full__media {
  background-position: var(--page-hero-bg-pos, center center);
  transform: scale(1.02);
}

.page-hero-full--inner.page-hero-full--has-media .page-hero-full__overlay {
  background:
    linear-gradient(125deg, rgba(8, 7, 6, 0.94) 0%, rgba(22, 20, 18, 0.82) 42%, rgba(10, 9, 8, 0.94) 100%),
    radial-gradient(ellipse 92% 72% at 72% 16%, rgba(20, 184, 166, 0.2), transparent 56%);
}

.page-hero-full--gradient-only .page-hero-full__overlay {
  background: linear-gradient(155deg, #1a1714 0%, #242019 48%, #141210 100%);
}

.page-hero-full__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.container.container--hero {
  width: min(1320px, calc(100vw - 2 * clamp(1rem, 5vw, 2rem)));
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 0;
}

.page-hero-full__title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  line-height: 1.1;
  color: var(--color-white);
  margin: 0 auto 1rem;
  max-width: min(20em, 100%);
  text-wrap: balance;
}

@media (min-width: 720px) {
  .page-hero-full__title {
    max-width: min(22em, 100%);
  }
}

.page-hero-full__intro {
  margin: 0 auto 1.35rem;
  font-size: clamp(1.02rem, 2vw, 1.14rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.84);
  /* Matches the 850px description-text standard used elsewhere on the
     homepage so the hero paragraph aligns visually with the wider title
     instead of looking like a narrow column under it. */
  max-width: min(850px, 100%);
}

.page-hero-full__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  justify-content: center;
}

.eyebrow--on-hero {
  color: #9cf5e8;
  letter-spacing: 0.14em;
}

.breadcrumb--on-hero {
  margin: 0 0 1.15rem;
  width: 100%;
  align-self: stretch;
}

.breadcrumb--on-hero .breadcrumb-list {
  color: rgba(255, 255, 255, 0.55);
  justify-content: center;
}

.breadcrumb--on-hero .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.72);
}

.breadcrumb--on-hero .breadcrumb-item a:hover {
  color: #5eead4;
}

.breadcrumb--on-hero .breadcrumb-item span {
  color: rgba(255, 255, 255, 0.92);
}

.breadcrumb--on-hero .breadcrumb-item:not(:last-child)::after {
  color: rgba(255, 255, 255, 0.35);
}

.home-trust-strip {
  background: linear-gradient(
    90deg,
    rgba(26, 23, 20, 0.97) 0%,
    rgba(47, 42, 38, 0.98) 50%,
    rgba(26, 23, 20, 0.97) 100%
  );
  border-block: 1px solid rgba(20, 184, 166, 0.12);
  padding: 0.85rem 0;
}

.home-trust-strip__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.5rem;
  justify-content: center;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.home-trust-strip__inner span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.home-trust-strip__inner span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 12px rgba(20, 184, 166, 0.55);
}

.breadcrumb {
  margin-bottom: 0.85rem;
}

.breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.breadcrumb-item a {
  color: var(--color-text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
  color: var(--color-accent);
}

.breadcrumb-item:not(:last-child)::after {
  content: "/";
  margin-left: 0.35rem;
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- Scroll to top ---------- */
.scroll-top {
  position: fixed;
  right: 1.15rem;
  bottom: 5.5rem;
  z-index: 55;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: #fff;
  box-shadow: 0 12px 36px rgba(20, 184, 166, 0.38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  filter: brightness(1.06);
}

.scroll-top:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .scroll-top {
    right: 0.85rem;
    bottom: 5.75rem;
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top {
    transition: none;
  }
}

/* ---------- FoxLogic assistant widget ---------- */
/* Explicit Poppins inheritance — buttons/inputs in browsers reset to the
   system font, so we force the brand font down through every chat element. */
.fox-bot,
.fox-bot-launcher,
.fox-bot-panel,
.fox-bot-panel input,
.fox-bot-panel button,
.fox-bot-panel textarea {
  font-family: var(--font);
}

.fox-bot {
  position: relative;
  z-index: 56;
}

.fox-bot-panel {
  position: fixed;
  right: 1rem;
  bottom: 5rem;
  width: min(400px, calc(100vw - 2rem));
  max-height: min(560px, 70vh);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(26, 23, 20, 0.22);
  border: 1px solid rgba(20, 184, 166, 0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

.fox-bot-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.fox-bot-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1rem 0.65rem;
  background: linear-gradient(135deg, var(--color-primary), #121038);
  color: #fff;
}

.fox-bot-head-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.fox-bot-head-logo {
  height: auto;
  max-height: 34px;
  width: auto;
  max-width: 132px;
  flex-shrink: 0;
  display: block;
}

.fox-bot-brand {
  font-family: var(--font-display);
  font-size: 1rem;
}

.fox-bot-sub {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  opacity: 0.85;
}

.fox-bot-close {
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.fox-bot-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.fox-bot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: linear-gradient(180deg, #fafbff 0%, #f3f5fb 100%);
}

.fox-bot-msg {
  display: flex;
}

.fox-bot-msg--bot {
  justify-content: flex-start;
}

.fox-bot-msg--user {
  justify-content: flex-end;
}

.fox-bot-bubble {
  max-width: 92%;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
}

.fox-bot-msg--bot .fox-bot-bubble {
  background: #fff;
  border: 1px solid rgba(26, 23, 20, 0.08);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.fox-bot-msg--user .fox-bot-bubble {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(26, 23, 20, 0.04));
  border: 1px solid rgba(20, 184, 166, 0.28);
  color: var(--color-primary);
  font-weight: 500;
}

.fox-bot-input-row {
  display: flex;
  gap: 0.45rem;
  padding: 0.65rem;
  border-top: 1px solid rgba(26, 23, 20, 0.08);
  background: #fff;
}

.fox-bot-input {
  flex: 1;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(26, 23, 20, 0.14);
  padding: 0.6rem 0.75rem;
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-text);
}

.fox-bot-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.fox-bot-send {
  flex-shrink: 0;
  padding-inline: 1rem;
}

.fox-bot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 0.65rem 0.65rem;
  background: #fff;
}

.fox-bot-chip {
  border: 1px solid rgba(26, 23, 20, 0.12);
  background: #fff;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-primary);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.fox-bot-chip:hover {
  border-color: var(--color-accent);
  background: rgba(20, 184, 166, 0.08);
}

.fox-bot-launcher {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 57;
  border: none;
  border-radius: 999px;
  padding: 0.65rem 1.1rem;
  cursor: pointer;
  background: linear-gradient(135deg, var(--color-primary), #2f2a26);
  color: #fff;
  box-shadow: 0 18px 50px rgba(26, 23, 20, 0.38);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fox-bot-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 56px rgba(26, 23, 20, 0.42);
}

.fox-bot-launcher-inner {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
}

@media (prefers-reduced-motion: reduce) {
  .fox-bot-panel,
  .fox-bot-launcher {
    transition: none;
  }
}

.section-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  align-items: center;
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.process-inline-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(241, 91, 38, 0.12);
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.section--dark .bullet-list--on-dark {
  color: rgba(255, 255, 255, 0.78);
}

.section--dark .bullet-list--on-dark li::marker {
  color: #ffb89d;
}

.article-hero-tight {
  padding-bottom: 0.5rem;
}

.article-hero-tight .breadcrumb {
  margin-bottom: 0.65rem;
}

/* ---------- Services hub + service detail (premium IA) ---------- */
.container--reading {
  width: min(760px, 92vw);
  margin-inline: auto;
}

.service-hub-intro {
  text-align: center;
}

.service-hub-intro .section-title {
  text-wrap: balance;
}

.service-hub-intro .section-lead {
  max-width: 38rem;
  margin-inline: auto;
  text-align: left;
}

.service-hub-intro .service-hub-quickfacts {
  margin-top: 1.15rem;
  max-width: 42rem;
  margin-inline: auto;
  text-align: left;
}

.service-hub-grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  grid-template-columns: 1fr;
}

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

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

.service-hub-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.85rem 1.6rem 1.6rem;
  border: 1px solid rgba(26, 23, 20, 0.08);
  box-shadow: 0 4px 14px rgba(26, 23, 20, 0.04);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  min-height: 100%;
  text-align: left;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.42s ease,
    border-color 0.42s ease,
    background 0.42s ease;
}

/* Top accent stripe — animates in on hover */
.service-hub-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), #5eead4);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

/* Soft accent glow that grows from corner on hover */
.service-hub-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 100% 0%, rgba(20, 184, 166, 0.1), transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  z-index: 1;
}

.service-hub-card > * {
  position: relative;
  z-index: 3;
}

/* Invisible cover link makes whole card clickable. It sits BELOW inner
   links/buttons so the explicit "View Service" / "Get Quote" buttons receive
   their own clicks; empty card area falls through to this cover. */
.service-hub-card__cover-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-decoration: none;
}

.service-hub-card__actions {
  position: relative;
  z-index: 5;
}

.service-hub-card__title a,
.service-hub-card__cta,
.service-hub-card__secondary {
  position: relative;
  z-index: 5;
}

@media (hover: hover) and (pointer: fine) {
  .service-hub-card:hover {
    transform: translateY(-6px);
    box-shadow:
      0 22px 56px rgba(26, 23, 20, 0.12),
      0 0 0 1px rgba(20, 184, 166, 0.18);
    border-color: rgba(20, 184, 166, 0.35);
  }

  .service-hub-card:hover::before {
    transform: scaleX(1);
  }

  .service-hub-card:hover::after {
    opacity: 1;
  }

  .service-hub-card:hover .service-hub-card__icon {
    transform: rotate(-8deg) scale(1.05);
    background: rgba(20, 184, 166, 0.18);
    color: var(--color-accent);
  }

  .service-hub-card:hover .service-hub-card__cta-arrow {
    transform: translateX(4px);
  }
}

.service-hub-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0.25rem;
}

.service-hub-card__num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
  opacity: 0.75;
}

.service-hub-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(20, 184, 166, 0.1);
  color: var(--color-accent);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, color 0.3s ease;
}

.service-hub-card__icon .fl-icon {
  width: 22px;
  height: 22px;
}

.service-hub-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
}

.service-hub-card__title a {
  color: var(--color-primary);
  text-decoration: none;
  position: relative;
  z-index: 5;
}

.service-hub-card__title a:hover {
  color: var(--color-accent-hover);
}

.service-hub-card__teaser {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.service-hub-card__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  width: 100%;
  text-align: left;
}

.service-hub-card__bullets li {
  padding-left: 1.4rem;
  position: relative;
  line-height: 1.5;
}

.service-hub-card__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  opacity: 0.7;
}

.service-hub-card__actions {
  margin-top: auto;
  padding-top: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  border-top: 1px solid rgba(26, 23, 20, 0.06);
}

.service-hub-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-primary);
  text-decoration: none;
  position: relative;
  z-index: 5;
}

.service-hub-card__cta:hover {
  color: var(--color-accent-hover);
}

.service-hub-card__cta-arrow {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--color-accent);
}

.service-hub-card__secondary {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: none;
  position: relative;
  z-index: 5;
  font-weight: 500;
  transition: color 0.2s ease;
}

.service-hub-card__secondary:hover {
  color: var(--color-accent);
}

.service-detail-intro {
  text-align: center;
}

.service-detail-intro .section-title {
  margin-top: 0.35rem;
  text-wrap: balance;
}

.service-detail-intro .service-prose {
  text-align: center;
  margin-inline: auto;
  max-width: 850px;
}

.service-detail-intro .service-crosslinks {
  margin-top: 1.35rem;
  text-align: center;
  font-size: 0.98rem;
}

.service-prose {
  margin: 0 0 1rem;
  font-size: 1.045rem;
  color: var(--color-text-muted);
  line-height: 1.78;
}

.service-offering-grid {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

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

.service-offering-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.25rem 1.35rem 1.35rem;
  font-size: 0.98rem;
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  min-height: 7.5rem;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.32s ease,
    box-shadow 0.32s ease;
}

.service-offering-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--svc-offer-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  transition: transform 0.45s ease;
}

.service-offering-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(165deg, rgba(15, 14, 12, 0.22) 0%, rgba(26, 23, 20, 0.88) 52%, rgba(12, 11, 10, 0.94) 100%);
  pointer-events: none;
}

.service-offering-card__text {
  position: relative;
  z-index: 2;
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .service-offering-card:hover {
    transform: translateY(-4px);
    border-color: rgba(20, 184, 166, 0.35);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  }

  .service-offering-card:hover::before {
    transform: scale(1.07);
  }
}

.service-benefit-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.85rem;
}

.service-benefit-item {
  padding: 1rem 1.05rem 1rem 1.35rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(26, 23, 20, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #fafaf8 100%);
  box-shadow: var(--shadow-sm);
  position: relative;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--color-text);
}

.service-benefit-item::before {
  content: "";
  position: absolute;
  left: 0.65rem;
  top: 1rem;
  bottom: 1rem;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-accent), #5eead4);
}

.service-process-track {
  list-style: none;
  padding: 0;
  margin: 2rem auto 0;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.service-process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(26, 23, 20, 0.08);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.service-process-step__num {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--color-white);
  background: linear-gradient(145deg, var(--color-accent), var(--color-accent-hover));
  box-shadow: 0 10px 26px rgba(20, 184, 166, 0.22);
}

.service-process-step__title {
  margin: 0 0 0.35rem;
  font-size: 1.06rem;
  color: var(--color-primary);
}

.service-process-step__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.96rem;
  line-height: 1.65;
}

.page-service-detail .page-hero-full__title {
  max-width: min(22em, 100%);
}

.fox-bot-head-logo {
  width: min(200px, 52vw);
  height: auto;
  display: block;
}

/* ---------- Feature cards (icon stack — homepage) ---------- */
.card--feature-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
}

.card--feature-stack .card-title {
  margin-top: 0.35rem;
}

.card--feature-stack p {
  margin-top: 0.35rem;
}

.card-stack-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 14px;
  background: rgba(20, 184, 166, 0.12);
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.card-stack-icon__svg {
  width: 28px;
  height: 28px;
}

.card-stack-icon .fl-icon {
  width: 28px;
  height: 28px;
}

/* ---------- Homepage process premium ---------- */
.section--process-premium {
  position: relative;
}

.section--mesh-muted {
  background: linear-gradient(180deg, var(--color-bg-muted) 0%, #f4faf8 42%, var(--color-bg-muted) 100%);
}

.section--mesh-muted::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(20, 184, 166, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.55;
  pointer-events: none;
}

.section--mesh-muted > .container {
  position: relative;
  z-index: 1;
}

.process-premium-grid {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
  grid-template-columns: 1fr;
}

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

@media (min-width: 1100px) {
  .process-premium-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.process-premium-card {
  position: relative;
  margin: 0;
  padding: 1.45rem 1.25rem 1.35rem;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid rgba(26, 23, 20, 0.08);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s ease,
    border-color 0.32s ease;
}

.process-premium-card__num {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(20, 184, 166, 0.65);
}

.process-premium-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 12px;
  background: rgba(20, 184, 166, 0.12);
  color: var(--color-accent);
  margin: 0 auto 0.65rem;
}

.process-premium-card__icon .fl-icon {
  width: 24px;
  height: 24px;
}

.process-premium-card__title {
  margin: 0 0 0.45rem;
  font-size: 1.08rem;
  color: var(--color-primary);
}

.process-premium-card__desc {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (hover: hover) and (pointer: fine) {
  .process-premium-card:hover {
    transform: translateY(-5px);
    border-color: rgba(20, 184, 166, 0.28);
    box-shadow: 0 22px 52px rgba(26, 23, 20, 0.11);
  }
}

/* ---------- Homepage trusted-by ---------- */
.section--brands {
  background: linear-gradient(180deg, #fdfcfa 0%, #f8faf9 100%);
  border-block: 1px solid rgba(26, 23, 20, 0.06);
}

.home-brands-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  margin-top: 2rem;
}

.home-brand-slot {
  padding: 0.68rem 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(26, 23, 20, 0.1);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.42);
  background: rgba(255, 255, 255, 0.72);
  filter: grayscale(1);
  opacity: 0.82;
  transition:
    filter 0.35s ease,
    opacity 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .home-brand-slot:hover {
    filter: grayscale(0);
    opacity: 1;
    color: var(--color-accent);
    border-color: rgba(20, 184, 166, 0.45);
    transform: translateY(-2px);
  }
}

/* ---------- Portfolio carousel (homepage) ---------- */
.section--portfolio-carousel .portfolio-grid {
  display: none;
}

/* Recent Work carousel — viewport spans the row, dots underneath.
   Arrows are hidden on every breakpoint per design direction (dots-only
   navigation). */
.home-portfolio-carousel.fl-carousel {
  position: relative;
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0.85rem;
}

.home-portfolio-carousel.fl-carousel .fl-carousel__arrow {
  display: none;
}

.home-portfolio-carousel.fl-carousel .fl-carousel__viewport {
  grid-column: 1 / -1;
}

.home-portfolio-carousel.fl-carousel .fl-carousel__dots {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
  margin: 0.5rem 0 0;
}

.fl-carousel__viewport {
  overflow: hidden;
  /* Vertical breathing room inside the clipping mask so cards that
     `translateY(-4px)` on hover (or grow shadow) aren't cut at the top
     or bottom edge. The padding lives INSIDE the overflow:hidden box,
     so off-screen slides still get clipped horizontally. */
  padding-block: 14px;
  margin-block: -14px;
  border-radius: var(--radius-md);
  width: 100%;
  min-width: 0;
}

.fl-carousel__track {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  will-change: transform;
}

.fl-carousel__slide {
  flex-shrink: 0;
  box-sizing: border-box;
}

.fl-carousel__slide.portfolio-card {
  margin: 0;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  height: auto;
  align-self: stretch;
}

.fl-carousel__slide.portfolio-card .portfolio-thumb {
  flex-shrink: 0;
}

.fl-carousel__slide.portfolio-card .portfolio-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.fl-carousel__slide.portfolio-card .portfolio-body p:last-child {
  margin-bottom: 0;
}

/* The descriptive paragraph stretches to fill the remaining space so
   the engagement-period footer always lands at the same y-coordinate
   across every card in the row. */
.fl-carousel__slide.portfolio-card .portfolio-body > p:not(.portfolio-meta):not(.portfolio-card__period):first-of-type {
  flex: 1;
}

.fl-carousel__slide.portfolio-card .portfolio-card__period {
  margin-top: auto;
}

.fl-carousel__arrow {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  background: rgba(20, 184, 166, 0.14);
  color: var(--color-accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(26, 23, 20, 0.08);
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease,
    color 0.22s ease,
    opacity 0.22s ease;
}

.fl-carousel__arrow:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
}

.fl-carousel__arrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 4px;
}

.fl-carousel__arrow--next::before {
  transform: rotate(-135deg);
  margin-left: 0;
  margin-right: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .fl-carousel__arrow:hover:not(:disabled) {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    transform: translateY(-2px);
  }
}

.fl-carousel__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1rem;
  grid-column: 1 / -1;
}

.fl-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(20, 184, 166, 0.55);
  background: rgba(20, 184, 166, 0.12);
  cursor: pointer;
  transition:
    background 0.22s ease,
    transform 0.22s ease,
    border-color 0.22s ease;
}

.fl-carousel__dot.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: scale(1.15);
}

.fl-carousel__dots[hidden] {
  display: none !important;
}

/* ---------- Contact page premium ---------- */
.section--contact-premium {
  background: linear-gradient(180deg, #fdfcfa 0%, #f4faf8 55%, #eef6f4 100%);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.contact-premium-layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 980px) {
  .contact-premium-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
  }
}

.contact-premium-lead {
  max-width: 46ch;
}

.contact-premium-context {
  max-width: 52ch;
  margin-top: 0.85rem;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.contact-premium-cards {
  display: grid;
  gap: 0.75rem;
  margin: 1.75rem 0 1.5rem;
}

.contact-premium-channel {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  row-gap: 0.15rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(26, 23, 20, 0.08);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.contact-premium-channel--static {
  cursor: default;
}

.contact-premium-channel:not(.contact-premium-channel--static):hover {
  border-color: rgba(20, 184, 166, 0.45);
  box-shadow: 0 14px 40px rgba(26, 23, 20, 0.08);
  transform: translateY(-2px);
}

.contact-premium-channel__icon {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 12px;
  background: rgba(20, 184, 166, 0.12);
  color: var(--color-accent);
}

.contact-premium-channel__icon .fl-icon {
  display: block;
}

.contact-premium-channel__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.contact-premium-channel__value {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--color-primary);
  word-break: break-word;
}

.contact-premium-bullets {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.94rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.contact-premium-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.contact-premium-bullets .fl-icon {
  flex-shrink: 0;
  margin-top: 0.12rem;
  color: var(--color-accent);
}

.contact-premium-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.contact-premium-form-shell {
  min-width: 0;
}

.contact-form-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 3vw, 1.85rem);
  border: 1px solid rgba(26, 23, 20, 0.08);
  box-shadow:
    0 22px 56px rgba(26, 23, 20, 0.08),
    0 0 0 1px rgba(20, 184, 166, 0.06);
}

.contact-form-card__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-primary);
}

.contact-form-card__sub {
  margin: 0 0 1.35rem;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.form-grid-2 {
  display: grid;
  gap: 1rem;
}

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

.contact-form--premium input,
.contact-form--premium select,
.contact-form--premium textarea {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(26, 23, 20, 0.12);
  background: #fafaf8;
}

.contact-form--premium input:focus,
.contact-form--premium select:focus,
.contact-form--premium textarea:focus {
  background: #fff;
}

.section--contact-faq {
  padding-top: 2rem;
}

/* ---------- Interactive cursor helpers ---------- */
button:not(:disabled),
.btn,
summary,
.nav-toggle,
.social-link,
.contact-float-trigger,
.scroll-top,
.fl-carousel__arrow,
.fl-carousel__dot,
.bento-card,
.service-hub-card,
.portfolio-card,
.blog-card:has(.blog-card-link),
.quote-card--premium,
.card--feature-stack,
.process-premium-card,
.service-offering-card,
.contact-premium-channel:not(.contact-premium-channel--static),
.home-brand-slot {
  cursor: pointer;
}

a[href] {
  cursor: pointer;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='search'],
input[type='url'],
input[type='number'],
input[type='password'],
textarea,
select {
  cursor: text;
}

button:disabled,
.btn:disabled {
  cursor: not-allowed;
}