:root {
  --navy: #0a3e56;
  --navy-2: #062d3f;
  --teal: #17647b;
  --teal-soft: #e7f1f3;
  --ink: #13232c;
  --muted: #66767e;
  --line: #dce5e8;
  --paper: #ffffff;
  --off: #f5f8f8;
  --gold: #c9a45e;
  --accent: #e6a04a;
  --accent-dark: #b86d25;
  --accent-soft: #fff2df;
  --radius: 22px;
  --shadow: 0 18px 55px rgba(8, 48, 65, .11);
  --container: min(1160px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.container { width: var(--container); margin-inline: auto; }
.section { padding: 112px 0; }
.section-dark { color: white; background: var(--navy-2); }
.center { text-align: center; }

.skip-link { position: fixed; left: 20px; top: -60px; z-index: 999; background: white; color: var(--navy); padding: 10px 15px; border-radius: 8px; box-shadow: var(--shadow); }
.skip-link:focus { top: 20px; }

.topbar { background: #062a3a; color: rgba(255,255,255,.72); font-size: 13px; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 20px; }
.topbar-links { display: flex; gap: 20px; }
.topbar a:hover { color: white; }

.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(10,62,86,.08); }
.nav { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand img { width: 300px; height: auto; }
.nav-menu { display: flex; align-items: center; gap: 27px; font-size: 14px; font-weight: 650; color: #38515d; }
.nav-menu > a:not(.btn) { position: relative; }
.nav-menu > a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 2px; background: var(--teal); transition: width .2s ease; }
.nav-menu > a:not(.btn):hover::after { width: 100%; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: white; border-radius: 12px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.menu-toggle span { width: 18px; height: 2px; background: var(--navy); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent; font-weight: 750; font-size: 14px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-small { min-height: 42px; padding-inline: 17px; background: var(--navy); color: white; }
.btn-primary { background: var(--navy); color: white; box-shadow: 0 11px 28px rgba(10,62,86,.20); }
.btn-primary:hover { background: #0f536e; }
.btn-accent { background: linear-gradient(135deg, #edb05b, var(--accent)); color: #17303a; border-color: rgba(255,255,255,.12); box-shadow: 0 12px 30px rgba(195,120,37,.22); }
.btn-accent:hover { background: linear-gradient(135deg, #f1bb6c, #e69a3f); box-shadow: 0 16px 38px rgba(195,120,37,.30); }
.btn-light { background: white; color: var(--navy); }
.btn-light:hover { box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.btn-ghost { color: white; border-color: rgba(255,255,255,.28); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-outline { color: var(--navy); border-color: #b8cbd2; background: transparent; }
.btn-outline:hover { border-color: var(--navy); background: white; box-shadow: 0 10px 30px rgba(8,48,65,.08); }
.btn-block { width: 100%; }

.hero { position: relative; overflow: hidden; padding: 88px 0 94px; background: radial-gradient(circle at 83% 22%, rgba(230,160,74,.18), transparent 24%), radial-gradient(circle at 85% 55%, rgba(30,105,130,.48), transparent 36%), linear-gradient(135deg, #062d3f 0%, #0a3e56 68%, #0d506a 100%); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent 90%); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 70px; }
.hero-copy { max-width: 650px; }
.eyebrow { display: inline-block; color: var(--teal); text-transform: uppercase; letter-spacing: .13em; font-size: 12px; font-weight: 850; margin-bottom: 15px; }
.section-dark .eyebrow, .case-study .eyebrow { color: #88c2d1; }
.hero h1 { font-size: clamp(44px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -.045em; margin: 0 0 25px; max-width: 730px; }
.hero-lead { color: rgba(255,255,255,.74); font-size: 18px; max-width: 610px; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.trust-row { display: flex; gap: 37px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); }
.trust-row div { display: flex; flex-direction: column; }
.trust-row strong { font-size: 20px; letter-spacing: -.02em; }
.trust-row span { color: rgba(255,255,255,.58); font-size: 12px; }
.hero-visual { position: relative; isolation: isolate; }
.hero-visual::before { content: ""; position: absolute; width: 140px; height: 140px; right: -28px; top: -30px; border-radius: 50%; background: var(--accent); opacity: .16; filter: blur(2px); z-index: -1; }
.hero-visual::after { content: ""; position: absolute; inset: 0; border-radius: 30px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); pointer-events: none; }
.hero-visual img { width: 100%; aspect-ratio: 1 / .91; object-fit: cover; border-radius: 30px; filter: saturate(.78) contrast(1.03); }
.hero-floating-card { position: absolute; right: -25px; bottom: 28px; width: 285px; background: rgba(255,255,255,.96); color: var(--ink); border-radius: 16px; padding: 17px; display: flex; gap: 12px; box-shadow: 0 20px 40px rgba(0,0,0,.20); }
.hero-floating-card .dot { width: 10px; height: 10px; margin-top: 6px; flex: 0 0 auto; border-radius: 50%; background: #2da178; box-shadow: 0 0 0 5px rgba(45,161,120,.12); }
.hero-floating-card strong, .hero-floating-card small { display: block; }
.hero-floating-card strong { font-size: 14px; color: var(--navy); }
.hero-floating-card small { color: var(--muted); line-height: 1.45; margin-top: 3px; }

.benefit-strip { position: relative; margin-top: -1px; background: white; border-bottom: 1px solid var(--line); }
.benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.benefit-grid article { display: flex; gap: 16px; align-items: center; padding: 28px 26px; border-right: 1px solid var(--line); }
.benefit-grid article:first-child { border-left: 1px solid var(--line); }
.benefit-grid .icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--teal-soft); color: var(--navy); font-size: 23px; }
.benefit-grid strong, .benefit-grid small { display: block; }
.benefit-grid strong { color: var(--navy); font-size: 14px; }
.benefit-grid small { color: var(--muted); }

.section-heading { max-width: 760px; margin-bottom: 48px; }
.section-heading h2, .comparison-intro h2, .testimonial-intro h2, .faq-intro h2, .contact-copy h2 { margin: 0 0 18px; font-size: clamp(34px, 4vw, 52px); line-height: 1.07; letter-spacing: -.035em; color: var(--navy); }
.section-heading p, .comparison-intro p, .testimonial-intro p, .faq-intro p, .contact-copy > p { color: var(--muted); font-size: 17px; margin: 0; max-width: 720px; }
.split-heading { max-width: none; display: grid; grid-template-columns: 1.25fr .75fr; gap: 70px; align-items: end; }
.split-heading p { padding-bottom: 7px; }

.process-layout { display: grid; grid-template-columns: 1.04fr .96fr; gap: 28px; align-items: stretch; }
.process-photo { position: relative; margin: 0; min-height: 610px; overflow: hidden; border-radius: 30px; background: var(--navy); box-shadow: 0 24px 70px rgba(8,48,65,.14); }
.process-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,35,48,.78), transparent 58%); pointer-events: none; }
.process-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.02); }
.process-photo figcaption { position: absolute; z-index: 2; left: 34px; right: 34px; bottom: 30px; color: white; }
.process-photo figcaption strong, .process-photo figcaption span { display: block; }
.process-photo figcaption strong { font-size: 25px; letter-spacing: -.02em; }
.process-photo figcaption span { color: rgba(255,255,255,.68); max-width: 420px; margin-top: 4px; }
.photo-badge { position: absolute; z-index: 3; top: 22px; right: 22px; padding: 13px 16px; background: rgba(255,255,255,.94); border-radius: 15px; box-shadow: 0 15px 35px rgba(0,0,0,.15); }
.photo-badge b, .photo-badge span { display: block; }
.photo-badge b { color: var(--accent-dark); font-size: 20px; }
.photo-badge span { color: var(--muted); font-size: 11px; }
.steps { display: grid; gap: 12px; }
.step-card { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 22px; align-items: start; min-height: 0; padding: 28px; background: var(--off); border: 1px solid #e3ebed; border-radius: 22px; transition: transform .25s ease, box-shadow .25s ease, border .25s ease, background .25s ease; overflow: hidden; }
.step-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -45px; bottom: -48px; border-radius: 50%; border: 1px solid #d5e2e6; }
.step-card:hover { transform: translateX(5px); background: white; box-shadow: 0 16px 45px rgba(8,48,65,.09); border-color: #cbdcdf; }
.step-number { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: var(--accent-soft); color: var(--accent-dark); font-weight: 900; font-size: 13px; letter-spacing: .06em; }
.step-card h3 { margin: 1px 0 8px; color: var(--navy); font-size: 22px; }
.step-card p { color: var(--muted); margin: 0; font-size: 14px; }

.comparison-section { background: var(--off); }
.comparison-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 80px; align-items: center; }
.text-link { display: inline-flex; gap: 9px; align-items: center; margin-top: 25px; color: var(--navy); font-weight: 800; }
.comparison-cards { display: grid; gap: 14px; }
.comparison-card { background: white; border-radius: 20px; border: 1px solid var(--line); padding: 31px 32px; }
.comparison-card.featured { background: var(--navy); color: white; border-color: var(--navy); }
.comparison-label { color: var(--teal); font-weight: 850; font-size: 12px; text-transform: uppercase; letter-spacing: .11em; }
.comparison-card.featured .comparison-label { color: #98cedb; }
.comparison-card h3 { margin: 9px 0 8px; font-size: 22px; line-height: 1.2; color: var(--navy); }
.comparison-card.featured h3 { color: white; }
.comparison-card p { margin: 0; color: var(--muted); }
.comparison-card.featured p { color: rgba(255,255,255,.7); }
.comparison-photo { position: relative; margin: 32px 0 0; overflow: hidden; border-radius: 18px; height: 170px; box-shadow: 0 14px 35px rgba(8,48,65,.10); }
.comparison-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.62) contrast(1.04); }
.comparison-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,45,63,.72), transparent); }
.comparison-photo span { position: absolute; z-index: 2; left: 20px; bottom: 17px; color: white; font-size: 12px; font-weight: 800; letter-spacing: .03em; }

.coverage-showcase { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 430px; margin: 0 0 38px; background: var(--navy); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); }
.coverage-image { min-height: 430px; overflow: hidden; }
.coverage-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.68) contrast(1.05); }
.coverage-copy { position: relative; padding: 54px; display: flex; flex-direction: column; justify-content: center; color: white; background: radial-gradient(circle at 100% 0%, rgba(230,160,74,.22), transparent 36%); }
.coverage-copy::after { content: "§"; position: absolute; right: 25px; bottom: -44px; color: rgba(255,255,255,.045); font-size: 190px; line-height: 1; font-family: Georgia, serif; }
.mini-kicker { color: #f1bd72; text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 900; }
.coverage-copy h3 { position: relative; z-index: 1; margin: 14px 0 16px; max-width: 470px; font-size: clamp(30px,3vw,43px); line-height: 1.06; letter-spacing: -.035em; }
.coverage-copy p { position: relative; z-index: 1; margin: 0 0 26px; color: rgba(255,255,255,.68); max-width: 470px; }
.coverage-copy .btn { position: relative; z-index: 1; align-self: flex-start; }

.practice-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 12px; }
.practice-card { padding: 27px; min-height: 230px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s ease; }
.practice-card:hover { background: var(--off); }
.practice-card span { color: #91a8b0; font-size: 12px; font-weight: 800; }
.practice-card h3 { margin: 38px 0 9px; color: var(--navy); font-size: 18px; line-height: 1.2; }
.practice-card p { color: var(--muted); font-size: 14px; margin: 0; }
.practice-card.extra { display: none; }
.practice-grid.expanded .practice-card.extra { display: block; }
#areas-toggle { margin-top: 28px; }
.section-note { max-width: 760px; margin: 24px auto 0; color: var(--muted); text-align: center; font-size: 14px; }

.plans-section { background: #f7f9f9; }
.plans-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; background: white; border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: 0 5px 15px rgba(8,48,65,.025); }
.plan-card.popular { border-color: rgba(230,160,74,.9); box-shadow: 0 20px 55px rgba(8,48,65,.14); transform: translateY(-12px); }
.popular-label { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 6px 13px; border-radius: 99px; background: var(--accent); color: #17303a; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.plan-head { padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.plan-head > span { color: var(--teal); font-size: 13px; font-weight: 850; }
.plan-head h3 { margin: 13px 0 0; color: var(--navy); font-size: 38px; letter-spacing: -.035em; }
.plan-head small { color: var(--muted); }
.plan-card ul { list-style: none; padding: 21px 0 12px; margin: 0 0 15px; display: grid; gap: 13px; flex: 1; }
.plan-card li { position: relative; padding-left: 22px; color: #52666f; font-size: 14px; }
.plan-card li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #27846e; font-weight: 900; }
.plan-assist { margin-top: 34px; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(120deg, #0a3e56, #0b536d); border-radius: 20px; color: white; box-shadow: 0 16px 45px rgba(8,48,65,.12); }
.plan-assist span, .plan-assist strong { display: block; }
.plan-assist span { color: #f0b968; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 900; }
.plan-assist strong { margin-top: 4px; max-width: 670px; font-size: 16px; }
.fine-print { color: #829198; font-size: 12px; text-align: center; margin: 25px 0 0; }

.client-logos { margin-bottom: 68px; }
.client-logos > span { display: block; text-align: center; color: #8b9da4; font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; }
.logo-rail { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: white; }
.logo-rail > div { min-height: 96px; display: grid; place-items: center; padding: 17px 22px; border-right: 1px solid var(--line); }
.logo-rail > div:last-child { border-right: 0; }
.logo-rail img { max-width: 150px; max-height: 60px; width: auto; height: auto; filter: grayscale(1); opacity: .62; transition: filter .2s ease, opacity .2s ease, transform .2s ease; }
.logo-rail > div:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.03); }

.testimonials-section { overflow: hidden; }
.testimonial-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; align-items: center; }
.testimonial-controls { display: flex; gap: 9px; margin-top: 30px; }
.testimonial-controls button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: white; color: var(--navy); font-size: 19px; }
.testimonial-controls button:hover { background: var(--off); }
.testimonial-slider { position: relative; background: radial-gradient(circle at 100% 0%, rgba(230,160,74,.16), transparent 28%), var(--navy); color: white; padding: 45px; border-radius: 26px; min-height: 380px; box-shadow: var(--shadow); }
.testimonial { display: none; }
.testimonial.active { display: block; animation: fade .28s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.stars { color: var(--gold); letter-spacing: .18em; font-size: 14px; }
.testimonial blockquote { margin: 25px 0 31px; font-size: clamp(22px, 2.7vw, 31px); line-height: 1.3; letter-spacing: -.02em; }
.testimonial footer strong, .testimonial footer span { display: block; }
.testimonial footer span { color: rgba(255,255,255,.6); font-size: 13px; margin-top: 3px; }
.testimonial-progress { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; margin-top: 36px; color: rgba(255,255,255,.56); font-size: 11px; }
.testimonial-progress > div { height: 2px; background: rgba(255,255,255,.16); }
.testimonial-progress i { display: block; height: 100%; width: 12.5%; background: white; transition: width .25s ease; }

.case-study { padding: 85px 0; background: linear-gradient(135deg, #082f42, #0c4962); }
.case-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 80px; align-items: center; }
.case-grid h2 { margin: 0 0 17px; font-size: clamp(40px, 5vw, 60px); letter-spacing: -.04em; line-height: 1; }
.case-grid p { margin: 0; max-width: 700px; color: rgba(255,255,255,.7); font-size: 18px; }
.case-number { border-left: 1px solid rgba(255,255,255,.2); padding-left: 45px; }
.case-logo { width: 68px; height: 68px; margin-bottom: 20px; display: grid; place-items: center; background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.case-logo img { width: 100%; height: 100%; object-fit: contain; }
.case-number strong, .case-number span, .case-number small { display: block; }
.case-number strong { font-size: 58px; line-height: 1; letter-spacing: -.05em; }
.case-number span { margin-top: 10px; color: rgba(255,255,255,.72); }
.case-number small { margin-top: 20px; color: #9bc8d4; }

.faq-section { background: var(--off); }
.faq-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 85px; align-items: start; }
.faq-intro { position: sticky; top: 145px; }
.faq-list { border-top: 1px solid #cbd9dd; }
details { border-bottom: 1px solid #cbd9dd; }
summary { list-style: none; position: relative; padding: 23px 42px 23px 0; color: var(--navy); font-weight: 780; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 26px; font-weight: 300; color: #7a969f; transition: transform .2s ease; }
details[open] summary::after { transform: rotate(45deg); }
details > div { padding: 0 45px 24px 0; color: var(--muted); }
details p { margin: 0; }

.contact-section { background: white; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start; }
.contact-photo { position: relative; margin: 30px 0 20px; height: 255px; border-radius: 22px; overflow: hidden; box-shadow: 0 15px 40px rgba(8,48,65,.10); }
.contact-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.02); }
.contact-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,35,48,.78), transparent 65%); }
.contact-photo figcaption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 18px; color: white; }
.contact-photo figcaption span, .contact-photo figcaption strong { display: block; }
.contact-photo figcaption span { color: #f1bd72; text-transform: uppercase; font-size: 10px; letter-spacing: .1em; font-weight: 900; }
.contact-photo figcaption strong { margin-top: 3px; font-size: 15px; max-width: 430px; }
.contact-details { display: grid; gap: 16px; margin-top: 20px; }
.contact-details > * { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-details span, .contact-details strong { display: block; }
.contact-details span { color: #8a9ba2; text-transform: uppercase; letter-spacing: .09em; font-size: 10px; font-weight: 850; }
.contact-details strong { color: var(--navy); margin-top: 4px; font-size: 14px; }
.contact-form { padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: var(--off); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form label { display: block; margin-bottom: 15px; }
.contact-form label > span { display: block; margin-bottom: 7px; color: #49616b; font-weight: 700; font-size: 12px; }
.contact-form em { color: #92a1a7; font-style: normal; font-weight: 500; }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; border: 1px solid #d4e0e4; background: white; color: var(--ink); border-radius: 10px; padding: 13px 14px; outline: none; transition: border .2s ease, box-shadow .2s ease; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: #7199a8; box-shadow: 0 0 0 3px rgba(23,100,123,.09); }
.contact-form textarea { resize: vertical; min-height: 100px; }
.form-note { color: #8b9ba2; font-size: 11px; margin: 10px 0 0; text-align: center; }
.form-status { min-height: 1.4em; margin: 8px 0 0; text-align: center; color: var(--teal); font-size: 12px; }

.footer { padding: 64px 0 22px; background: #061f2b; color: white; }
.footer-grid { display: grid; grid-template-columns: 1.35fr .7fr .95fr; gap: 70px; }
.footer-brand img { width: 280px; filter: brightness(0) invert(1); opacity: .92; }
.footer-brand p { max-width: 430px; color: rgba(255,255,255,.52); font-size: 14px; margin-top: 20px; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 9px; }
.footer-grid > div > strong { margin-bottom: 9px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8eb9c5; }
.footer-grid a { color: rgba(255,255,255,.66); font-size: 13px; }
.footer-grid a:hover { color: white; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 26px; margin-top: 48px; border-top: 1px solid rgba(255,255,255,.11); color: rgba(255,255,255,.42); font-size: 11px; }

.reveal { opacity: 0; transform: translateY(15px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1050px) {
  .topbar { display: none; }
  .site-header { top: 0; }
  .nav { min-height: 72px; }
  .brand img { width: 245px; }
  .menu-toggle { display: flex; }
  .nav-menu { display: none; position: absolute; top: 72px; left: 20px; right: 20px; flex-direction: column; align-items: stretch; gap: 0; padding: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.98); border-radius: 16px; box-shadow: var(--shadow); }
  .nav-menu.open { display: flex; }
  .nav-menu > a { padding: 12px; }
  .nav-menu > .btn { margin-top: 5px; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 35px; }
  .hero h1 { font-size: clamp(42px, 5vw, 60px); }
  .hero-floating-card { right: -6px; }
  .practice-grid { grid-template-columns: repeat(3,1fr); }
  .plans-grid { grid-template-columns: repeat(2,1fr); gap: 18px; }
  .plan-card.popular { transform: none; }
}

@media (max-width: 780px) {
  :root { --container: min(100% - 30px, 1160px); }
  .section { padding: 80px 0; }
  .hero { padding: 64px 0 72px; }
  .hero-grid, .comparison-grid, .testimonial-layout, .case-grid, .faq-layout, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { max-width: 600px; }
  .hero-floating-card { right: 12px; bottom: 12px; width: min(285px, calc(100% - 24px)); }
  .trust-row { gap: 20px; justify-content: space-between; }
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit-grid article { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; }
  .step-card { min-height: auto; }
  .step-card h3 { margin-top: 1px; }
  .split-heading { grid-template-columns: 1fr; gap: 15px; }
  .practice-grid { grid-template-columns: repeat(2,1fr); }
  .testimonial-intro { max-width: 600px; }
  .testimonial-slider { min-height: 0; padding: 35px; }
  .case-number { border-left: 0; border-top: 1px solid rgba(255,255,255,.2); padding: 30px 0 0; }
  .faq-intro { position: static; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .brand img { width: 215px; }
  .hero h1 { font-size: 43px; }
  .hero-lead { font-size: 16px; }
  .hero-actions .btn { width: 100%; }
  .trust-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
  .trust-row span { line-height: 1.35; }
  .practice-grid { grid-template-columns: 1fr; }
  .plans-grid { grid-template-columns: 1fr; }
  .testimonial-slider { padding: 27px; border-radius: 20px; }
  .testimonial blockquote { font-size: 22px; }
  .contact-form { padding: 24px 18px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 900px) {
  .process-layout, .coverage-showcase { grid-template-columns: 1fr; }
  .process-photo { min-height: 430px; }
  .coverage-image { min-height: 330px; }
  .coverage-copy { padding: 38px; }
  .logo-rail { grid-template-columns: repeat(2,1fr); }
  .logo-rail > div:nth-child(2) { border-right: 0; }
  .logo-rail > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .process-photo { min-height: 360px; border-radius: 22px; }
  .process-photo figcaption { left: 22px; right: 22px; bottom: 20px; }
  .step-card { grid-template-columns: 48px 1fr; gap: 16px; padding: 22px 18px; }
  .step-number { width: 46px; height: 46px; border-radius: 14px; }
  .coverage-showcase { border-radius: 22px; }
  .coverage-copy { padding: 30px 22px; }
  .plan-assist { align-items: stretch; flex-direction: column; }
  .plan-assist .btn { width: 100%; }
  .client-logos { margin-bottom: 48px; }
  .logo-rail > div { min-height: 82px; padding: 12px; }
  .logo-rail img { max-width: 115px; max-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   Desktop viewport-fit pass
   Keeps each major content block visually complete in a
   standard desktop viewport without sacrificing mobile flow.
   ========================================================= */
@media (min-width: 901px) {
  html { scroll-padding-top: 122px; }
  main > section[id] { scroll-margin-top: 122px; }

  /* Replace fixed vertical whitespace with viewport-aware spacing. */
  .section { padding: clamp(38px, 5.2vh, 58px) 0; }
  .section-heading { margin-bottom: clamp(22px, 3.1vh, 34px); }
  .section-heading h2,
  .comparison-intro h2,
  .testimonial-intro h2,
  .faq-intro h2,
  .contact-copy h2 {
    margin-bottom: 12px;
    font-size: clamp(30px, min(3.35vw, 5vh), 46px);
    line-height: 1.04;
  }
  .section-heading p,
  .comparison-intro p,
  .testimonial-intro p,
  .faq-intro p,
  .contact-copy > p { font-size: 15px; line-height: 1.55; }
  .eyebrow { margin-bottom: 10px; }

  /* HERO: one complete first impression inside the viewport. */
  .hero {
    min-height: calc(100svh - 120px);
    display: flex;
    align-items: center;
    padding: clamp(30px, 4.8vh, 54px) 0;
  }
  .hero-grid { gap: clamp(38px, 4.5vw, 62px); }
  .hero h1 {
    margin-bottom: 18px;
    font-size: clamp(40px, min(4.45vw, 7vh), 62px);
    line-height: 1.01;
  }
  .hero-lead { font-size: 16px; line-height: 1.55; }
  .hero-actions { margin-top: 24px; }
  .trust-row { margin-top: 28px; padding-top: 18px; }
  .hero-visual img {
    height: clamp(330px, 52vh, 500px);
    aspect-ratio: auto;
    object-fit: cover;
  }
  .hero-floating-card { bottom: 18px; }

  .benefit-grid article { padding-block: 20px; }

  /* PROCESS */
  #seguro .process-layout { align-items: stretch; }
  #seguro .process-photo {
    min-height: 0;
    height: clamp(360px, 52vh, 490px);
  }
  #seguro .steps {
    height: clamp(360px, 52vh, 490px);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
  }
  #seguro .step-card {
    min-height: 0;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    padding: clamp(15px, 2vh, 20px);
    align-content: center;
  }
  #seguro .step-number { width: 44px; height: 44px; border-radius: 13px; }
  #seguro .step-card h3 { margin: 0 0 4px; font-size: 18px; }
  #seguro .step-card p { font-size: 12.5px; line-height: 1.45; }

  /* COMPARISON */
  .comparison-grid { gap: clamp(46px, 5.2vw, 72px); }
  .comparison-photo { height: clamp(120px, 17vh, 160px); margin-top: 22px; }
  .comparison-cards { gap: 11px; }
  .comparison-card { padding: clamp(22px, 2.8vh, 28px); }
  .comparison-card h3 { margin: 7px 0 6px; font-size: 20px; }
  .comparison-card p { font-size: 14px; line-height: 1.5; }
  .text-link { margin-top: 18px; }

  /* AREAS: keep the visual showcase, but make the area catalogue compact. */
  #areas .split-heading { gap: 42px; margin-bottom: 22px; }
  #areas .coverage-showcase {
    min-height: 0;
    height: clamp(220px, 28vh, 270px);
    margin-bottom: 16px;
  }
  #areas .coverage-image { min-height: 0; }
  #areas .coverage-copy { padding: clamp(26px, 3.2vh, 36px); }
  #areas .coverage-copy h3 { margin: 8px 0 9px; font-size: clamp(26px, 2.35vw, 34px); }
  #areas .coverage-copy p { margin-bottom: 16px; font-size: 13.5px; line-height: 1.45; }
  #areas .coverage-copy .btn { min-height: 43px; }
  #areas .practice-grid { margin-top: 0; }
  #areas .practice-card {
    min-height: 0;
    padding: 14px 16px;
  }
  #areas .practice-card h3 { margin: 10px 0 4px; font-size: 15px; }
  #areas .practice-card p { font-size: 11.5px; line-height: 1.35; }
  #areas #areas-toggle { min-height: 42px; margin-top: 15px; }
  #areas .section-note { margin-top: 10px; font-size: 11.5px; }

  /* PLANS */
  #planes .section-heading { margin-bottom: 24px; }
  #planes .plans-grid { gap: 12px; }
  #planes .plan-card { padding: 20px; border-radius: 18px; }
  #planes .plan-card.popular { transform: translateY(-7px); }
  #planes .plan-head { padding-bottom: 14px; }
  #planes .plan-head h3 { margin-top: 7px; font-size: 31px; }
  #planes .plan-head small { font-size: 11px; }
  #planes .plan-card ul { padding: 14px 0 8px; margin-bottom: 9px; gap: 7px; }
  #planes .plan-card li { padding-left: 18px; font-size: 12px; line-height: 1.4; }
  #planes .plan-card .btn { min-height: 43px; padding-inline: 14px; }
  #planes .plan-assist { margin-top: 20px; padding: 14px 18px; }
  #planes .plan-assist .btn { min-height: 43px; }
  #planes .fine-print { margin-top: 11px; font-size: 10.5px; }

  /* TESTIMONIALS */
  #clientes .client-logos { margin-bottom: 26px; }
  #clientes .client-logos > span { margin-bottom: 12px; }
  #clientes .logo-rail > div { min-height: 66px; padding: 10px 18px; }
  #clientes .logo-rail img { max-width: 125px; max-height: 44px; }
  #clientes .testimonial-layout { gap: clamp(45px, 5vw, 70px); }
  #clientes .testimonial-controls { margin-top: 20px; }
  #clientes .testimonial-controls button { width: 42px; height: 42px; }
  #clientes .testimonial-slider { min-height: 300px; padding: 30px 34px; }
  #clientes .testimonial blockquote { margin: 18px 0 22px; font-size: clamp(20px, 2.25vw, 27px); line-height: 1.27; }
  #clientes .testimonial-progress { margin-top: 24px; }

  /* CASE STUDY */
  .case-study { padding: clamp(42px, 6vh, 64px) 0; }
  .case-grid { gap: 60px; }
  .case-grid h2 { font-size: clamp(37px, min(4vw, 6vh), 52px); }
  .case-grid p { font-size: 16px; line-height: 1.55; }
  .case-number strong { font-size: 50px; }
  .case-logo { width: 58px; height: 58px; margin-bottom: 14px; }

  /* FAQ: all seven collapsed questions remain visible at once. */
  .faq-layout { gap: clamp(55px, 6vw, 78px); }
  .faq-intro { top: 130px; }
  summary { padding: 15px 38px 15px 0; font-size: 14px; line-height: 1.35; }
  summary::after { top: 9px; }
  details > div { padding: 0 38px 15px 0; font-size: 12.5px; line-height: 1.48; }

  /* CONTACT */
  .contact-grid { gap: clamp(52px, 5.5vw, 74px); }
  .contact-photo { height: clamp(150px, 20vh, 190px); margin: 20px 0 10px; }
  .contact-details { grid-template-columns: .65fr 1fr 1.8fr; gap: 12px; margin-top: 8px; }
  .contact-details > * { padding: 10px 0; }
  .contact-details strong { font-size: 11.5px; line-height: 1.4; }
  .contact-form { padding: 24px; }
  .contact-form label { margin-bottom: 10px; }
  .contact-form label > span { margin-bottom: 5px; font-size: 11px; }
  .contact-form input,
  .contact-form textarea,
  .contact-form select { padding: 10px 12px; }
  .contact-form textarea { min-height: 72px; }
  .form-note { margin-top: 7px; font-size: 9.5px; }
}

/* Extra compression for common 768–820px-high laptop displays. */
@media (min-width: 901px) and (max-height: 820px) {
  .section { padding: 30px 0; }
  .section-heading { margin-bottom: 18px; }
  .section-heading h2,
  .comparison-intro h2,
  .testimonial-intro h2,
  .faq-intro h2,
  .contact-copy h2 { font-size: clamp(28px, 3vw, 39px); }
  .section-heading p,
  .comparison-intro p,
  .testimonial-intro p,
  .faq-intro p,
  .contact-copy > p { font-size: 13.5px; }

  .hero { min-height: calc(100svh - 120px); padding: 24px 0; }
  .hero h1 { font-size: clamp(38px, 4vw, 52px); }
  .hero-visual img { height: min(48vh, 390px); }
  .trust-row { margin-top: 20px; }

  #seguro .process-photo,
  #seguro .steps { height: min(48vh, 390px); }
  #seguro .step-card { padding: 12px 16px; }

  #areas .coverage-showcase { height: min(24vh, 190px); }
  #areas .coverage-copy h3 { font-size: 25px; }
  #areas .practice-card { padding: 10px 13px; }
  #areas .practice-card h3 { margin-top: 6px; font-size: 14px; }
  #areas .practice-card p { font-size: 10.5px; }
  #areas #areas-toggle { margin-top: 10px; min-height: 38px; }
  #areas .section-note { margin-top: 7px; }

  #planes .plan-card { padding: 16px; }
  #planes .plan-head { padding-bottom: 10px; }
  #planes .plan-head h3 { font-size: 27px; }
  #planes .plan-card ul { padding-top: 10px; gap: 4px; }
  #planes .plan-card li { font-size: 11px; line-height: 1.32; }
  #planes .plan-card .btn { min-height: 39px; font-size: 12px; }
  #planes .plan-assist { margin-top: 13px; padding: 10px 14px; }
  #planes .fine-print { margin-top: 7px; }

  #clientes .client-logos { margin-bottom: 18px; }
  #clientes .logo-rail > div { min-height: 56px; }
  #clientes .testimonial-slider { min-height: 250px; padding: 24px 28px; }
  #clientes .testimonial blockquote { margin: 13px 0 17px; font-size: 20px; }

  summary { padding-block: 11px; font-size: 13px; }
  summary::after { top: 5px; }

  .contact-photo { height: 135px; margin-top: 14px; }
  .contact-form { padding: 18px; }
  .contact-form input,
  .contact-form textarea,
  .contact-form select { padding: 8px 10px; }
  .contact-form textarea { min-height: 58px; }
}

@media (min-width: 901px) and (max-width: 1050px) {
  html { scroll-padding-top: 74px; }
  main > section[id] { scroll-margin-top: 74px; }
  .hero { min-height: calc(100svh - 72px); }
}

/* Keep the default Areas catalogue compact enough to remain a one-screen section.
   Full copy is still present in the HTML; expanded/interacted content may naturally grow. */
@media (min-width: 901px) {
  #areas .practice-card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  #areas .coverage-showcase { height: 160px; }
  #areas .coverage-copy { padding: 18px 24px; }
  #areas .coverage-copy h3 { margin: 5px 0 6px; font-size: 22px; }
  #areas .coverage-copy p { margin-bottom: 10px; font-size: 12px; }
  #areas .coverage-copy .btn { min-height: 38px; font-size: 12px; }
  #areas .practice-card { padding: 8px 12px; }
  #areas .practice-card h3 { margin: 4px 0 2px; font-size: 13.5px; }
  #areas .practice-card p { font-size: 10px; line-height: 1.28; }
}

/* =========================================================
   V4 — Lower-section breathing pass
   The first three content sections keep the V3 sizing.
   From Areas onward, sections regain enough vertical breathing
   to read as independent viewport compositions without becoming
   taller than necessary.
   ========================================================= */
@media (min-width: 901px) {
  #areas,
  #planes,
  #faq,
  #contacto {
    min-height: calc(100svh - 96px);
    padding-top: clamp(48px, 6.2vh, 70px);
    padding-bottom: clamp(48px, 6.2vh, 70px);
  }

  /* Testimonials must size to their real content. Equal vertical padding
     keeps the same breathing room above and below without an empty viewport. */
  #clientes {
    min-height: auto;
    padding-top: clamp(48px, 6.2vh, 70px);
    padding-bottom: clamp(48px, 6.2vh, 70px);
  }

  /* Restore a little breathing inside the denser lower blocks. */
  #areas .split-heading { margin-bottom: clamp(24px, 3vh, 30px); }
  #areas .coverage-showcase { margin-bottom: clamp(18px, 2.4vh, 24px); }
  #areas #areas-toggle { margin-top: clamp(16px, 2vh, 21px); }
  #areas .section-note { margin-top: clamp(11px, 1.6vh, 16px); }

  #planes .section-heading { margin-bottom: clamp(26px, 3.2vh, 34px); }
  #planes .plans-grid { gap: clamp(13px, 1.2vw, 16px); }
  #planes .plan-assist { margin-top: clamp(22px, 2.8vh, 29px); }
  #planes .fine-print { margin-top: clamp(12px, 1.7vh, 17px); }

  #clientes .client-logos { margin-bottom: clamp(30px, 3.8vh, 40px); }
  #clientes .testimonial-controls { margin-top: clamp(21px, 2.7vh, 28px); }

  .case-study {
    min-height: clamp(360px, 52svh, 520px);
    display: flex;
    align-items: center;
    padding-top: clamp(52px, 7vh, 76px);
    padding-bottom: clamp(52px, 7vh, 76px);
  }

  #faq .faq-layout,
  #contacto .contact-grid { width: 100%; }
}

/* Short laptop displays: add separation back without undoing viewport fit. */
@media (min-width: 901px) and (max-height: 820px) {
  #areas,
  #planes,
  #faq,
  #contacto {
    min-height: calc(100svh - 82px);
    padding-top: 38px;
    padding-bottom: 38px;
  }

  #clientes {
    min-height: auto;
    padding-top: 38px;
    padding-bottom: 38px;
  }

  #areas .split-heading { margin-bottom: 21px; }
  #areas .coverage-showcase { margin-bottom: 15px; }
  #areas #areas-toggle { margin-top: 12px; }

  #planes .section-heading { margin-bottom: 21px; }
  #planes .plan-assist { margin-top: 17px; }

  #clientes .client-logos { margin-bottom: 23px; }

  .case-study {
    min-height: 46svh;
    padding-top: 44px;
    padding-bottom: 44px;
  }
}

/* =========================================================
   V5 — FAQ + Contact layout correction
   These sections must use the same centered content width as
   the rest of the site and must not be artificially stretched
   to a full viewport when their content is shorter.
   ========================================================= */
@media (min-width: 901px) {
  /* Restore the global site container. The V4 selector was more
     specific than .container and accidentally forced full width. */
  #faq .container.faq-layout,
  #contacto .container.contact-grid {
    width: var(--container);
    max-width: 1160px;
    margin-inline: auto;
  }

  /* FAQ/contact should end when their content ends. Keeping them
     at ~100vh created a large empty block below the FAQ list. */
  #faq,
  #contacto {
    min-height: auto;
    padding-top: clamp(58px, 7vh, 78px);
    padding-bottom: clamp(58px, 7vh, 78px);
  }

  /* Keep both columns visually balanced without stretching either. */
  #faq .faq-layout,
  #contacto .contact-grid {
    align-items: start;
  }
}

/* Short laptop displays still get breathing room, but no fake
   viewport-height blank space. */
@media (min-width: 901px) and (max-height: 820px) {
  #faq,
  #contacto {
    min-height: auto;
    padding-top: 46px;
    padding-bottom: 46px;
  }
}

/* Valid mobile container expression (keeps the same side gutter). */
@media (max-width: 780px) {
  :root { --container: min(1160px, calc(100% - 30px)); }
}

/* =========================================================
   Partículas ambientales — únicamente en fondos oscuros
   DOM ligero, sin canvas ni librerías externas.
   ========================================================= */
.section-dark,
.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.section-dark > .container,
.footer > .container {
  position: relative;
  z-index: 3;
}

.dark-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.dark-particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  background: rgba(255,255,255,var(--alpha));
  box-shadow: 0 0 var(--glow) rgba(255,255,255,.22);
  opacity: .9;
  will-change: transform, opacity;
  animation:
    epm-particle-float var(--duration) linear infinite,
    epm-particle-pulse var(--pulse) ease-in-out infinite alternate;
  animation-delay: var(--delay), var(--pulse-delay);
}

.dark-particle.is-blue {
  background: rgba(139,207,224,var(--alpha));
  box-shadow: 0 0 var(--glow) rgba(139,207,224,.30);
}

.dark-particle.is-gold {
  background: rgba(239,181,96,var(--alpha));
  box-shadow: 0 0 var(--glow) rgba(239,181,96,.28);
}

/* Algunos destellos algo mayores rompen la uniformidad sin llamar demasiado la atención. */
.dark-particle.is-soft {
  filter: blur(.35px);
}

@keyframes epm-particle-float {
  0% {
    transform: translate3d(0, 38px, 0) scale(.82);
  }
  48% {
    transform: translate3d(calc(var(--drift) * .45), -18px, 0) scale(1);
  }
  100% {
    transform: translate3d(var(--drift), -105px, 0) scale(.9);
  }
}

@keyframes epm-particle-pulse {
  from { opacity: .42; }
  to   { opacity: 1; }
}

/* En el footer hay menos partículas y menos intensidad. */
.footer .dark-particles {
  opacity: .58;
}

@media (max-width: 700px) {
  .dark-particles { opacity: .78; }
  .footer .dark-particles { opacity: .48; }
}

@media (prefers-reduced-motion: reduce) {
  .dark-particle {
    animation: none;
    opacity: .55;
  }
}