/* Safe & Secure custom city pages (2026-10-31 redesign).

   Loaded after ssl-home.css by ssl_public/city_page.html only; the page reuses
   the homepage bands (.hp) and adds the city intro, the guide with its sticky
   table of contents, the price table and the neighbourhood list. Mockup:
   project files website/city-pages/ssl-city-surrey.html. */

.hp .cg-intro{display:grid;grid-template-columns:1fr 1fr;gap:18px 48px;margin:26px 0 8px;max-width:1100px}
.hp .cg-intro p{font-size:17px;line-height:1.65}
/* Services as one row of swipe cards (Sam, 2026-10-31: "a heading and
   little blurb, not long paragraphs"). Scroll-snap does the swiping; the two
   buttons (ssl-city.js) page it on a mouse. */
.hp .cg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.hp .cg-nav{display:flex;gap:10px;flex:none}
.hp .cg-btn{width:48px;height:48px;border-radius:50%;border:0;background:var(--navy);color:var(--white);display:grid;place-items:center;cursor:pointer}
.hp .cg-btn:hover{background:var(--navy2)}
.hp .cg-btn[data-rail="prev"] svg{transform:scaleX(-1)}
.hp .cg-btn:disabled{opacity:.35;cursor:default}
.hp .cg-rail{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:2px;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hp .cg-rail::-webkit-scrollbar{display:none}
.hp .cg-rail:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;border-radius:22px}
.hp .cg-card{flex:0 0 min(340px,82vw);scroll-snap-align:start;background:var(--white);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 0 0 1px var(--line)}
.hp .cg-no{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.hp .cg-card h2{font-family:var(--disp);font-weight:800;font-stretch:104%;font-size:22px;line-height:1.14;letter-spacing:-.015em;color:var(--navy);scroll-margin-top:24px}
.hp .cg-card p{font-size:15.5px;line-height:1.55}
.hp .cg-tags{display:flex;flex-wrap:wrap;gap:6px}
.hp .cg-tags span{background:var(--tile);color:var(--navy);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:600}
.hp .cg-from{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:14px}
.hp .cg-from b{color:var(--navy);text-align:right}
.hp .cg-link{display:inline-flex;gap:8px;align-items:center;color:var(--navy);font-weight:600;font-size:15px;text-decoration:none}
.hp #key-fobs{scroll-margin-top:24px}
.hp .cg-prices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px 56px;align-items:start;margin-top:56px}
.hp .cg-prices h2{font-family:var(--disp);font-weight:800;font-stretch:104%;color:var(--navy);font-size:clamp(26px,3vw,36px);line-height:1.08;letter-spacing:-.02em;margin:0 0 14px;scroll-margin-top:24px}
.hp .cg-prices p{font-size:16px;line-height:1.6;margin:0 0 14px}
.hp .cg-price{width:100%;border-collapse:collapse;background:var(--white);border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--line);font-size:15px}
.hp .cg-price th,.hp .cg-price td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.hp .cg-price th{font-weight:600;color:var(--navy);width:58%}
.hp .cg-price td{font-variant-numeric:tabular-nums}
.hp .cg-price tr:last-child th,.hp .cg-price tr:last-child td{border-bottom:0}
.hp .areas>*{min-width:0}
.hp .cg-nb{list-style:none;margin:22px 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hp .cg-nb li{background:var(--paper);border-radius:14px;padding:14px 16px;font-size:14.5px;line-height:1.45}
.hp .cg-nb b{display:block;color:var(--navy);font-family:var(--disp);font-size:16px;margin-bottom:2px}
.hp .cg-near{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px}
.hp .cg-near a{background:var(--tile);color:var(--navy);border-radius:999px;padding:7px 14px;text-decoration:none;font-weight:600}
.hp .cg-credit{font-size:12px;color:var(--muted);margin-top:14px}
.hp .main .actions{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:12px}
.hp .pill.outline{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy);padding:20px 32px;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.hp .pill.outline:hover{background:var(--tile)}
.hp .main .actions .pill.outline svg{width:18px;height:18px}
@media (max-width:600px){.hp .main .actions .pill.cta{padding:16px 20px;flex:1 1 0;justify-content:center}}
/* Why us: four alike cards in one row, no photo card (Sam, 2026-10-31) */
.hp .cg-why{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto}
.hp .cg-pd{margin-top:4px}
.hp .cg-pd>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:16px 18px;font-weight:600;color:var(--navy)}
.hp .cg-pd>summary::-webkit-details-marker{display:none}
.hp .cg-pd>summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .2s}
.hp .cg-pd[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
.hp .cg-pd[open]>summary{border-radius:16px 16px 0 0;border-bottom:0}
.hp .cg-pd .cg-price{border-top-left-radius:0;border-top-right-radius:0}
/* Car makes: every make in one row you swipe, no "All makes" dropdown
   (Sam, 2026-11-01). Sideways only, with room for the pills' borders. */
.hp .cg-makes{flex:none;flex-wrap:nowrap;max-height:none;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;padding-block:2px}
.hp .cg-makes::-webkit-scrollbar{display:none}
.hp .cg-makes li{flex:none;white-space:nowrap;scroll-snap-align:start}
/* The intro band and the car keys band are both white: drop the intro's
   bottom padding so the two don't stack into an empty gap (Sam, 2026-11-01). */
.hp #who.band{padding-bottom:0}
.hp #who + .band{padding-top:40px}
.hp .auto-grid>*{min-width:0}
@media (max-width:900px){
  /* Why us: one row you swipe (Sam, 2026-10-31) */
  .hp .cg-why{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-right:-16px;padding-right:16px;scrollbar-width:none;align-items:stretch}
  .hp .cg-why::-webkit-scrollbar{display:none}
  .hp .cg-why>.why{flex:0 0 78%;scroll-snap-align:start}
  .hp .cg-intro{grid-template-columns:1fr}
  .hp .cg-nav{display:none}
  .hp .cg-prices{grid-template-columns:1fr;margin-top:40px}
  /* Neighbourhoods: one row you swipe, like the service cards (Sam, 2026-10-31) */
  .hp .cg-nb{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .hp .cg-nb::-webkit-scrollbar{display:none}
  .hp .cg-nb li{flex:0 0 72%;scroll-snap-align:start}
  /* Numbers and common calls: one row you swipe too (Sam, 2026-11-01) */
  .hp .cg-nums{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;scrollbar-width:none}
  .hp .cg-nums::-webkit-scrollbar{display:none}
  /* Two whole cards on screen, the next one peeking so it reads as a swipe. */
  .hp .cg-nums>div{flex:0 0 44%;scroll-snap-align:start}
  .hp #calls .calls{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none}
  .hp #calls .calls::-webkit-scrollbar{display:none}
  .hp #calls .calls .call{display:flex !important;flex:0 0 78%;scroll-snap-align:start}
  .hp #calls .more-btn{display:none !important}
  /* Swipe rows run edge to edge, so a card is never clipped by the page
     gutter while it scrolls; the first card still lines up with the text. */
  .hp .cg-rail,.hp .cg-why,.hp .cg-nb,.hp .cg-nums,.hp .cg-makes,.hp #calls .calls{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;scroll-padding-left:20px}
  .hp .cg-makes{width:auto;align-self:stretch}
  .hp #who + .band{padding-top:24px}
  /* Sideways only: overflow-x:auto makes the row scroll vertically too and
     clip its cards' tops (Sam, 2026-11-01). The padding keeps hover lift,
     borders and the scroll-in motion inside the row. */
  .hp .cg-rail,.hp .cg-why,.hp .cg-nb,.hp .cg-nums,.hp #calls .calls,.hp .trust-r{overflow-y:hidden;touch-action:pan-x pan-y}
  .hp .cg-why,.hp .cg-nb,.hp .cg-nums,.hp #calls .calls{padding-top:6px;padding-bottom:8px}
  /* Tighter on phones (Sam, 2026-11-01): less air between bands, and the
     why-us cards fit their own text instead of stretching to the tallest. */
  .hp .band{padding-block:40px}
  .hp #who + .band{padding-top:24px}
  .hp .cg-why{align-items:flex-start}
  .hp .cg-why>.why{padding:22px}
  .hp .cg-why>.why svg{margin-bottom:6px}
}
/* Phones: the room for the fixed call bar lives inside the footer, so no strip
   of the cream page shows between the footer and the bar (Sam, 2026-11-01). */
@media (max-width:860px){
  body.ssl-home:has(.lq-cb){padding-bottom:0 !important}
  body.ssl-home:has(.lq-cb) .sslf{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
}
.hp .cg-anchor{display:block;scroll-margin-top:24px}

/* Pop-out hero (Sam, 2026-11-01): the photo sits lower in the crew tile and a
   cut-out of the locksmith is laid over it, so his head rises clear of the
   card's top edge. Same as the editorial homepage hero. */
.hp .t.crew:has(.ed-pop){overflow:visible;background:transparent;--drop:56px;--pop:70px}
.hp .crew .stage.ed-pop{background:none}
.hp .ed-pop .ed-clip{position:absolute;inset:var(--drop) 0 0 0;overflow:hidden;border-radius:20px 20px 0 0;background:var(--navy2)}
.hp .ed-pop img.photo,.hp .ed-pop .ed-pop-cut{position:absolute;inset:auto 0 0 0;width:100%;height:calc(100% - var(--drop) + var(--pop));object-fit:cover;object-position:42% 100%}
.hp .ed-pop .ed-clip img.photo{height:calc(100% + var(--pop))}
.hp .ed-pop .ed-pop-cut{z-index:2;pointer-events:none}
.hp .crew:has(.ed-pop) .bar{border-radius:0 0 20px 20px}
@media (max-width:860px){
  .hp .t.crew:has(.ed-pop){--drop:24px;--pop:72px}
  .hp .crew .stage.ed-pop{min-height:430px}
  .hp .ed-pop img.photo,.hp .ed-pop .ed-pop-cut{object-position:70% 100%}
  .hp .ed-pop .ed-clip{border-radius:16px 16px 0 0}
  .hp .crew:has(.ed-pop) .bar{border-radius:0 0 16px 16px}
}
@media (min-width:600px) and (max-width:860px){
  .hp .t.crew:has(.ed-pop){--pop:44px}
  .hp .crew .stage.ed-pop{min-height:300px}
}
.hp .cg-ah{font-family:var(--disp);font-weight:800;font-size:20px;line-height:1.2;letter-spacing:-.015em;color:var(--navy);margin:28px 0 6px;scroll-margin-top:24px}
.hp .cg-at{font-size:15.5px;line-height:1.55;max-width:60ch}
.hp .cg-at a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}