/* Auto Styling — mobile polish / performance overrides v7 */
:root {
  --mobile-gutter: 16px;
  --tap-size: 48px;
}

html,
body,
#root,
.app-shell {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 76px;
}

body {
  min-width: 320px;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
video,
svg {
  max-width: 100%;
}

img {
  image-rendering: auto;
}

a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

a,
button {
  touch-action: manipulation;
}

/* Keep below-the-fold sections out of the first paint on supporting browsers. */
.services-section,
.gallery-section,
.about-section,
.process-section,
.contact-section,
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}

/* The moving strip must always sit on a clean black layer. */
.marquee {
  position: relative;
  isolation: isolate;
  background: #050505 !important;
  contain: paint;
}

/* Stable anchors under the fixed header. */
section[id],
[id].section,
.services-section,
.gallery-section,
.about-section,
.process-section,
.contact-section {
  scroll-margin-top: 78px;
}

@media (pointer: coarse) {
  .service-card:hover:after,
  .button-lime:hover:after,
  .contact-link:hover:after {
    width: 0;
    left: -100%;
  }
  .service-card:hover > svg,
  .process-step:hover,
  .contact-link:hover,
  .footer-nav a:hover,
  .floating-wa:hover {
    transform: none;
  }
}

@media (max-width: 768px) {
  :root {
    --mobile-gutter: max(16px, env(safe-area-inset-left));
  }

  body.menu-open {
    overflow: hidden;
    touch-action: none;
  }

  /* Header / menu */
  .site-header {
    height: 66px;
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
    gap: 12px;
  }

  .site-header.is-scrolled {
    background: rgba(5, 5, 5, .96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .brand {
    min-width: 0;
    max-width: calc(100vw - 86px);
    font-size: 11px;
    line-height: 1.02;
    letter-spacing: .095em;
  }

  .brand strong {
    margin-top: 4px;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 var(--tap-size);
    width: var(--tap-size);
    height: var(--tap-size);
    margin-right: -6px;
    border-radius: 2px;
  }

  nav {
    top: 66px;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 66px);
    padding: 10px max(18px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(8, 8, 8, .995);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 55px rgba(0,0,0,.44);
  }

  nav > a:not(.header-cta) {
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 10px 2px;
    font-size: 14px;
  }

  nav .language-switch {
    min-height: 46px;
    margin: 8px 0 4px;
    align-items: center;
  }

  nav .language-switch button {
    min-width: 42px;
    min-height: 42px;
    font-size: 12px;
  }

  .header-cta,
  .button,
  .text-link,
  .contact-link,
  .form-button,
  .footer-nav a {
    min-height: var(--tap-size);
  }

  .header-cta {
    justify-content: center;
    padding: 14px 16px;
    margin-top: 8px;
    font-size: 12px;
  }

  /* Hero */
  .hero {
    min-height: 100svh;
    padding: 96px max(18px, env(safe-area-inset-right)) calc(42px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    display: flex;
    align-items: flex-end;
  }

  .hero-overlay {
    /* Subtle cinematic darkening on mobile, matching the desktop hero feel
       while keeping the portrait video clearly visible. */
    background:
      linear-gradient(180deg, rgba(5,5,5,.10) 0%, rgba(5,5,5,.16) 42%, rgba(5,5,5,.48) 76%, rgba(5,5,5,.82) 100%),
      linear-gradient(90deg, rgba(5,5,5,.50) 0%, rgba(5,5,5,.22) 62%, rgba(5,5,5,.14) 100%) !important;
  }

  .hero-content {
    width: 100%;
    max-width: 620px;
  }

  .hero .eyebrow {
    margin-bottom: 12px;
    font-size: 9px;
    line-height: 1.45;
    letter-spacing: .13em;
  }

  .hero h1 {
    max-width: 12ch;
    font-size: clamp(38px, 11vw, 56px);
    line-height: .92;
    letter-spacing: -.025em;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
  }

  .hero-text {
    max-width: 36rem;
    margin-top: 17px;
    font-size: 14px;
    line-height: 1.58;
  }

  .hero-actions {
    margin-top: 22px;
    gap: 10px;
  }

  .hero-actions .button,
  .hero-actions .text-link {
    min-height: var(--tap-size);
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .hero-meta {
    max-width: 100%;
    margin-top: 22px;
    font-size: 9px;
    line-height: 1.55;
  }

  .hero-mark,
  .scroll-note,
  .hero .since-badge {
    display: none !important;
  }

  /* Hero uses a real portrait crop on phones, so the browser no longer downloads pixels it will crop away. */
  .hero-photo .hero-bg-video {
    object-position: center center;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Marquee */
  .marquee {
    padding: 12px 0;
  }

  .marquee-track {
    gap: 18px;
    animation-duration: 32s;
  }

  .marquee-track span.marquee-word {
    font-size: 18px;
  }

  .marquee-track span.marquee-dot {
    width: 5px;
    height: 5px;
  }

  /* Generic section rhythm */
  .section {
    width: calc(100% - 32px);
    padding: 72px 0;
  }

  .section-head {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 30px;
  }

  .section-index {
    padding-top: 0;
  }

  .section-head p {
    max-width: 100%;
    font-size: 13px;
    line-height: 1.65;
  }

  h2 {
    font-size: clamp(36px, 10vw, 50px);
    line-height: .96;
    text-wrap: balance;
  }

  /* Services */
  .services-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    border-left: 0;
    border-top: 0;
  }

  .service-card,
  .service-card:last-child {
    min-height: 0;
    padding: 22px 18px;
    border: 1px solid var(--line);
  }

  .service-card p {
    line-height: 1.62;
  }

  /* Gallery */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 10px;
  }

  .project-card,
  .project-card.featured {
    grid-column: span 1;
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .project-info {
    left: 14px;
    right: 14px;
    bottom: 12px;
  }

  .project-info strong {
    font-size: clamp(22px, 6vw, 28px);
  }

  .project-info span,
  .project-info small {
    font-size: 9px;
  }

  .view-project {
    display: none;
  }

  /* About */
  .about-section,
  .contact-section {
    grid-template-columns: 1fr;
  }

  .about-section {
    gap: 34px;
  }

  .about-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 270px;
    max-height: 440px;
  }

  .about-content .section-index {
    margin-bottom: 18px;
  }

  .benefits {
    margin-top: 30px;
  }

  .benefits li {
    min-height: 52px;
    padding: 16px 0;
    line-height: 1.45;
  }

  /* Process */
  .process-grid {
    grid-template-columns: 1fr 1fr;
    gap: 34px 18px;
  }

  .process-grid:before {
    display: none;
  }

  .process-step {
    padding-right: 0;
  }

  .process-step p {
    max-width: none;
    line-height: 1.65;
  }

  /* Contact */
  .contact-section {
    width: 100%;
    padding: 72px max(16px, env(safe-area-inset-right)) calc(74px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    gap: 36px;
  }

  .contact-pattern {
    opacity: .08;
    background-size: 160px 160px;
  }

  .contact-copy > p:not(.eyebrow) {
    font-size: 13px;
    line-height: 1.7;
  }

  .contact-actions,
  .contact-links {
    gap: 9px;
  }

  .contact-link {
    justify-content: center;
    padding: 13px 15px;
  }

  .inquiry-form {
    width: 100%;
    padding: 24px 18px;
  }

  .field {
    margin-bottom: 16px;
  }

  .field input,
  .field textarea,
  .field select {
    min-height: 46px;
    font-size: 16px; /* prevents iOS focus zoom */
  }

  .field textarea {
    min-height: 94px;
  }

  /* Footer */
  .site-footer {
    width: calc(100% - 32px);
    padding: 58px 0 calc(24px + env(safe-area-inset-bottom));
  }

  .footer-nav {
    justify-content: flex-start;
    margin-top: 22px;
    gap: 8px;
  }

  .footer-nav a {
    justify-content: center;
    padding: 10px 13px;
  }

  .footer-bottom {
    margin-top: 36px;
    gap: 12px;
  }

  .floating-wa {
    width: 54px;
    height: 54px;
    right: max(15px, env(safe-area-inset-right));
    bottom: max(15px, env(safe-area-inset-bottom));
    box-shadow: 0 0 0 6px rgba(182,255,0,.10), 0 8px 26px rgba(0,0,0,.45);
  }

  /* Lightbox / legal modals */
  .lightbox,
  .modal-backdrop {
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .lightbox-content {
    width: 100%;
  }

  .lightbox-media {
    height: min(58svh, 520px);
  }

  .lightbox-close,
  .lightbox-arrow {
    width: 46px;
    height: 46px;
  }

  .legal-modal {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
}

@media (max-width: 600px) {
  .services-grid,
  .gallery-grid,
  .process-grid {
    grid-template-columns: 1fr !important;
  }

  .service-card,
  .service-card:last-child,
  .project-card,
  .project-card.featured {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .project-card,
  .project-card.featured {
    aspect-ratio: 4 / 3;
  }

  .process-step {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 15px;
    align-items: start;
  }

  .process-step .step-no {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .process-step h3 {
    margin-top: 1px;
    margin-bottom: 9px;
  }
}

@media (max-width: 420px) {
  .site-header {
    height: 64px;
  }

  nav {
    top: 64px;
    max-height: calc(100dvh - 64px);
  }

  .hero {
    padding-top: 90px;
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
  }

  .hero h1 {
    font-size: clamp(35px, 10.7vw, 46px);
  }

  .hero-text {
    font-size: 13px;
    line-height: 1.55;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .button,
  .hero-actions .text-link {
    width: 100%;
    justify-content: center;
  }

  .section {
    width: calc(100% - 28px);
    padding: 62px 0;
  }

  .contact-section {
    padding-left: 14px;
    padding-right: 14px;
  }

  .inquiry-form {
    padding: 22px 16px;
  }

  .footer-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-bottom,
  .footer-bottom div {
    flex-direction: column;
    gap: 9px;
  }
}

/* Short landscape phones: do not force an oversized 100vh hero. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: 620px;
    padding-top: 90px;
    padding-bottom: 42px;
  }

  nav {
    max-height: calc(100dvh - 64px);
  }

  .hero h1 {
    max-width: 14ch;
    font-size: clamp(36px, 7vw, 52px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .marquee-track,
  .floating-wa,
  .step-no {
    animation: none !important;
  }
}
html.page-hidden .marquee-track,
html.page-hidden .floating-wa,
html.page-hidden .step-no {
  animation-play-state: paused !important;
}