/* ============================================================
   EXODO LATAM — Componentes
   ============================================================ */

/* ---------- HERO (home / dark) ---------- */
.hero-navy { position: relative; overflow: hidden; background: var(--navy); }
.hero-navy .radial { position: absolute; inset: 0; background: radial-gradient(ellipse at top left, #000086 0%, #01004e 55%, #000040 100%); }
.hero-blob { position: absolute; border-radius: 999px; filter: blur(110px); pointer-events: none; }
.hero-blob.a { top: -8rem; right: -8rem; width: 520px; height: 520px; background: rgba(110,187,13,.15); }
.hero-blob.b { bottom: 0; left: 0; width: 420px; height: 420px; background: rgba(169,214,110,.1); }

.home-hero-grid { position: relative; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .home-hero-grid { grid-template-columns: 1.05fr 1fr; gap: 3rem; } }
.home-hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.8rem); font-weight: 800; color: #fff;
  line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1.25rem;
}
.home-hero h1 .accent { color: var(--green-light); }
.home-hero p { font-size: clamp(1rem,2vw,17px); color: rgba(255,255,255,.8); line-height: 1.5; max-width: 36rem; margin-bottom: 1.75rem; }
.hero-checks { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.hero-checks span { display: inline-flex; align-items: center; gap: .5rem; font-size: 13px; color: rgba(255,255,255,.7); }

.hero-visual { position: relative; }
.hero-frame { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 25px 50px -12px rgba(0,0,0,.4); }
.hero-frame video, .hero-frame img { width: 100%; height: 340px; object-fit: cover; object-position: center; }
@media (min-width: 1024px) { .hero-frame video, .hero-frame img { height: 440px; } }
.hero-frame .ovl { position: absolute; inset: 0; pointer-events: none; }
.hero-frame .ovl.t { background: linear-gradient(to top, rgba(1,0,78,.7), transparent 60%); }
.hero-floatcard {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  border-radius: 1rem; background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
  padding: 1rem; box-shadow: 0 20px 40px rgba(0,0,0,.2);
}
@media (min-width: 1024px) { .hero-floatcard { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; padding: 1.25rem; } }
.hero-floatcard .ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(110,187,13,.15); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero-floatcard .kk { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: rgba(1,0,78,.55); margin-bottom: .25rem; }
.hero-floatcard .tt { font-size: 13.5px; font-weight: 600; color: var(--navy); line-height: 1.35; }

/* ---------- IMAGE HERO (premium / service / page) ---------- */
.img-hero { position: relative; display: flex; align-items: center; overflow: hidden; background: var(--navy); min-height: 560px; }
.img-hero.tall { min-height: 78vh; }
.img-hero.taller { min-height: 88vh; }
@media (min-width: 1024px) { .img-hero { min-height: 640px; } }
.img-hero > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.img-hero .scrim { position: absolute; inset: 0; }
.img-hero .scrim.r { background: linear-gradient(to right, rgba(1,0,78,.9), rgba(1,0,78,.7) 40%, rgba(1,0,78,.3)); }
.img-hero .scrim.t { background: linear-gradient(to top, rgba(1,0,78,.6), transparent 60%); }
.img-hero .scrim.flat { background: rgba(1,0,78,.55); }
.img-hero .inner { position: relative; padding-top: 8rem; padding-bottom: 3.5rem; }
@media (min-width: 1024px) { .img-hero .inner { padding-top: 9rem; padding-bottom: 5rem; } }
.img-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 700; color: #fff; line-height: 1.08; max-width: 48rem; letter-spacing: -0.01em; }
.img-hero .sub { font-size: clamp(1.05rem,2vw,1.25rem); color: rgba(255,255,255,.85); margin-top: 1.25rem; max-width: 42rem; line-height: 1.6; }
.img-hero .eyebrow-white { color: rgba(255,255,255,.85); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; display: inline-block; margin-bottom: 1rem; }

/* breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 1.25rem; }
.crumbs a:hover { color: #fff; }
.crumbs .cur { color: #fff; }
.crumbs svg { width: 12px; height: 12px; }

/* small navy hero (no image) used by about pages */
.navy-hero { position: relative; overflow: hidden; background: var(--navy); padding: 8rem 0 4rem; }
@media (min-width: 1024px) { .navy-hero { padding: 9rem 0 6rem; } }
.navy-hero h1 { font-size: clamp(2.2rem,5vw,3.5rem); font-weight: 800; color: #fff; line-height: 1.05; letter-spacing: -0.01em; }
.navy-hero h1 .accent { color: var(--green-light); }
.navy-hero p { font-size: 1.125rem; color: rgba(255,255,255,.8); margin-top: 1.75rem; max-width: 36rem; line-height: 1.6; }
.navy-hero .split { position: relative; display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .navy-hero .split { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
.navy-hero .shot { border-radius: 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 25px 50px -12px rgba(0,0,0,.4); position: relative; }
.navy-hero .shot img { width: 100%; height: 440px; object-fit: cover; }
@media (min-width: 1024px) { .navy-hero .shot img { height: 520px; } }

/* ---------- Generic grids ---------- */
.grid { display: grid; gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.cols-2 { grid-template-columns: 1fr; }
.cols-3 { grid-template-columns: 1fr; }
.cols-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .cols-2 { grid-template-columns: repeat(2,1fr); }
  .cols-3 { grid-template-columns: repeat(2,1fr); }
  .cols-4 { grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 1024px) {
  .cols-3 { grid-template-columns: repeat(3,1fr); }
  .cols-4 { grid-template-columns: repeat(4,1fr); }
}
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }

/* ---------- Cards ---------- */
.card-ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; margin-bottom: .85rem;
}
.card-ico svg { width: 20px; height: 20px; }

/* tone cards (challenges) */
.tone-card { border-radius: 1rem; border: 1px solid; padding: 1.25rem; transition: transform .2s, box-shadow .2s; }
.tone-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.tone-card svg { width: 28px; height: 28px; margin-bottom: .75rem; opacity: .85; }
.tone-card h3 { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.tone-card p { margin-top: .5rem; font-size: .875rem; line-height: 1.6; opacity: .85; }
.tone-0 { background:#eef2ff; border-color:#c7d2fe; color:#1e1b4b; }
.tone-1 { background:#ecfdf5; border-color:#a7f3d0; color:#064e3b; }
.tone-2 { background:#f5f3ff; border-color:#ddd6fe; color:#3b0764; }
.tone-3 { background:#fff7ed; border-color:#fed7aa; color:#7c2d12; }
.tone-4 { background:#f0f9ff; border-color:#bae6fd; color:#0c4a6e; }
.tone-5 { background:#f1f5f9; border-color:#cbd5e1; color:#0f172a; }

/* benefit cards (white with navy icon) */
.benefit-card { border-radius: 1rem; background: #fff; border: 1px solid #e2e8f0; padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .2s; }
.benefit-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.benefit-card .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: #b5dc16; display: grid; place-items: center; margin-bottom: .75rem; }
.benefit-card .ic svg { width: 20px; height: 20px; }
.benefit-card h3 { font-size: 1rem; font-weight: 600; color: var(--navy); line-height: 1.3; }
.benefit-card p { margin-top: .5rem; font-size: .875rem; color: var(--muted); line-height: 1.6; }

/* differentiator cards (on navy) */
.diff-card { border-radius: 1rem; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); backdrop-filter: blur(4px); padding: 1.25rem; transition: background .2s; }
.diff-card:hover { background: rgba(255,255,255,.1); }
.diff-card svg.head { width: 28px; height: 28px; color: #b5dc16; margin-bottom: .75rem; }
.diff-card h3 { font-size: 1rem; font-weight: 600; color: #fff; line-height: 1.3; }
.diff-card p { margin-top: .5rem; font-size: .875rem; color: rgba(255,255,255,.75); line-height: 1.6; }

/* feature cards (white, gradient icon) */
.feature-card { padding: 1.75rem; border-radius: 1rem; background: #fff; border: 1px solid #e2e8f0; transition: border-color .2s, box-shadow .2s; }
.feature-card:hover { border-color: rgba(1,0,78,.4); box-shadow: 0 18px 40px -12px rgba(1,0,78,.12); }
.feature-card .gic { width: 48px; height: 48px; border-radius: 12px; color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; box-shadow: 0 8px 18px -6px rgba(0,0,0,.3); }
.feature-card .gic svg { width: 20px; height: 20px; }
.feature-card .tag { display: block; font-size: 10px; font-weight: 700; color: #94a3b8; letter-spacing: .2em; margin-bottom: .5rem; }
.feature-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; line-height: 1.3; }
.feature-card p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.chip { font-size: 11px; padding: .25rem .55rem; border-radius: .4rem; background: var(--lavender); color: var(--navy); font-weight: 600; }

/* soft icon card (about pages) */
.soft-card { background: #fff; border-radius: 1rem; padding: 1.75rem; border: 1px solid rgba(1,0,78,.08); transition: border-color .2s, box-shadow .2s; }
.soft-card:hover { border-color: rgba(110,187,13,.5); box-shadow: 0 12px 28px rgba(0,0,0,.07); }
.soft-card .ic { width: 48px; height: 48px; border-radius: 12px; background: rgba(1,0,78,.05); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; color: var(--navy); }
.soft-card .ic svg { width: 24px; height: 24px; }
.soft-card h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.soft-card p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* gradient icon background helpers */
.g-navy { background: linear-gradient(135deg,#01004e,#3a3aa8); }
.g-blue { background: linear-gradient(135deg,#1e3a8a,#2563eb); }
.g-cyan { background: linear-gradient(135deg,#0e7490,#06b6d4); }
.g-green { background: linear-gradient(135deg,#15803d,#22c55e); }
.g-amber { background: linear-gradient(135deg,#b45309,#f59e0b); }
.g-violet { background: linear-gradient(135deg,#7e22ce,#a855f7); }
.g-rose { background: linear-gradient(135deg,#e11d48,#db2777); }
.g-slate { background: linear-gradient(135deg,#334155,#0f172a); }

/* ---------- KPI cards ---------- */
.kpi { padding: 1.75rem; border-radius: 1rem; background: linear-gradient(135deg,#01004e,#1e1e8a); color: #fff; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,.12); }
.kpi .ic { width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.kpi .ic svg { width: 20px; height: 20px; color: var(--green-bright); }
.kpi .val { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 700; margin-bottom: .5rem; }
.kpi .lbl { font-size: .875rem; color: rgba(255,255,255,.8); line-height: 1.35; }

/* ---------- Flip cards (3D) ---------- */
.flip-card { perspective: 1400px; }
.flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 400ms cubic-bezier(.4,.05,.2,1); transform-style: preserve-3d; }
.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner,
.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  overflow: hidden; border-radius: 20px;
}
.flip-card-back { transform: rotateY(180deg); }

/* compact (auto-height) variant — internal capability cards */
.flip-card-compact .flip-card-inner { display: grid; grid-template-areas: "face"; height: auto; }
.flip-card-compact .flip-card-face { grid-area: face; position: relative; height: auto; min-height: 0; }
.flip-cap-front { background: #fff; border: 1px solid #e2e8f0; padding: 1.25rem; display: flex; flex-direction: column; }
.flip-cap-front .ic { width: 36px; height: 36px; border-radius: 10px; background: #eef2ff; color: var(--navy); display: grid; place-items: center; margin-bottom: .65rem; }
.flip-cap-front .ic svg { width: 16px; height: 16px; }
.flip-cap-front h3 { font-size: 1rem; font-weight: 600; color: var(--navy); line-height: 1.3; }
.flip-cap-front p { margin-top: .4rem; font-size: .875rem; color: var(--muted); line-height: 1.6; }
.flip-cap-front .more { margin-top: 1rem; font-size: 11px; font-weight: 700; color: rgba(1,0,78,.6); text-transform: uppercase; letter-spacing: .08em; }
.flip-cap-back { background: linear-gradient(135deg,#01004e,#0a0a78); color: #fff; padding: 1.25rem; display: flex; flex-direction: column; }
.flip-cap-back .kk { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #b5dc16; }
.flip-cap-back h4 { margin-top: .4rem; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.flip-cap-back p { margin-top: .4rem; font-size: .875rem; color: rgba(255,255,255,.8); line-height: 1.6; }

.flip-wrap { margin-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.flip-wrap > .flip-cell { width: 100%; }
@media (min-width: 640px) { .flip-wrap > .flip-cell { width: calc(50% - .5rem); } }
@media (min-width: 1024px) { .flip-wrap > .flip-cell { width: calc(33.333% - .75rem); } }

/* ---------- Home service flip cards (tall, with image) ---------- */
.svc-flip { height: 360px; }
.svc-front { background: #fff; border: 1px solid rgba(1,0,78,.1); box-shadow: 0 1px 3px rgba(0,0,0,.06); display: flex; flex-direction: column; cursor: pointer; }
.svc-front:hover { box-shadow: 0 20px 40px -12px rgba(1,0,78,.18); }
.svc-front .ph { position: relative; height: 144px; overflow: hidden; flex-shrink: 0; }
.svc-front .ph img { width: 100%; height: 100%; object-fit: cover; }
.svc-front .ph .grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(1,0,78,.8), rgba(1,0,78,.25) 40%, transparent); }
.svc-front .ph .badge { position: absolute; top: .75rem; left: .75rem; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.95); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.svc-front .body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.svc-front h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: .5rem; line-height: 1.3; }
.svc-front p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: .75rem; flex: 1; }
.svc-front .more { display: inline-flex; align-items: center; gap: .4rem; font-size: 12.5px; font-weight: 700; color: var(--green); }
.svc-back { color: #fff; padding: 1.25rem; display: flex; flex-direction: column; background: linear-gradient(155deg,#000086 0%, #01004e 55%, #000040 100%); border: 1px solid rgba(110,187,13,.28); }
.svc-back .ic { width: 36px; height: 36px; border-radius: 10px; background: rgba(110,187,13,.2); color: var(--green-light); display: inline-flex; align-items: center; justify-content: center; margin-bottom: .75rem; }
.svc-back h3 { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: .5rem; line-height: 1.3; }
.svc-back p { font-size: 13px; color: rgba(255,255,255,.8); line-height: 1.6; margin-bottom: .75rem; }
.svc-back ul { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.svc-back li { font-size: 11px; font-weight: 500; padding: .1rem .5rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.85); }
.svc-back a.more { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: 12.5px; font-weight: 700; color: var(--green-light); }

/* ---------- Home: audience cards ---------- */
.audience { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 1024px) { .audience { grid-template-columns: 1fr 1.15fr; gap: 2rem; } }
.audience-photo { position: relative; border-radius: 20px; overflow: hidden; }
.audience-photo img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
@media (min-width: 1024px) { .audience-photo img { height: 540px; } }
.audience-photo .grad { position: absolute; inset: 0; background: linear-gradient(to top right, rgba(1,0,78,.5), transparent 50%); }
.aud-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .aud-grid { grid-template-columns: repeat(2,1fr); } }
.aud-card { position: relative; display: flex; gap: .75rem; padding: 1.25rem; border-radius: 12px; border: 1px solid; border-left-width: 2.5px; background: #fff; transition: transform .3s, box-shadow .3s; height: 100%; }
.aud-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.aud-card .ic { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.aud-card .ic svg { width: 20px; height: 20px; }
.aud-card h3 { font-size: 13.5px; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: .15rem; }
.aud-card p { font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-bottom: .35rem; }
.aud-card .go { display: inline-flex; align-items: center; gap: .25rem; font-size: 11.5px; font-weight: 600; }
.aud-card .go svg { width: 12px; height: 12px; }

/* ---------- Process steps / numbered ---------- */
.num-card { position: relative; background: #fff; border-radius: 1rem; padding: 1.75rem; border: 1px solid rgba(1,0,78,.08); transition: border-color .2s, box-shadow .2s; }
.num-card:hover { border-color: rgba(110,187,13,.5); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.num-card .n { position: absolute; top: 1.25rem; right: 1.25rem; font-family: var(--font-heading); font-size: 44px; font-weight: 800; color: rgba(1,0,78,.08); line-height: 1; }
.num-card .ic { width: 48px; height: 48px; border-radius: 12px; background: rgba(1,0,78,.05); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; color: var(--navy); }
.num-card .ic svg { width: 24px; height: 24px; }
.num-card h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.num-card p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

.step-list { display: flex; flex-direction: column; gap: 1rem; }
.step-row { display: flex; gap: 1rem; padding: 1rem; border-radius: .75rem; background: #fff; border: 1px solid #e2e8f0; }
.step-row .num { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg,#01004e,#3a3aa8); color: #fff; font-family: var(--font-heading); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.step-row h3 { font-weight: 700; color: var(--navy); margin-bottom: .25rem; font-family: var(--font-heading); }
.step-row p { font-size: .875rem; color: var(--muted); line-height: 1.6; }

/* ServicePage process (icon top) */
.proc4 { display: grid; gap: 1.5rem; }
@media (min-width: 640px){ .proc4 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px){ .proc4 { grid-template-columns: repeat(4,1fr); } }
.proc4 .item { padding: 1.5rem; border-radius: 1rem; background: #fff; border: 1px solid #e2e8f0; }
.proc4 .item .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.proc4 .item h3 { font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.proc4 .item p { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* checklist item (includes) */
.check-item { display: flex; align-items: flex-start; gap: .75rem; padding: 1.25rem; border-radius: .75rem; background: #fff; border: 1px solid rgba(226,230,240,.7); }
.check-item .tick { width: 32px; height: 32px; border-radius: 10px; background: rgba(110,187,13,.15); color: var(--green); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .1rem; }
.check-item .tick svg { width: 16px; height: 16px; }
.check-item span.t { font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.35; }

/* audience cards (servicepage) */
.aud2 { padding: 1.75rem; border-radius: 1rem; background: var(--lavender); border: 1px solid rgba(226,230,240,.6); }
.aud2 h3 { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.aud2 p { font-size: 15px; color: var(--muted); line-height: 1.6; }

/* benefit chip rows */
.benefit-row { display: flex; align-items: flex-start; gap: .75rem; padding: 1.25rem; border-radius: .75rem; background: var(--lavender); border: 1px solid rgba(226,230,240,.6); }
.benefit-row svg { width: 20px; height: 20px; color: var(--navy); flex-shrink: 0; margin-top: .1rem; }
.benefit-row span { font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.35; }

/* ---------- Accordion (FAQ) ---------- */
.accordion { background: #fff; border-radius: 1rem; border: 1px solid #e2e8f0; padding: 0 .5rem; }
.accordion.lav { background: rgba(239,239,255,.4); }
.acc-item { border-bottom: 1px solid rgba(226,230,240,.7); }
.acc-item:last-child { border-bottom: none; }
.acc-trigger {
  width: 100%; text-align: left; background: none; border: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 16px; font-weight: 600; color: var(--navy);
  padding: 1.25rem 1rem; font-family: var(--font-body);
}
.acc-trigger .chev { width: 18px; height: 18px; transition: transform .2s; flex-shrink: 0; color: var(--muted); }
.acc-item.open .acc-trigger .chev { transform: rotate(180deg); }
.acc-panel { display: none; padding: 0 1rem 1.25rem; font-size: 15px; color: var(--muted); line-height: 1.7; }
.acc-item.open .acc-panel { display: block; }

/* ---------- Prose (services/solutions body) ---------- */
.prose { color: var(--muted); line-height: 1.7; font-size: 16px; }
.prose > * + * { margin-top: 1.25rem; }
.prose h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: var(--navy); margin-top: 1.5rem; }
.prose p { line-height: 1.7; }
.prose ul { list-style: disc; padding-left: 1.5rem; }
.prose ul li { margin-bottom: .5rem; }
.prose .feat-grid { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 640px) { .prose .feat-grid { grid-template-columns: repeat(2,1fr); } }
.prose .feat-grid .b { padding: 1rem; border-radius: .5rem; background: var(--lavender); border: 1px solid var(--border); }
.prose .feat-grid .b p { font-size: 14px; font-weight: 500; color: var(--navy); }
.prose .hero-img { width: 100%; height: 16rem; object-fit: cover; border-radius: .75rem; margin-bottom: 2rem; }
.dotlist { display: flex; flex-direction: column; gap: .5rem; }
.dotlist li { display: flex; align-items: flex-start; gap: .75rem; color: var(--muted); }
.dotlist li::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--navy); margin-top: .55rem; flex-shrink: 0; }
.dotlist.green li::before { background: var(--green); }

/* generic content panels */
.panel { padding: 1.5rem; border-radius: .75rem; border: 1px solid var(--border); background: #fff; }
.panel-muted { padding: 1.5rem; border-radius: .75rem; background: var(--lavender); }
.panel h3 { font-family: var(--font-heading); font-weight: 600; color: var(--navy); margin-bottom: .5rem; }
.panel p { color: var(--muted); line-height: 1.7; font-size: 14.5px; }

/* ---------- Final CTA panel (premium) ---------- */
.final-cta-wrap { background: linear-gradient(135deg, var(--lavender-2), var(--lavender)); }
.final-cta { border-radius: 1.5rem; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1024px) { .final-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 3rem; } }
.final-cta h2 { font-size: clamp(1.5rem,3vw,1.875rem); font-weight: 700; color: var(--navy); }
.final-cta p { margin-top: .75rem; color: var(--muted); line-height: 1.6; }
.final-cta .actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* navy CTA band */
.cta-band { position: relative; overflow: hidden; background: var(--navy); padding: 4rem 0; }
.cta-band .radial { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #000086 0%, #01004e 60%, #000040 100%); }
.cta-band .inner { position: relative; max-width: 48rem; margin: 0 auto; text-align: center; }
.cta-band h2 { font-size: clamp(1.75rem,4vw,2.7rem); font-weight: 800; color: #fff; line-height: 1.08; letter-spacing: -0.01em; }
.cta-band p { font-size: 1.125rem; color: rgba(255,255,255,.8); margin-top: 1.25rem; line-height: 1.6; }
.cta-band .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* image strip section (about) */
.img-strip { position: relative; overflow: hidden; }
.img-strip .wrap { position: relative; height: 400px; }
@media (min-width: 1024px) { .img-strip .wrap { height: 480px; } }
.img-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.img-strip .scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(1,0,78,.92), rgba(1,0,78,.7) 50%, rgba(1,0,78,.25)); }
.img-strip .scrim.rev { background: linear-gradient(90deg, rgba(1,0,78,.32), rgba(0,0,156,.45) 50%, rgba(1,0,78,.72)); }
.img-strip .content { position: relative; height: 100%; display: flex; align-items: center; }
.img-strip .box { max-width: 36rem; }
.img-strip .box.right { margin-left: auto; text-align: right; }
.img-strip h2 { font-size: clamp(1.75rem,4vw,2.7rem); font-weight: 800; color: #fff; line-height: 1.05; margin: 1rem 0 1.25rem; letter-spacing: -0.01em; }
.img-strip p { font-size: 16.5px; color: rgba(255,255,255,.85); line-height: 1.6; max-width: 32rem; }
.img-strip .box.right p { margin-left: auto; }
.img-strip .kk { font-size: 11px; font-weight: 700; color: var(--green-light); text-transform: uppercase; letter-spacing: .22em; display: inline-flex; align-items: center; gap: .4rem; }
.img-strip .kk svg { width: 14px; height: 14px; }

/* split with image (about/proposito) */
.split2 { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .split2 { grid-template-columns: 1fr 1.1fr; gap: 4rem; } }
.split2.rev { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .split2.rev { grid-template-columns: 1.1fr 1fr; } }
.split2 .shot { border-radius: 24px; overflow: hidden; }
.split2 .shot img { width: 100%; height: 420px; object-fit: cover; }
@media (min-width: 1024px) { .split2 .shot img { height: 500px; } }
.check-points { margin-top: 1.75rem; display: flex; flex-direction: column; gap: .75rem; }
.check-points li { display: flex; align-items: flex-start; gap: .75rem; font-size: 15px; color: rgba(1,0,78,.85); }
.check-points svg { width: 20px; height: 20px; color: var(--green); flex-shrink: 0; margin-top: .1rem; }

/* contact form */
.form-card { background: #fff; border-radius: 1rem; border: 1px solid rgba(226,230,240,.7); box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 1.75rem; }
@media (min-width: 1024px) { .form-card { padding: 2.5rem; } }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .75rem 1rem; border-radius: .6rem; border: 1px solid var(--border);
  background: #fff; color: var(--navy); font-size: 14px; font-family: inherit; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(110,187,13,.2); }
.field textarea { resize: vertical; min-height: 120px; }
.form-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2,1fr); } }
.form-msg { border-radius: .75rem; padding: 1.5rem; text-align: center; font-weight: 600; }
.form-msg.ok { background: var(--lavender); border: 1px solid rgba(1,0,78,.1); color: var(--navy); }
.form-msg.err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.field-error { color: #dc2626; font-size: 12.5px; margin-top: .25rem; display: none; }
.field.invalid .field-error { display: block; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #dc2626; }

/* contact sidebar */
.contact-card { background: #fff; border-radius: 1rem; border: 1px solid rgba(226,230,240,.7); padding: 1.75rem; }
.contact-row { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1.25rem; }
.contact-row:first-of-type { margin-top: 1.25rem; }
.contact-row svg { width: 20px; height: 20px; color: var(--navy); flex-shrink: 0; margin-top: .15rem; }
.contact-row .k { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .15rem; }
.contact-row a, .contact-row .v { font-size: 14px; color: var(--navy); font-weight: 600; }
.contact-row a:hover { color: var(--green); }

/* manual vs auto columns */
.vs-grid { display: grid; gap: 1.5rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .vs-grid { grid-template-columns: repeat(2,1fr); } }
.vs-col { padding: 1.75rem; border-radius: 1rem; }
.vs-col.manual { background: #f8fafc; border: 1px solid #e2e8f0; }
.vs-col.auto { background: linear-gradient(135deg,#01004e,#3a3aa8); color: #fff; box-shadow: 0 18px 40px -12px rgba(1,0,78,.3); }
.vs-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.vs-head .badge { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.vs-head.manual .badge { background: #fee2e2; color: #dc2626; }
.vs-head.auto .badge { background: var(--green-bright); color: #fff; }
.vs-head h3 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; }
.vs-step { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: .6rem; margin-bottom: .35rem; }
.vs-col.manual .vs-step { background: #fff; border: 1px solid #e2e8f0; }
.vs-col.auto .vs-step { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); }
.vs-step .n { width: 28px; height: 28px; border-radius: 999px; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vs-col.manual .vs-step .n { background: #e2e8f0; color: #475569; }
.vs-col.auto .vs-step .n { background: var(--green-bright); color: #fff; }
.vs-step span.t { font-size: 14px; }
.vs-arrow { display: flex; justify-content: center; margin: .25rem 0; }
.vs-arrow svg { width: 16px; height: 16px; opacity: .4; }

/* case cards (auto / IA) */
.case-card { border-radius: 1rem; background: #fff; border: 1px solid #e2e8f0; overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.case-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -20px rgba(0,0,0,.25); }
.case-card .ph { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.case-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.case-card:hover .ph img { transform: scale(1.05); }
.case-card .ph .grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(1,0,78,.85), rgba(1,0,78,.2) 50%, transparent); }
.case-card .tagpill { position: absolute; top: .75rem; left: .75rem; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: .4rem; background: rgba(255,255,255,.95); font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--navy); }
.case-card .tagpill svg { width: 12px; height: 12px; color: var(--green); }
.case-card .ph h3 { position: absolute; bottom: .75rem; left: 1rem; right: 1rem; font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: #fff; line-height: 1.3; }
.case-card .body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.case-card .body > p { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: .75rem; }
.case-card ul.feats { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; flex: 1; }
.case-card ul.feats li { display: flex; align-items: flex-start; gap: .5rem; font-size: 13px; color: #334155; }
.case-card ul.feats svg { width: 14px; height: 14px; color: var(--green); margin-top: .15rem; flex-shrink: 0; }
.case-card .res { padding-top: .75rem; border-top: 1px solid #f1f5f9; display: flex; align-items: center; gap: .5rem; font-size: 13px; font-weight: 700; color: var(--navy); }
.case-card .res svg { width: 16px; height: 16px; color: var(--green); }

/* legal prose */
.legal-prose { color: #1e293b; font-size: 15px; line-height: 1.7; max-width: 48rem; }
.legal-prose .lead { font-size: 16px; color: #334155; margin-bottom: 1.5rem; }
.legal-prose h2 { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--navy); margin: 2.25rem 0 .75rem; letter-spacing: -0.01em; scroll-margin-top: 96px; }
.legal-prose h3 { font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--navy); margin: 1.5rem 0 .5rem; scroll-margin-top: 96px; }
.legal-prose p { margin: 0 0 1rem; }
.legal-prose ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 1.25rem; }
.legal-prose li { margin-bottom: .4rem; }
.legal-prose a { color: #047857; text-decoration: underline; text-underline-offset: 2px; }
.legal-prose a:hover { color: var(--navy); }
.legal-prose strong { color: #0f172a; font-weight: 600; }
.legal-tbd { background: #fef3c7; color: #92400e; padding: 1px 6px; border-radius: 4px; font-style: normal; font-size: 12.5px; font-weight: 600; }
.legal-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .legal-layout { grid-template-columns: 260px 1fr; gap: 3rem; } }
.legal-toc { position: static; }
@media (min-width: 1024px) { .legal-toc { position: sticky; top: 6rem; align-self: start; } }
.legal-toc h2 { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .18em; margin-bottom: .75rem; }
.legal-toc ol { border-left: 1px solid #e2e8f0; }
.legal-toc a { display: block; padding: .25rem .75rem; margin-left: -1px; border-left: 2px solid transparent; font-size: 13px; color: #475569; line-height: 1.35; }
.legal-toc a:hover, .legal-toc a.active { border-left-color: #10b981; color: var(--navy); font-weight: 600; }
.legal-toc a .nn { color: #94a3b8; margin-right: .35rem; }