/* Round 4 (2026-09-28): separate pages. The header menu, the service pages, More services,
   the scoop and the splash. Loaded after white.css; the type and the colors are round 3's. */

/* ---------- header: the Services menu ---------- */
.site-head { grid-template-columns: 1fr auto auto; grid-template-areas: "brand menu call" "tag tag tag"; column-gap: 10px; }
.menu-btn { grid-area: menu; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 13px; border-radius: 999px; border: 2px solid var(--blue); background: #FFFFFF; color: var(--blue); font: 800 14px/1 "Archivo"; font-stretch: 100%; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.menu-btn[aria-expanded="true"] { background: var(--blue); color: #FFFFFF; }
.nav { position: absolute; left: 0; right: 0; top: 100%; background: #FFFFFF; border-bottom: 4px solid var(--blue); box-shadow: 0 30px 60px rgba(0, 25, 80, .16); max-height: calc(100svh - var(--head)); overflow-y: auto; }
.nav-list { list-style: none; padding: 6px var(--g) 14px; }
.nav-list li { border-bottom: 1px solid var(--line); overflow: hidden; }
.nav-list li:last-child { border-bottom: 0; }
.nav-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; text-decoration: none; color: var(--blue); }
.nav-list .nn { font-weight: 900; font-stretch: calc(var(--wd, 62) * 1%); text-transform: uppercase; font-size: 30px; line-height: .9; padding: 6px 0; }
.nav-list [aria-current="page"] .nn { color: var(--ink); }
.nav-list .ar { flex: none; }
.nav-list .nq a { color: var(--ink); }

/* a link that carries an arrow instead of the chevron */
.more-btn .ar { width: 18px; height: 18px; }
a.more-btn { text-decoration: none; }
a.more-btn::after { display: none; }
.pg .more-btn, .home a.more-btn { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--ink); font: 800 14px/1 "Archivo"; font-stretch: 100%; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; padding: 0; margin-top: 6px; }
.tp-concrete a.more-btn { color: #FFFFFF; }
.pg .more-btn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }

/* ---------- the service pages ---------- */
.pg main { overflow: clip; }
.pg .caps .w { display: block; --wd: 62; font-stretch: calc(var(--wd) * 1%); }
.pg-hero { position: relative; min-height: 100svh; padding: calc(var(--head) + 18px) 0 28px; display: flex; flex-direction: column; }
.pg-head { position: relative; z-index: 3; padding: 0 var(--g); }
.pg-h1 { font-size: min(76px, 19.4vw); color: var(--blue); -webkit-text-stroke: .09em #FFFFFF; paint-order: stroke fill; }
.pg-h1 .w { white-space: nowrap; }
.pg .tag { display: inline-block; margin-bottom: 12px; font: 800 13px/28px "Archivo"; font-stretch: 100%; letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: #FFFFFF; padding: 0 10px; }
.pg .sub { margin-top: 12px; font-size: min(30px, 7.8vw); color: var(--ink); }
.pg-hero .hero-ctas { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; padding: 0 var(--g); }
.pg .lead { font-size: 19px; line-height: 1.42; color: var(--ink); max-width: 34ch; }
.pg .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pg .chip { background: #FFFFFF; }
.pg .chip-link { gap: 6px; text-decoration: none; background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.pg .chip-link .ar { width: 16px; height: 16px; }
.pg section { position: relative; }

/* the visual under each page title: full bleed, the title crossing its top edge */
.pg-visual, .wash-stage, .yard-stage, .pg-film { position: relative; margin-top: -28px; width: 100%; flex: 1 1 auto; min-height: 58svh; overflow: hidden; }
.wash-stage canvas, .yard-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pg-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* roof: Matt's cut-out roof rises in under the title */
.pg-roof .pg-cut { position: relative; margin: 6px 0 0 -18vw; width: 150vw; z-index: 1; will-change: transform; }
.pg-roof .pg-cut img { width: 100%; height: auto; }
.pg-roof .hero-ctas { order: -1; }
.pg-roof { padding-bottom: 0; }
.pg-roof .pg-head { order: -2; }

/* roof: Matt's question over his own photo of the tile rows */
.pg-ask { min-height: 100svh; overflow: hidden; }
.ask-photo { position: absolute; inset: 0; }
.ask-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.ask { position: absolute; left: var(--g); right: var(--g); bottom: 48px; z-index: 2; font-size: min(40px, 10.3vw); }
.ask .sl { display: block; width: fit-content; max-width: 100%; background: #FFFFFF; color: var(--blue); padding: .1em .22em .04em; line-height: .96; margin-top: 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ask .sl-b { background: var(--blue); color: #FFFFFF; }

/* roof: what moss does under the tiles */
.pg-under { padding: 48px 0 30px; }
.cut-stage { position: relative; width: 100%; aspect-ratio: 1; }
.cut-stage video, .cut-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.steps { list-style: none; padding: 0 var(--g); margin-top: -8px; font-size: min(34px, 8.8vw); color: var(--blue); }
.steps li { display: block; width: fit-content; max-width: 100%; margin-top: 4px; padding: .08em .2em .02em; line-height: .96; transition: background-color .3s, color .3s; }
.steps li.on { background: var(--blue); color: #FFFFFF; }
.pg-why { padding: 26px var(--g) 56px; display: grid; gap: 16px; background: var(--tint); }

/* gutter cleaning, its own page from round 5: GUTTER is a window into Matt's clip, the scoop and buckets below it */
.pg-gut .gwin { position: relative; flex: none; height: calc(min(118px, 30vw) * .8 * 2.15 + 10px); overflow: hidden; }
.pg-gut .gwin video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.pg-gut .gk { position: absolute; inset: 0; background: #FFFFFF; color: #000000; mix-blend-mode: screen; }
.pg-gut .gk span { position: absolute; left: calc(var(--g) - 3px); top: 5px; font-size: min(118px, 30vw); line-height: .8; transform-origin: 0 0; transform: scaleY(2.15); white-space: nowrap; }
.pg-gut .pg-head { margin-top: 8px; }
.pg-gut .scoop { flex: none; align-self: center; width: min(100%, 520px); margin: -56px 0 0; }
.pg-gutter { padding: 44px var(--g) 56px; background: var(--tint); }
.pg-gutter .copy { position: relative; z-index: 3; }
.pg-gutter .lead { font-size: 19px; }
.pg-gutter .fig { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 22px; font-size: 16px; line-height: 1.38; color: var(--blue); }
.pg-gutter .flip { font-size: 84px; }

/* the scoop tips Matt's clump into the third of three buckets (round 5): one Blender scene on white, so the scoop
   hides the clump where it should; multiply melts its white into the page */
.scoop { position: relative; width: 100%; aspect-ratio: 1; margin: 0; pointer-events: none; mix-blend-mode: multiply; }
.scoop video { display: block; width: 100%; height: 100%; object-fit: contain; }
/* the home page's gutter panel (round 5b): a still of Matt's gutter clip in the scoop's place, whole, with no words over
   it. On phones there is no room for it beside the GUTTER window, so it takes the window's place and the panel stacks:
   the picture gets what the words leave, down to the keep-swiping cue (Tony, 2026-09-29) */
.tp-gutter .gpic { margin: 0; }
.tp-gutter .gpic img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left top; }
.tp-gutter .name .gw { display: none; }
@media (max-width: 899px) {
  .tp-gutter { display: flex; flex-direction: column; padding: calc(var(--head) + 8px) 0 calc(64px + env(safe-area-inset-bottom)); }
  .tp-gutter .gwin { display: none; }
  .tp-gutter .gpic { position: relative; flex: 1 1 0; min-height: 0; margin: 0 var(--g); }
  .tp-gutter .copy { position: relative; top: auto; left: auto; right: auto; flex: none; margin: 14px var(--g) 0; }
  .tp-gutter .name { font-size: min(44px, 11.3vw); }
  .tp-gutter .name .w { display: inline-block; }
  .tp-gutter .name .gw { display: inline-block; margin-right: .24em; }
}

/* pressure washing: CONCRETE is Matt's clip */
.pg-press .pg-film { min-height: 62svh; }
.pg-ba { padding: 0 0 40px; }
.pg-ba .media { position: relative; height: 70svh; overflow: hidden; }
.pg-ba .media img { width: 100%; height: 100%; object-fit: cover; }
.pg-ba .ba { position: absolute; top: 40%; z-index: 3; margin: 0; height: 28px; font: 800 13px/28px "Archivo"; font-stretch: 100%; letter-spacing: .14em; text-transform: uppercase; padding: 0 10px; background: var(--ink); color: #FFFFFF; }
.pg-ba .ba-a { left: var(--g); }
.pg-ba .ba-b { right: var(--g); }
.pg-ba .copy { padding: 22px var(--g) 0; display: grid; gap: 14px; }
.pg-photo { height: 90svh; overflow: hidden; }
.pg-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* fence: the slider is the hero */
.pg-fence .pair { position: relative; margin-top: -24px; width: 100%; aspect-ratio: 4 / 3.3; overflow: hidden; touch-action: pan-y; cursor: ew-resize; -webkit-user-select: none; user-select: none; --x: 100%; }
.pg-fence .pair img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-fence .pair .after { clip-path: inset(0 0 0 100%); }
.pg-fence .pair .edge { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(22, 22, 22, .2); }
.pg-fence .knob { position: absolute; left: var(--x); top: 58%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff, 0 10px 24px rgba(0, 22, 75, .36); z-index: 4; }
.pg-fence .pair .tag { position: absolute; top: 44px; margin: 0; z-index: 3; }
.pg-fence .t-b { left: var(--g); }
.pg-fence .t-a { right: var(--g); }
.pg-fcopy { padding: 30px var(--g) 44px; display: grid; gap: 16px; }
.pg-safe { background: var(--blue); overflow: hidden; display: flex; flex-direction: column; padding-top: 52px; }
.safe-photo { position: relative; height: 46svh; margin-top: 34px; overflow: hidden; }
.safe-photo img { width: 100%; height: 100%; object-fit: cover; }
.safe { position: relative; z-index: 2; margin: 0 var(--g); font-size: min(42px, 10.8vw); line-height: .92; color: #FFFFFF; }
.safe .hl { background: linear-gradient(#FFFFFF, #FFFFFF) no-repeat 0 0 / 100% 100%; color: var(--blue); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* solar: the dry-season meter and the cited study */
.pg-explain { padding: 40px var(--g) 50px; display: grid; gap: 16px; }
.meter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.meter p { border-top: 4px solid var(--blue); padding-top: 8px; }
.meter .k { display: block; font: 800 13px/1.2 "Archivo"; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.meter .v { display: block; margin-top: 6px; font-size: min(64px, 16.4vw); color: var(--blue); font-variant-numeric: tabular-nums; }
.pg .fact { font-size: 17px; line-height: 1.42; color: var(--ink); max-width: 36ch; }
.pg .cite { font-size: 13px; letter-spacing: .02em; color: var(--muted); }
.pg-method, .pg-opts { padding: 30px var(--g) 50px; display: grid; gap: 16px; background: var(--tint); }

/* ---------- More services: a second path to every page ---------- */
.s-more { position: relative; padding: calc(var(--head) + 18px) 0 36px; background: #FFFFFF; }
.pg .s-more { padding-top: 48px; border-top: 4px solid var(--blue); }
.more-h { padding: 0 var(--g); font-size: min(54px, 13.8vw); color: var(--blue); }
.s-more .bar { display: block; width: 72px; height: 6px; margin: 16px var(--g) 0; background: var(--blue); transform-origin: 0 50%; }
.more-list { list-style: none; margin-top: 18px; padding: 0 var(--g); }
.more-list li { border-top: 1px solid var(--line); }
.more-list li:last-child { border-bottom: 1px solid var(--line); }
.more-list a { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 14px; min-height: 100px; padding: 8px 0; text-decoration: none; color: var(--blue); }
.more-list .th { display: block; width: 84px; height: 84px; border-radius: 6px; overflow: hidden; background: var(--tint); }
.more-list .th img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.more-list .nm { font-size: min(30px, 7.8vw); line-height: .9; }
.s-more-home .photo { position: relative; margin-top: 30px; height: 62svh; overflow: hidden; }
.s-more-home .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 44% 0%; transform-origin: 50% 0%; }

/* ---------- the quote: a splash of water behind the phone ---------- */
.s-quote .col-a { position: relative; }
.splash { position: absolute; left: 0; top: 0; width: min(680px, 190vw); aspect-ratio: 4 / 5; pointer-events: none; z-index: 0; mix-blend-mode: multiply; }
.splash video { display: block; width: 100%; height: 100%; object-fit: contain; }
.s-quote h2, .ph-stage, .rating, .textus, .s-quote .form { position: relative; z-index: 1; }

@media (min-width: 900px) {
  .site-head { grid-template-columns: auto 1fr auto auto; grid-template-areas: "brand tag menu call"; }
  .nav { left: auto; width: 460px; right: 7vw; border: 1px solid var(--line); border-bottom: 4px solid var(--blue); }
  .pg-hero { display: grid; grid-template-columns: 44% 56%; grid-template-rows: 1fr auto auto 1fr; min-height: 100vh; padding-bottom: 0; }
  .pg-head { grid-column: 1; grid-row: 2; padding: 0 3vw 0 7vw; }
  .pg-hero .hero-ctas { grid-column: 1; grid-row: 3; padding-left: 7vw; align-self: start; top: auto; right: auto; margin-top: 26px; }
  .pg-h1 { font-size: min(118px, 8.4vw); }
  .pg-visual, .wash-stage, .yard-stage, .pg-film, .pg-fence .pair { grid-column: 2; grid-row: 1 / 5; margin: 0; min-height: calc(100vh - var(--head)); aspect-ratio: auto; height: 100%; }
  .pg-roof .pg-cut { grid-column: 2; grid-row: 1 / 5; margin: 0 0 0 -8vw; width: 60vw; align-self: end; }
  .pg-roof .hero-ctas { order: 0; }
  .ask { left: 7vw; right: 40%; font-size: 64px; }
  .pg-under { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw; padding: 60px 7vw; }
  .steps { padding: 0; font-size: 52px; }
  .pg-why { padding: 50px 7vw 70px; }
  .pg-gut { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: auto auto 1fr; align-content: center; padding-top: calc(var(--head) + 30px); }
  .pg-gut .gwin { grid-column: 1; grid-row: 1; height: calc(230px * .8 * 1.55 + 12px); }
  .pg-gut .gk span { left: 7vw; font-size: 230px; transform: scaleY(1.55); }
  .pg-gut .pg-head { grid-column: 1; grid-row: 2; margin-top: 18px; }
  .pg-gut .hero-ctas { grid-column: 1; grid-row: 3; }
  .pg-gut .scoop { grid-column: 2; grid-row: 1 / 4; width: min(100%, 36vw); margin: 0 4vw 0 0; justify-self: end; align-self: center; }
  .pg-gutter { display: grid; place-items: center; min-height: 64vh; padding: 80px 7vw; }
  .pg-gutter .copy { max-width: 760px; }
  .pg-gutter .flip { font-size: 120px; }
  .pg-gutter .fig { font-size: 20px; gap: 22px; }
  .tp-gutter .gpic { position: absolute; z-index: 4; top: calc(var(--head) + 40px); bottom: calc(90px + env(safe-area-inset-bottom)); left: max(56%, 790px); right: var(--g); max-height: 720px; }
  .tp-gutter .gpic img { object-position: center top; }
  .pg-ba { display: grid; grid-template-columns: 56% 44%; align-items: center; }
  .pg-ba .media { height: 90vh; }
  .pg-ba .copy { padding: 0 7vw 0 4vw; }
  .pg-fcopy, .pg-explain, .pg-method, .pg-opts { padding-left: 7vw; padding-right: 7vw; }
  .pg-safe { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0; min-height: 80vh; }
  .safe { margin: 0 4vw 0 7vw; font-size: 68px; }
  .safe-photo { height: 100%; margin: 0; }
  .meter { max-width: 640px; }
  .more-h { padding-left: 7vw; }
  .s-more .bar { margin-left: 7vw; }
  .more-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; padding: 0 7vw; }
  .more-list li:last-child { border-bottom: 0; }
  .more-list a { grid-template-columns: 110px 1fr auto; }
  .more-list .th { width: 110px; height: 110px; }
  .s-more-home .photo { height: 80vh; }
}
/* narrower desktops: GUTTER's letters leave too little beside them, so the gutter still sits below them, right of the words */
@media (min-width: 900px) and (max-width: 1179px) {
  .tp-gutter .gpic { top: calc(var(--head) + 40px + var(--gf) * .8 * 1.55 + 26px); left: calc(42% + 40px); }
}



/* pressure washing: CONCRETE is a window into Matt's clip, cut from a white sheet like the home headline */
.pg-press .pg-film { flex: none; min-height: 0; margin: 10px 0 0; height: calc(min(104px, 26.6vw) * .8 * 2.6 + 8px); }
.pg-film .kw { position: absolute; inset: 0; background: #FFFFFF; color: #000000; mix-blend-mode: screen; }
.pg-film .kw span { position: absolute; left: calc(var(--g) - 3px); top: 4px; font-size: min(104px, 26.6vw); line-height: .8; transform-origin: 0 0; transform: scaleY(3.3); white-space: nowrap; }
.pg-head-b { margin-top: 10px; }
@media (min-width: 900px) {
  .pg-press { grid-template-columns: 1fr; grid-template-rows: auto; }
  .pg-press .pg-head, .pg-press .pg-film, .pg-press .pg-head-b, .pg-press .hero-ctas { grid-column: 1; grid-row: auto; }
  .pg-press { align-content: center; }
  .pg-press .pg-film { height: calc(250px * .8 * 1.7 + 10px); min-height: 0; }
  .pg-film .kw span { left: 7vw; font-size: 250px; transform: scaleY(1.7); }
}

/* house washing: Matt's line sits clear of the picture's roofline */
.pg-house .wash-stage { margin-top: 14px; }
@media (min-width: 900px) { .pg-house .wash-stage { margin-top: 0; } }
@media (min-width: 900px) {
  /* the explainers carry their numbers at scale beside the words */
  .pg-explain { grid-template-columns: 1.15fr 1fr; column-gap: 6vw; align-content: center; min-height: 70vh; padding: 90px 7vw; }
  .pg-explain .meter { grid-column: 1; grid-row: 1 / 5; max-width: none; align-self: center; }
  .pg-explain > :not(.meter) { grid-column: 2; }
  .meter .v { font-size: 150px; }
  .pg .lead { font-size: 22px; }
  .pg-method, .pg-opts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 5vw; align-items: center; padding: 70px 7vw 80px; }
  .pg-method .chips, .pg-opts .chips { grid-row: 1 / 3; }
  .pg-method .chip, .pg-opts .chip { min-height: 44px; font-size: 16px; padding: 0 18px; }
}

/* ---------- round 5 ---------- */
/* Instagram's own glyph (Meta's brand asset pack, 2023) on every link that opens a DM, so it reads as going there */
.ig { display: inline-block; flex: none; width: 1.25em; height: 1.25em; background: currentColor;
  -webkit-mask: url(/assets/instagram-glyph.svg) center / contain no-repeat; mask: url(/assets/instagram-glyph.svg) center / contain no-repeat; }
.btn-ig { gap: .6em; }
.textus a.ig-link { justify-self: start; gap: 10px; margin-top: 8px; min-height: 52px; padding: 0 20px 0 18px; border-radius: 4px; background: var(--blue); color: #FFFFFF; font-size: 18px; }
.textus a.ig-link .k { color: #FFFFFF; margin-right: 2px; }
.textus a.ig-link .ig { width: 24px; height: 24px; }
/* "More services" is two words on one line on the home page */
.s-more-home .more-h .w { display: inline-block; }
/* the quote phone shows Matt's logo in its circle (Matt, through Tony) */
.av.av-logo { background: #FFFFFF; }
.scr-c .av.av-logo { width: 6.6em; height: 6.6em; }
.scr-r .av.av-logo { width: 6.2em; height: 6.2em; }
.av.av-logo img { width: 86%; height: auto; }
/* the arrow on to the map once the hero has played (Tony) */
.to-map { position: fixed; z-index: 60; left: calc(50% - 29px); bottom: calc(22px + env(safe-area-inset-bottom)); width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--blue); color: #FFFFFF; box-shadow: 0 10px 24px rgba(0, 38, 120, .3), 0 0 0 4px rgba(255, 255, 255, .92); cursor: pointer; }
.to-map:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
/* while the services run sideways: keep swiping, and where the run is */
.run-cue { position: fixed; z-index: 60; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px 0 12px;
  border-radius: 999px; background: rgba(255, 255, 255, .96); box-shadow: 0 8px 22px rgba(22, 22, 22, .16), 0 0 0 1.5px #DCE3EE; color: var(--blue);
  font: 800 13px/1 "Archivo"; font-stretch: 100%; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.run-cue .rc-ic { position: relative; width: 18px; height: 24px; }
.run-cue .rc-ic svg { position: absolute; left: 0; top: 3px; }
.run-cue .rc-bar { display: flex; gap: 4px; margin-left: 2px; }
.run-cue .rc-bar i { display: block; width: 16px; height: 4px; border-radius: 2px; background: #DCE3EE; overflow: hidden; }
.run-cue .rc-bar b { display: block; width: 100%; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }
/* windows: the general pure-water detail under the lead */
.pg .more-txt { font-size: 17px; line-height: 1.45; color: var(--ink); max-width: 38ch; }
@media (min-width: 900px) {
  .to-map { width: 64px; height: 64px; left: calc(50% - 32px); bottom: 30px; }
  .run-cue { bottom: 26px; min-height: 44px; }
  .pg .more-txt { font-size: 19px; }
}