@media (max-width: 1120px) and (min-width: 821px) {
  .story-site { grid-template-columns: minmax(0, 55%) minmax(390px, 45%); }
  .story-nav::after { width: 55%; }
  .story-hero { padding-inline: 40px; }
  .story-hero h1 { font-size: clamp(64px, 8vw, 88px); }
  .start-dock { width: 45%; }
  /* The map column bottoms out at 390px here. The mode row plus the zoom column
     plus two insets wanted 417px, so the two instruments collided by up to 14px.
     Tighten the row instead of dropping Reset view: every control survives and
     the corner stays square because both axes read the same inset. */
  .story-map { --map-edge-inset: 18px; }
  .map-button { padding-inline: 7px; letter-spacing: 0.08em; }
  .map-controls { gap: 8px; }
  .map-control-set { gap: 6px; }
}

/* A phone in landscape gives the hero a box far wider than the 9:16 cut, so the
   crop eats the height rather than the sides: the centred rule left 16% of him
   showing at 667x375. Scoped to the portrait cut, because these coordinates
   describe that file and mean nothing against the wide one. */
@media (orientation: landscape) and (max-height: 500px) {
  .story-hero__video[data-cut="portrait"] { object-position: 63% 68%; }
}

@media (max-width: 820px) {
  .story-site {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 100dvh;
    min-height: 100dvh;
    padding-bottom: 0;
  }

  .story-nav {
    height: calc(64px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0;
    background: linear-gradient(180deg, rgba(15, 14, 13, 0.72), transparent);
  }
  .story-nav::after { display: none; }
  .story-identity { gap: 1px; }
  .story-identity .brand__name { font-size: 18px; }
  .story-identity .brand__role { display: block; font-size: 9px; }
  .story-nav__actions { display: none; }

  .story-hero { min-height: 100dvh; padding: 0; }
  .story-map { display: none; }

  .story-hero::before { background-image: url("/assets/media/home/philip-hero-mobile-start.webp"); background-position: center; }
  /* A portrait 9:16 cut on a 9:19.5 phone loses about 90px off the sides, and
     every phone loses a different amount. Anchoring the crop at 50% pivots on
     the middle of the file, so the subject drifts toward an edge as the screen
     gets taller. He measures at 62.7% across the closing frame, so the crop
     pivots there instead: he now sits at the same place in the frame whatever
     shape the phone is, and only the sky around him changes. */
  .story-hero__video { object-position: 63% 68%; }
  .story-hero::after {
    background: linear-gradient(180deg, rgba(15, 14, 13, 0.28), transparent 26%), linear-gradient(0deg, rgba(15, 14, 13, 0.76), transparent 38%);
  }
  .story-hero__copy { display: none; }

  .mobile-entry {
    position: absolute;
    z-index: 610;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
  }

  .mobile-entry__open {
    width: min(calc(100% - 32px), 360px);
    min-height: 58px;
    border: 1px solid rgba(242, 238, 231, 0.72);
    border-radius: 0;
    background: rgba(16, 15, 14, 0.9);
    backdrop-filter: blur(18px) saturate(1.08);
    color: var(--story-paper);
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 520;
    letter-spacing: -0.02em;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 180ms var(--story-ease-out), transform 180ms var(--story-ease-out), background-color 180ms var(--story-ease-out);
  }

  .mobile-entry__open:focus-visible,
  .mobile-site-menu a:focus-visible,
  .mobile-site-menu button:focus-visible {
    outline: 2px solid var(--story-accent-soft);
    outline-offset: -3px;
  }

  .mobile-site-menu {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(242, 238, 231, 0.34);
    background: rgba(16, 15, 14, 0.9);
    backdrop-filter: blur(24px) saturate(1.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
    visibility: hidden;
    transition: opacity 220ms var(--story-ease-out), transform 220ms var(--story-ease-out), visibility 0s linear 220ms;
  }

  .mobile-site-menu__head {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .mobile-site-menu__head strong {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 480;
  }

  .mobile-site-menu__head button {
    min-width: 54px;
    min-height: 44px;
    border: 0;
    background: none;
    color: rgba(242, 238, 231, 0.72);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .mobile-site-menu__links {
    display: grid;
    margin-top: 8px;
    border-top: 1px solid rgba(242, 238, 231, 0.18);
  }

  .mobile-site-menu__links a {
    position: relative;
    display: flex;
    min-height: 64px;
    align-items: center;
    border-bottom: 1px solid rgba(242, 238, 231, 0.18);
    color: var(--story-paper);
    font-family: var(--serif);
    font-size: 27px;
    font-weight: 440;
    letter-spacing: -0.03em;
    pointer-events: auto;
  }

  .mobile-site-menu__links a::after {
    position: absolute;
    right: 2px;
    color: var(--story-accent-soft);
    content: "→";
    font-family: var(--sans);
    font-size: 18px;
  }

  .mobile-site-menu__brokerage {
    display: block;
    max-width: 48ch;
    padding: 14px 2px 2px;
    color: rgba(242, 238, 231, 0.74);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 560;
    letter-spacing: 0.025em;
    line-height: 1.45;
  }

  .story-site.is-mobile-menu-open .mobile-entry__open {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
  }

  .story-site.is-mobile-menu-open .mobile-site-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .story-site[data-mobile-menu-no-motion] .mobile-entry__open,
  .story-site[data-mobile-menu-no-motion] .mobile-site-menu { transition: none; }

  /* .start-dock is display:none below 820px, so the 76px reserve it earns at
     desktop would strand the controls above empty map. Zero the reserve and let
     the one inset hold the corner on both axes. */
  .story-map { --map-dock-h: 0px; --map-edge-inset: 10px; }
  .map-bar { top: 10px; right: auto; left: 10px; max-width: calc(100% - 20px); display: block; }
  .map-title { width: auto; min-height: 44px; align-items: flex-start; padding-top: 5px; font-size: 19px; line-height: 0.95; }
  .map-controls { top: auto; right: auto; gap: 8px; }
  .map-control-set { gap: 6px; }
  .map-button { min-width: 34px; min-height: 34px; padding: 0 8px; font-size: 8px; letter-spacing: 0.04em; }
  .map-button--zoom { padding: 0; font-size: 18px; letter-spacing: 0; }
  .map-reset { display: none; }
  .map-credit { top: auto; right: 8px; bottom: calc(var(--map-dock-h) + 4px); left: auto; }

  .start-dock {
    display: none;
  }

  .start-choice { padding: 0 16px; }
  .start-choice b { font-size: 20px; }

  /* The deck is the whole screen on a phone. Sizing it to its content and
     pinning it to the bottom edge killed the empty band under the actions but
     traded it for a bigger one: the whole top of the screen went black above
     the head. Full bleed has no band on either side of the content. */
  .intake-deck {
    --deck-head-h: calc(92px + env(safe-area-inset-top));
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    inset: 0;
  }
  /* Two rows: the site header, then which file this is. */
  .deck-head {
    height: var(--deck-head-h);
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: 42px 44px;
    align-content: center;
    gap: 0 9px;
    padding: env(safe-area-inset-top) 9px 0 14px;
  }
  .deck-brand { grid-area: 1 / 1 / 2 / 2; align-self: center; justify-self: start; }
  .deck-brand::after { display: none; }
  .deck-brand .brand__name { font-size: 16px; }
  /* The close box is 40px in a column "Add details" widens to 92px, so it sat
     52px short of the edge and stair-stepped against the control below it. */
  .deck-close { grid-area: 1 / 3 / 2 / 4; align-self: center; justify-self: end; width: 40px; min-height: 40px; }
  .deck-mark { grid-area: 2 / 2 / 3 / 3; width: 32px; height: 32px; }
  .deck-name { grid-area: 2 / 3 / 3 / 4; justify-self: end; }
  .deck-name strong { font-size: 15px; text-align: right; }
  .detail-toggle { display: none; }
  .deck-progress { top: var(--deck-head-h); }
  /* Rows were percentages of a full-viewport card. The media row needs a real
     height of its own or it collapses, since its layers are absolutely
     positioned. */
  .deck-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - var(--deck-head-h)); }
  .deck-media { min-height: 124px; }
  .media-layer::after { background: linear-gradient(0deg, rgba(16, 15, 14, 0.78), transparent 72%); }
  .deck-screen { min-height: 100%; padding: 14px 15px 12px; }
  .deck-screen h2 { margin-block: auto 14px; }
  .deck-screen h2 { font-size: clamp(32px, 9vw, 44px); }
  .screen-copy { margin: 9px 0 14px; font-size: 14px; }
  .choice-grid, .choice-grid[data-columns="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* Everything is two columns here, so the odd tile out spans the row. */
  .choice-grid .choice:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-left: 2px solid var(--story-accent-soft);
    background: linear-gradient(90deg, rgba(200, 148, 104, 0.09), #1b1916 42%);
  }
  .choice { min-height: 72px; padding: 15px 32px 15px 15px; font-size: 15px; }
  .choice::after { top: 13px; right: 12px; }
  .field-grid { grid-template-columns: 1fr; }
  .field.is-full { grid-column: auto; }
  .field label { font-size: 13px; }
  .field input, .field textarea { min-height: 56px; padding: 13px; font-size: 16px; }
  .field textarea { min-height: 68px; }
  .review-item { min-height: 62px; padding: 10px; }
  .review-item span { font-size: 16px; }
  .screen-actions { grid-template-columns: 74px minmax(0, 1fr) 104px; gap: 9px; margin-top: auto; padding-top: 14px; }
  .back-button, .continue-button { min-height: 44px; padding: 0 10px; font-size: 10px; }
  .field.is-range { gap: 0 10px; }
  .range-readout { font-size: 14px; }
  .screen-count { font-size: 10px; }
  .file-reference { padding: 14px; }
  .saved-actions { grid-template-columns: 1fr 1fr 78px; }
  .saved-actions .back-button, .saved-actions .continue-button, .saved-actions .handoff-button { padding-inline: 8px; font-size: 8px; }
}

@media (max-width: 390px) {
  .story-hero { padding: 0; }
  .story-map { --map-edge-inset: 8px; }
  .map-bar { right: auto; left: 8px; max-width: calc(100% - 16px); }
  .map-title { width: auto; font-size: 17px; }
  .map-controls { right: auto; }
  .map-credit { right: 8px; left: auto; }
  .map-button { min-width: 32px; padding-inline: 6px; }
  .start-choice { padding-inline: 13px; }
  .start-choice b { font-size: 18px; }
  .deck-screen h2 { font-size: 30px; }
  .field-grid { grid-template-columns: 1fr; }
  .field.is-full { grid-column: auto; }
  .screen-actions { grid-template-columns: 68px minmax(0, 1fr) 96px; }
  .saved-actions { grid-template-columns: 1fr 1fr; }
  .saved-actions .back-button { grid-column: 1 / -1; }
}

@media (max-height: 760px) {
  .mobile-site-menu__links a { min-height: 56px; font-size: 24px; }
  .deck-screen { padding-top: 15px; }
  .deck-screen h2 { font-size: clamp(31px, 8vw, 48px); }
  .screen-copy { margin-bottom: 10px; }
}

/* The deck only stacks into rows below 820px. This row template used to sit in
   a height-only query, so a wide-but-short screen kept the two-column desktop
   layout and got mobile rows on top of it: the panel landed in a 15% row, 48px
   tall, and the heading and the choice buttons piled onto each other. */
@media (max-width: 820px) and (max-height: 760px) {
  /* Percentage rows resolved against a full-viewport card. The card sizes to
     its content now, so the media band is trimmed directly instead. */
  .deck-media { min-height: 104px; }
}

@media (max-width: 820px) {
  .story-hero__video { transition: opacity 160ms var(--story-ease-out); }
  .screen-actions {
    position: sticky;
    bottom: -12px;
    z-index: 3;
    align-self: stretch;
    padding: 14px 0 calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(0deg, var(--story-ink) 78%, transparent);
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "meta meta" "back next";
    gap: 10px;
  }
  .screen-actions .back-button { grid-area: back; }
  .screen-actions .screen-meta { grid-area: meta; width: 100%; }
  .screen-actions .continue-button { grid-area: next; }
  .screen-actions .detail-switch { width: 100%; min-height: 46px; }
}

@media (max-width: 820px) {
  .detail-switch { font-size: 10px; }
}