/* CPR design system — NH iPhone Repair / Mass Phone Repair
   Colors and type come straight from the CPR Brand Book.
   Avenir LT Pro is self-hosted. Never load it from a CDN: a silent CDN
   failure drops the whole site to a system font. */

@font-face{font-family:'Avenir LT Pro';src:url('/assets/fonts/AvenirLTProBook.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Avenir LT Pro';src:url('/assets/fonts/AvenirLTProMedium.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Avenir LT Pro';src:url('/assets/fonts/AvenirLTProHeavy.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Avenir LT Pro';src:url('/assets/fonts/AvenirLTProBlack.woff2') format('woff2');font-weight:900;font-display:swap}

:root{
  --red:#DC282E;        /* Pantone 186C */
  --link:#C01F25;       /* CPR red darkened to clear 4.5:1 on white */
  --red-light:#F15F5E;
  --blue:#4FB0E3;       /* featured accent, brand value. Large areas and fills. */
  /* #4FB0E3 is 2.4:1 against white, which fails AA for the small
     letter-spaced type the brand uses for eyebrows and tabs. This is the
     same hue darkened until it passes. Large fills keep the brand value. */
  --blue-ink:#1C6E9B;
  --blue-dark:#2D2D3B;
  --grey-dark:#4E4E50;  /* body text */
  --grey:#B9BDCB;
  --grey-light:#F3F2F2;
  --white:#fff;
  --font:'Avenir LT Pro','Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --max:1180px;
  --gut:clamp(16px,4vw,32px);
  --r:10px;
  --shadow:0 2px 14px rgba(45,45,59,.08);
  --shadow-lg:0 10px 40px rgba(45,45,59,.13);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-weight:400;font-size:17px;line-height:1.65;color:var(--grey-dark);background:var(--white)}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none}
/* Links inside running prose must not rely on colour alone (WCAG 1.4.1). */
section p a,section li a,.faq a,.lede a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:3px}

.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:12px 20px;z-index:200;font-weight:800}
.skip:focus{left:0}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.narrow{max-width:820px}

/* ---------- Type ---------- */
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.14;color:var(--blue-dark);letter-spacing:-.015em}
h1{font-weight:900;font-size:clamp(30px,5.2vw,50px)}
h2{font-weight:800;font-size:clamp(24px,3.6vw,34px)}
h3{font-weight:800;font-size:clamp(19px,2.3vw,23px)}
h4{font-weight:600;font-size:18px}
p{margin:0 0 1.1em}
.lede{font-size:clamp(18px,2.2vw,21px);line-height:1.6}

/* Wide-tracked uppercase micro-heading — a CPR signature */
.eyebrow{font-size:11px;font-weight:800;letter-spacing:3.5px;text-transform:uppercase;color:var(--red);margin:0 0 10px}
.eyebrow.blue{color:var(--blue-ink)}
.eyebrow.on-dark{color:var(--blue)} /* on dark panels #4FB0E3 clears AA */

/* The + prefix doubles as the medical-cross motif */
.plus::before{content:"+";color:var(--red);font-weight:900;margin-right:.35em}
.plus.blue::before{color:var(--blue-ink)}

/* Short rounded tab followed by a letter-spaced heading */
.tab{display:inline-block;background:var(--red);color:#fff;font-size:11px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;padding:5px 13px;border-radius:999px;margin-bottom:12px}
.tab.blue{background:var(--blue-ink)}

/* Four-segment finishing stripe closing a major section */
.stripe{display:flex;height:5px;border-radius:3px;overflow:hidden;margin:44px 0}
.stripe i{flex:1}
.stripe i:nth-child(1){background:var(--red)}
.stripe i:nth-child(2){background:var(--blue)}
.stripe i:nth-child(3){background:var(--blue-dark)}
.stripe i:nth-child(4){background:var(--grey)}

/* Red cross bullets */
ul.cross{list-style:none;padding:0;margin:0 0 1.3em}
ul.cross li{position:relative;padding-left:32px;margin-bottom:.65em}
ul.cross li::before{content:"";position:absolute;left:0;top:.33em;width:19px;height:19px;border-radius:50%;background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E");
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23DC282E'/%3E%3Cpath d='M8.6 4.6h2.8v3.2h3.2v2.8h-3.2v3.2H8.6v-3.2H5.4V7.8h3.2z' fill='%23fff'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat}
ul.cross.blue li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%234FB0E3'/%3E%3Cpath d='M8.6 4.6h2.8v3.2h3.2v2.8h-3.2v3.2H8.6v-3.2H5.4V7.8h3.2z' fill='%23fff'/%3E%3C/svg%3E")}

/* Low-opacity plus tile texture for red and dark panels */
.tex{position:relative;isolation:isolate}
.tex::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M18 6h8v12h12v8H26v12h-8V26H6v-8h12z' fill='%23fff'/%3E%3C/svg%3E");
  background-size:44px 44px}

/* ---------- Header ---------- */
.topbar{background:var(--blue-dark);color:#fff;font-size:13.5px;font-weight:600}
.topbar .wrap{display:flex;gap:18px;justify-content:space-between;align-items:center;min-height:38px;flex-wrap:nowrap;padding-block:6px}
.topbar .open-now{min-width:0}
.topbar .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar a{color:#fff}
.topbar .open-now{display:inline-flex;align-items:center;gap:7px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--grey);flex:none}
.dot.on{background:#35C26B}

header.site{position:sticky;top:0;z-index:100;background:#fff;box-shadow:var(--shadow)}
header.site .wrap{display:flex;align-items:center;gap:20px;min-height:72px}
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo img{height:38px;width:auto;flex:none}
.logo .brandname{font-weight:900;font-size:17px;color:var(--blue-dark);line-height:1.05;letter-spacing:-.02em}
.logo .brandname small{display:block;font-weight:600;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--grey-dark);opacity:.8}
nav.main{margin-left:auto;display:flex;gap:4px;align-items:center}
nav.main a{color:var(--blue-dark);font-weight:600;font-size:15px;padding:9px 11px;border-radius:7px;white-space:nowrap}
nav.main a:hover{background:var(--grey-light);text-decoration:none}
nav.main a.on{color:var(--link)}
nav.main a.on,.langs a.on{background:var(--blue-ink)}
nav.main a.on{background:none}
.navtoggle{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.navtoggle span{display:block;width:24px;height:2.5px;background:var(--blue-dark);margin:5px 0;border-radius:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--red);color:#fff;font-weight:800;font-size:15px;padding:12px 22px;border-radius:var(--r);border:0;cursor:pointer;min-height:46px;text-align:center}
.btn:hover{background:#c31f25;text-decoration:none;color:#fff}
.btn.blue{background:var(--blue-ink)}.btn.blue:hover{background:#155a80}
.btn.ghost{background:transparent;color:var(--blue-dark);border:2px solid var(--grey)}
/* On the dark hero the ghost button has to invert or it disappears. */
.hero .btn.ghost,section.dark .btn.ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn.ghost:hover,section.dark .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.btn.ghost:hover{background:var(--grey-light);color:var(--blue-dark)}
.btn.lg{font-size:17px;padding:15px 30px;min-height:54px}

/* ---------- Hero ---------- */
.hero{background:var(--blue-dark);color:#fff;padding:clamp(44px,7vw,78px) 0}
.hero h1{color:#fff;max-width:22ch}
.hero .lede{color:#E6E8EE;max-width:62ch}
.hero .eyebrow{color:var(--blue)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero.light{background:var(--grey-light);color:var(--grey-dark)}
.hero.light h1{color:var(--blue-dark)}.hero.light .lede{color:var(--grey-dark)}

/* ---------- Trust bar ---------- */
.trust{background:var(--red);color:#fff}
.trust .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;padding-block:22px;text-align:center}
.trust b{display:block;font-size:clamp(18px,2.6vw,26px);font-weight:900;line-height:1.1}
.trust span{font-size:13px;font-weight:600}

/* ---------- Sections & cards ---------- */
section{padding:clamp(40px,6vw,66px) 0}
section.tight{padding:clamp(28px,4vw,44px) 0}
section.alt{background:var(--grey-light)}
section.dark{background:var(--blue-dark);color:#E6E8EE}
section.dark h2,section.dark h3{color:#fff}
section.red{background:var(--red);color:#fff}
section.red h2,section.red h3{color:#fff}
section.red a{color:#fff;text-decoration:underline}

.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

.card{background:#fff;border:1px solid #E7E7EA;border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}
.card.blue{border-top:4px solid var(--blue)}
.card.red{border-top:4px solid var(--red)}

/* Store card */
.store-card address{font-style:normal;margin-bottom:10px}
.store-card .ph{font-weight:900;font-size:21px;color:var(--red);display:inline-block;margin-bottom:6px}
.store-card .land{color:#5A5A5C;font-size:14.5px}

/* Team card */
.person{text-align:center}
.avatar{width:104px;height:104px;border-radius:50%;margin:0 auto 14px;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:900;font-size:33px;letter-spacing:-.02em}
.avatar.b{background:var(--blue)}
.tenure{display:inline-block;background:var(--blue-ink);color:#fff;font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-top:8px}
.tenure.gold{background:var(--red)}

/* Price table — static and crawlable. Google cannot read a JS widget. */
table.prices{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:15.5px}
table.prices th,table.prices td{text-align:left;padding:11px 13px;border-bottom:1px solid #E7E7EA}
table.prices th{background:var(--grey-light);font-weight:800;color:var(--blue-dark);font-size:12px;letter-spacing:1.4px;text-transform:uppercase}
table.prices td:last-child{font-weight:800;color:var(--blue-dark);white-space:nowrap}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* FAQ */
.faq details{border-bottom:1px solid #E7E7EA;padding:4px 0}
.faq summary{cursor:pointer;font-weight:800;color:var(--blue-dark);padding:15px 0;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-weight:900;font-size:22px;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:0 0 15px}

/* Forms */
form.cpr{display:grid;gap:15px}
form.cpr .row{display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
form.cpr label{display:block;font-weight:600;font-size:14px;margin-bottom:5px;color:var(--blue-dark)}
form.cpr input,form.cpr select,form.cpr textarea{width:100%;font-family:var(--font);font-size:16px;padding:12px 14px;border:1.5px solid var(--grey);border-radius:8px;background:#fff;color:var(--grey-dark);min-height:48px}
form.cpr textarea{min-height:120px;resize:vertical}
form.cpr input:focus,form.cpr select:focus,form.cpr textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(79,176,227,.2)}
.hp{position:absolute;left:-9999px}
.req{color:var(--red)}
.formnote{font-size:13.5px}

/* Sticky mobile call bar — the highest-value element on the site */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;background:#fff;border-top:1px solid #E1E1E5;box-shadow:0 -3px 18px rgba(45,45,59,.13)}
.callbar div{display:flex;gap:8px;padding:9px 12px;padding-bottom:calc(9px + env(safe-area-inset-bottom))}
.callbar a{flex:1;min-height:48px}

/* Footer */
footer.site{background:var(--blue-dark);color:#C9CCD6;padding:52px 0 26px;font-size:15px}
footer.site p.h4{margin-top:0}
footer.site .h4,footer.site h4{color:#fff;font-size:12px;letter-spacing:2.4px;text-transform:uppercase;margin-bottom:14px;font-weight:800}
footer.site a{color:#C9CCD6}
footer.site a:hover{color:#fff}
footer.site .cols{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:8px}
footer.site .nap{font-style:normal;line-height:1.55;margin-bottom:16px}
footer.site .nap b{color:#fff;display:block}
footer.site .nap a.tel{color:var(--blue);font-weight:800}
.legal{border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:20px;font-size:13px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
.netbar{display:flex;gap:10px;flex-wrap:wrap;font-size:13.5px;margin-top:14px}

/* Breadcrumbs */
.crumbs{font-size:13.5px;padding:14px 0;color:var(--grey-dark)}
.crumbs [aria-current]{color:#5E5E61}
.crumbs a{color:var(--grey-dark)}
.crumbs span{opacity:.6;margin:0 7px}

/* Lite YouTube embed — no iframe until clicked */
.lite-yt{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--blue-dark);border-radius:var(--r);overflow:hidden;cursor:pointer;border:0;padding:0;width:100%}
.lite-yt img{width:100%;height:100%;object-fit:cover}
.lite-yt .play{position:absolute;inset:0;display:grid;place-items:center}
.lite-yt .play::after{content:"";width:74px;height:52px;border-radius:12px;background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 52'%3E%3Crect width='74' height='52' rx='12'/%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow:0 6px 22px rgba(0,0,0,.35)}
.lite-yt .tri{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-left:19px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.lite-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Language toggle */
.langs{display:flex;gap:6px;align-items:center}
.langs a{font-weight:800;font-size:12.5px;letter-spacing:1px;padding:3px 8px;border-radius:5px}
.langs a.on{background:var(--blue-ink);color:#fff}

/* Misc */
.pill{display:inline-block;background:var(--grey-light);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;margin:0 6px 8px 0;color:var(--blue-dark)}
.pill a{color:var(--blue-dark)}
.note{background:var(--grey-light);border-left:4px solid var(--blue);padding:16px 20px;border-radius:0 8px 8px 0;margin:0 0 1.3em}
.note.red{border-left-color:var(--red)}
.walkin{font-weight:800;color:var(--blue-ink)}
.linklist{columns:2;column-gap:32px}
.linklist li{break-inside:avoid;margin-bottom:7px}

@media (max-width:1100px){nav.main a,.dd-top{font-size:14px;padding:9px 8px}.navquote{margin-left:6px;padding:10px 14px}}
@media (max-width:760px){
  /* The full hours string is too long for a phone. The open/closed state is
     the useful half; the hours themselves are in the footer and on every
     store page. */
  .topbar .lbl .full{display:none}
  .topbar{font-size:13px}
  .topbar .wrap{gap:10px}
}
@media (max-width:860px){
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:8px var(--gut) 16px;box-shadow:var(--shadow-lg)}
  nav.main.open{display:flex}
  nav.main a{padding:13px 4px;border-bottom:1px solid var(--grey-light);border-radius:0}
  .navtoggle{display:block}
  .callbar{display:block}
  body{padding-bottom:72px}
  .linklist{columns:1}
}
@media print{.callbar,header.site,.topbar{display:none}}

/* ==========================================================================
   Dropdown nav (Chad 9/14/26)
   ========================================================================== */
nav.main{gap:2px}
.dd{position:relative}
.dd-top{display:inline-flex;align-items:center;gap:6px;color:var(--blue-dark);font-weight:600;font-size:15px;padding:9px 11px;border-radius:7px;white-space:nowrap}
.dd-top:hover{background:var(--grey-light);text-decoration:none}
.dd-top i{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.55;flex:none}
.dd.on > .dd-top{color:var(--link)}
.dd-menu{position:absolute;top:100%;left:0;min-width:236px;background:#fff;border:1px solid #E7E7EA;border-radius:10px;box-shadow:var(--shadow-lg);padding:7px;display:none;z-index:120}
.dd-menu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd.open .dd-menu{display:block}
.dd-menu a{display:block;padding:9px 12px;border-radius:6px;color:var(--blue-dark);font-weight:600;font-size:14.5px;white-space:nowrap}
.dd-menu a:hover{background:var(--grey-light);text-decoration:none}
.dd-menu a.on{color:var(--link)}
nav.main a.btn,nav.main a.btn:hover{color:#fff}
.navquote{margin-left:10px;font-size:14px;padding:10px 18px;min-height:40px}

.topbar .topright{display:flex;align-items:center;gap:14px}
.topbar .tel{font-weight:800}

/* ==========================================================================
   Home page blocks — the emoji + button language from the current site
   ========================================================================== */
.badge-pill{display:inline-block;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:2.6px;text-transform:uppercase;padding:9px 20px;border-radius:999px;margin-bottom:22px}
.hero.center{text-align:center}
.hero.center h1,.hero.center .lede{max-width:none;margin-left:auto;margin-right:auto}
.hero.center .lede{max-width:62ch;font-size:clamp(17px,1.9vw,19px)}
.hero.center h1{font-size:clamp(34px,6vw,60px);letter-spacing:-.025em}
.hero .subhead{color:#E6E8EE;font-weight:600;font-size:clamp(17px,2.1vw,21px);max-width:60ch;margin:0 auto 6px;line-height:1.35}
.hero.center .badge-pill{margin-bottom:18px}
.hero.center .hero-cta{justify-content:center}
.hero h1 .hl{color:var(--red-light)}

/* Emoji trust bar */
.trust.emoji .wrap{grid-template-columns:repeat(auto-fit,minmax(178px,1fr));text-align:left;gap:14px 26px}
.trust.emoji div{display:flex;align-items:center;gap:11px;font-weight:700;font-size:14.5px;line-height:1.3}
.trust.emoji em{font-style:normal;font-size:23px;line-height:1;flex:none}

/* Emoji cards */
.svcgrid{grid-template-columns:repeat(3,1fr)}
@media(max-width:940px){.svcgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.svcgrid{grid-template-columns:1fr}}
.ecard{background:#fff;border:1px solid #E7E7EA;border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.ecard .em{font-size:34px;line-height:1;margin-bottom:14px}
.ecard h3{margin-bottom:.4em}
.ecard p{font-size:15.5px;margin-bottom:16px}
.ecard .tagpill{margin-top:auto;align-self:flex-start;background:var(--grey-light);color:var(--blue-dark);font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.ecard a.more{font-weight:800}
section.dark .ecard{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);box-shadow:none}
section.dark .ecard p{color:#C9CCD6}
section.dark .ecard .tagpill{background:rgba(255,255,255,.14);color:#fff}

/* Why-us stat row */
.whyrow{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));text-align:center}
.whyrow .big{font-size:40px;font-weight:900;color:var(--red);line-height:1;display:block;margin-bottom:10px}
.whyrow .em{font-size:36px;line-height:1;display:block;margin-bottom:10px}
.whyrow h3{font-size:18px;margin-bottom:.45em}
.whyrow p{font-size:15px;margin:0}

/* The repair quote widget, above the fold */
.quotebox{background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);padding:10px;overflow:hidden}
.quotebox iframe{display:block;width:100%;border:0;border-radius:12px;min-height:1200px;transition:height .18s ease}
.hero .quotebox{margin-top:28px;text-align:left}
.quotejump{display:inline-flex;align-items:center;gap:8px}

@media (max-width:1100px){nav.main a,.dd-top{font-size:14px;padding:9px 8px}.navquote{margin-left:6px;padding:10px 14px}}
@media (max-width:860px){
  .dd-menu{position:static;display:block;box-shadow:none;border:0;padding:0 0 8px 12px;min-width:0}
  .dd-menu a{padding:10px 4px;white-space:normal}
  .dd-top{padding:13px 4px;border-bottom:1px solid var(--grey-light);border-radius:0;width:100%;justify-content:space-between}
  .navquote{margin:12px 0 0;width:100%}
  .trust.emoji .wrap{grid-template-columns:1fr 1fr}
  .quotebox iframe{min-height:1160px}
}

/* ==========================================================================
   Lead capture (Chad 9/14/26) — B2B form above the fold, client proof,
   live inventory. The point of all three is to catch the lead on the
   screen the visitor actually landed on.
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.leadtop{background:var(--grey-light);padding-block:clamp(34px,5vw,54px)}
.leadgrid{display:grid;gap:34px;grid-template-columns:1fr 1fr;align-items:start}
.leadcard{background:#fff;border:1px solid #E1E1E6;border-top:5px solid var(--red);border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow-lg)}
.leadcard h3{margin-bottom:.25em}
.leadcard .formnote{margin-bottom:18px}
form.cpr label.check{display:flex;align-items:flex-start;gap:9px;font-weight:600;font-size:14.5px;color:var(--blue-dark);cursor:pointer}
form.cpr label.check input{width:auto;min-height:0;margin-top:3px;flex:none}
section.dark form.cpr label,section.dark form.cpr label.check{color:#E6E8EE}
section.dark .formnote{color:#C9CCD6}
@media (max-width:880px){.leadgrid{grid-template-columns:1fr;gap:26px}}

/* Client proof marquee */
.marquee{overflow:hidden;margin-top:20px;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:16px;width:max-content;animation:slide 44s linear infinite}
.marquee:hover .track,.marquee:focus-within .track{animation-play-state:paused}
.marquee .logo{flex:none;display:grid;place-items:center;min-width:220px;height:74px;padding:0 24px;
  background:#fff;border:1px solid #E4E4E8;border-radius:var(--r)}
.marquee .logo span{font-weight:800;color:var(--blue-dark);font-size:14.5px;text-align:center;line-height:1.25}
.marquee .logo img{max-height:44px;width:auto;object-fit:contain}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee .track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* Live inventory */
.invbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:22px 0 24px}
.invbar select,.invbar input{font-family:var(--font);font-size:15px;padding:11px 13px;border:1.5px solid var(--grey);border-radius:8px;min-height:46px;background:#fff;color:var(--grey-dark)}
.invbar input{flex:1;min-width:190px}
.invcount{font-size:14px;font-weight:700;color:var(--blue-dark);margin-left:auto}
.invcard{background:#fff;border:1px solid #E7E7EA;border-radius:var(--r);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:5px}
.invcard h3{font-size:17px;margin:0 0 2px;line-height:1.28}
.invmake{font-size:10.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--blue-ink)}
.invstore{font-size:14px;margin:0;color:#5A5A5C}
.invprice{font-size:25px;font-weight:900;color:var(--blue-dark);margin:6px 0 12px}
.invcard .btn{margin-top:auto;font-size:14px;padding:10px 16px;min-height:42px}
#inv-note{margin-top:18px}

/* ==========================================================================
   Spacing pass. Sections were inheriting a big pad on top AND bottom, so
   two stacked panels of the same colour read as one enormous block with a
   hole in the middle. Consecutive same-colour sections now collapse, and
   the rhythm is tighter overall.
   ========================================================================== */
section{padding:clamp(34px,4.6vw,56px) 0}
section + section{padding-top:clamp(26px,3.6vw,44px)}
section.alt + section.alt,
section.dark + section.dark,
section:not(.alt):not(.dark):not(.red) + section:not(.alt):not(.dark):not(.red){padding-top:0}
section.alt + section.alt > .wrap,
section.dark + section.dark > .wrap{padding-top:clamp(20px,2.6vw,30px);border-top:1px solid rgba(128,128,140,.16)}
.hero + section,.hero + .trust + section,.trust + section{padding-top:clamp(30px,4vw,48px)}
section .wrap > h2:first-child,section .wrap > .tab:first-child,section .wrap > .eyebrow:first-child{margin-top:0}
section p:last-child,section ul:last-child,section .grid:last-child{margin-bottom:0}
.stripe{margin:clamp(26px,3.4vw,40px) 0}
.crumbs{padding:12px 0}


/* A hero that is immediately followed by a form or a quote widget gets out
   of the way. The job of that hero is to say where you are, not to fill the
   screen while the thing that converts sits below the fold. */
.hero.compact{padding:clamp(30px,4vw,46px) 0}
.hero.compact h1{font-size:clamp(27px,4.2vw,40px);max-width:24ch}
.hero.compact .lede{font-size:clamp(16px,1.8vw,18px);max-width:70ch;margin-bottom:0}
.hero.compact .hero-cta{margin-top:20px}

/* Widget panels read as a panel, not as something floating in white space. */
.widgetpanel .quotebox{margin-top:22px}
.widgetpanel + section{padding-top:clamp(30px,4vw,48px)}
section.alt.widgetpanel + section.alt{padding-top:clamp(26px,3.4vw,40px)}
section.alt.widgetpanel + section.alt > .wrap{border-top:0;padding-top:0}

/* The buyback widget sets its own width; give it room without letting it
   stretch to a full 1180px, which looks absurd for a 7-tile picker. */
.widgetpanel .wrap.narrow{max-width:880px}
[data-cpr-buyback]{margin-top:20px}

/* Shop / sell pages: the thing they came for starts immediately. */
.invask{margin-top:20px;font-size:15.5px}
.invask .pill{margin-top:10px}
.invask a.pill{background:var(--grey-light);font-weight:700}
.invask a.pill:hover{background:var(--grey);text-decoration:none}
#instock{padding-top:clamp(28px,3.6vw,42px)}
.modelgrid{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.modelgrid .pill{margin:0;background:var(--grey-light);font-weight:700;border:1px solid transparent}
.modelgrid a.pill:hover{background:#fff;border-color:var(--blue);text-decoration:none}
section.dark .modelgrid .pill{background:rgba(255,255,255,.1);color:#fff}

/* Store picker in the top bar. A single hardcoded number sends most callers
   to the wrong shop; pages that belong to one store name it, the rest ask. */
.storepick{position:relative}
.storepick .picker{background:none;border:0;color:#fff;font:inherit;font-weight:800;cursor:pointer;padding:0}
.storemenu{position:absolute;right:0;top:100%;margin-top:8px;background:#fff;border-radius:10px;box-shadow:var(--shadow-lg);
  padding:7px;min-width:250px;z-index:130;display:block}
.storemenu[hidden]{display:none}
.storemenu a{display:flex;justify-content:space-between;gap:14px;padding:10px 12px;border-radius:6px;color:var(--blue-dark);font-weight:600;font-size:14.5px}
.storemenu a:hover{background:var(--grey-light);text-decoration:none}
.storemenu a b{color:var(--blue-dark)}
.topbar .tel .sm{font-weight:600;opacity:.75;font-size:12.5px}
@media (max-width:760px){.storemenu{right:auto;left:0}}
.store-card.other{background:var(--grey-light);border-style:dashed}
.store-card.other em{color:var(--blue-ink);font-style:normal;font-weight:800;font-size:12.5px;letter-spacing:1px;text-transform:uppercase}


/* Small letter-spaced type needs more contrast than the brand values give it,
   and more again on the grey panel. Large areas keep the true brand colours. */
:root{--red-ink:#B01C22}
.eyebrow{color:var(--red-ink)}
.eyebrow.blue{color:var(--blue-ink)}
section.alt .eyebrow,.hero.light .eyebrow,.leadtop .eyebrow{color:var(--red-ink)}
section.alt .eyebrow.blue,.hero.light .eyebrow.blue,.leadtop .eyebrow.blue{color:#175E86}
.hero:not(.light) .eyebrow,section.dark .eyebrow{color:var(--blue)}
.crumbs [aria-current]{color:#575759}
.crumbs{color:#575759}
.crumbs a{color:#4E4E50}

/* Breadcrumbs. The separator spans carry the dimming, not the current-page
   label (which was inheriting it and failing contrast), and the links stay
   underlined so they are not distinguishable by colour alone. */
.crumbs span{opacity:1}
.crumbs .sep{opacity:.55}
.crumbs [aria-current]{color:#5A5A5C;opacity:1}
.crumbs a{color:var(--link);text-decoration:underline;text-underline-offset:2px}

/* The buyback widget's footnote ships at #8b8b8b on near-white, which is 3.3:1
   and fails AA for 11px text. Darkened here rather than in the widget, so a
   future drop-in of Chad's widget package is not overwritten. */
.cpr-bb__foot,.cpr-bb__foot *{color:#5F5F61 !important}
.person .startdate{font-size:13px;font-weight:700;color:#5A5A5C;margin:0 0 4px;letter-spacing:.3px}