/* Feroz Taj · phone layer, v1 (v16, 2026-09-24). Loaded after the page's own styles.
   1. The phone hero film (html.m-film, set by ft-hero-mobile.v1.js): one screen, pinned for three,
      the film filling the space between the bar and the copy, the copy fixed underneath.
   2. A type floor on phones: tracked caps at 10 to 11px become 12px, with tighter tracking.
   3. The areas list stacks its note under the name instead of squeezing it alongside. */

/* The phone film's own elements exist only while it runs, and show only then */
.film .m-canvas,.film .m-chip,.film .m-bar{display:none}

/* Phones never load the desktop video or its 2560px poster */
@media (max-width: 767px){
  html .film video{display:none!important}
}

/* 1. Phone hero film */
@media (max-width: 767px){
  html.static.m-film .hero{height:300svh}
  html.static.m-film .hero .stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding-top:var(--bar);padding-bottom:calc(var(--m-dock,0px) + 14px);box-sizing:border-box}
  html.static.m-film .film{position:relative;flex:1 1 0;min-height:200px;aspect-ratio:auto;height:auto;overflow:hidden;background:#d9d4cc}
  html.static.m-film .film .m-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  html.static.m-film .film .m-chip,html.static.m-film .film .m-bar{display:block}
  html.static.m-film .film .poster{object-position:50% 50%}
  html.static.m-film .film.m-ready .poster{opacity:0}
  html.static.m-film .hero .title{padding-top:20px}
  html.static.m-film .hero .arrive{padding-top:12px}
  html.static.m-film .hero .arrive p{font-size:18px;line-height:1.3}
  html.static.m-film .hero .arrive small{margin-top:10px}
  html.static.m-film .rail{padding-top:10px}
  .m-chip{position:absolute;left:12px;bottom:14px;z-index:2;padding:6px 10px;background:rgba(18,18,18,.62);color:#fff;font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;border-radius:2px}
  .m-bar{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;background:var(--persimmon);transform-origin:left;transform:scaleX(0)}
}
@media (max-width: 767px) and (max-height: 700px){
  html.static.m-film .hero h1{font-size:clamp(44px,15vw,64px)}
  html.static.m-film .hero .arrive p{font-size:16px}
  html.static.m-film .hero .title{padding-top:14px}
  html.static.m-film .hero .arrive{padding-top:8px}
  html.static.m-film .rail{padding-top:6px}
}

/* 2. Type floor on phones */
@media (max-width: 767px){
  html body .cap,html body .areas li small,html body .direct span,html body .inquiry .f,html body .intent legend,
  html body .profile small,html body .v-foot .v-meta,html body td.addr small,html body th,html body .corr cite,
  html body .creds dt,html body .grow .pre .idx,html body .hero .arrive small,html body .label .no,html body .label p,
  html body .press li::before,html body .rail,html body .run .runhead h2 .idx,html body .run .runhead span,
  html body .split .pin .idx,html body .v-count,html body .viewer button,html body footer .affil b,html body .cols3 a,
  html body .corr a.more,html body .eyebrow,html body .hero .above,html body .inquiry [data-note],html body td.n,
  html body footer .fnav,html body .mast nav a.inq{font-size:12px;letter-spacing:.08em}
  html body .agency{font-size:11px;letter-spacing:.1em}
  html body footer{font-size:12px;letter-spacing:.05em}
  html body .dock a{font-size:12.5px;letter-spacing:.1em}
  html body .inquiry button{font-size:12.5px;letter-spacing:.12em}
}

/* The kicker above the name stays on one line on narrow phones */
@media (max-width: 400px){
  html body .hero .above{letter-spacing:.03em}
}

/* 3. Areas list on phones */
@media (max-width: 767px){
  html body .areas li{flex-direction:column;align-items:flex-start;gap:4px}
  html body .areas li small{text-align:left}
}