/* ==========================================================================
   Breakpoint overrides only — component rules live in style.css
   ========================================================================== */

/* Tablet portrait / mobile nav takes over.
   The off-canvas + hamburger treatment only applies once navigation.js has
   actually initialized and added a "js" class to <html> itself. If that
   script never runs (JS disabled, or blocked — e.g. ES modules do not run
   under file://), the nav simply stays in normal document flow instead of
   becoming an unreachable off-screen panel. */
@media (max-width: 768px) {
  .site-header__logo img {
    height: 76px;
    width: 235px;
    object-fit: fill;
  }

  .section-hero {
    align-items: flex-end;
  }

  .section-hero__inner {
    padding-top: calc(var(--header-height) + var(--space-lg));
    padding-bottom: var(--space-3xl);
  }

  .section-hero__heading {
    font-size: clamp(2rem, 10vw, 3.3rem);
  }

  .section-hero__scrim {
    /* Widened so the eyebrow label near the top of the text block (the
       first element painted, therefore furthest into the gradient) still
       sits over a legible backdrop instead of the bare photo. */
    background: linear-gradient(
      to top,
      rgba(247, 246, 242, 0.97) 0%,
      rgba(247, 246, 242, 0.85) 45%,
      rgba(247, 246, 242, 0.5) 70%,
      rgba(247, 246, 242, 0) 92%
    );
  }

  .section-hero__scroll {
    bottom: var(--space-sm);
  }

  .intro__logo-wrap {
    width: clamp(160px, 55vw, 240px);
  }

  .js .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 80vw);
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
    transform: translateX(100%);
    transition: transform var(--duration-fast) ease;
    padding: calc(var(--header-height) + var(--space-lg)) var(--space-lg) var(--space-lg);
    overflow-y: auto;
  }

  .js .site-nav.is-open {
    transform: translateX(0);
  }

  .js .site-nav__list {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .js .nav-toggle {
    display: flex;
  }

  /* About: single column, reordered to number+en / heading / main photo /
     body / sub photos / link — achieved by turning the two column wrappers
     into pass-through boxes so their children become directly orderable
     flex items, with no HTML duplication and no JS. */
  .about__bg-text {
    display: none;
  }

  .about__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xl);
  }

  .about__copy,
  .about__gallery {
    display: contents;
  }

  .about__heading {
    order: 1;
  }

  .about__photo--main {
    order: 2;
  }

  .about__body {
    order: 3;
    margin-top: 0;
  }

  .about__gallery-sub {
    order: 4;
  }

  .about__link {
    order: 5;
    margin-top: 0;
  }

  .about__heading .section-heading__ja {
    font-size: clamp(1.9rem, 8vw, 2.8rem);
  }

  /* Service: single column for the top (heading/intro already in a natural
     stacking order), and each service item collapses to photo-first
     regardless of its desktop mirrored order — same "photo always leads on
     mobile" convention used elsewhere in this project. */
  .service__top {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
  }

  .service-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
  }

  .service-item__media,
  .service-item--demolition .service-item__media,
  .service-item--scaffolding .service-item__media {
    order: -1;
    margin-inline-start: 0;
    margin-top: 0;
    aspect-ratio: 16 / 10;
  }

  .service-item__bg-text {
    display: none;
  }

  .service-item + .service-item {
    margin-top: var(--space-2xl);
    padding-top: var(--space-2xl);
  }

  /* Policy: single column throughout. Unlike About/Service this needs no
     order/display:contents tricks — number, content, and (optional) media
     already sit in that exact source order in the HTML, so collapsing the
     grid to one column naturally produces the required mobile sequence. */
  .policy__top {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
  }

  .policy-item,
  .policy-item--has-media,
  .policy-item--03.policy-item--has-media,
  .policy-item:not(.policy-item--has-media) {
    grid-template-columns: 1fr;
    row-gap: var(--space-md);
    padding-block: var(--space-xl);
  }

  .policy-item__number {
    font-size: clamp(3rem, 18vw, 5.5rem);
  }

  .policy-item__media,
  .policy-item--02 .policy-item__media,
  .policy-item--03 .policy-item__media {
    aspect-ratio: 16 / 10;
    max-width: none;
    margin-inline-start: 0;
  }

  .policy__bg-text {
    display: none;
  }

  /* Works: single column throughout on mobile (2-column grid at desktop). */
  .works__top {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
  }

  .works-grid {
    grid-template-columns: 1fr;
  }

  /* Capabilities: single column throughout. Both .capability--demolition
     and .capability--scaffolding share the same source order (photo →
     label → title → description → list), unlike Service's alternating
     layout, so collapsing the outer 58/42 grid to one column is all
     that's needed — no reorder/display:contents tricks required. */
  .capabilities__top {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
  }

  .capabilities__content {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .capability__bg-text {
    display: none;
  }

  /* Flow: collapses the desktop's 3-column (number / title / description)
     grid down to 2 columns — number rail on the left, with the heading
     (en+title) and body (description+photo) stacked into the single
     remaining column on the right, in that source order. This keeps the
     number+line as a persistent left rail without forcing the number's own
     column to also hold the heading/body (which would leave it far too
     narrow at phone widths). */
  .flow__top {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
  }

  .flow__list {
    --flow-rail: clamp(64px, 20vw, 90px);
  }

  .flow-step {
    padding-block: var(--space-xl);
  }

  .flow-step__content {
    grid-template-columns: var(--flow-rail) 1fr;
    column-gap: var(--space-md);
    row-gap: var(--space-sm);
  }

  .flow-step__heading,
  .flow-step__body {
    grid-column: 2;
  }

  .flow-step__number {
    font-size: clamp(3rem, 16vw, 5rem);
  }

  .flow-step__media--compact,
  .flow-step__media--tall,
  .flow-step__media--wide {
    max-width: none;
  }

  /* Company: single column throughout. Rows collapse to a stacked
     label-then-value layout instead of forcing a cramped side-by-side fit
     at phone widths; long English/license text gets overflow-wrap so it
     never pushes the layout wider than the viewport. */
  .company__top {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
  }

  .company__content {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .company-profile__row {
    grid-template-columns: 1fr;
    row-gap: var(--space-3xs);
    padding-block: var(--space-sm);
  }

  .company-profile__row dd,
  .company-profile__row a {
    overflow-wrap: anywhere;
  }

  /* Contact: single column, sticky guidance disabled (would otherwise
     float indefinitely down a much shorter mobile viewport and risk
     overlapping the footer). Split rows (company+name, tel+email) also
     collapse to one column each. */
  .contact__layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .contact__information {
    position: static;
    top: auto;
  }

  /* Single-column mobile gives this heading full section width, same as
     every other section — the narrow-sidebar override in style.css only
     applies above this breakpoint. */
  .contact__heading .section-heading__ja {
    font-size: var(--fs-h2);
  }

  .contact-form__row--split {
    grid-template-columns: 1fr;
  }

  /* Works modal gallery: 2 per row instead of 3 — three thumbnails at
     phone width read too small to be useful. */
  .works-modal__gallery-image {
    width: calc(50% - var(--space-sm) / 2);
  }
}

/* Small phones */
@media (max-width: 480px) {
  .site-footer__top {
    gap: var(--space-lg);
  }

  .section-hero__links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .about__gallery-sub {
    grid-template-columns: 1fr;
  }

  .about__photo--sub2 {
    margin-top: 0;
  }

  .service-item__list {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .back-to-top {
    right: var(--space-md);
    bottom: var(--space-md);
    width: 44px;
    height: 44px;
  }

  .back-to-top__label {
    display: none;
  }
}