/* Composition from Cinemata's two-plane VF hero. ID uses the same lens,
   typography and frame; no texture layer or separate visual language. */
.id-service-index-wrap { padding-bottom: var(--vf-sp-5xl); }
.home-hero { --vf-hero-pad-b: 80px; }
.home-fh-lead { max-width: 48ch; text-wrap: pretty; }
.home-fh-row { max-width: min(600px, 58%); }
.home-fh-ff { align-items: center; }
.id-focus-control { position: relative; flex: none; }
.id-focus-control input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: 0; cursor: ew-resize; }
.id-focus-control:has(input:focus-visible) { outline: 2px solid var(--vf-accent); outline-offset: 10px; border-radius: 50%; }
.id-focus-control .home-fh-disc { display: block; }
.home-fh-pl { transform-origin: left center; }
.home-fh-bk { opacity: .38; filter: blur(1px); }
.home-hero-cta .vf-btn { min-height: 48px; }
.id-mobile-menu { display: none; }
.id-mobile-menu summary { list-style: none; }
.id-mobile-menu summary::-webkit-details-marker { display: none; }
.id-main-nav a:focus-visible, .id-mobile-menu summary:focus-visible { outline: 2px solid var(--vf-accent); outline-offset: 4px; }

@media (max-width: 900px) {
  .home-hero { min-height: 100svh; padding-bottom: 56px; }
  .home-fh-row { max-width: 100%; }
  .home-fh-ff { position: static; margin-top: 32px; gap: 20px; }
  .home-fh-disc { width: 112px; --vf-hero-dial-fs: 22px; }
  .home-fh-ro { font-size: 11px; min-width: 12ch; }
  .home-fh-ro b { font-size: 28px; }
}
@media (max-width: 760px) {
  .home-top-in { display: flex; height: var(--vf-top-h); gap: 16px; }
  .home-top-r { margin-left: auto; }
  .id-main-nav { display: none; }
  .id-mobile-menu { display: block; margin-left: 0; order: 3; }
  .id-mobile-menu summary { width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; color: var(--vf-fg); }
  .id-mobile-menu summary span { width: 20px; height: 1px; background: currentColor; transition: transform 180ms; }
  .id-mobile-menu[open] summary span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .id-mobile-menu[open] summary span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .id-mobile-menu nav { position: absolute; top: calc(100% + 8px); right: var(--vf-pad); left: var(--vf-pad); padding: 12px 20px; background: var(--vf-surface); border: 1px solid var(--vf-line-2); border-radius: var(--vf-r-panel); box-shadow: 0 12px 30px #0008; }
  .id-mobile-menu nav a { display: flex; align-items: center; min-height: 52px; font: 500 14px/20px var(--vf-font-body); text-decoration: none; }
  .id-mobile-menu nav a + a { border-top: 1px solid var(--vf-line); }
  .home-top-r > .vf-btn { min-height: 44px; }
  .home-hero { --vf-hero-near-gap: 48px; --vf-hero-row-gap: 48px; padding-top: 128px; }
  .home-fh-lead { font-size: 16px; line-height: 24px; }
  .home-fh-row { gap: 24px; }
  .home-fh-ff { flex-direction: row; align-items: center; gap: 20px; }
  .home-fh-ro { gap: 4px; }
  .home-fh-ro > :first-child { display: block; }
  .home-fh-ro b { font-size: 22px; line-height: 26px; }
  .home-fh-ro .home-fh-pn { display: block; }
  .home-fh-ff .home-fh-disc { width: 96px; --vf-hero-dial-fs: 26px; }
  .home-fh-pl[data-plane="near"] .home-fh-tag { margin-top: 16px; }
  .home-fh-tag { font-size: 11px; line-height: 16px; letter-spacing: .04em; }
  .home-fh-pl[data-plane="far"] .home-fh-tag { margin-top: 16px; }
  .home-hero-cta { width: 100%; flex-wrap: wrap; }
  .home-hero-cta .vf-btn { flex: 0 1 auto; }
  .id-service-index-wrap { padding-bottom: 32px; }
}
@media (max-width: 390px) {
  .home-top .vf-logo { font-size: 13px; gap: 6px; }
  .home-top-in { gap: 8px; }
  .home-top .vf-logo-mk { width: 16px; }
  .home-top-r > .vf-btn { padding-inline: 12px; font-size: 12px; }
  .home-top-r > .vf-btn svg { display: none; }
  .id-logo-suffix { font-size: 11px; }
  .home-fh-ff { right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .id-mobile-menu summary span { transition: none; }
}