/* OkariK — hoja de estilos principal (CSS puro, sin build step) */

:root {
  --background: #fbfaf7;
  --foreground: #16262b;
  --card: #ffffff;
  --muted: #eaf1f2;
  --muted-foreground: #4b6570;

  --brand-red: #e1352c;
  --brand-red-dark: #b82a22;
  --brand-teal: #1b5c6e;
  --brand-teal-dark: #123f4c;
  --brand-ink: #16262b;
  --brand-mist: #eaf1f2;
  --brand-blush: #fbeae9;
  --brand-line: #dde6e7;
  --glow-teal: rgba(27, 92, 110, 0.14);
  --glow-red: rgba(225, 53, 44, 0.12);
  --primary-foreground: #ffffff;
  --accent-foreground: #ffffff;

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --font-sans: "Barlow", system-ui, sans-serif;
  --font-display: "Barlow Condensed", system-ui, sans-serif;
}

html.dark {
  --background: #0b1517;
  --foreground: #eef4f3;
  --card: #101d20;
  --muted: #14252a;
  --muted-foreground: #93aeb4;

  --brand-red: #ff5147;
  --brand-red-dark: #ff6f66;
  --brand-teal: #4fa8bd;
  --brand-teal-dark: #0e333c;
  --brand-ink: #eef4f3;
  --brand-mist: #14252a;
  --brand-blush: rgba(255, 81, 71, 0.12);
  --brand-line: #1d3238;
  --glow-teal: rgba(79, 168, 189, 0.16);
  --glow-red: rgba(255, 81, 71, 0.14);
  --primary-foreground: #0b1517;
  --accent-foreground: #0b1517;
  color-scheme: dark;
}

/* ── RESET / BASE ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--background); color: var(--foreground); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .3s ease, color .3s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
.icon { width: 1.25em; height: 1.25em; stroke-width: 2; flex-shrink: 0; }
::selection { background: var(--brand-red); color: #fff; }
:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
section[id] { scroll-margin-top: 84px; }

.container { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 1024px) { .container { padding: 0 3rem; } }

.font-display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .625rem;
  font-weight: 600; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-teal);
}
.needle-mark {
  display: inline-block; width: .6em; height: .16em; background: var(--brand-red);
  transform: rotate(-38deg); border-radius: 1px; flex-shrink: 0;
}

/* ── BUTTONS ──────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  border-radius: var(--radius-md); font-weight: 600; padding: 1rem 1.75rem;
  white-space: nowrap; border: none; transition: all .3s ease; font-size: .9375rem;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brand-red); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--brand-red-dark); box-shadow: 0 12px 24px -8px rgba(225,53,44,.35); }
.btn-outline { background: transparent; border: 2px solid var(--brand-teal); color: var(--brand-teal); padding: .875rem 1.625rem; }
.btn-outline:hover { background: var(--brand-teal); color: var(--accent-foreground); }
.btn-sm { padding: .5rem 1rem; font-size: .8125rem; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }

/* ── HEADER / NAV ─────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; transition: all .3s ease;
}
.site-header.scrolled { background: color-mix(in srgb, var(--background) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--brand-line); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.nav-inner { height: 5rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; }
@media (min-width: 1024px) { .nav-inner { padding: 0 3rem; } }

.logo { display: inline-flex; align-items: center; gap: .75rem; }
.logo-mark { width: 44px; height: 44px; border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.logo-mark img { width: 100%; height: 100%; object-fit: cover; }
.wordmark { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.wordmark .oka { color: var(--brand-teal); }
.wordmark .rik { color: var(--brand-red); }
.logo-tagline { display: block; margin-top: .2rem; font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--brand-teal); }

.nav-links { display: none; align-items: center; gap: .25rem; }
.nav-links a {
  position: relative; padding: .5rem .75rem; font-size: .875rem; font-weight: 500;
  color: color-mix(in srgb, var(--brand-ink) 75%, transparent); transition: color .2s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--brand-red); }
.nav-links a::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: -1px; height: 2px;
  background: var(--brand-red); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.nav-actions { display: none; align-items: center; gap: .5rem; }
.nav-phone { font-size: .875rem; font-weight: 500; color: color-mix(in srgb, var(--brand-ink) 70%, transparent); padding: 0 .5rem; }
.theme-toggle {
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); border: none; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--brand-ink) 70%, transparent);
}
.theme-toggle:hover { color: var(--brand-red); background: var(--brand-mist); }

.nav-burger { display: inline-flex; background: none; border: none; padding: .5rem; color: var(--brand-ink); }

@media (min-width: 768px) {
  .nav-links, .nav-actions { display: flex; }
  .nav-burger, .mobile-menu { display: none; }
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 40; background: var(--background);
  display: flex; flex-direction: column; padding-top: 80px;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu-links { border-top: 1px solid var(--brand-line); display: flex; flex-direction: column; }
.mobile-menu-links a {
  border-bottom: 1px solid var(--brand-line); padding: 1.5rem 2rem;
  font-family: var(--font-display); font-size: 1.875rem; letter-spacing: -0.01em;
}
.mobile-menu-cta { margin-top: auto; padding: 2rem; }

/* ── HERO ─────────────────────────────────────────── */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 5rem; }
.hero-glow {
  position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background:
    radial-gradient(ellipse 60% 50% at 85% 30%, var(--glow-teal) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 10% 90%, var(--glow-red) 0%, transparent 70%);
}
html.dark .hero-glow { opacity: .4; }
.hero-rocket {
  position: absolute; right: 12%; top: 64%; width: 320px; height: 560px; transform: translateY(-50%);
  display: none; pointer-events: none;
}
@media (min-width: 1024px) { .hero-rocket { display: block; } }
.hero-content { position: relative; z-index: 10; padding: 5rem 0 7rem; }
.hero-text { max-width: 48rem; }
.hero-title { font-size: clamp(2.75rem, 8vw, 6.5rem); }
.hero-title .line-teal { color: var(--brand-teal); }
.hero-title .line-red { color: var(--brand-red); }
.hero-lead { margin-top: 2rem; font-size: 1.125rem; line-height: 1.7; max-width: 36rem; color: color-mix(in srgb, var(--brand-ink) 75%, transparent); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

.ticker { position: relative; z-index: 10; border-top: 1px solid var(--brand-line); padding: 1.25rem 0; overflow: hidden; }
.ticker-track { display: flex; gap: 3rem; white-space: nowrap; width: max-content; animation: marquee 28s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
.ticker-group { display: inline-flex; align-items: center; gap: 3rem; }
.ticker-item { display: inline-flex; align-items: center; gap: .75rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: color-mix(in srgb, var(--brand-ink) 45%, transparent); }
.ticker-dot { width: .375rem; height: .375rem; border-radius: 999px; background: var(--brand-red); }

/* ── ROCKET ANIMATION ─────────────────────────────── */
.rocket-body { animation: rocket-bob 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 65%; }
.rocket-flame { animation: rocket-flame-flicker .32s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0%; }
.rocket-smoke-dot { animation: rocket-smoke-rise 2.6s ease-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes rocket-bob {
  0% { transform: translate(0,0) rotate(-3deg); }
  25% { transform: translate(6px,-22px) rotate(1deg); }
  50% { transform: translate(0,-42px) rotate(4deg); }
  75% { transform: translate(-6px,-22px) rotate(1deg); }
  100% { transform: translate(0,0) rotate(-3deg); }
}
@keyframes rocket-flame-flicker { 0%,100% { transform: scaleY(1) scaleX(1); opacity: 1; } 50% { transform: scaleY(1.18) scaleX(.88); opacity: .85; } }
@keyframes rocket-smoke-rise { 0% { transform: translateY(0) scale(.6); opacity: .3; } 100% { transform: translateY(100px) scale(1.8); opacity: 0; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── SECTIONS (shared) ───────────────────────────── */
.section { padding: 6rem 0; border-top: 1px solid var(--brand-line); }
@media (min-width: 1024px) { .section { padding: 8rem 0; } }
.section-tint { background: color-mix(in srgb, var(--brand-mist) 40%, transparent); }
.section-lead { max-width: 42rem; margin-bottom: 4rem; }
.section-title { font-size: clamp(2rem, 4.5vw, 3.5rem); margin: 1.5rem 0 1.5rem; }
.section-body { font-size: 1rem; line-height: 1.7; color: color-mix(in srgb, var(--brand-ink) 75%, transparent); }

/* ── NOSOTROS ─────────────────────────────────────── */
.about-grid { display: grid; gap: 4rem; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 1.1fr 1fr; gap: 6rem; } }
.about-quote { font-family: var(--font-display); font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.15; color: var(--brand-teal); text-transform: none; letter-spacing: normal; font-weight: 800; }
.about-list { display: flex; flex-direction: column; gap: 1.75rem; }
.about-list li { display: flex; gap: 1rem; }
.about-list p { font-size: .9375rem; line-height: 1.7; color: color-mix(in srgb, var(--brand-ink) 80%, transparent); }
.trajectory-rule { width: 7rem; height: .75rem; margin-top: 2.5rem; }

/* ── SERVICIOS ────────────────────────────────────── */
.service-groups { display: flex; flex-direction: column; gap: 5rem; }
.service-group-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.service-group-icon { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.service-group-title { font-size: 1.5rem; margin-top: .125rem; }
@media (min-width: 1024px) { .service-group-title { font-size: 1.875rem; } }
.service-group-lead { max-width: 42rem; margin-bottom: 2rem; }
.service-rows { display: flex; flex-direction: column; gap: 1.25rem; }
.service-row {
  background: var(--card); border: 1px solid var(--brand-line); border-left-width: 3px;
  border-radius: var(--radius-lg); padding: 1.75rem; transition: all .3s ease;
}
.service-row:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -20px rgba(0,0,0,.18); }
@media (min-width: 1024px) { .service-row { padding: 2rem; } }
.service-row-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1024px) { .service-row-grid { grid-template-columns: auto 1fr auto; gap: 2rem; } }
.service-icon-box { width: 3rem; height: 3rem; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.service-hook { font-size: .875rem; font-weight: 600; font-style: italic; }
.service-title { font-size: 1.25rem; margin: .25rem 0 .75rem; text-transform: none; letter-spacing: normal; }
@media (min-width: 1024px) { .service-title { font-size: 1.5rem; } }
.service-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.service-summary { font-size: .9375rem; line-height: 1.7; color: color-mix(in srgb, var(--brand-ink) 75%, transparent); max-width: 42rem; }
.service-includes { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1rem; }
.service-includes li { display: flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 500; color: color-mix(in srgb, var(--brand-ink) 60%, transparent); }
.service-includes .icon { width: .875rem; height: .875rem; }
.service-cta { align-self: center; }

/* ── SECTORES ─────────────────────────────────────── */
.sectors-grid { display: grid; gap: 4rem; align-items: start; }
@media (min-width: 1024px) { .sectors-grid { grid-template-columns: 1fr 1.2fr; gap: 6rem; } }
.sectors-cards { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .sectors-cards { grid-template-columns: 1fr 1fr; } }
.sector-card { border: 1px solid var(--brand-line); border-radius: var(--radius-lg); padding: 1.5rem; height: 100%; transition: all .3s ease; }
.sector-card:hover { border-color: color-mix(in srgb, var(--brand-teal) 50%, transparent); background: color-mix(in srgb, var(--brand-mist) 40%, transparent); transform: translateY(-4px); }
.sector-card .icon { width: 1.5rem; height: 1.5rem; color: var(--brand-teal); margin-bottom: 1rem; }
.sector-card-title { font-weight: 600; font-size: .9375rem; margin-bottom: .375rem; }
.sector-card p { font-size: .875rem; line-height: 1.6; color: color-mix(in srgb, var(--brand-ink) 70%, transparent); }
.link-arrow { display: inline-flex; align-items: center; gap: .5rem; margin-top: 2rem; font-size: .875rem; font-weight: 600; color: var(--brand-red); }

/* ── CLIENTES ─────────────────────────────────────── */
.clients-grid { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 640px) { .clients-grid { grid-template-columns: 1fr 1fr; } }
.client-card {
  display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg); padding: 1.75rem; transition: all .3s ease;
}
@media (min-width: 1024px) { .client-card { padding: 2rem; } }
.client-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -20px rgba(0,0,0,.18); }
.client-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.client-icon-box { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: var(--brand-mist); display: flex; align-items: center; justify-content: center; }
.client-icon-box .icon { color: var(--brand-teal); }
.badge-placeholder { font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--brand-ink) 40%, transparent); border: 1px solid var(--brand-line); border-radius: 999px; padding: .25rem .625rem; white-space: nowrap; }
.client-sector { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-red); margin-bottom: .375rem; }
.client-name { font-size: 1.25rem; margin-bottom: .75rem; text-transform: none; letter-spacing: normal; }
@media (min-width: 1024px) { .client-name { font-size: 1.5rem; } }
.client-services { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.tag { font-size: .75rem; font-weight: 500; border-radius: 999px; padding: .25rem .625rem; background: var(--brand-mist); color: var(--brand-teal); }
.client-work { font-size: .875rem; line-height: 1.6; color: color-mix(in srgb, var(--brand-ink) 75%, transparent); margin-bottom: 1rem; }
.client-result-box { margin-top: auto; border-top: 1px solid var(--brand-line); padding-top: 1rem; }
.client-result-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: color-mix(in srgb, var(--brand-ink) 45%, transparent); margin-bottom: .25rem; }
.client-result { font-size: .875rem; font-weight: 500; color: color-mix(in srgb, var(--brand-ink) 85%, transparent); }
.client-card-more { margin-top: 1rem; display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 600; color: var(--brand-red); }
.disclaimer { margin-top: 2rem; font-size: .75rem; color: color-mix(in srgb, var(--brand-ink) 45%, transparent); }

/* ── CONTACTO ─────────────────────────────────────── */
.contact-section { background: var(--brand-teal-dark); color: #fff; }
.contact-section .eyebrow { color: rgba(255,255,255,.7); }
.contact-grid { display: grid; gap: 4rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1.1fr 1fr; gap: 6rem; } }
.contact-lead { color: rgba(255,255,255,.75); max-width: 28rem; margin: 1.5rem 0 2.25rem; line-height: 1.7; }
.contact-list { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-list a { display: flex; align-items: center; gap: 1rem; }
.contact-icon-box { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .3s ease; }
.contact-list a:hover .contact-icon-box { background: rgba(255,255,255,.2); transform: scale(1.1); }
.contact-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.55); }
.contact-value { display: block; font-weight: 600; }
.social-row { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.social-btn { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; transition: all .3s ease; }
.social-btn:hover { background: rgba(255,255,255,.2); transform: translateY(-2px) scale(1.1); }

/* ── FOOTER ───────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--brand-line); background: var(--card); }
.footer-grid { display: grid; gap: 3rem; padding: 3.5rem 0; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-desc { margin-top: 1.5rem; font-size: .875rem; line-height: 1.6; color: color-mix(in srgb, var(--brand-ink) 65%, transparent); max-width: 20rem; }
.footer-col-title { display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: color-mix(in srgb, var(--brand-ink) 50%, transparent); margin-bottom: 1rem; }
.footer-links { display: flex; flex-direction: column; gap: .75rem; font-size: .875rem; }
.footer-links a { color: color-mix(in srgb, var(--brand-ink) 75%, transparent); }
.footer-links a:hover { color: var(--brand-red); }
.footer-bottom { border-top: 1px solid var(--brand-line); margin: 0 0 2.5rem; padding-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: .75rem; color: color-mix(in srgb, var(--brand-ink) 50%, transparent); }

/* ── WHATSAPP FLOAT ───────────────────────────────── */
.wa-float {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 40; width: 3.5rem; height: 3.5rem; border-radius: 999px;
  background: var(--brand-red); color: var(--primary-foreground); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.15); transition: all .3s ease; opacity: 0; transform: translateY(1rem); pointer-events: none;
}
.wa-float.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.wa-float:hover { background: var(--brand-red-dark); transform: scale(1.1); }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 var(--glow-red); } 70% { box-shadow: 0 0 0 14px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.wa-float { animation: pulse-ring 2.4s cubic-bezier(.4,0,.6,1) infinite; }

/* ── SKIP LINK / A11Y ─────────────────────────────── */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 100; background: var(--brand-red); color: #fff;
  padding: .75rem 1.25rem; border-radius: var(--radius-md); font-weight: 600; transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

/* ── REVEAL ON SCROLL ─────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── DETAIL PAGES (servicio / cliente / manual) ──── */
.detail-hero { padding: 4rem 0 6rem; border-bottom: 1px solid var(--brand-line); }
@media (min-width: 1024px) { .detail-hero { padding: 6rem 0; } }
.detail-narrow { max-width: 900px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 1024px) { .detail-narrow { padding: 0 3rem; } }
.back-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: color-mix(in srgb, var(--brand-ink) 60%, transparent); margin-bottom: 2rem; }
.back-link:hover { color: var(--brand-red); }
.detail-head-icon { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.detail-icon-box { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.detail-hook { font-size: 1.125rem; font-weight: 600; font-style: italic; }
.detail-title { font-size: clamp(2rem, 5vw, 3.5rem); margin: .5rem 0 1.5rem; }
.detail-summary { font-size: 1.125rem; line-height: 1.7; max-width: 42rem; color: color-mix(in srgb, var(--brand-ink) 75%, transparent); }
.detail-body { padding: 4rem 0 5rem; }
.detail-sections { display: grid; gap: 4rem; }
.detail-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: color-mix(in srgb, var(--brand-ink) 45%, transparent); margin-bottom: .75rem; }
.detail-text { font-size: 1.125rem; line-height: 1.7; color: color-mix(in srgb, var(--brand-ink) 80%, transparent); }
.steps { display: flex; flex-direction: column; gap: 1.5rem; }
.steps li { display: flex; gap: 1.25rem; }
.step-num {
  font-family: var(--font-display); font-size: 1.25rem; width: 2.5rem; height: 2.5rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--brand-mist); color: var(--brand-teal);
}
.step-text { font-size: 1rem; line-height: 1.7; color: color-mix(in srgb, var(--brand-ink) 80%, transparent); padding-top: .375rem; }
.callout { border-radius: var(--radius-lg); padding: 1.75rem; }
@media (min-width: 1024px) { .callout { padding: 2rem; } }
.callout-teal { background: var(--brand-mist); }
.callout-red { background: var(--brand-blush); }
.callout-label { font-weight: 600; margin-bottom: .75rem; text-transform: uppercase; font-size: .75rem; letter-spacing: .1em; }
.callout-text { font-size: 1rem; line-height: 1.7; color: color-mix(in srgb, var(--brand-ink) 85%, transparent); }
.includes-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .includes-grid { grid-template-columns: 1fr 1fr; } }
.includes-grid li { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; font-weight: 500; }
.detail-cta { padding: 4rem 0 5rem; text-align: center; background: var(--brand-teal-dark); color: #fff; }
.detail-cta h2 { margin-bottom: 1rem; }
.detail-cta p { color: rgba(255,255,255,.75); max-width: 36rem; margin: 0 auto 2rem; }
.related-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .related-grid { grid-template-columns: 1fr 1fr; } }
.related-card { border: 1px solid var(--brand-line); border-radius: var(--radius-lg); padding: 1.5rem; transition: all .3s ease; }
.related-card:hover { border-color: color-mix(in srgb, var(--brand-teal) 50%, transparent); transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(0,0,0,.15); }
.related-card .service-title, .related-card .client-name { font-size: 1.25rem; margin-bottom: .5rem; }
.tags-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ── 404 ──────────────────────────────────────────── */
.state-404 { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6rem 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .rocket-body, .rocket-flame, .rocket-smoke-dot, .ticker-track, .wa-float { animation: none !important; }
  html { scroll-behavior: auto; }
}