/* =========================================================================================
   Locations — page-only composition (loaded after main.css)
     1  hero ........ the statement at the foot, over the locations reel (main.css §10)
     2  serve ....... the ten kinds of building as an index: names in a list, the engraving of the one in turn beside it (main.css §11.2)
     3  map ......... on Night, in white ink (main.css §11.10)
     4  deal ........ what we do (two columns wide) / what you do: two cards that meet, lines ticked off in turn
   ========================================================================================= */

/* 1 · hero: "Serving buildings / across Dallas–Fort Worth." on two lines from 601px up: where the column is narrower
   than the second line at the usual size (it is about 13em long), the type is sized to the column, so no line
   wraps or is cut off. On phones two lines would shrink the words to a caption, so there are three, "Serving
   buildings / across / Dallas–Fort Worth.", sized so the place name (9.1em, kept together) just fits. */
.hero--foot .hero__inner{container-type:inline-size}
.hero--foot .hero__title{max-width:none;font-size:min(clamp(2.75rem,5.6vw,5.25rem),7.3cqi)}
@media (max-width:600px){.hero--foot.hero--video .hero__title{font-size:min(clamp(2.2rem,10.2vw,2.75rem),10.7cqi)}}
/* up to 700px the second line runs (nearly) the full width, so the statement sits clear above the reel's pause button */
@media (max-width:700px){.hero--foot.hero--video .hero__inner{padding-bottom:calc(clamp(1rem,3vh,2rem) + 42px + 1.1rem)}}

/* 2 · serve: the index (main.css §11.2); nothing page-specific but the room under its heading */
.serve .section-head{margin-bottom:clamp(1.6rem,2.8vw,2.6rem)}

/* 4 · deal: the two sides are cards on the band. They come in from opposite edges and meet (one above the other
   below 900px, where they still come from left and right); then each line pops in, in turn, while its tick
   draws itself (the ticks: main.css §11.4, .columns--ticked). A side or a line that never gets its reveal (no JS,
   reduced motion, print) simply stands there, ticked. */
.deal{overflow-x:hidden;overflow-x:clip}
.deal .section-head{margin-bottom:clamp(2.4rem,4.4vw,4rem)}
.deal .columns{column-gap:clamp(1rem,1.8vw,1.8rem);row-gap:clamp(1rem,1.8vw,1.8rem)}
.deal__side{padding:clamp(1.5rem,2.6vw,2.6rem) clamp(1.3rem,2.4vw,2.4rem) clamp(1.3rem,2vw,2rem);background:var(--surface);border:1px solid var(--rule)}
.js .deal__side.reveal{transition:opacity .75s var(--ease),transform 1.2s var(--ease-out)}
.js .deal__side--ours.reveal:not(.is-in){transform:translateX(max(-9vw,-140px))}
.js .deal__side--yours.reveal:not(.is-in){transform:translateX(min(9vw,140px))}
.js .deal .column__item.reveal{transform-origin:0 60%;transition:opacity .4s var(--ease),transform .72s cubic-bezier(.3,1.55,.5,1)}
.js .deal .column__item.reveal:not(.is-in){transform:translateY(18px) scale(.95)}
@media print{.deal__side{border:0;padding-inline:0}}