/* ── Fast Locksmith type + phone-layout pilot: Surrey and North Vancouver ──
   Loaded AFTER fl-sharp2.css / fl-page.css, and ONLY by the Surrey and North
   Vancouver pages (their source HTML links it and puts the class `pilot` on
   <body>, which the seed copies onto the page wrapper). Every rule below is
   scoped to `.pilot`, so the other five city sites, Vancouver and HQ never see
   a byte of it. fl-sharp2.css and fl-page.css are untouched.

   What it does (Sam, 2026-11-13):
   1. Fonts are self-hosted (./fonts/*.woff2, latin subset, variable files) with
      font-display:swap and metric-matched fallbacks, so there is no third-party
      font request and no visible jump when the real face arrives.
        headings + big numerals  Oswald 600/700   (was Anton)
        body copy                Source Serif 4    (was Archivo)
        labels, tags, chips, buttons, nav, mono eyebrows keep Archivo / Archivo
        Narrow / JetBrains Mono.
   2. Headings are normal case. Small mono labels, tags, chips, buttons and nav
      stay uppercase.
   3. Home hero: the H1 is a small mono label, the big line is a <p>.
   4. Phones (<=640px inner pages, <=760px home): card grids become one swipe row.
   5. Header no longer wraps at 1280, tap targets >=44px, footer clears the
      floating "Book online" button.
   A change here ships under a new file name (fl-pilot2.css ...), see _fl_seed.py. */

/* ── Fonts ── */
@font-face{font-family:'Oswald';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/oswald-latin-wght.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Oswald';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/oswald-latin-wght.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-weight:300 700;font-style:normal;font-display:swap;src:url(fonts/source-serif-4-latin-wght.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-weight:100 900;font-style:normal;font-display:swap;src:url(fonts/archivo-latin-wght.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo Narrow';font-weight:400 700;font-style:normal;font-display:swap;src:url(fonts/archivo-narrow-latin-wght.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-weight:100 800;font-style:normal;font-display:swap;src:url(fonts/jetbrains-mono-latin-wght.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* The "Powered by" strip and the help popup / callbar sit outside the page
   wrapper and name these two families themselves. */
@font-face{font-family:'Public Sans';font-weight:100 900;font-style:normal;font-display:swap;src:url(fonts/public-sans-latin-wght.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo Black';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/archivo-black-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Metric-matched fallbacks: size-adjust is the measured width of the real face
   against Liberation Sans / Liberation Serif (metric twins of Arial / Times New
   Roman) on a sample of this site's own copy; ascent / descent come from the
   real fonts' hhea tables divided by that factor. Same method as the Archivo
   fallbacks in public_page_code.html. 'Archivo Fallback' and 'Archivo Narrow
   Fallback' are declared there. */
@font-face{font-family:'Oswald Fallback';font-weight:100 649;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Arimo Bold'),local('Helvetica Bold');size-adjust:83.73%;ascent-override:142.47%;descent-override:34.51%;line-gap-override:0%}
@font-face{font-family:'Oswald Fallback';font-weight:650 1000;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Arimo Bold'),local('Helvetica Bold');size-adjust:85.99%;ascent-override:138.74%;descent-override:33.61%;line-gap-override:0%}
@font-face{font-family:'Source Serif 4 Fallback';font-weight:100 499;src:local('Times New Roman'),local('TimesNewRomanPSMT'),local('Liberation Serif'),local('Tinos'),local('Times');size-adjust:118.10%;ascent-override:87.72%;descent-override:28.36%;line-gap-override:0%}
@font-face{font-family:'Source Serif 4 Fallback';font-weight:500 1000;src:local('Times New Roman Bold'),local('TimesNewRomanPS-BoldMT'),local('Liberation Serif Bold'),local('Tinos Bold'),local('Times Bold');size-adjust:112.94%;ascent-override:91.73%;descent-override:29.66%;line-gap-override:0%}
@font-face{font-family:'JetBrains Mono Fallback';font-weight:100 900;src:local('Courier New'),local('CourierNewPSMT'),local('Liberation Mono'),local('Cousine'),local('Courier');size-adjust:100%;ascent-override:102%;descent-override:30%;line-gap-override:0%}

.pilot{
  --disp:'Oswald','Oswald Fallback','Arial Narrow',sans-serif;
  --serif:'Source Serif 4','Source Serif 4 Fallback',Georgia,serif;
  --ui:'Archivo','Archivo Fallback',system-ui,sans-serif;
  --narrow:'Archivo Narrow','Archivo Narrow Fallback','Archivo',sans-serif;
  --mono:'JetBrains Mono','JetBrains Mono Fallback',ui-monospace,monospace;
  font-family:var(--serif);
}
/* Chrome keeps the label faces. */
.pilot :is(.ticker,.hdr,footer,.copy){font-family:var(--ui)}

/* ── Headings: Oswald, normal case ── */
.pilot.pilot :is(h1:not(.h1-label),h2,h3){font-family:var(--disp)!important;text-transform:none!important;letter-spacing:0!important;font-style:normal!important}
.pilot :is(.h1,.h2){text-transform:none;letter-spacing:0}
.pilot.pilot :is(h2,h3){font-weight:700!important}
.pilot.pilot h3{font-weight:600!important;line-height:1.12!important}
.pilot.fxi h2{font-size:clamp(28px,3.3vw,44px)!important;line-height:1.1!important}
.pilot .pg-hd h2{max-width:26ch}
.pilot .pg-hd{gap:20px}
.pilot .pg-cards h3{font-size:26px!important;margin-bottom:8px}
.pilot .pg-local .pg-cards h3{font-size:24px!important}
.pilot .pg-cards p{font-size:16px;line-height:1.5}
.pilot .pg-faq .a{font-size:16px;line-height:1.55}
.pilot .pg-faq summary{font:600 18px/1.3 var(--serif);text-transform:none;letter-spacing:0}
.pilot .faq summary{font:600 18px/1.3 var(--serif);text-transform:none;letter-spacing:0}
.pilot .pg-facts b,.pilot .pg-price > div b{font-family:var(--disp);font-weight:600;line-height:1}
.pilot .pg-facts b{font-size:50px}
.pilot .pg-facts b small{font-size:.45em}

/* Inner-page H1: Oswald is wider than Anton, so size it for two lines at 1280
   and three at 390 (longest title: "Transponder key programming North Vancouver"). */
.pilot .ihero .h1{font:700 clamp(32px,3.9vw,54px)/1.08 var(--disp);overflow-wrap:normal}
.pilot .ihero .h1 .dot,.pilot .h-big .dot{color:var(--acc)}
.pilot .h-lede{font-size:18px;line-height:1.55}

/* Home hero: H1 = small mono label, big line = <p> */
.pilot .h1.h1-label{font:600 14px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin:0 0 20px}
.pilot .h-big{font:700 clamp(36px,5.1vw,72px)/1.06 var(--disp);letter-spacing:0;margin:0}
.pilot .h-big + .h-lede{margin-top:22px}

/* Home headings + numerals */
.pilot .h2{font:700 clamp(32px,4.1vw,58px)/1.08 var(--disp);max-width:24ch}
.pilot .h-photo .cap b{font:700 30px/1.08 var(--disp);text-transform:none}
.pilot .h-shop h3{font:700 34px/1.1 var(--disp);text-transform:none}
.pilot .h-shop h3 span{line-height:1.1;padding:1px 6px 2px}
.pilot .h-stat .yr{font:600 64px/1 var(--disp)}
.pilot .nums b{font:600 68px/1 var(--disp)}
.pilot .svc h3,.pilot .why-grid h3,.pilot .steps h3{font:600 28px/1.12 var(--disp);text-transform:none;letter-spacing:0}
.pilot .jobs h3{font:600 24px/1.15 var(--disp);font-stretch:100%;text-transform:none;letter-spacing:0;margin:14px 0 10px}
.pilot .final .l h3{font:700 34px/1.1 var(--disp);text-transform:none}
.pilot .svc p,.pilot .jobs p,.pilot .why-grid p,.pilot .steps p,.pilot .nums p{font-size:16px;line-height:1.5}
.pilot .team .tx p,.pilot .final .m{font-size:18px}

/* Header + footer brand blocks */
.pilot .logo b{font:700 24px/1.04 var(--disp);text-transform:none;letter-spacing:0}
.pilot .logo-city i{font:700 24px/1.04 var(--disp);text-transform:none;letter-spacing:0}
.pilot .hdr-call b{font:600 24px/1.05 var(--disp);letter-spacing:0;white-space:nowrap}
.pilot footer .bn{font:700 30px/1.08 var(--disp);text-transform:none;letter-spacing:0}
.pilot footer p{font-family:var(--serif);font-size:14px;line-height:1.5}
.pilot .band h2{font:700 clamp(32px,4vw,52px)/1.08 var(--disp);text-transform:none;letter-spacing:0}
.pilot .band a{font-family:var(--disp);font-weight:600;letter-spacing:0}

/* ── Header must not wrap at 1280 (nav items and the phone number sat on two lines) ── */
.pilot nav.main a{white-space:nowrap;padding:0 clamp(12px,1.35vw,22px);letter-spacing:.1em}
.pilot .hdr-call{white-space:nowrap}
.pilot .hdr-call small{white-space:nowrap}
.pilot .logo-city{white-space:nowrap}
@media (min-width:1000px) and (max-width:1360px){
  .pilot .logo{padding-left:12px!important;padding-right:14px!important}
  .pilot .logo-city{padding:14px 14px}
  .pilot .logo-city i{font-size:21px}
  .pilot .hdr-call{padding:0 16px;gap:10px}
  .pilot .hdr-call b{font-size:21px}
}

/* ── Tap targets (all widths where a finger is plausible) ── */
.pilot .band a{display:inline-flex;align-items:center;min-height:44px}
.pilot .crumbs{display:flex;flex-wrap:wrap;align-items:center;padding-top:0;padding-bottom:0}
.pilot .crumbs a{display:inline-flex;align-items:center;min-height:44px;border-bottom:0;padding:0;text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:3px}
.pilot .pg-chips a{display:inline-flex;align-items:center;min-height:44px}
.pilot footer a{display:flex;align-items:center;min-height:44px;line-height:1.2}
.pilot .ticker a{display:inline-flex;align-items:center;min-height:44px}
.pilot .link-go{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0;border-bottom:0;box-shadow:inset 0 -4px 0 var(--acc)}
.pilot .pg-hd .go{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0;border-bottom:0;box-shadow:inset 0 -4px 0 var(--acc)}

/* ── Phones: card grids become one swipe row ── */
@media (max-width:640px){
  /* inner pages: every .pg-cards block (service cards, local calls, what-to-expect) */
  .pilot .pg-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding-left:0}
  .pilot .pg-cards::-webkit-scrollbar{display:none}
  .pilot .pg-cards > *{flex:0 0 80%;scroll-snap-align:start;display:flex;flex-direction:column;border-right:var(--line)!important;border-bottom:0!important;padding:18px 16px 20px}
  .pilot .pg-cards > a{display:flex}
  .pilot .pg-cards .tags{margin-top:auto;padding-top:14px}
  .pilot .pg-cards .fix{margin-top:auto}
  .pilot .pg-cards .idx{align-self:flex-start}
  .pilot .pg-cards > * > p{margin-bottom:14px}
  .pilot .pg-local .pg-cards > *{border-right-color:#2a3866!important;border-bottom:0!important}
  .pilot .pg-cards h3{font-size:24px!important}
  .pilot .pg-price{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .pilot .pg-price::-webkit-scrollbar{display:none}
  .pilot .pg-price > div{flex:0 0 62%;scroll-snap-align:start;flex-direction:column;align-items:flex-start;border-right:var(--line)!important;border-bottom:0}
  .pilot .pg-faq summary,.pilot .faq summary{font-size:17px}
  .pilot .ihero .h1{font-size:clamp(30px,8.6vw,38px)}
}
@media (max-width:760px){
  .pilot .logo b{font-size:20px}
  .pilot .hdr-call b{font-size:19px}
}
@media (max-width:380px){.pilot .hdr-call b{font-size:17px}}
@media (max-width:760px){
  /* home: services, why us, common calls. "How a job runs" (ordered steps), the
     area name tiles and the photo strip stay as they are. */
  .pilot .svc,.pilot .why-grid,.pilot .jobs{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .pilot .svc::-webkit-scrollbar,.pilot .why-grid::-webkit-scrollbar,.pilot .jobs::-webkit-scrollbar{display:none}
  .pilot.fx .svc > a,.pilot.fx .svc > a:nth-child(n){flex:0 0 80%;scroll-snap-align:start;border-right:var(--line)!important;border-bottom:0!important}
  .pilot.fx .svc > a:last-child{border-right:0!important}
  .pilot.fx .why-grid > div,.pilot.fx .why-grid > div:nth-child(n){flex:0 0 80%;scroll-snap-align:start;border-right:2px solid var(--bone)!important;border-bottom:0!important}
  .pilot.fx .why-grid > div:last-child{border-right:0!important}
  .pilot.fx .why-grid .big{flex-basis:84%}
  .pilot.fx .jobs > div,.pilot.fx .jobs > div:nth-child(n){flex:0 0 80%;scroll-snap-align:start;border-right:var(--line)!important;border-bottom:0!important;display:flex;flex-direction:column}
  .pilot.fx .jobs > div:last-child{border-right:0!important}
  .pilot.fx .jobs .tag{align-self:flex-start;margin-top:auto}
  .pilot .svc .bd{flex:1}
  .pilot .h-big{font-size:clamp(34px,9.6vw,44px)}
  .pilot .h-shop h3{font-size:28px}
  .pilot .final .l h3{font-size:30px}
}
/* The last thing on the page is the Powered-by-Linq strip (outside .pilot), so
   it carries the room for the floating "Book online" button: the button never
   covers a link and no empty band shows above the strip. */
@media (max-width:760px){
  body:has(.pilot) .lqpb-post{padding-bottom:calc(10px + 66px + env(safe-area-inset-bottom,0px))}
}
.pilot .ihero .h1{text-wrap:balance}
.pilot .final .r a.btn{white-space:nowrap}
/* With the button on one line the 3-column final CTA starves its text column
   below 1000px, so it stacks there (fl-sharp2.css stacks it at 760px). */
@media (max-width:1000px){
  .pilot.fx .final{grid-template-columns:1fr}
  .pilot.fx .final .l{border-right:0;border-bottom:var(--line)}
  .pilot.fx .final .r{border-left:0;border-top:var(--line)}
}
.pilot .svc:focus-visible,.pilot .why-grid:focus-visible,.pilot .jobs:focus-visible{outline:2px solid var(--ink);outline-offset:-6px}
.pilot a.ph{display:inline-flex;align-items:center;min-height:44px}