.story-mobile-controls { display: none; }
.contact-section { width: min(1120px, calc(100% - var(--side) * 2)); }
.contact-card { width: 100%; min-width: 0; padding: clamp(24px, 3vw, 38px); }
.contact-card h2 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1.12; }
.contact-details { gap: 4px; margin: 14px 0; }
.contact-details span { padding: 9px 0; flex-wrap: wrap; gap: 5px 12px; }
.contact-details a { overflow-wrap: anywhere; }
.contact-form { gap: 10px; }
.contact-form input, .contact-form textarea { padding: 11px 13px; min-width: 0; }
@media (min-width: 1061px) {
  .contact-section { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); }
  .contact-photo { position: relative; min-height: 420px; }
  .contact-photo img { position: absolute; inset: 0; }
  .contact-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
  .contact-details span { display: flex; flex-direction: column; justify-content: flex-start; font-size: .9rem; }
  .contact-card > p { font-size: .96rem; line-height: 1.55; }
  .contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-form > label:nth-of-type(n+3), .contact-form > button, .contact-form > .form-hint { grid-column: 1 / -1; }
}
@media (min-width: 721px) and (max-width: 1060px) {
  .contact-photo { min-height: 0; height: 320px; }
}
@media (max-width: 720px) {
  .menu-toggle, .nav-links, .nav-links.is-open { display: none !important; }
  :root { --side: 20px; }
  .section, .stories-copy, .stories-stage, .story-panel, .contact-card { min-width: 0; }
  h1 { font-size: clamp(3.4rem, 16vw, 5.2rem); line-height: 1.02; }
  h2 { font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1.12; overflow-wrap: break-word; }
  .hero-inner { padding-top: 110px; padding-bottom: 290px; }
  .hero-lead { font-size: 1rem; line-height: 1.65; }
  .hero-dog-stack { right: 20px; width: min(330px, calc(100% - 40px)); transform: none !important; bottom: 28px; }
  .hero-acaced-badge { width: 92px; }
  .hero-actions { gap: 10px; }
  .hero-actions .button { padding: 13px 16px; font-size: .88rem; }
  .stories-section { gap: 28px; }
  .modern-stories-stage { display: flex; flex-direction: column; gap: 20px; width: 100%; }
  .story-deck { order: 0; min-height: 0; width: 100%; display: flex; flex-direction: column; gap: 16px; perspective: none; }
  .story-main.story-phone { width: min(100%, 290px); max-height: 64svh; aspect-ratio: 9 / 16; border-width: 6px; border-radius: 24px; flex: none; }
  .story-thumb, .story-library-toggle, .story-library-wrap { display: none !important; }
  .story-mobile-controls { display: flex; align-items: center; justify-content: center; gap: 28px; width: 100%; }
  .story-mobile-controls button { width: 48px; height: 48px; border: 1px solid #fff6; border-radius: 50%; color: var(--cream); background: #ffffff18; font-size: 1.4rem; cursor: pointer; touch-action: manipulation; }
  .story-mobile-controls button:active { transform: scale(.94); background: #ffffff30; }
  .story-mobile-controls button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
  .story-mobile-controls span { min-width: 48px; text-align: center; color: var(--cream); font-variant-numeric: tabular-nums; }
  .story-panel { order: 1; width: 100%; padding: 20px; transform: none !important; }
  .story-panel strong { font-size: 1.65rem; }
  .story-panel p { margin-bottom: 0; font-size: .97rem; }
  .story-hint { display: none; }
  .house-visual { min-height: 380px; }
  .about-portrait { min-height: 310px; }
  .contact-card { padding: 24px 20px; }
  .contact-form input, .contact-form textarea { font-size: 16px; min-width: 0; width: 100%; }
  .faq-list summary { overflow-wrap: anywhere; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .story-panel, .service-card, .contact-card { transform: none !important; }
}