/* ==========================================================================
   LLM ECO — PAGES intérieures (hero de page + sections réutilisables)
   ========================================================================== */

/* ---- images cover : le <picture> est un bloc absolu qui remplit le conteneur ---- */
.page-hero__media, .split__media, .svc-card__media, .realgrid__item { position: relative; overflow: hidden; }
.page-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9) saturate(1.05); }
.page-hero__media .pic.cover, .split__media .pic.cover,
.svc-card__media .pic.cover, .realgrid__item .pic.cover { position: absolute; inset: 0; display: block; }
.page-hero__media img, .split__media img, .svc-card__media img, .realgrid__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(1.1) saturate(1.06); /* "pop" sur les visuels sombres */
}

/* ============================ HERO DE PAGE ============================ */
.page-hero { position: relative; padding-top: calc(var(--header-h) + var(--sp-8)); padding-bottom: var(--sp-8); overflow: hidden; }
.page-hero--media { padding-top: calc(var(--header-h) + var(--sp-9)); padding-bottom: var(--sp-9); }
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(2,4,9,0.42) 0%, rgba(2,4,9,0.55) 55%, var(--t-bg2) 100%), linear-gradient(90deg, rgba(2,4,9,0.55) 0%, transparent 65%); }
.page-hero__glow { position: absolute; inset: 0; z-index: 0; background: radial-gradient(80% 70% at 80% -10%, var(--t-halo), transparent 60%); pointer-events: none; }
.page-hero__inner { position: relative; z-index: 2; max-width: 820px; }
.page-hero--media .page-hero__title, .page-hero--media .page-hero__lead { text-shadow: 0 2px 18px rgba(2,4,9,0.55); }
.page-hero__title { font-size: var(--fs-display); line-height: var(--lh-tight); margin: var(--sp-3) 0 var(--sp-4); }
.page-hero__lead { max-width: 60ch; }
.page-hero__ctas { margin-top: var(--sp-6); }

/* héros « motif » : filigrane thématique pour les pages sans photo */
.page-hero--motif { padding-top: calc(var(--header-h) + var(--sp-9)); padding-bottom: var(--sp-8); }
.page-hero__motif {
  position: absolute; z-index: 0; top: 50%; right: -2%; transform: translateY(-42%);
  width: clamp(280px, 38vw, 560px); height: auto; aspect-ratio: 1;
  color: var(--t-accent); opacity: 0.12; pointer-events: none;
  filter: drop-shadow(0 0 40px color-mix(in srgb, var(--t-accent) 40%, transparent));
}
.page-hero--motif .page-hero__glow { background: radial-gradient(70% 80% at 75% 30%, var(--t-halo), transparent 65%); }
@media (max-width: 760px) { .page-hero__motif { opacity: 0.08; right: -15%; width: 70vw; } }

/* fil d'Ariane */
.crumb { margin-bottom: var(--sp-4); }
.crumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-faint); }
.crumb li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--text-faint); }
.crumb a { color: var(--text-muted); } .crumb a:hover { color: var(--t-accent); }
.crumb [aria-current="page"] { color: var(--text-base); }

/* ============================ SPLIT (média + texte alterné) ============================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.split + .split { margin-top: var(--sp-9); }
.split--rev .split__media { order: 2; }
.split__media { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; position: relative; box-shadow: var(--shadow-md); }
.split__media img { transition: transform var(--dur-slow) var(--ease-out); }
.split__media:hover img { transform: scale(1.05); }
.split__body h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-4); }
.split__body > p { color: var(--text-muted); }

/* ============================ LISTE DE PRESTATIONS (checklist) ============================ */
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-5); }
.feature-list li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--text-base); font-size: var(--fs-sm); padding: var(--sp-2) 0; }
.feature-list li::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px; background: linear-gradient(135deg, var(--t-accent), var(--t-accent-2)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/14px no-repeat; }

/* ============================ CARTES SERVICES ============================ */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.svc-grid--4 { grid-template-columns: repeat(4, 1fr); }
.svc-card--link { position: relative; }
.svc-card--link:hover { border-color: var(--t-accent); }
.svc-card__more { margin-top: auto; padding-top: var(--sp-2); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--t-accent); }
.svc-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-1), var(--ink-900)); border: 1px solid var(--line); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.svc-card:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.svc-card__media { height: 170px; border-radius: var(--r-md); overflow: hidden; margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-2); }
.svc-card__icon { width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in srgb, var(--t-accent) 14%, transparent); color: var(--t-accent); font-family: var(--font-mono); font-weight: 600; }
.svc-card h3 { font-size: var(--fs-h3); }
.svc-card p { color: var(--text-muted); font-size: var(--fs-sm); flex-grow: 1; }
.svc-card ul { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-card ul li { font-size: var(--fs-xs); color: var(--text-faint); padding: 3px 9px; border: 1px solid var(--line); border-radius: var(--r-pill); }

/* ============================ OFFRES (cartes détaillées) ============================ */
.offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.offer { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-1), var(--ink-900)); border: 1px solid var(--line); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.offer:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.offer--featured { border-color: color-mix(in srgb, var(--t-accent) 45%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--t-accent) 30%, transparent), var(--shadow-md); }
.offer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.offer__for { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--t-accent); margin-bottom: 4px; }
.offer__head h3 { font-size: var(--fs-h3); }
.offer__pitch { color: var(--text-muted); font-size: var(--fs-sm); }
.offer__body { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.offer__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-faint); margin-bottom: var(--sp-2); }
.offer__line { color: var(--text-base); font-size: var(--fs-sm); }
.offer__result { color: var(--t-accent); }
.offer__cta { margin-top: auto; }
.offer--signature { margin-top: var(--sp-6); background: linear-gradient(120deg, color-mix(in srgb, var(--t-accent) 16%, var(--ink-900)), color-mix(in srgb, var(--t-accent-2) 12%, var(--ink-900))); border-color: var(--line-strong); }
.offer--signature h2 { font-size: var(--fs-h2); }
@media (max-width: 900px) { .offers { grid-template-columns: 1fr; } .offer__body { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* ============================ BANDEAU CTA ============================ */
.cta-band { margin-top: var(--section-y); padding: clamp(2.2rem, 5vw, 3.5rem); border-radius: var(--r-xl); text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--t-accent) 16%, var(--ink-900)), var(--ink-900)); border: 1px solid var(--line-strong); }
.cta-band h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.cta-band p { color: var(--text-muted); margin: 0 auto var(--sp-5); }
.cta-band .cluster { justify-content: center; }

/* ============================ RUBAN STATS ============================ */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.statband dt { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--text-strong); line-height: 1; }
.statband dd { color: var(--text-faint); font-size: var(--fs-sm); margin-top: 6px; }

/* ============================ GALERIE RÉALISATIONS ============================ */
.filterbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.filterbar button { padding: 0.5rem 1.1rem; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--text-muted); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); transition: all var(--dur-fast) var(--ease-out); }
.filterbar button:hover { border-color: var(--line-strong); color: var(--text-base); }
.filterbar button.is-active { background: linear-gradient(135deg, var(--t-accent), var(--t-accent-2)); color: #04122c; border-color: transparent; }

/* grille UNIFORME et harmonieuse : toutes les vignettes au même format 4:3 */
.realgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.realgrid__item { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.realgrid__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; aspect-ratio: 4 / 3; }
.realgrid__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.realgrid__zoom { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 38px; height: 38px; border-radius: var(--r-pill); display: grid; place-items: center; color: #fff; background: rgba(2,4,9,0.55); border: 1px solid rgba(255,255,255,0.2); opacity: 0; transform: scale(0.8); transition: opacity var(--dur-base), transform var(--dur-base); }
.realgrid__item:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.realgrid__item:hover img { transform: scale(1.06); }
.realgrid__item:hover .realgrid__zoom, .realgrid__btn:focus-visible .realgrid__zoom { opacity: 1; transform: none; }
.realgrid__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--t-accent); }
.realgrid__item figcaption { position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--sp-6) var(--sp-4) var(--sp-3); background: linear-gradient(transparent, rgba(2,4,9,0.92)); pointer-events: none; }
.realgrid__item figcaption b { display: block; color: var(--text-strong); font-family: var(--font-display); font-size: var(--fs-sm); }
.realgrid__item figcaption span { color: var(--t-accent); font-size: var(--fs-xs); }

/* ---- lightbox plein écran ---- */
.lightbox[hidden] { display: none; }
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(2,4,9,0.92); backdrop-filter: blur(6px); animation: lbFade var(--dur-base) var(--ease-out); }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__fig { margin: 0; max-width: min(1100px, 100%); display: flex; flex-direction: column; gap: var(--sp-3); }
.lightbox__img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--r-md); border: 1px solid var(--line-strong); }
.lightbox__cap { text-align: center; color: var(--text-base); font-size: var(--fs-sm); }
.lightbox__close { position: fixed; top: clamp(1rem,3vw,1.6rem); right: clamp(1rem,3vw,1.6rem); width: 46px; height: 46px; border-radius: var(--r-pill); display: grid; place-items: center; color: #fff; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); cursor: pointer; }
.lightbox__close:hover { background: rgba(255,255,255,0.2); }

@media (max-width: 900px) { .realgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .realgrid { grid-template-columns: 1fr; } }

/* ---- barre de recherche + filtres + sections par domaine ---- */
.real-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; margin-bottom: var(--sp-8);
  position: sticky; top: calc(var(--header-h) - 2px); z-index: 5; padding: var(--sp-4) 0;
  background: linear-gradient(180deg, var(--t-bg2) 70%, transparent); }
.real-search { position: relative; flex: 1 1 320px; display: flex; align-items: center; }
.real-search svg { position: absolute; left: 14px; color: var(--text-faint); pointer-events: none; }
.real-search input { width: 100%; padding: 0.8rem 1rem 0.8rem 2.6rem; border-radius: var(--r-pill); background: var(--surface-1); border: 1px solid var(--line-strong); color: var(--text-strong); }
.real-search input:focus { outline: none; border-color: var(--t-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 22%, transparent); }
.real-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.real-chips button { display: inline-flex; align-items: center; gap: 6px; padding: 0.5rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--text-muted); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); transition: all var(--dur-fast) var(--ease-out); }
.real-chips button:hover { border-color: var(--line-strong); color: var(--text-base); }
.real-chips button.is-active { background: linear-gradient(135deg, var(--t-accent), var(--t-accent-2)); color: #04122c; border-color: transparent; }
.real-count { font-family: var(--font-mono); font-size: var(--fs-xs); opacity: 0.8; }
.real-empty { text-align: center; color: var(--text-muted); padding: var(--sp-7) 0; }

.realcat { margin-bottom: var(--sp-9); scroll-margin-top: calc(var(--header-h) + 80px); }
.realcat__head { margin-bottom: var(--sp-5); }
.realcat__head h2 { font-size: var(--fs-h2); display: flex; align-items: center; gap: var(--sp-3); }
.realcat__head h2::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--t-accent), var(--t-accent-2)); }
.realcat__head p { color: var(--text-muted); margin-top: var(--sp-2); }

/* ============================ FAQ (accordéon natif) ============================ */
.faq-wrap { max-width: 880px; }
.faq-cat { margin-bottom: var(--sp-7); }
.faq-cat__title { font-size: var(--fs-h3); margin-bottom: var(--sp-4); color: var(--text-strong); display: flex; align-items: center; gap: var(--sp-3); }
.faq-cat__title::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--t-accent), var(--t-accent-2)); }
.faq-list { display: grid; gap: var(--sp-3); }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(180deg, var(--surface-1), var(--ink-900)); overflow: hidden; transition: border-color var(--dur-fast); }
.faq-item[open] { border-color: color-mix(in srgb, var(--t-accent) 45%, transparent); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5); font-family: var(--font-display); font-weight: 600; color: var(--text-strong); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--t-accent); border-radius: var(--r-md); }
.faq-q { font-size: 1.02rem; line-height: 1.4; }
.faq-ico { position: relative; flex-shrink: 0; width: 22px; height: 22px; }
.faq-ico::before, .faq-ico::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--t-accent); border-radius: 2px; transition: transform var(--dur-base) var(--ease-out); }
.faq-ico::before { width: 14px; height: 2px; }
.faq-ico::after { width: 2px; height: 14px; }
.faq-item[open] .faq-ico::after { transform: translate(-50%,-50%) scaleY(0); }
.faq-a { padding: 0 var(--sp-5) var(--sp-5); }
.faq-a p { color: var(--text-muted); max-width: 70ch; }

/* ============================ ACCESSIBILITÉ ============================ */
.a11y-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.a11y-card { padding: var(--sp-5); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-1), var(--ink-900)); border: 1px solid var(--line); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.a11y-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.a11y-card__ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-sm); color: var(--t-accent); background: color-mix(in srgb, var(--t-accent) 14%, transparent); margin-bottom: var(--sp-3); }
.a11y-card h3 { font-size: 1.02rem; margin-bottom: var(--sp-2); }
.a11y-card p { color: var(--text-muted); font-size: var(--fs-sm); }

.table-scroll { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
.a11y-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.a11y-table th, .a11y-table td { text-align: left; padding: var(--sp-4); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-muted); vertical-align: top; }
.a11y-table thead th { background: var(--surface-1); color: var(--text-base); font-family: var(--font-display); position: sticky; top: 0; }
.a11y-table tbody th { color: var(--text-strong); font-family: var(--font-display); white-space: nowrap; }
.a11y-table tr:last-child td, .a11y-table tr:last-child th { border-bottom: 0; }
.a11y-state { display: inline-flex; align-items: center; gap: 6px; padding: 0.25rem 0.7rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; }
.a11y-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.a11y-state--ok { background: rgba(47,211,154,0.12); color: var(--success); } .a11y-state--ok::before { background: var(--success); }
.a11y-state--partial { background: rgba(255,195,77,0.12); color: var(--warning); } .a11y-state--partial::before { background: var(--warning); }

@media (max-width: 980px) { .a11y-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .a11y-grid { grid-template-columns: 1fr; } }

/* ============================ PROSE (pages légales / texte long) ============================ */
.prose { max-width: 760px; }
.prose h2 { font-size: var(--fs-h3); margin: var(--sp-7) 0 var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.prose h2:first-of-type { border-top: 0; margin-top: 0; }
.prose h3 { font-size: 1.1rem; margin: var(--sp-5) 0 var(--sp-2); color: var(--text-base); }
.prose p, .prose li { color: var(--text-muted); margin-bottom: var(--sp-3); }
.prose ul { list-style: disc; padding-left: 1.2rem; margin-bottom: var(--sp-4); }
.prose li { margin-bottom: var(--sp-2); }
.prose a { color: var(--t-accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text-base); }
.prose .updated { font-size: var(--fs-sm); color: var(--text-faint); margin-bottom: var(--sp-6); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-5); font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--line); color: var(--text-muted); }
.prose th { color: var(--text-base); font-family: var(--font-display); }
.toc { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); margin-bottom: var(--sp-7); }
.toc ol { list-style: none; display: grid; gap: var(--sp-2); counter-reset: toc; }
.toc li { counter-increment: toc; color: var(--text-muted); }
.toc li::before { content: counter(toc, decimal-leading-zero) " "; color: var(--t-accent); font-family: var(--font-mono); }
.toc a { color: var(--text-muted); } .toc a:hover { color: var(--t-accent); }

/* ============================ CONTACT + FORMULAIRES ============================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-7); align-items: start; }
.contact-cards { display: grid; gap: var(--sp-4); }
.contact-card { display: flex; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-md); background: var(--surface-1); border: 1px solid var(--line); }
.contact-card__ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in srgb, var(--t-accent) 14%, transparent); color: var(--t-accent); }
.contact-card h3 { font-size: 1rem; margin-bottom: 2px; }
.contact-card p, .contact-card a { color: var(--text-muted); font-size: var(--fs-sm); }
.contact-card a:hover { color: var(--t-accent); }

.map-wrap { margin-top: var(--sp-6); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-strong); position: relative; aspect-ratio: 16 / 10; }
.map-wrap iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.25) brightness(0.92) contrast(1.05); }
.map-wrap--wide { aspect-ratio: 16 / 7; }
.map-badge { position: absolute; z-index: 2; top: var(--sp-4); left: var(--sp-4); padding: 0.5rem 1rem; border-radius: var(--r-pill); background: rgba(2,4,9,0.78); color: var(--text-strong); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); border: 1px solid var(--line-strong); backdrop-filter: blur(6px); pointer-events: none; }
@media (max-width: 700px) { .map-wrap--wide { aspect-ratio: 4 / 5; } }

.form { display: grid; gap: var(--sp-4); padding: var(--sp-6); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-1), var(--ink-900)); border: 1px solid var(--line); }
.form__row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-base); }
.field label .req { color: var(--t-accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.8rem 0.95rem; border-radius: var(--r-sm);
  background: var(--ink-950); border: 1px solid var(--line-strong); color: var(--text-strong);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--t-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 22%, transparent); }
.field textarea { resize: vertical; min-height: 130px; }
.form__hint { font-size: var(--fs-xs); color: var(--text-faint); }
.form__status { font-size: var(--fs-sm); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); display: none; }
.form__status.ok { display: block; background: rgba(47,211,154,0.12); color: var(--success); border: 1px solid rgba(47,211,154,0.3); }
.form__status.err { display: block; background: rgba(255,107,107,0.12); color: var(--danger); border: 1px solid rgba(255,107,107,0.3); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1100px) { .svc-grid.svc-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .svc-grid.svc-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .realgrid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .contact-grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: var(--sp-5); }
  .split--rev .split__media { order: 0; }
  .svc-grid { grid-template-columns: 1fr; }
  .feature-list { grid-template-columns: 1fr; }
  .statband { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-5); }
}
@media (max-width: 600px) { .svc-grid.svc-grid--4 { grid-template-columns: 1fr; } }