/* ==========================================================================
   Components
   ========================================================================== */

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-6); border: 2px solid transparent; border-radius: var(--r-full);
  font-weight: 700; font-size: var(--fs-sm); line-height: 1.1; text-decoration: none; text-align: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn--sm { min-height: 42px; padding: 0 var(--s-5); }
.btn--lg { min-height: 54px; padding: 0 var(--s-8); font-size: var(--fs-base); }
.btn--block { width: 100%; }
.btn--cta { background: var(--color-cta); color: var(--color-cta-ink); box-shadow: 0 6px 16px rgba(240, 154, 6, 0.28); }
.btn--cta:hover { background: var(--color-cta-hover); color: var(--color-cta-ink); }
.btn--whatsapp { background: var(--wa); color: #fff; }
.btn--whatsapp:hover { background: var(--wa-hover); color: #fff; }
.btn--outline { border-color: var(--p-700); color: var(--p-700); background: #fff; }
.btn--outline:hover { background: var(--p-700); color: #fff; }
.btn--ghost { color: var(--p-700); background: var(--p-50); }
.btn--ghost:hover { background: var(--p-100); color: var(--p-800); }
.btn--ghost-light { border-color: rgba(255, 255, 255, 0.35); color: #fff; background: transparent; }
.btn--ghost-light:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.08); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn-row--center { justify-content: center; margin-top: var(--s-8); }
@media (max-width: 479px) { .btn-row > .btn { flex: 1 1 100%; } }

/* ── headings & small type ──────────────────────────────────────────── */
.kicker { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-700); margin-bottom: var(--s-3); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 14px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--c-300);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em; margin-bottom: var(--s-5);
}
.section-head { max-width: 760px; margin-bottom: var(--s-10); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__sub { margin-top: var(--s-4); color: var(--color-muted); font-size: var(--fs-md); }
.note-link { margin-top: var(--s-5); font-weight: 600; }
.note-link a { display: inline-flex; align-items: center; gap: 6px; }

/* ── home hero ──────────────────────────────────────────────────────── */
.hero, .page-hero { position: relative; background: radial-gradient(120% 90% at 85% 0%, var(--p-800) 0%, var(--color-dark) 60%); color: var(--color-on-dark); overflow: hidden; }
.hero__inner { position: relative; display: grid; gap: var(--s-10); padding-block: var(--s-10) var(--s-16); }
@media (min-width: 1024px) { .hero__inner { grid-template-columns: 1.05fr 0.95fr; align-items: center; padding-block: var(--s-16) var(--s-20); gap: var(--s-16); } }
.hero__title { color: #fff; font-size: var(--fs-3xl); }
.hero__rotator { margin-top: var(--s-3); font-size: var(--fs-xl); font-weight: 700; color: var(--color-on-dark-muted); }
.hero__word { color: var(--c-400); display: inline-block; }
.hero__lead { margin-top: var(--s-5); font-size: var(--fs-md); color: var(--color-on-dark-muted); max-width: 60ch; }
.hero .btn-row { margin-top: var(--s-8); }
.trust-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-8); font-size: var(--fs-sm); font-weight: 600; color: #fff; }
.trust-row li { display: inline-flex; align-items: center; gap: var(--s-2); }
.trust-row .icon { color: var(--c-400); }
.hero__media { position: relative; }
.hero__stack { border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); aspect-ratio: 4 / 3.2; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-full); background: #fff; color: var(--n-800); font-size: var(--fs-xs); font-weight: 700; box-shadow: var(--sh-lg); }
.chip .icon { color: var(--p-700); }
.chip--float { position: absolute; }
.chip--a { left: -8px; bottom: 18%; }
.chip--b { right: -6px; top: 10%; }
@media (max-width: 767px) { .chip--a { left: 8px; } .chip--b { right: 8px; } }

.ticker { overflow: hidden; background: var(--color-cta); color: var(--color-cta-ink); padding-block: 12px; }
.ticker__track { display: flex; gap: var(--s-8); width: max-content; animation: ticker 50s linear infinite; font-weight: 700; font-size: var(--fs-sm); }
.ticker__track span { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ── inner page hero ────────────────────────────────────────────────── */
.page-hero__inner { position: relative; display: grid; gap: var(--s-8); padding-block: var(--s-8) var(--s-12); }
@media (min-width: 1024px) { .page-hero:not(.page-hero--compact) .page-hero__inner { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--s-12); padding-block: var(--s-12) var(--s-16); } }
.page-hero--compact .page-hero__copy { max-width: 820px; }
.page-hero__title { color: #fff; font-size: var(--fs-3xl); }
.page-hero__tag { display: block; margin-top: var(--s-3); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--c-300); }
.page-hero__lead { margin-top: var(--s-5); color: var(--color-on-dark-muted); font-size: var(--fs-md); max-width: 62ch; }
.page-hero__lead a { color: #fff; }
.page-hero .btn-row { margin-top: var(--s-8); }
.page-hero__media { border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); aspect-ratio: 4 / 3; background: var(--p-900); }
.page-hero__img { width: 100%; height: 100%; object-fit: cover; }
.badge-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; font-size: var(--fs-xs); font-weight: 600; }
.badge .icon { color: var(--c-400); }

.breadcrumbs { margin-bottom: var(--s-5); font-size: var(--fs-xs); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; color: var(--color-on-dark-muted); }
.breadcrumbs li + li::before { content: "/"; opacity: 0.5; }
.breadcrumbs a { color: #fff; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; color: #fff; }

/* ── cards ──────────────────────────────────────────────────────────── */
.svc-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.svc-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.svc-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.svc-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.svc-card__link:hover { color: inherit; }
.svc-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--p-50); }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.svc-card:hover .svc-card__media img { transform: scale(1.04); }
.svc-card__icon { position: absolute; left: 14px; top: 14px; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, 0.92); color: var(--p-700); box-shadow: var(--sh-md); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.25s, color 0.25s, transform 0.25s var(--ease); }
.svc-card:hover .svc-card__icon { background: var(--p-700); color: #fff; transform: rotate(-6deg); }
.svc-card__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); flex: 1; }
.svc-card__title { font-size: var(--fs-md); }
.svc-card__body p { color: var(--color-muted); font-size: var(--fs-sm); }
.svc-card__meta { margin-top: auto; padding-top: var(--s-3); display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--p-700); text-transform: uppercase; letter-spacing: 0.06em; }

.benefits { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.benefits--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
@media (min-width: 1024px) {
  .benefits--bento { grid-template-columns: repeat(3, 1fr); }
  .benefits--bento .benefit:first-child { grid-column: span 2; grid-row: span 1; background: var(--p-700); border-color: var(--p-700); color: #fff; }
  .benefits--bento .benefit:first-child .benefit__title { color: #fff; }
  .benefits--bento .benefit:first-child p { color: var(--p-100); }
  .benefits--bento .benefit:first-child .benefit__icon { background: rgba(255, 255, 255, 0.12); color: var(--c-400); }
}
.benefit { padding: var(--s-6); background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-lg); }
.section--tint .benefit { background: #fff; }
.benefit__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--p-50); color: var(--p-700); margin-bottom: var(--s-4); }
.benefit__title { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.benefit p { color: var(--color-muted); font-size: var(--fs-sm); }

.type-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.type-card { padding: var(--s-6); border-radius: var(--r-lg); background: var(--color-tint); border: 1px solid var(--color-border); position: relative; overflow: hidden; }
.section--tint .type-card { background: #fff; }
.type-card::after { content: ""; position: absolute; top: 0; right: 0; width: 60px; height: 100%; background: var(--cables-dark); }
.type-card h3 { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.type-card p { color: var(--color-muted); font-size: var(--fs-sm); }

.guide-grid { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .guide-grid { grid-template-columns: 1fr 1fr; } }
.guide-card { padding: var(--s-6); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--color-border); border-top: 4px solid var(--p-700); }
.guide-card h3 { margin-bottom: var(--s-3); }
.guide-card h3 a { color: inherit; }
.guide-card p { color: var(--color-muted); }

.panel { padding: var(--s-6); background: var(--color-tint); border: 1px solid var(--color-border); border-radius: var(--r-lg); }
.section--tint .panel { background: #fff; }
.panel h3, .panel .h3 { margin-bottom: var(--s-3); }
.panel > p { color: var(--color-muted); }
.panel__label { margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.pill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-list li { padding: 5px 12px; border-radius: var(--r-full); background: var(--p-700); color: #fff; font-size: var(--fs-xs); font-weight: 600; }
.pill-list--soft li { background: #fff; color: var(--n-700); border: 1px solid var(--color-border); }
.link-list { display: grid; gap: 2px; }
.link-list a { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-2); border-radius: var(--r-sm); font-weight: 600; text-decoration: none; }
.link-list a:hover { background: var(--p-50); }
.panel .btn { margin-top: var(--s-5); }

.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-10); font-size: var(--fs-xl); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-8); }
.prose ul:not([class]) { padding-left: 1.2em; }
.prose ul:not([class]) li + li { margin-top: var(--s-2); }
.prose--seo strong { color: var(--n-900); }

.tick-list { display: grid; gap: var(--s-3); }
.tick-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.tick-list .icon { color: var(--color-ok); margin-top: 3px; flex: none; }
.tick-list--lg { font-size: var(--fs-base); margin-top: var(--s-2); }

/* ── spec card ──────────────────────────────────────────────────────── */
.spec-card { position: relative; overflow: hidden; padding: var(--s-8) var(--s-6) var(--s-6); background: var(--color-dark); color: var(--color-on-dark); border-radius: var(--r-xl); box-shadow: var(--sh-lg); }
.spec-card__lines { position: absolute; inset: 0; background: var(--cables); pointer-events: none; }
.spec-card > * { position: relative; }
.spec-card__title { color: #fff; margin-bottom: var(--s-5); }
.spec-card__list { display: grid; }
.spec-card__list div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-3); padding-block: var(--s-3); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--fs-sm); }
.spec-card dt { color: var(--c-300); font-weight: 700; }
.spec-card dd { color: #fff; }
.spec-card .btn { margin-top: var(--s-6); }

/* ── steps ──────────────────────────────────────────────────────────── */
.steps { display: grid; gap: var(--s-4); counter-reset: step; position: relative; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); } .steps::before { content: ""; position: absolute; top: 26px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, var(--p-200), var(--c-400)); transform-origin: 0 50%; } }
.step { position: relative; padding: var(--s-5); background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-lg); }
@media (min-width: 768px) { .step { background: transparent; border: 0; padding: 0; } }
.step__num { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--p-700); color: #fff; font-weight: 800; font-size: var(--fs-md); margin-bottom: var(--s-4); box-shadow: 0 0 0 6px var(--color-bg); }
.section--tint .step__num { box-shadow: 0 0 0 6px var(--color-tint); }
.step__title { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.step p { color: var(--color-muted); font-size: var(--fs-sm); }

/* ── stats ──────────────────────────────────────────────────────────── */
.stats { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats li { padding: var(--s-6); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); text-align: center; }
.stats strong { display: block; font-size: var(--fs-2xl); font-weight: 800; color: var(--c-400); line-height: 1.1; }
.stats span { color: var(--color-on-dark-muted); font-size: var(--fs-sm); }
.band .section-head { position: relative; }

/* ── compare slider ─────────────────────────────────────────────────── */
.compare { position: relative; --pos: 50%; }
.compare__stage { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--sh-lg); background: var(--p-900); }
.compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__ms { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__handle { position: absolute; top: 50%; left: var(--pos); translate: -50% -50%; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--p-700); box-shadow: var(--sh-lg); pointer-events: none; }
.compare__stage::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; translate: -50% 0; background: #fff; pointer-events: none; }
.compare__tag { position: absolute; top: 14px; padding: 5px 12px; border-radius: var(--r-full); background: rgba(5, 39, 37, 0.8); color: #fff; font-size: var(--fs-xs); font-weight: 700; z-index: 1; }
.compare__tag--left { left: 14px; }
.compare__tag--right { right: 14px; }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare__range:focus-visible + * { outline: none; }
.compare:focus-within .compare__handle { outline: 3px solid var(--color-focus); }

/* ── price card ─────────────────────────────────────────────────────── */
.price-card { display: grid; gap: var(--s-4); }
@media (min-width: 1024px) { .price-card { grid-template-columns: 1.3fr 1fr; } }
.price-card__main { padding: var(--s-8); border-radius: var(--r-xl); background: linear-gradient(135deg, var(--p-700), var(--p-900)); color: #fff; position: relative; overflow: hidden; }
.price-card__main::before { content: ""; position: absolute; inset: 0; background: var(--cables); }
.price-card__main > * { position: relative; }
.price-card__label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-300); }
.price-card__big { margin-top: var(--s-2); font-size: var(--fs-2xl); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.price-card__note { margin-top: var(--s-4); color: var(--p-100); max-width: 56ch; }
.price-card .btn-row { margin-top: var(--s-6); }
.price-card__side { padding: var(--s-8); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--color-border); }
.price-card__side h3 { margin-bottom: var(--s-5); }

/* ── city directory ─────────────────────────────────────────────────── */
.city-dir__search { display: flex; align-items: center; gap: var(--s-3); max-width: 560px; padding: 0 var(--s-4); margin-bottom: var(--s-6); background: #fff; border: 2px solid var(--color-border); border-radius: var(--r-full); }
.city-dir__search:focus-within { border-color: var(--p-700); }
.city-dir__search .icon { color: var(--color-muted); }
.city-dir__search input { flex: 1; min-height: 52px; border: 0; outline: 0; background: none; font-size: var(--fs-base); min-width: 0; }
.city-dir__empty { margin-bottom: var(--s-4); color: var(--color-muted); }
.city-dir__zones { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.city-dir__zone[hidden] { display: none; }
.city-dir__label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--s-2); }
.city-dir ul { display: grid; gap: var(--s-2); }
.city-dir li[hidden] { display: none; }
.city-link { display: flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: var(--s-2) var(--s-4); border-radius: var(--r-md); background: #fff; border: 1px solid var(--color-border); color: var(--n-800); font-weight: 700; text-decoration: none; transition: border-color 0.2s, background 0.2s; }
.city-link .icon { color: var(--p-700); }
.city-link:hover { border-color: var(--p-700); color: var(--p-700); }
.city-link.is-current { background: var(--p-700); border-color: var(--p-700); color: #fff; }
.city-link.is-current .icon { color: var(--c-400); }
.city-link__areas { font-size: var(--fs-xs); color: var(--color-muted); padding: 4px var(--s-4) 0; }

.city-row { display: grid; gap: var(--s-5); padding-block: var(--s-10); border-top: 1px solid var(--color-border); }
.city-row:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 1024px) { .city-row { grid-template-columns: 1.4fr 1fr; gap: var(--s-12); } }
.city-row h2 { font-size: var(--fs-xl); margin-bottom: var(--s-3); }
.city-row h2 a { color: inherit; text-decoration: none; }
.city-row h2 a:hover { color: var(--p-700); }
.city-row p { color: var(--color-muted); margin-bottom: var(--s-3); }

.matrix { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--r-lg); }
.matrix table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: var(--fs-sm); }
.matrix th, .matrix td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--color-border); text-align: center; }
.matrix th[scope="row"], .matrix thead th:first-child { text-align: left; }
.matrix thead th { background: var(--color-tint); font-weight: 700; }
.matrix td a { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--p-50); color: var(--color-ok); }
.matrix td a:hover { background: var(--p-700); color: #fff; }

/* ── office card / map ──────────────────────────────────────────────── */
.office-card { padding: var(--s-6); background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-xl); box-shadow: var(--sh-md); display: grid; gap: var(--s-4); align-self: start; }
.office-card__addr { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; line-height: 1.35; }
.office-card__addr .icon { flex: none; color: var(--p-700); }
.office-card__more { font-size: var(--fs-sm); }
.contact-side { display: grid; gap: var(--s-4); align-content: start; }

/* ── photos / rail / gallery ────────────────────────────────────────── */
.rail { display: flex; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-3); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: thin; }
.rail__item { flex: 0 0 78%; scroll-snap-align: start; }
@media (min-width: 768px) {
  .rail { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; }
  .rail__item { flex: none; }
}
@media (min-width: 1024px) { .rail { grid-template-columns: repeat(4, 1fr); } }
.photo { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--p-50); }
.photo > a { display: block; aspect-ratio: 4 / 3; }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.photo:hover img { transform: scale(1.04); }
.photo figcaption { position: absolute; left: 10px; bottom: 10px; }
.photo figcaption, .photo figcaption a { padding: 4px 10px; border-radius: var(--r-full); background: rgba(5, 39, 37, 0.82); color: #fff; font-size: var(--fs-xs); font-weight: 700; text-decoration: none; }
.photo figcaption a { padding: 0; background: none; }

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.filter-btn { min-height: 42px; padding: 0 var(--s-4); border-radius: var(--r-full); border: 1px solid var(--color-border); background: #fff; font-weight: 600; font-size: var(--fs-sm); }
.filter-btn.is-active { background: var(--p-700); color: #fff; border-color: var(--p-700); }
.gallery-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-grid__item[hidden] { display: none; }

.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: var(--s-4); background: rgba(5, 20, 19, 0.92); }
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 82vh; width: auto; border-radius: var(--r-md); }
.lightbox__cap { color: #fff; text-align: center; margin-top: var(--s-3); font-size: var(--fs-sm); }
.lightbox__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; }
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 12px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 12px; top: 50%; translate: 0 -50%; }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: var(--s-3); }
.faq__item { background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; }
.faq__item[open] { border-color: var(--p-200); box-shadow: var(--sh-sm); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6); cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 { font-size: var(--fs-base); font-weight: 700; }
.faq__sign { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--p-50); }
.faq__sign::before, .faq__sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--p-700); translate: -50% -50%; transition: transform 0.25s var(--ease); }
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0); }
.faq__a { padding: 0 var(--s-6) var(--s-5); color: var(--color-muted); }

/* ── reviews ────────────────────────────────────────────────────────── */
.reviews { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.review { padding: var(--s-6); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--color-border); }
.review__mark { color: var(--c-400); margin-bottom: var(--s-3); }
.review figcaption { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--color-muted); }

/* ── blog ───────────────────────────────────────────────────────────── */
.post-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.post-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.post-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.post-card__link:hover { color: inherit; }
.post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--p-50); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); flex: 1; }
.post-card__body time { font-size: var(--fs-xs); color: var(--color-muted); font-weight: 600; }
.post-card__title { font-size: var(--fs-md); }
.post-card__body p { color: var(--color-muted); font-size: var(--fs-sm); }
.post-card__more { margin-top: auto; padding-top: var(--s-2); display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--p-700); font-size: var(--fs-sm); }
.related-posts { margin-top: var(--s-10); }
.related-posts h3 { margin-bottom: var(--s-3); }
.related-posts ul { padding-left: 1.2em; display: grid; gap: var(--s-2); }

.article-layout { display: grid; gap: var(--s-10); }
@media (min-width: 1024px) { .article-layout { grid-template-columns: minmax(0, 720px) 1fr; gap: var(--s-16); } }
.prose--article { font-size: var(--fs-md); }
.article-figure { border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-8); background: var(--p-50); aspect-ratio: 16 / 9; }
.article-figure img { width: 100%; height: 100%; object-fit: cover; }
.article-aside .panel { position: sticky; top: calc(var(--header-h) + 24px); }

/* ── CTA band ───────────────────────────────────────────────────────── */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--p-800), var(--color-dark)); color: #fff; padding-block: var(--s-16); }
.cta-band__inner { position: relative; display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 1024px) { .cta-band__inner { grid-template-columns: 1fr auto; gap: var(--s-12); } }
.cta-band__title { color: #fff; font-size: var(--fs-2xl); }
.cta-band p { margin-top: var(--s-3); color: var(--color-on-dark-muted); max-width: 56ch; }

/* ── form ───────────────────────────────────────────────────────────── */
.form-card { padding: var(--s-6); background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-xl); box-shadow: var(--sh-lg); }
@media (min-width: 768px) { .form-card { padding: var(--s-8); } }
.form-card > .h3 { margin-bottom: var(--s-5); }
.qform { display: grid; gap: var(--s-4); }
.qform__row { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .qform__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-weight: 700; font-size: var(--fs-sm); padding: 0; margin-bottom: 6px; }
.field__opt { font-weight: 500; color: var(--color-muted); }
.input { width: 100%; min-height: 52px; padding: var(--s-3) var(--s-4); border: 2px solid var(--color-border); border-radius: var(--r-md); background: #fff; font-size: 1rem; transition: border-color 0.2s; }
textarea.input { min-height: 96px; resize: vertical; }
.input:focus { outline: 0; border-color: var(--p-700); box-shadow: 0 0 0 4px var(--p-50); }
.input[aria-invalid="true"] { border-color: var(--color-error); }
.field__error { color: var(--color-error); font-size: var(--fs-sm); font-weight: 600; }
.consent { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--color-muted); }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--p-700); flex: none; }
.qform__alt { text-align: center; font-size: var(--fs-sm); color: var(--color-muted); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-4); border-radius: var(--r-md); font-weight: 600; font-size: var(--fs-sm); }
.notice--ok { background: #ecfdf3; color: var(--color-ok); }
.notice--error { background: #fef3f2; color: var(--color-error); }

/* ── home: stacked type cards (scroll-driven) ───────────────────────── */
.tstack-layout { display: grid; gap: var(--s-8); }
@media (min-width: 1024px) {
  .tstack-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-16); align-items: start; }
  .tstack-intro { position: sticky; top: calc(var(--header-h) + 48px); }
}
.tstack-intro .section-head { margin-bottom: var(--s-6); }
.tstack { display: grid; list-style: none; padding: 0 0 12vh; margin: 0; }
@media (min-width: 1024px) { .tstack { padding-bottom: 16vh; } }
/* Cards stick just below the header; the gap between items and the padding
   after the stack keep clear space below each card and after the last one. */
.tstack__item { --stick: calc(var(--header-h) + 16px + var(--i) * 10px); position: sticky; top: var(--stick); margin-bottom: 18vh; }
.tstack__item:last-child { margin-bottom: 0; }
@media (min-width: 1024px) { .tstack__item { --stick: calc(var(--header-h) + 40px + var(--i) * 14px); margin-bottom: 24vh; } }
.tstack__card {
  position: relative; display: grid; overflow: hidden; background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--r-xl); box-shadow: var(--sh-lg);
  transform-origin: 50% 0; will-change: transform;
}
@media (min-width: 640px) { .tstack__card { grid-template-columns: 1fr 1fr; min-height: 340px; } }
.tstack__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--p-50); }
@media (min-width: 640px) { .tstack__media { aspect-ratio: auto; min-height: 100%; } }
.tstack__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.tstack__media::after { content: ""; position: absolute; inset: 0; background: var(--cables); opacity: 0.6; pointer-events: none; }
.tstack__body { display: flex; flex-direction: column; justify-content: center; gap: var(--s-2); padding: var(--s-5) var(--s-5) var(--s-6); }
@media (min-width: 768px) { .tstack__body { padding: var(--s-8); } }
.tstack__num { font-size: var(--fs-sm); font-weight: 700; color: var(--color-muted); letter-spacing: 0.04em; }
.tstack__num span { font-size: var(--fs-xl); color: var(--p-700); font-weight: 800; }
.tstack__title { font-size: var(--fs-xl); }
.tstack__body p:not(.tstack__num) { color: var(--color-muted); }
.tstack__link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-2); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; }
.tstack__link:hover .icon { transform: translateX(3px); }
.tstack__link .icon { transition: transform 0.2s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .tstack__item { position: static; margin-bottom: var(--s-4); }
}

/* ── gallery rail: closing "View full gallery" card ─────────────────── */
.rail-more {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-2);
  height: 100%; min-height: 100%; aspect-ratio: 4 / 3; padding: var(--s-5); overflow: hidden;
  border-radius: var(--r-lg); background: linear-gradient(140deg, var(--p-700), var(--color-dark));
  color: #fff; text-decoration: none; transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.rail-more:hover { color: #fff; transform: translateY(-4px); box-shadow: var(--sh-lg); }
.rail-more__lines { position: absolute; inset: 0; background: var(--cables); }
.rail-more > :not(.rail-more__lines) { position: relative; }
.rail-more__icon { position: absolute !important; top: var(--s-5); left: var(--s-5); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, 0.12); color: var(--c-400); }
.rail-more__title { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.01em; }
.rail-more__count { font-size: var(--fs-sm); color: var(--color-on-dark-muted); padding-right: 56px; }
.rail-more__go { position: absolute !important; right: var(--s-5); bottom: var(--s-5); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-400); color: var(--c-ink); transition: transform 0.3s var(--ease); }
.rail-more:hover .rail-more__go { transform: translateX(4px); }

/* ── about: everything we install (bento of services) ───────────────── */
.svc-bento { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .svc-bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; } .svc-bento__tile--lead { grid-column: span 2; grid-row: span 2; } .svc-bento__tile:nth-child(n+6) { grid-column: span 2; } }
.svc-bento__tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  min-height: 220px; padding: var(--s-5); overflow: hidden; border-radius: var(--r-xl);
  color: #fff; text-decoration: none; isolation: isolate; background: var(--p-900);
}
.svc-bento__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.7s var(--ease); }
.svc-bento__tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 39, 37, 0) 30%, rgba(5, 39, 37, 0.88) 100%); }
.svc-bento__tile:hover { color: #fff; }
.svc-bento__tile:hover img { transform: scale(1.06); }
.svc-bento__icon { position: absolute; top: var(--s-4); left: var(--s-4); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); color: var(--p-700); }
.svc-bento__name { font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.01em; }
.svc-bento__tile--lead .svc-bento__name { font-size: var(--fs-xl); }
.svc-bento__note { font-size: var(--fs-sm); color: var(--color-on-dark-muted); }
.svc-bento__tile--lead .svc-bento__note { max-width: 40ch; }
.svc-bento__go { position: absolute; top: var(--s-4); right: var(--s-4); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--c-400); color: var(--c-ink); opacity: 0; transform: translate(-6px, 6px); transition: opacity 0.3s, transform 0.3s var(--ease); }
.svc-bento__tile:hover .svc-bento__go, .svc-bento__tile:focus-visible .svc-bento__go { opacity: 1; transform: none; }
@media (hover: none) { .svc-bento__go { opacity: 1; transform: none; } }

.about-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.about-collage figure { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--p-900); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); }
.about-collage figure:nth-child(2) { margin-top: 36px; }
.about-collage figure:nth-child(3) { margin-top: -36px; }
.about-collage img { width: 100%; height: 100%; object-fit: cover; }

/* ── home hero: cinematic slideshow (crossfade + push-in + pan) ────── */
.cine { position: relative; isolation: isolate; --slide: 4.5s; }
.cine .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine__base { z-index: 0; }
.cine__slide {
  z-index: 1; opacity: 0; transform-origin: 50% 50%; will-change: opacity, transform;
  animation: cine-play calc(var(--slide) * var(--n)) linear infinite both;
  animation-delay: calc(var(--slide) * var(--k));
}
/* One slide = 100% / 6 ≈ 16.7% of the loop: fade in, hold while pushing
   in and panning, then fade out over the next slide's fade-in. */
@keyframes cine-play {
  0%     { opacity: 0; transform: scale(1.16) translate(var(--tx), var(--ty)); }
  3.5%   { opacity: 1; }
  16.7%  { opacity: 1; }
  21%    { opacity: 0; transform: scale(1.02) translate(0, 0); }
  100%   { opacity: 0; transform: scale(1.02) translate(0, 0); }
}
.cine__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(5, 39, 37, 0) 55%, rgba(5, 39, 37, 0.55) 100%), radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(5, 39, 37, 0.35) 100%); }
.cine__bar { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 3; display: flex; gap: 6px; }
.cine__bar i { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.cine__bar i::after {
  content: ""; position: absolute; inset: 0; background: var(--c-400); transform: scaleX(0); transform-origin: 0 50%;
  animation: cine-bar calc(var(--slide) * var(--n)) linear infinite both; animation-delay: calc(var(--slide) * var(--k));
}
@keyframes cine-bar { 0% { transform: scaleX(0); } 16.7% { transform: scaleX(1); } 17%, 100% { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .cine__slide, .cine__bar { display: none; }
}

/* ── "at a glance" key facts (home) ─────────────────────────────────── */
.key-facts { margin-top: var(--s-8); padding: var(--s-6); border-radius: var(--r-xl); background: var(--color-tint); border: 1px solid var(--color-border); }
@media (min-width: 768px) { .key-facts { padding: var(--s-8); } }
.key-facts__title { margin-bottom: var(--s-5); }
.key-facts__list { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .key-facts__list { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-8); } }
.key-facts__list div { display: grid; gap: 4px; padding-left: var(--s-4); border-left: 3px solid var(--c-400); }
.key-facts__list dt { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-700); }
.key-facts__list dd { color: var(--n-800); }

/* taller photos in the home and service-page gallery strips */
.rail .photo > a { aspect-ratio: 4 / 5; }
.rail-more { aspect-ratio: 4 / 5; }