.mobile-contact-bar { display: none; }

@media (max-width: 760px) {
  :root {
    --pad: clamp(20px, 6vw, 32px);
    --mobile-header: calc(76px + env(safe-area-inset-top, 0px));
    --mobile-dock: calc(64px + env(safe-area-inset-bottom, 0px));
    --mobile-modal-top: max(8px, env(safe-area-inset-top, 0px));
    --mobile-modal-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    --mobile-modal-left: max(8px, env(safe-area-inset-left, 0px));
    --mobile-modal-right: max(8px, env(safe-area-inset-right, 0px));
  }

  html { scroll-padding-top: var(--mobile-header); scroll-padding-bottom: calc(var(--mobile-dock) + 16px); }
  body { padding-bottom: var(--mobile-dock); font-size: 15px; line-height: 1.65; }
  .section-pad {
    padding: 54px max(var(--pad), env(safe-area-inset-right, 0px)) 64px max(var(--pad), env(safe-area-inset-left, 0px));
  }
  button:focus-visible, a:focus-visible, summary:focus-visible, canvas:focus-visible {
    outline-offset: 3px;
  }

  .header {
    position: fixed;
    inset: 0 0 auto;
    height: var(--mobile-header);
    padding: env(safe-area-inset-top, 0px) max(var(--pad), env(safe-area-inset-right, 0px)) 0 max(var(--pad), env(safe-area-inset-left, 0px));
    gap: 16px;
    z-index: 80;
    background: rgba(241, 240, 235, .88);
    border-bottom-color: var(--line);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
  }
  body.menu-open .header { background: var(--paper); }
  .header .brand { min-width: 0; gap: 11px; font-size: 17px; }
  .header .brand img { width: 64px; height: 64px; flex-shrink: 0; }
  .header .brand-sub { font-size: 7px; letter-spacing: .07em; }
  .menu-toggle { width: 44px; height: 44px; flex: 0 0 44px; padding: 8px; }
  .mobile-nav {
    inset: var(--mobile-header) 0 0;
    z-index: 70;
    padding: 28px max(var(--pad), env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(var(--pad), env(safe-area-inset-left, 0px));
    gap: 16px;
    font-size: clamp(23px, 6.4vw, 30px);
    line-height: 1.35;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav a { display: flex; align-items: center; min-height: 56px; padding: 8px 0; }

  .mobile-contact-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-height: var(--mobile-dock);
    padding: 8px max(var(--pad), env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(var(--pad), env(safe-area-inset-left, 0px));
    border-top: 1px solid #ffffff26;
    background: #11161df5;
    color: #f1f0eb;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .mobile-contact-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    min-height: 48px;
    padding: 9px 12px;
    border: 1px solid #ffffff55;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
  }
  .mobile-contact-bar a:last-child { background: #bdc4f1; color: #18203b; border-color: #bdc4f1; }

  .hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - var(--mobile-dock));
    height: auto;
    max-height: none;
    padding: calc(var(--mobile-header) + 24px) max(var(--pad), env(safe-area-inset-right, 0px)) 26px max(var(--pad), env(safe-area-inset-left, 0px));
  }
  .hero-grid { inset: var(--mobile-header) var(--pad) 0; }
  .hero-topline { position: relative; inset: auto; min-height: 20px; font-size: 10px; line-height: 1.5; letter-spacing: .08em; }
  .hero-copy { position: relative; inset: auto; width: 100%; max-width: none; margin: clamp(38px, 8svh, 76px) 0 clamp(34px, 6svh, 60px); }
  .hero h1 { font-size: clamp(40px, 10.7vw, 60px); line-height: 1.1; letter-spacing: -.06em; }
  .hero-eyebrow { max-width: 30em; margin-bottom: 22px; font-size: 11px; line-height: 1.6; letter-spacing: .08em; }
  .title-mark { margin-left: 8px; vertical-align: 5px; }
  .hero-description { margin-top: 26px; gap: 14px; }
  .hero-description p { font-size: 15px; line-height: 1.7; }
  .small-line { width: 24px; flex: 0 0 24px; margin-top: 12px; }
  .hero-bottom {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 18px 12px;
    margin-top: auto;
    padding-top: 22px;
  }
  .explore-link, .film-link { min-width: 0; min-height: 48px; gap: 10px; font-size: 11px; line-height: 1.45; letter-spacing: .025em; }
  .explore-link > span:last-child, .film-link > span:last-child { min-width: 0; }
  .circle-arrow, .film-link .play-icon { width: 44px; height: 44px; flex: 0 0 44px; }
  .muted-small { font-size: 11px; line-height: 1.5; margin-top: 5px; }
  .hero-index { order: initial; grid-column: 1; width: auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 10px; line-height: 1.4; }
  .hero-index > span:last-child { width: 100%; font-size: 9px; line-height: 1.5; }
  .index-track { width: 40px; }
  .motion-toggle { order: initial; grid-column: 2; justify-self: end; width: 44px; height: 44px; font-size: 16px; }
  .vertical-note { display: none; }

  .section-kicker { gap: 16px; align-items: flex-start; font-size: 10px; line-height: 1.5; letter-spacing: .06em; }
  .section-number { font-size: 10px; }
  .section-kicker > span:last-child { max-width: 49%; align-items: flex-start; font-size: 9px; line-height: 1.5; text-align: right; }
  .cross { flex-shrink: 0; margin-left: 8px; }
  .eyebrow { font-size: 11px; line-height: 1.6; }
  .intro h2, .process h2, .team h2 { font-size: clamp(34px, 9.8vw, 44px); line-height: 1.16; }
  .intro-layout { gap: 32px; margin-top: 34px; }
  .intro-text .large-copy { font-size: clamp(23px, 6vw, 28px); line-height: 1.45; }
  .intro-text > p { font-size: 15px; line-height: 1.8; }
  .underlined-link { min-height: 48px; align-items: center; font-size: 13px; line-height: 1.6; }
  .partnership > span { font-size: 10px; line-height: 1.6; }
  .partnership > div { gap: 10px; }
  .partnership a { min-height: 44px; min-width: 0; gap: 7px; font-size: 13px; line-height: 1.4; letter-spacing: .015em; }
  .partnership-times { flex-shrink: 0; font-size: 22px; }
  .principles > div { grid-template-columns: 24px minmax(0, 1fr); gap: 8px 16px; padding: 22px 0; }
  .principles > div > span { grid-column: 1; grid-row: 1 / 3; font-size: 11px; }
  .principles h3 { grid-column: 2; grid-row: 1; font-size: 22px; }
  .principles p { grid-column: 2; grid-row: 2; max-width: none; font-size: 14px; line-height: 1.7; }

  .projects-heading { margin-top: 36px; gap: 18px; }
  .projects h2 { font-size: clamp(38px, 10vw, 50px); line-height: 1.12; }
  .project-total { font-size: 40px; }
  .project-total span { font-size: 10px; line-height: 1.5; }
  .project-tools { flex-direction: column; align-items: stretch; gap: 0; min-width: 0; }
  .filter-list { width: 100%; min-width: 0; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .filter { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 10px 12px; font-size: 12px; line-height: 1.6; white-space: nowrap; }
  .filter sup { font-size: 10px; }
  .view-options { display: flex; align-self: flex-end; gap: 8px; padding: 8px 0; }
  .view-button { width: 44px; height: 44px; font-size: 25px; }
  .project-status { padding: 16px 0 24px; font-size: 11px; line-height: 1.65; }
  .project-meta { min-width: 0; gap: 10px; }
  .project-meta > div { min-width: 0; }
  .project-meta > span:first-child { font-size: 11px; }
  .project-meta h3 { font-size: 22px; line-height: 1.35; }
  .project-meta p { font-size: 11px; line-height: 1.7; }
  .project-name { display: block; min-height: 44px; }
  .project-tag { font-size: 10px; line-height: 1.4; }
  .project-end { font-size: 12px; line-height: 1.7; }
  .project-end a { min-height: 44px; align-items: center; }
  .list-view .project-card, .list-view .project-card:last-child { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .list-view .project-meta h3 { font-size: 18px; }

  .immersive { display: flex; flex-direction: column; justify-content: center; height: auto; min-height: 560px; padding: 62px var(--pad) 28px; }
  .immersive-content { position: relative; inset: auto; }
  .immersive-content > .eyebrow { font-size: 11px; }
  .immersive h2 { margin: 24px 0 32px; font-size: clamp(40px, 10vw, 55px); line-height: 1.15; }
  .immersive-play { min-height: 48px; font-size: 12px; line-height: 1.5; }
  .immersive-play > span { width: 48px; height: 48px; flex: 0 0 48px; }
  .immersive-bottom { position: relative; inset: auto; flex-wrap: wrap; gap: 12px 24px; margin-top: 60px; font-size: 11px; line-height: 1.6; }
  .process-title > p { font-size: 15px; line-height: 1.75; }
  .process-steps summary { min-height: 72px; gap: 14px; font-size: 20px; line-height: 1.45; }
  .process-steps summary > span { font-size: 11px; }
  .process-steps details p { padding: 0 8px 26px 34px; font-size: 14px; line-height: 1.8; }
  .model-controls { flex-wrap: wrap; gap: 8px 14px; }
  .model-controls span { font-size: 10px; line-height: 1.5; }
  .model-controls button { min-height: 44px; padding: 10px 0; font-size: 12px; line-height: 1.6; }
  .process-diagram > span { font-size: 10px; line-height: 1.6; }
  .person h3 { font-size: 24px; line-height: 1.35; }
  .person-meta > span:first-child { font-size: 11px; }
  .person-meta p { font-size: 12px; line-height: 1.6; }
  .portrait-number { font-size: 10px; line-height: 1.4; }

  .contact h2 { font-size: clamp(36px, 10.5vw, 52px); line-height: 1.12; }
  .contact .eyebrow { font-size: 11px; }
  .contact-orbit > span:first-child { font-size: 10px; line-height: 1.4; }
  .contact-bottom > p { font-size: 15px; line-height: 1.75; }
  .contact-bottom .underlined-link { font-size: 14px; }
  .contact-city { font-size: 11px; line-height: 1.7; }
  .office-label, .office-title > span { font-size: 11px; line-height: 1.6; }
  .contact-phone { min-height: 48px; font-size: clamp(29px, 8.1vw, 35px); line-height: 1.4; gap: 22px; }
  .whatsapp-direct { min-height: 44px; padding: 8px 0; font-size: 13px; line-height: 1.6; }
  .office address { font-size: 14px; line-height: 1.8; }
  .office > a { min-height: 44px; padding: 10px 0; font-size: 13px; line-height: 1.6; }
  .contact-form-panel { scroll-margin-top: 16px; }
  .form-title { align-items: flex-start; gap: 12px; }
  .form-title h3 { min-width: 0; font-size: 25px; line-height: 1.3; }
  .close-form { min-width: 44px; min-height: 44px; flex: 0 0 44px; font-size: 30px; line-height: 1; }
  form label { font-size: 12px; line-height: 1.6; }
  input, textarea, select { min-height: 48px; padding: 12px 14px; font-size: 16px; line-height: 1.5; }
  textarea { min-height: 144px; }
  .form-note, .brief-project { font-size: 13px; line-height: 1.75; }
  .form-actions { width: 100%; align-items: stretch; }
  .form-submit { justify-content: space-between; width: 100%; min-height: 48px; gap: 16px; font-size: 14px; line-height: 1.5; }
  .brief-download { align-self: flex-start; min-height: 44px; padding: 10px 0; font-size: 13px; line-height: 1.6; }
  #form-status { font-size: 14px; line-height: 1.7; }


  .footer { padding: 32px max(var(--pad), env(safe-area-inset-right, 0px)) 24px max(var(--pad), env(safe-area-inset-left, 0px)); }
  .footer-phone, .back-top { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-phone { font-size: 16px; }
  .back-top { font-size: 11px; }
  .footer-bottom { font-size: 11px; line-height: 1.6; gap: 12px; }
  .footer-bottom > span:last-child { font-size: 10px; }
  .footer-bottom nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
  .footer-bottom nav a { display: flex; align-items: center; min-height: 44px; font-size: 13px; line-height: 1.6; }

  .project-dialog, .film-dialog, .gallery-dialog {
    width: calc(100vw - var(--mobile-modal-left) - var(--mobile-modal-right));
    max-width: none;
    max-height: calc(100svh - var(--mobile-modal-top) - var(--mobile-modal-bottom));
    max-height: calc(100dvh - var(--mobile-modal-top) - var(--mobile-modal-bottom));
    margin: var(--mobile-modal-top) auto var(--mobile-modal-bottom);
    overscroll-behavior: contain;
  }
  .project-dialog, .film-dialog { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .dialog-top { min-height: 64px; padding: 10px 14px; gap: 12px; font-size: 10px; line-height: 1.5; }
  .dialog-top > span { min-width: 0; font-size: 9px; }
  .dialog-close { min-width: 44px; min-height: 44px; padding: 0 6px; gap: 10px; flex-shrink: 0; font-size: 12px; line-height: 1.4; }
  .detail-heading { padding: 24px 18px 18px; }
  .detail-heading h2 { font-size: clamp(26px, 7vw, 34px); line-height: 1.25; overflow-wrap: anywhere; }
  .detail-heading > p { font-size: 12px; line-height: 1.7; }
  #project-dialog .detail-navigation { margin: 0 18px 20px; }
  #project-dialog .detail-position > span { font-size: 11px; line-height: 1.5; }
  #project-dialog .detail-prev, #project-dialog .detail-next { min-height: 100px; }
  #project-dialog .detail-prev small, #project-dialog .detail-next small { font-size: 10px; line-height: 1.5; }
  #project-dialog .detail-prev > span, #project-dialog .detail-next > span { font-size: 12px; line-height: 1.6; }
  #project-dialog .detail-film { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; width: calc(100% - 36px); max-width: calc(100% - 36px); min-height: 72px; margin: 0 18px 20px; padding: 12px; }
  #project-dialog .detail-film .play-icon { grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; }
  #project-dialog .detail-film > span:not(.play-icon) { grid-column: 2; font-size: 13px; line-height: 1.5; }
  #project-dialog .detail-film > small { grid-column: 2; margin: 0; font-size: 11px; line-height: 1.5; white-space: normal; }
  .detail-data { margin: 24px 18px; gap: 20px 16px; }
  .detail-data dt { font-size: 11px; line-height: 1.5; }
  .detail-data dd { font-size: 20px; line-height: 1.4; }
  .detail-note { padding: 0 18px 24px; font-size: 12px; line-height: 1.75; }
  .detail-image-button > span { right: 12px; bottom: 12px; padding: 10px 12px; font-size: 10px; line-height: 1.5; }
  .detail-cta { align-items: center; min-height: 48px; margin: 0 18px 24px; font-size: 14px; line-height: 1.6; gap: 14px; }
  .film-dialog video { max-height: calc(100svh - 148px - var(--mobile-modal-top) - var(--mobile-modal-bottom)); max-height: calc(100dvh - 148px - var(--mobile-modal-top) - var(--mobile-modal-bottom)); }
  .film-dialog > p { padding: 16px 18px; font-size: 12px; line-height: 1.65; }

  .gallery-dialog { height: calc(100svh - var(--mobile-modal-top) - var(--mobile-modal-bottom)); height: calc(100dvh - var(--mobile-modal-top) - var(--mobile-modal-bottom)); }
  .gallery-toolbar { min-height: 62px; }
  .gallery-brand { font-size: 10px; }
  .gallery-counter { font-size: 12px; }
  .gallery-close { min-width: 72px; min-height: 44px; font-size: 12px; }
  .gallery-caption { font-size: 12px; line-height: 1.6; }
  .gallery-control { min-width: 44px; min-height: 44px; }
  .gallery-original { min-height: 44px; font-size: 11px; }
  .gallery-fit { min-height: 44px; font-size: 12px; }
  .gallery-zoom-value { font-size: 12px; }
  .gallery-status { font-size: 14px; line-height: 1.75; }
  .gallery-retry { min-height: 44px; font-size: 14px; }
}

@media (max-width: 760px) and (max-height: 500px) and (orientation: landscape) {
  .hero { padding-top: calc(var(--mobile-header) + 18px); }
  .hero-copy { margin: 24px 0 28px; }
  .hero h1 { font-size: 40px; }
  .hero-eyebrow { margin-bottom: 16px; }
  .hero-description { margin-top: 20px; }
  .hero-bottom { gap: 12px 20px; }
  .mobile-nav { padding-top: 18px; padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .mobile-nav a { min-height: 48px; }
  .gallery-toolbar { min-height: 48px; padding-top: 2px; padding-bottom: 2px; }
  .gallery-footer { padding-top: 8px; padding-bottom: 8px; }
  .gallery-controls { flex-wrap: nowrap; gap: 12px; margin-top: 4px; }
  .gallery-navigation, .gallery-original, .gallery-zoom-controls { order: initial; }
  .gallery-original { margin-left: 0; }
  .gallery-zoom-controls { width: auto; border-top: 0; padding-top: 0; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .header-contact { display: none; }
  input, textarea, select { font-size: 16px; }
}

@media (max-width: 430px) {
  .hero-copy { margin: 38px 0 32px; }
  .hero-bottom { gap: 12px; }
  .hero-bottom .explore-link,
  .hero-bottom .film-link {
    grid-column: 1 / -1;
    min-height: 62px;
    padding: 8px 0;
    border-bottom: 1px solid #ffffff24;
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  body:has(#brief-form input:focus, #brief-form textarea:focus, #brief-form select:focus) .mobile-contact-bar {
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 430px) and (max-height: 700px) {
  .hero { padding-bottom: 18px; }
  .hero-topline, .hero-eyebrow, .hero-index { display: none; }
  .hero-copy { margin: 20px 0 24px; }
  .hero-bottom { grid-template-columns: minmax(0, 1fr) 44px; gap: 8px 12px; padding-top: 16px; }
  .hero-bottom .film-link { grid-column: 1; grid-row: 2; }
  .hero-bottom .motion-toggle { grid-column: 2; grid-row: 2; position: relative; }
}