/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Indoor Experts — LOCATION PAGE layer (W3, the nine neighborhood pages)
   Built 2026-08-18. Loads AFTER ie.css and ie-sa.css. Adds only what a location page needs that
   the service-area page did not: the at-a-glance card, the local-brief split, the three service
   rows and the nearby-neighborhood grid.

   WHAT IT REUSES RATHER THAN REBUILDS. `.chap` markers and the doubled logo mark, `.salink`
   + the three per-service accents, `.saband` and its check-your-address form, `.mapfr`,
   `.safaq`, `.askcard`, `.sacta`, `.sahero` and the shared `.tstrip`. A location page is the
   service-area page's child and it should read that way, so nothing here restyles a component
   that already exists. If a rule below duplicates one in ie-sa.css, that is a bug.

   THE SPINE is the RSG city-page pattern used on Lexany, Precision Air and Alamo Comfort:
   conversion hero > trust > local brief + map > CTA > services > owner > nearby > FAQ > close.
   A city page's job is entity plus interlinking plus conversion, NOT a second service sell, so
   the service section here is three linked rows rather than a full catalogue.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ═════════ 1. HERO — "at a glance" card ═════════
   The service-area hero carries a coverage console. Its child pages carry the same card shape
   with per-neighborhood facts in it, so the two heroes are recognisably one family. Every row is
   sourced (see loc-data.cjs), which is why this is a facts card and not a stat flex. */
.locglance{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.18);border-radius:20px;
  padding:24px 26px 22px;backdrop-filter:blur(6px);box-shadow:0 30px 60px rgba(5,16,40,.34)}
.locglance .hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.16)}
.locglance .hd b{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold-2)}
.locglance .hd span{font-family:var(--disp);font-weight:500;font-size:11.5px;color:#93a5c6}
.locglance dl{margin:0;padding:0}
.locglance .r{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.locglance .r:last-of-type{border-bottom:0}
.locglance dt{font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#93a5c6;margin:0}
.locglance dd{margin:0;font-size:14.2px;line-height:1.55;color:#e6ecf8}
/* the ZIP row reads as data, so it is set in the display face and spaced out */
.locglance .zips{display:flex;flex-wrap:wrap;gap:6px}
.locglance .zips span{font-family:var(--disp);font-weight:600;font-size:12.4px;color:#0b1f45;
  background:var(--gold-2);border-radius:5px;padding:3px 8px;letter-spacing:.02em}
.locglance .ft{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:15px;
  border-top:1px solid rgba(255,255,255,.16);font-size:12.6px;color:#9fb0d0}
.locglance .ft i{width:15px;height:15px;flex:none;background:var(--ie-arc-l) center/contain no-repeat}
@media(max-width:1000px){.locglance{max-width:520px}}
@media(max-width:560px){.locglance{padding:20px 20px 18px}.locglance .r{grid-template-columns:1fr;gap:5px}}

/* ═════════ 2. LOCAL BRIEF — the sourced neighborhood hook beside the map ═════════
   ⚠ THIS SECTION IS WHY THE NINE PAGES ARE NOT NINE PARAPHRASES. Each one leads with a
   different, specific, sourced observation about that neighborhood's housing stock. If a future
   page has nothing real to put here, it does not get built. A location page whose only local
   content is the town name swapped into a template is the doorway page seo-local warns about. */
.locbrief{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,4vw,58px);align-items:center;margin-top:44px}
.locbrief .copy h2{font-size:clamp(25px,2.9vw,38px);color:var(--navy);letter-spacing:-.02em;margin:16px 0 0}
.locbrief .copy .lede{font-size:16.4px;line-height:1.72;color:var(--muted);margin:18px 0 0;max-width:54ch}
/* the two supporting facts, as a hairline ledger rather than two more cards */
.locfacts{margin-top:28px;border-top:1px solid var(--line)}
.locfacts .f{display:grid;grid-template-columns:132px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.locfacts dt{font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-ink);margin:0;padding-top:3px}
.locfacts dd{margin:0;font-size:15.2px;line-height:1.65;color:var(--ink)}
@media(max-width:960px){
  .locbrief{grid-template-columns:1fr;gap:32px}
  .locfacts .f{grid-template-columns:1fr;gap:6px}
}

/* ═════════ 3. SERVICE ROWS ═════════
   v3, 2026-08-18. Rebuilt to the pattern the owner pointed at: the Lexany city-page service rows.
   What that pattern does that the old one did not:
     · the section head is CENTRED, which is what makes alternating rows read as deliberate rather
       than as two competing left edges. That was the real cause of the "alignment is out" report,
       not the alternation itself, so the alternation is back and the head moved instead.
     · the category tag sits ON the photo, in the category colour, with its own glyph
     · a coloured eyebrow above the heading
     · the sub-service list is a two-column CHECKLIST with coloured ticks, not bullets
     · each row closes with a SOLID button in its category colour, not a text link
   Executed in IE tokens. The three accents are the ones already set on the service-area chips, so
   nothing new is introduced: cooling blue, heating orange-red, air quality green.
   ⚠ NO FORCED <br> in the headings. The reference hard-breaks before "in {City}" to stop the state
   abbreviation orphaning. text-wrap:balance does the same job without a decorative break. */
.locsvc{margin-top:40px;display:grid;gap:clamp(26px,3vw,42px)}
.locrow{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,3.4vw,52px);align-items:center;
  padding-bottom:clamp(26px,3vw,42px);border-bottom:1px solid var(--line)}
.locrow:last-child{border-bottom:0;padding-bottom:0}
/* the flip. `direction` rather than reordering the markup, so the reading order stays
   photo-then-copy for a screen reader on every row. */
.locrow--rev{direction:rtl}
.locrow--rev > *{direction:ltr}

.locrow .pic{position:relative;display:block;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 44px rgba(20,56,131,.13)}
.locrow .pic img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.locrow .pic:hover img{transform:scale(1.03)}
.locrow .tag{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--c);border-radius:7px;padding:7px 12px;
  box-shadow:0 6px 16px rgba(0,0,0,.18)}
.locrow .tag svg{width:13px;height:13px;flex:none}

/* the coloured eyebrow, with the short leading rule the reference uses */
.locrow .ey{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.locrow .ey::before{content:"";width:22px;height:2px;background:var(--c);border-radius:2px;flex:none}
.locrow h3{font-size:clamp(22px,2.4vw,31px);color:var(--navy);letter-spacing:-.022em;
  margin:14px 0 0;line-height:1.18;text-wrap:balance}
.locrow h3 a{color:inherit}
.locrow h3 a:hover{color:var(--c)}
.locrow p{font-size:15.6px;line-height:1.72;color:var(--muted);margin:14px 0 0;max-width:58ch}

/* the two-column checklist. Ticks in the category colour, which is the reference's tell. */
.locrow .linklist{list-style:none;margin:20px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px 26px}
.locrow .linklist li{margin:0}
.locrow .linklist a{display:grid;grid-template-columns:17px 1fr;gap:10px;align-items:start;
  font-size:14.6px;line-height:1.45;color:var(--ink);transition:color .16s ease}
.locrow .linklist svg{width:17px;height:17px;color:var(--c);margin-top:2px}
.locrow .linklist a:hover{color:var(--c)}

/* the solid per-category button, replacing the old text link */
.locrow .btnc{display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  font-family:var(--disp);font-weight:700;font-size:13.6px;letter-spacing:.02em;
  color:#fff;background:var(--c);border-radius:8px;padding:14px 22px;
  box-shadow:0 10px 24px color-mix(in srgb,var(--c) 30%,transparent);transition:.18s ease}
.locrow .btnc svg{width:16px;height:16px;transition:transform .2s ease}
.locrow .btnc:hover{filter:brightness(.92)}
.locrow .btnc:hover svg{transform:translateX(3px)}

.locrow--heat{--c:var(--sv-heat)}
.locrow--cool{--c:var(--sv-cool)}
.locrow--air{--c:var(--sv-air)}

@media(max-width:900px){
  .locrow{grid-template-columns:1fr;gap:24px}
  .locrow--rev{direction:ltr}
}
@media(max-width:560px){
  .locrow .linklist{grid-template-columns:1fr}
  .locrow .btnc{width:100%;justify-content:center}
}

/* ═════════ 4. NEARBY NEIGHBORHOODS ═════════
   The lateral link ring. The page you are on is present but rendered as a non-link marker, so the
   set reads as complete and nobody clicks through to where they already are. */
.locnear{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:12px;margin-top:36px}
.locnb{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.16);border-radius:14px;
  padding:16px 18px;transition:.18s ease}
.locnb b{font-family:var(--disp);font-weight:600;font-size:15px;color:#fff;letter-spacing:-.01em}
.locnb span{font-size:12.2px;color:#9fb0d0;display:block;margin-top:3px}
.locnb svg{width:15px;height:15px;color:var(--gold-2);flex:none;transition:transform .2s ease}
a.locnb:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
a.locnb:hover svg{transform:translateX(3px)}
.locnb--here{background:var(--gold-2);border-color:var(--gold-2)}
.locnb--here b{color:#1c1403}
.locnb--here span{color:#5c4a12}
.locnear-foot{margin-top:26px}

/* ═════════ 5. SMALL BITS ═════════ */
/* the landmark line, only rendered on the pages that have sourced landmarks */
.locmarks{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.locmarks span{font-family:var(--disp);font-weight:600;font-size:12.2px;color:var(--navy);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px}
/* a location hero runs a shade tighter than the hub's, because the trust strip sits under it too */
.sahero.sahero--loc h1{font-size:clamp(31px,4vw,52px)}

/* ⚠ ie.css sizes .btn svg only inside .tlink, so an <svg> dropped into a .btn renders at the
   button's own width. The band and ask-card already carry their own explicit sizes, which are
   more specific than this and still win. */
.btn svg{width:16px;height:16px;flex:none}

/* the hero form's title is an h2 so the page outline does not skip h1 > h3 the way the legacy
   service-page hero does. Same size as .qform h3, so nothing moves. */
.qform h2{font-size:21px;letter-spacing:-.018em}

/* ═════════ 6. HERO + TRUST STRIP TUNING (owner, 2026-08-18) ═════════
   ⚠ Two fixes that only make sense together.
   1. THE TWO COLUMNS ARE CENTRED ON EACH OTHER. An earlier pass bottom-aligned the form with
      `align-self:end` plus a top nudge, to push it down. The owner reverted that on sight
      (2026-08-18): "hero section column alignment need to be centered, it's fixed with bottom".
      So the form goes back to `.hero .wrap`'s own `align-items:center`. The form is the taller
      column, so centring leaves its top a little above the headline's, and that is what centred
      means here. Do not re-add `align-self:end`.
   2. The trust strip's default -46px overlap left roughly 40px of dark hero showing BELOW the
      white card, which read as a stray dark-blue band. The hero's bottom padding and the strip's
      overlap are now the same number, so the card's lower edge crosses onto the cream and there
      is no band left. Change one of these two and you have to change the other. */
/* ⚠ THE GAP IS (padding-bottom MINUS overlap), AND IT HAS TO BE POSITIVE.
   Both numbers were 60 for one pass, which makes that arithmetic zero: the trust strip's top edge
   landed exactly on the form's bottom edge and the two read as one welded block. Owner, 2026-08-18:
   "still the form is attached with the other section". Keeping the strip's -60px overlap and
   raising the hero's bottom padding to 110px leaves a real 50px gap under the form while the strip
   still starts inside the hero, so the overlap survives and no dark band reappears under the card.
   ⚠ If you change either number, recompute the other. padding-bottom must stay well above the
   overlap, never equal to it. */
.hero-photo .wrap{padding-bottom:110px}
.hero-photo .qform{align-self:center;margin-top:0}
.tstrip{margin-top:-60px}
@media(max-width:1080px){
  .hero-photo .wrap{padding-bottom:96px}
  .tstrip{margin-top:-52px}
}
@media(max-width:640px){
  .hero-photo .wrap{padding-bottom:72px}
  .tstrip{margin-top:-30px}
}

/* ═════════ 7. THE NEIGHBORHOOD MAP IN THE ANSWER-FIRST SECTION ═════════
   Replaces the framed photo (owner: "we don't need to add the image here, we need to add the map
   in which the location should be mentioned"). Deliberately a PLAIN neighborhood map zoomed to the
   area, with no NAP bar and no directions button, because the legacy layered-map section further
   down owns the shop address, the licence plate and the coverage list. Two maps, two jobs.
   ⚠ Definite parent height. Under aspect-ratio alone the iframe initialises at 300x150 and never
   re-lays-out, which the archived build documented the hard way. */
.locmap{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line-2);
  box-shadow:0 26px 56px rgba(20,56,131,.13);background:#e9e6df}
.locmap .fr{height:clamp(300px,34vw,420px)}
.locmap iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.86)}
.locmap .lbl{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--navy-ink);color:#fff;padding:15px 20px}
.locmap .lbl b{font-family:var(--disp);font-weight:700;font-size:14.4px;color:#fff;display:block}
.locmap .lbl > div > span{display:block;font-size:12.6px;color:#9fb0d0;margin-top:2px}
.locmap .lbl .z{display:inline-block;font-family:var(--disp);font-weight:600;font-size:11.6px;color:#0b1f45;
  background:var(--gold-2);border-radius:5px;padding:4px 9px;letter-spacing:.02em}
/* the name block flexes, the ZIP row never shrinks. Without the min-width:0 the long sub-line
   claims the whole row and the chips wrap one per line. */
.locmap .lbl > div{flex:1 1 auto;min-width:0}
.locmap .zrow{display:flex;flex-wrap:nowrap;gap:6px;flex:0 0 auto}

/* ═════════ 8. THE LEGACY LAYERED-MAP SECTION, per-neighborhood ═════════
   `.area.areax` comes from the service pages unchanged. The only addition is that the coverage
   list inside `.axm-card` is LINKED to the nine location pages, and the current one is marked
   rather than linked. */
.ax-hoods li a{border-bottom:1px solid var(--line-2)}
.ax-hoods li a:hover{color:var(--navy);border-bottom-color:var(--navy)}
.ax-hoods li.here span{font-weight:700;color:var(--navy)}
.ax-hoods li.here span::after{content:" (you are here)";font-weight:400;font-size:.86em;color:var(--muted)}

/* ═════════ 9. {{NEEDS_SOURCE}} PILLS ON THE UNSOURCED CITIES ═════════
   The 25 cities added on the full-29 ruling carry no sourced local content, so their per-city
   fields render a visible placeholder instead of an invented fact. ie.css already styles `.ns`
   but only inside `.rslot`, `.qcard`, `.sign`, `.rch-social` and `.rch-consent`, and none of
   those wrap the spots below. This is the same pill, made to work in the six new contexts.

   ⚠ DELIBERATELY LOUD. These are meant to be impossible to miss in a review and impossible to
   ship by accident. `_qa/deploycheck.mjs` fails any page that still carries one. When a city
   gets its real content the pill disappears on its own, so nothing here needs unwinding. */
.hleft .sub .ns,
.intro .body > p .ns,
.tstrip .ti .v .ns,
.factrow .f b .ns,
.locmap .zrow .ns,
.bandsteps li span .ns,
.ax-copy .lede .ns{
  font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.04em;line-height:1.45;
  color:#8a5a2b;background:#fdf3e7;border:1px dashed #e0bd93;border-radius:6px;
  padding:3px 9px;display:inline-block;white-space:normal;text-transform:none}

/* the trust strip and the factrow set a large bold display size on the parent, so the pill has
   to opt out of it rather than inherit a 30px placeholder */
.tstrip .ti .v .ns,
.factrow .f b .ns{font-size:11.5px;letter-spacing:.05em;vertical-align:middle}

/* the ZIP chip row is nowrap for the real chips, which would push a long pill off the card */
.locmap .zrow:has(.ns){flex-wrap:wrap}

/* on the dark hero the cream pill reads as a hole, so it inverts there */
.hero-photo .hleft .sub .ns{color:#f4dcc0;background:rgba(255,255,255,.09);border-color:rgba(244,220,192,.42)}

/* ═════════════════════════════════════════════════════════════════════════════════════════
   v25 — .s5sec: the FIVE SIGNS band on the location pages, 2026-08-24 (brief task 3a §5)

   Five cards, each a link to a different money page. The 5-card set is deliberately NOT a
   5-column row: at 1440px that gives 230px columns and a 55-word body reads as a wall. It is
   a 3+2 grid that collapses to 2 then 1, so the last two cards sit wider rather than orphaned.
   ═════════════════════════════════════════════════════════════════════════════════════════ */
.s5sec .s5grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.5vw,20px);margin-top:clamp(30px,3.4vw,46px)}
.s5sec .sign5{grid-column:span 2;display:grid;grid-template-columns:44px 1fr;gap:16px;
  padding:clamp(18px,1.9vw,24px);background:var(--surface);border:1px solid var(--line);
  border-radius:16px;text-decoration:none;color:inherit;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.s5sec .sign5:nth-child(4),.s5sec .sign5:nth-child(5){grid-column:span 3}
.s5sec .sign5:hover{border-color:var(--gold);box-shadow:0 18px 40px rgba(6,18,44,.10);transform:translateY(-2px)}
.s5sec .sign5:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.s5sec .s5n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:13.5px;color:var(--gold);
  background:rgba(225,165,12,.10);border:1px solid rgba(225,165,12,.30)}
.s5sec .s5chip{display:inline-block;font-family:var(--disp);font-weight:600;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.s5sec .sign5 h3{font-size:18px;line-height:1.26;letter-spacing:-.01em;color:var(--navy);margin:0}
.s5sec .sign5 p{font-size:14.6px;line-height:1.62;color:var(--body);margin:9px 0 0}
.s5sec .sign5 .go{display:inline-flex;align-items:center;gap:7px;margin-top:13px;
  font-family:var(--disp);font-weight:600;font-size:13px;color:var(--navy)}
.s5sec .sign5 .go svg{width:15px;height:15px}
.s5sec .sign5:hover .go{color:var(--gold-deep,var(--gold))}
.s5sec .s5foot{text-align:center;margin:clamp(24px,2.6vw,34px) auto 0;max-width:62ch;
  font-size:15.4px;color:var(--muted)}
@media(max-width:1080px){
  .s5sec .s5grid{grid-template-columns:repeat(4,1fr)}
  .s5sec .sign5,.s5sec .sign5:nth-child(4),.s5sec .sign5:nth-child(5){grid-column:span 2}
}
@media(max-width:680px){
  .s5sec .s5grid{grid-template-columns:1fr}
  .s5sec .sign5,.s5sec .sign5:nth-child(4),.s5sec .sign5:nth-child(5){grid-column:span 1}
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   SECTIONS 5 AND 6 REBUILT 2026-08-24 (owner: signs "as it's in service page", services "in
   service area section design").

   Almost nothing is needed here, and that is the point: both bands now reuse components that
   already ship in ie.css and ie-v16.css, which this page already loads. What is below is only the
   two joins those components did not already cover.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

/* §5. The signs cards are ANCHORS here, not divs: each one routes to a different money page, which
   is the reason the band exists. `.sg2` already carries its own hover, so this only has to stop the
   anchor behaving like body text. */
a.sg2{display:block;text-decoration:none;color:inherit}
a.sg2:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.sg2 .go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-family:var(--disp);font-weight:600;font-size:13.5px;letter-spacing:.01em;color:var(--gold-2)}
.sg2 .go svg{width:15px;height:15px;transition:transform .18s ease}
a.sg2:hover .go svg{transform:translateX(3px)}

/* The five-signs grid runs FIVE cards in a two-column layout, so the last one would sit alone at
   half width against four full rows. It spans instead, which reads as a deliberate close to the
   list rather than an orphan. The service page has six and never hits this. */
.s5sec .sgx > :last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:820px){.s5sec .sgx > :last-child:nth-child(odd){grid-column:auto}}

/* §6. SERVICES, rebuilt 2026-08-25 onto the site's own .svcgrid/.svc card (see build-loc.cjs).
   Almost nothing is needed here: the component ships in ie.css, which this page loads. What is
   below is the four joins it did not already cover.

   1. Two columns, not the homepage's three, because a location page has four groups. */
.locsvc3 .svcgrid{grid-template-columns:repeat(2,1fr);gap:30px}
.locsvc3 .svc .ph{height:250px}

/* 2. `.svc ul` is margin-top:auto, which pins the link list to the bottom of the card. That is
      right on the homepage, where a prose paragraph fills the space above it. This band has no
      prose, so on the two groups with only two links the list dropped away from its heading and
      left a hole. Top-align, and let the slack fall to the bottom of the card where an
      equal-height grid absorbs it without it reading as a gap. */
.locsvc3 .svc ul{margin-top:16px}

/* 3. The head is centred and full width. `.head.center` in ie.css centres the text and gives the
      lede auto side margins, but the lede also carries a `margin:18px 0 0` shorthand, and a
      shorthand with 0 sides beats those auto margins at equal specificity. So they are restated.
      The H2's auto margins are set INLINE by build-loc.cjs, because an inline margin beats this
      file. Both caps are off so the head runs the full wrap.
      ⚠ The lede measures about 110 characters a line at 1440. Fine at the two lines it runs to
      now. If that copy ever grows past three lines, cap it near 90ch and leave the H2 alone. */
.locsvc3 .head h2{max-width:none}
.locsvc3 .head .lede{max-width:none;margin:18px auto 0;color:var(--muted);font-size:16.2px}

@media(max-width:760px){
  .locsvc3 .svcgrid{grid-template-columns:1fr}
  .locsvc3 .svc .ph{height:210px}
}