/* digital-marketing.css: the Digital marketing page's own placing (plan.md, "Digital marketing"). Every component and
   token comes from components.css and system.css; this file only places and sizes the page's parts. */

/* ---------- #top: the town at sunset bleeding off the left edge, the map card overhanging its right edge onto the
   ivory; the copy and the picker on the right ---------- */
.dm-top { position: relative; padding-top: clamp(0.75rem, 1.5vw, 1.75rem); }
.dm-top__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 31rem); grid-template-areas: "media copy" "media pick"; column-gap: 11rem; row-gap: var(--space-4); padding-right: max(var(--gutter), (100% - var(--max-w)) / 2); }
.dm-top__copy { grid-area: copy; align-self: end; display: grid; gap: var(--space-3); padding-top: 2.4rem; }
.dm-top h1 { font-size: clamp(2.2rem, 1.2rem + 2.1vw, 3.3rem); max-width: 14ch; }
.dm-top__line { font-size: var(--fs-lead); color: var(--c-ink-soft); max-width: 29rem; }
.dm-top__picker { grid-area: pick; align-self: start; margin: 28px 0 0; }
.dm-top__media { grid-area: media; position: relative; height: clamp(600px, calc(100vh - var(--header-h) - 2.25rem), 800px); }
/* the footage's own box: rounded on the right, the clip 1 px past each side (kit.md, "Video") */
.dm-top__clip { position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: 0 var(--radius-l) var(--radius-l) 0; background: var(--c-ink); box-shadow: var(--shadow-l); }
.dm-top__clip video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: var(--pos); }
/* the map card hangs about a quarter of its width past the footage's right edge; its box is large enough for the
   card's whole shadow (the scene clips at its box), and lets every tap through to the picker */
.dm-top__media .dm-top__map { position: absolute; z-index: 3; top: auto; bottom: 2%; left: auto; right: -165px; width: 540px; height: 640px; pointer-events: none; }
.dm-top__stop { left: 16px; right: auto; top: 16px; }
@media (max-width: 1180px) {
  .dm-top__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "media" "pick"; padding-right: 0; row-gap: var(--space-4); }
  .dm-top__copy { padding: 1.5rem var(--gutter) 0; }
  .dm-top h1 { max-width: 18ch; }
  .dm-top__media { height: clamp(580px, 62vw, 680px); margin-right: var(--gutter); }
  .dm-top__media .dm-top__map { right: auto; left: calc(50% - 270px); bottom: 0; }
  .dm-top__picker { margin-inline: var(--gutter); max-width: 40rem; }
}
@media (max-width: 760px) {
  /* the sky and the low sun above, the map card (487 px tall) over the rest of the town; at 590 px the clip's
     960 px poster is drawn under 1.1 times its size */
  .dm-top__media { height: 590px; }
  /* the map's box the screen's whole width, so its card is 358 px wide at 390 */
  .dm-top__media .dm-top__map { left: 0; right: calc(-1 * var(--gutter)); width: auto; bottom: 0; height: 500px; }
  .dm-top__stop { top: 12px; left: 12px; }
}

/* the choice pictures' own answers: a results row rising to the top, a compass needle settling */
.choice .pic-top, .choice .pic-down, .choice .pic-needle { transition: transform var(--dur-med) var(--ease-out); }
.choice:has(input:checked) .pic-top { transform: translateY(-11px); }
.choice:has(input:checked) .pic-down { transform: translateY(5px); }
.choice .pic-needle { transform: rotate(40deg); }
.choice:has(input:checked) .pic-needle { transform: rotate(0deg); }

/* ---------- #looking: the neighborhood's searches flying into the roofer's pin, on the ivory ---------- */
.looking__k { right: -10%; top: -12%; }
.looking .head { margin-bottom: var(--space-5); }
.looking__stage { position: relative; width: min(100%, 1040px); aspect-ratio: 820 / 520; margin-inline: auto; }
.looking__stage .looking__scene { position: absolute; inset: 0; }
.looking__stop { top: 14px; right: 14px; }
@media (max-width: 600px) {
  .looking__stage { aspect-ratio: auto; height: 560px; }
  /* the count's card spans the top: the stop icon goes just above the stage's top right corner */
  .looking__stop { top: -46px; right: 0; }
}

/* ---------- #ads: the crew on the roof, the dark panel over the open sky on the right ---------- */
.ads .head { margin-bottom: var(--space-5); }
.ads__stage { aspect-ratio: 2 / 1; }
.ads__stage .ads__photo { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 50% 0%; }
.ads__stage::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(13 27 51 / 0) 38%, rgb(13 27 51 / 0.32) 56%, rgb(13 27 51 / 0.66) 100%); }
.ads__stage .ads__scene { position: absolute; z-index: 2; top: 0; bottom: 0; left: auto; right: 3%; width: min(480px, 44%); }
@media (max-width: 1000px) { .ads__stage { aspect-ratio: 3 / 2; } .ads__stage .ads__scene { width: min(480px, 52%); right: 1%; } }
@media (max-width: 760px) {
  /* the hammering roofer at the top, the panel over the roof below him */
  .ads__stage { aspect-ratio: auto; height: 600px; }
  .ads__stage .ads__photo { object-position: 10% 0%; }
  .ads__stage::after { background: linear-gradient(180deg, rgb(13 27 51 / 0) 16%, rgb(13 27 51 / 0.45) 32%, rgb(13 27 51 / 0.8) 100%); }
  .ads__stage .ads__scene { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 470px; }
}

/* ---------- #area: the signature, the drawn Fairview on the ivory ---------- */
.area__k { left: -12%; bottom: -16%; }
/* the head and the whole map fit one screen at 1440 x 900 */
.area { padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.area .head { margin-bottom: var(--space-4); }
.area__stage { position: relative; width: min(100%, 980px); aspect-ratio: 1000 / 580; margin-inline: auto; }
.area__stage .area__scene { position: absolute; inset: 0; }
.area__stop { top: 10px; right: 10px; }
@media (max-width: 600px) {
  .area__stage { aspect-ratio: auto; height: 580px; }
  /* the search spans the top: the stop icon goes just above the stage's top right corner */
  .area__stop { top: -46px; right: 0; }
}

/* ---------- #sees: the roofer reading his month on his phone, the report in glass beside him ---------- */
.sees__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
/* the button with its line under it, so the headline keeps two lines beside it */
.sees__cta { flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.sees__pic { position: relative; }
.sees__stage { aspect-ratio: 2 / 1; }
.sees__stage img { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-position: 30% 40%; }
/* the card's shadow falls on the photo past the scene's box (its tokens drop only inside the card) */
.sees__pic .sees__scene { position: absolute; z-index: 3; top: calc(50% - 240px); bottom: auto; left: auto; right: 3%; width: min(620px, 52%); height: 480px; overflow: visible; }
.sees__stop { top: 14px; left: 14px; right: auto; }
@media (max-width: 900px) { .sees__head { grid-template-columns: 1fr; } .sees__cta { align-items: flex-start; } }
@media (max-width: 760px) {
  /* the photo tall, his face above; the report over its lower half and past its foot onto the ivory */
  .sees__pic { padding-bottom: 305px; }
  .sees__stage { aspect-ratio: auto; height: 760px; }
  .sees__stage img { object-position: 30% 50%; }
  .sees__pic .sees__scene { top: 425px; left: 0; right: 0; width: auto; height: 640px; }
  /* the stop icon just above the report's top right corner, right of his face, so both fit one view */
  .sees__stop { left: auto; right: 12px; top: 379px; }
}

/* ---------- #everywhere: the roofer's details landing the same everywhere, on the deeper ivory ---------- */
.everywhere__k { right: -12%; bottom: -14%; }
.everywhere .head { margin-bottom: var(--space-5); }
.everywhere__stage { position: relative; width: min(100%, 1000px); height: clamp(500px, 56vw, 560px); margin-inline: auto; }
.everywhere__stage .everywhere__scene { position: absolute; inset: 0; }
/* the stop icon just above the stage's top right corner, clear of the cards */
.everywhere__stop { top: -48px; right: 0; }
@media (max-width: 700px) { .everywhere__stage { height: 700px; } }

/* ---------- #close: the job won at her door; the photo and the pen's loop share one geometry ---------- */
/* the photo keeps its own aspect, covering the band's media box from its foot (its left edge on the computer); the
   scene's host lies on the same box above the navy wash, so the loop stays round the handshake at every width */
.dm-close .close-band__media, .dm-close__over { container-type: size; overflow: hidden; }
.dm-close__over { position: absolute; inset: -1px -1px -1px 34%; pointer-events: none; }
.dm-close__photo, .dm-close__frame { position: absolute; left: 0; bottom: 0; width: max(100%, 100cqh * 2752 / 1536); aspect-ratio: 2752 / 1536; }
.dm-close__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.dm-close .dm-close__scene { position: absolute; inset: 0; }
@media (max-width: 1239px) {
  /* the photo as a strip on top, the words under it */
  .dm-close { --dm-strip: clamp(380px, 54.7vw, 562px); }
  .dm-close .close-band__media, .dm-close__over { inset: -1px -1px auto -1px; height: calc(var(--dm-strip) + 1px); }
  .dm-close__photo, .dm-close__frame { left: 50%; translate: -50% 0; }
  .dm-close.close-band--side::before { background: linear-gradient(180deg, rgb(13 27 51 / 0.1) 0%, rgb(13 27 51 / 0.2) calc(var(--dm-strip) - 80px), var(--c-ink) calc(var(--dm-strip) + 6px)); }
  .dm-close.close-band--side .close-band__in { padding-top: calc(var(--dm-strip) + 2.5rem); }
  .dm-close.close-band--side .stop { top: 12px; right: 12px; bottom: auto; }
}
@media (max-width: 600px) {
  /* the card sits at the strip's top right: the stop goes to its top left, above his cap */
  .dm-close.close-band--side .stop { left: 12px; right: auto; }
}