/* Car Price Negotiator theme. Design: Driveway IV. Built by Bytes WebWorks. */
@font-face{font-family:'Libre Franklin';src:url(../fonts/libre-franklin.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url(../fonts/source-serif-4.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url(../fonts/archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

:root{
  --blue:#1B5488; --blue-deep:#123B61; --blue-soft:#5C83AB;
  --tint:#E8EFF6; --tint2:#D6E3EF;
  --red:#2E7D52; --red-deep:#236340; --alert:#B42A2A;
  --green:#15683F; --gold:#FFD74A;
  --navy:#143A5E; --forest:#14402E; --cream:#F3EDE0; --cream2:#EAE2D2;
  --ochre:#7A5A0E; --teal:#1A5E57;
  --ink:#0F1418; --ink2:#3C454D; --ink3:#555E66;
  --hair:#E3E6E9; --rule:#C2C8CE; --heavy:#0F1418;
  --paper:#FFFFFF; --paper2:#F5F6F7; --white:#FFFFFF;
  --coal:#0E1419; --coal2:#1B242C;
  --max:1120px; --pad:clamp(18px,4.6vw,40px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--paper);color:var(--ink);overflow-x:clip;
  font-family:'Libre Franklin','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:1.0625rem;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Source Serif 4',Georgia,'Times New Roman',serif;font-weight:600;
  letter-spacing:-.008em;margin:0}
h4{font-family:'Libre Franklin','Helvetica Neue',sans-serif;font-weight:700;letter-spacing:0}
.ser{font-family:'Source Serif 4',Georgia,serif}
.w{max-width:var(--max);margin:0 auto;padding:0 max(var(--pad),env(safe-area-inset-right)) 0 max(var(--pad),env(safe-area-inset-left))}
.tnum{font-variant-numeric:tabular-nums}

/* a real hyperlink, underlined, the way a person writes one */
.tl{color:var(--blue);text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:3px;font-weight:600}
.tl:hover{color:var(--red)}

/* marker swipe behind a phrase, drawn by hand so the ends are uneven */
.hl{position:relative;display:inline-block;z-index:0}
.hl svg{position:absolute;left:-.13em;right:-.13em;bottom:-.06em;width:calc(100% + .26em);
  height:.62em;z-index:-1;pointer-events:none}
.ul{position:relative;display:inline-block}
.ul svg{position:absolute;left:-.04em;width:calc(100% + .08em);bottom:-.24em;height:.3em;
  pointer-events:none}

.lbl{font-size:0.875rem;letter-spacing:0;text-transform:none;color:var(--ink3);
  margin:0 0 12px;font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;
  font-size:1rem;padding:13px 22px;min-height:50px;background:var(--red);color:#fff;
  border:0;border-radius:3px;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--red-deep)}
.btn.b{background:var(--blue)}.btn.b:hover{background:var(--blue-deep)}

/* ---------- utility bar + masthead ---------- */
.util{background:var(--heavy);color:#C8CDD3;font-size:0.8125rem}
.util .w{display:flex;gap:0;flex-wrap:wrap;align-items:center;padding-top:7px;padding-bottom:7px}
.util a{color:#C8CDD3;padding:0 13px;border-left:1px solid #3B4249;display:inline-block}
.util a:first-of-type{border-left:0;padding-left:0}
.util a:hover{color:#fff}
.util .sp{margin-left:auto;color:#fff;font-weight:700;padding-left:14px}
header.site{background:var(--paper);border-bottom:2px solid var(--heavy);position:sticky;top:0;z-index:60}
header.site .w{display:flex;align-items:center;gap:22px;padding-top:12px;padding-bottom:12px}
.mark{display:inline-flex;align-items:center;gap:13px;min-width:0;min-height:44px}
.mark img{height:92px;width:auto;flex:none}
.mark .tag{border-left:1px solid var(--rule);padding-left:13px;font-size:0.875rem;font-weight:700;
  letter-spacing:0;text-transform:none;color:var(--ink3);line-height:1.5;white-space:nowrap}
header.site nav.main{margin-left:auto;display:flex;gap:22px}
header.site nav.main a{font-weight:700;font-size:0.9375rem;color:var(--ink2);display:inline-flex;
  align-items:center;min-height:44px;border-bottom:2px solid transparent}
header.site nav.main a:hover,header.site nav.main a[aria-current]{color:var(--blue);border-bottom-color:var(--blue)}
header.site .btn{flex:none}


/* ---------- hero ---------- */
.hero{padding:clamp(34px,4.6vw,62px) 0 clamp(30px,3.6vw,46px);position:relative}
.hero .g{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);
  gap:clamp(26px,4.4vw,58px);align-items:start}
.hero h1{font-size:clamp(2.0625rem,4.5vw,3.375rem);line-height:1.05;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .deck{font-size:clamp(1.03125rem,1.5vw,1.1875rem);color:var(--ink2);margin:0 0 20px;max-width:46ch}
.hero .deck b{color:var(--ink);font-weight:700}

/* the working form, the way a real service opens */
.tool{border-top:3px solid var(--navy);padding-top:16px}
.tool .top p{margin:0 0 16px;font-size:0.875rem;font-weight:700;letter-spacing:0;
  text-transform:none;color:var(--navy)}
.tool label{display:block;font-size:0.875rem;font-weight:700;letter-spacing:0;
  text-transform:none;color:var(--ink3);margin:0 0 2px}
.tool input,.tool select,.tool textarea{width:100%;font:inherit;font-size:1.03125rem;
  padding:9px 2px;border:0;border-bottom:1.5px solid var(--rule);border-radius:0;
  background:transparent;color:var(--ink);min-height:46px;margin-bottom:17px}
.tool input::placeholder,.tool textarea::placeholder{color:#8C949B}
.tool input:focus,.tool textarea:focus{outline:0;border-bottom-color:var(--navy);
  border-bottom-width:2px}
.tool textarea{min-height:70px;resize:vertical;line-height:1.5}
.tool .row2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.tool .or{font-size:0.9375rem;color:var(--ink2);margin:14px 0 0}
.tool .btn{width:100%}
.tool .fine{margin:10px 0 0;font-size:0.84375rem;color:var(--ink3);line-height:1.5}

/* ---------- customer wall ---------- */
.wall{background:var(--forest);color:#DCE8E1;padding:clamp(32px,4vw,52px) 0}
.wall h2{color:#fff}
.wall .hd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;margin-bottom:18px}
.wall h2{font-size:clamp(1.25rem,2.1vw,1.5625rem)}
.wall .hd p{margin:0;font-size:0.90625rem;color:#A8C0B3}
.shots{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.shot{position:relative;flex:none;width:clamp(210px,23vw,264px);margin:0}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#ddd}
.shot .cap{padding:11px 0 0;border-top:1px solid #35594A;margin-top:11px}
.shot .cap b{display:block;font-size:0.9375rem;font-weight:800;color:#fff}
.shot .cap span{display:block;font-size:0.84375rem;color:#A8C0B3}
.badge{position:absolute;top:10px;left:10px;background:var(--gold);color:#2A2003;
  font-size:0.78125rem;font-weight:800;padding:5px 9px}
.wall .note{margin:18px 0 0;font-size:0.875rem;color:#8FA99B}

/* ---------- credential row ---------- */
.creds{padding:clamp(24px,2.8vw,34px) 0;border-bottom:1px solid var(--hair)}
.creds .w{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2.6vw,36px);
  align-items:center}
.creds .k{font-size:0.875rem;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--ink3);margin:0;white-space:nowrap}
.creds p{margin:0;font-size:1rem;color:var(--ink2)}
.creds p b{color:var(--ink);font-weight:800}

/* ---------- generic section ---------- */
.s{padding:clamp(46px,5.8vw,86px) 0}
.s.tall{padding:clamp(54px,7.4vw,112px) 0}
.s.white{background:var(--white);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.head{border-top:2px solid var(--heavy);padding-top:22px;display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(16px,3.4vw,50px);
  align-items:start;margin-bottom:clamp(26px,3.2vw,40px)}
.head h2{font-size:clamp(1.75rem,3.6vw,2.6875rem);line-height:1.08;max-width:20ch}
.head p{margin:5px 0 0;color:var(--ink2);font-size:1.03125rem}

/* ---------- the usual way vs with Jeff, on a navy field ---------- */
.vsec{background:var(--navy);color:#C6D3E0}
.vsec .row .t{color:#9FB2C5}
.vsec .b .row .t{color:#E8B44A}
.vsec .head{border-top-color:var(--gold)}
.vsec .head h2{color:#fff}
.vsec .head p{color:#AEBDCD}
.vsec .row{border-bottom-color:#2A5178}
.vsec .row p{color:#B9C6D4}
.vsec .row p b{color:#fff}
.vsec .col h3{color:#fff}
.vsec .vsfoot{color:#AEBDCD}
.vsec .vsfoot b{color:#fff}
.vsec .tl{color:#F0C060;text-decoration-color:#B08A2E}
.vsec .tl:hover{color:#fff}
.vsec .ul svg path{stroke:#F0C060}
.vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3.4vw,44px)}
.vs .col>.k{font-size:0.875rem;font-weight:700;letter-spacing:0;text-transform:none;
  margin:0 0 4px}
.vs .a>.k{color:#9FB2C5}
.vs .b>.k{color:#F0C060}
.vs .col h3{font-size:1.1875rem;margin-bottom:14px}
.vs .b{border-left:2px solid var(--gold);padding-left:clamp(20px,3vw,34px)}
.vs .a{padding-right:clamp(4px,1vw,14px)}
.row{padding:13px 0;border-bottom:1px solid var(--hair)}
.vs .b .row{border-bottom-color:#C6D7E6}
.row:last-child{border-bottom:0}
.row .t{font-size:0.875rem;font-weight:700;letter-spacing:0;text-transform:none;
  color:#9FB2C5;margin:0 0 3px}
.vs .b .row .t{color:#E8B44A}
.row p{margin:0;font-size:0.96875rem;color:var(--ink2);line-height:1.55}
.row p b{color:var(--ink);font-weight:700}
.vsfoot{margin:22px 0 0;font-size:1rem;color:var(--ink2)}
.vsfoot b{color:var(--ink);font-weight:800}

/* ---------- steps ---------- */
#how .head{border-top-color:var(--blue)}
#how{background:var(--paper)}
.steps{border-top:1px solid var(--rule)}
.step{display:grid;grid-template-columns:58px minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(12px,2.4vw,32px);padding:clamp(18px,2.4vw,28px) 0;
  border-bottom:1px solid var(--hair);align-items:start}
.step .n{font-weight:800;font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:.9;color:#5C83AB;
  letter-spacing:-.04em}
.step h3{font-size:clamp(1.125rem,1.85vw,1.34375rem);line-height:1.22}
.step .who{font-size:0.875rem;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--red);margin:7px 0 0}
.step p{margin:0;color:var(--ink2);font-size:0.96875rem;line-height:1.58}
.step.wide{grid-template-columns:58px minmax(0,1fr)}
.step.wide .full{grid-column:2;margin-top:14px}
.step.wide .full img{width:100%;height:clamp(150px,19vw,230px);object-fit:cover;object-position:50% 60%}
.step.wide .full figcaption{font-size:0.8125rem;color:var(--ink3);margin-top:7px}

/* ---------- jeff ---------- */
#jeff .lbl{color:var(--red)}
.jeff{background:var(--cream)}
.jeff .head,.jeff .prior{border-top-color:var(--rule)}
.jeff .g{display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  gap:clamp(26px,4.4vw,64px);align-items:start}
.jeff .port{margin:0}
.jeff .port img{width:100%;aspect-ratio:4/5;object-fit:cover}
.jeff .port figcaption{font-size:0.84375rem;color:var(--ink3);margin-top:9px;max-width:30ch}
.jeff h2{font-size:clamp(1.75rem,3.6vw,2.6875rem);line-height:1.08;max-width:17ch;margin-bottom:18px}
.jeff p{color:var(--ink2);font-size:1.0625rem;margin:0 0 16px;max-width:60ch}
.jeff p b{color:var(--ink);font-weight:700}
.jeff .pull{font-size:clamp(1.3125rem,2.5vw,1.875rem);line-height:1.32;color:var(--ink);font-style:normal;
  border-top:2px solid var(--red);border-bottom:1px solid var(--hair);padding:19px 0;
  margin:24px 0;max-width:26ch}
.prior{border-top:1px solid var(--rule);margin-top:24px;padding-top:15px}
.prior p{margin:0;font-size:1rem;color:var(--ink2);max-width:58ch}
.prior p b{font-weight:800;color:var(--ink)}
.sign{margin-top:24px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sign b{font-weight:800;font-size:1.125rem}
.sign span{color:var(--ink3);font-size:0.9375rem}

/* ---------- handled ---------- */
.hsec .head{border-top-color:var(--teal)}
.hsec .hitem h3{color:var(--teal)}
.hlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(26px,4.4vw,68px);border-top:1px solid var(--rule)}
.hitem{padding:16px 0;border-bottom:1px solid var(--hair)}
.hitem h3{font-size:1.0625rem;margin-bottom:3px}
.hitem p{margin:0;color:var(--ink2);font-size:0.96875rem;line-height:1.55}

/* ---------- money ---------- */
.money .head{border-top-color:var(--green)}
.money .terms dt{color:var(--green)}
.money .g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(26px,4.4vw,66px);align-items:start}
.money p{color:var(--ink2);margin:0 0 14px;font-size:1.0625rem;max-width:46ch}
.terms{border-top:1px solid var(--rule);margin-top:20px}
.terms>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;padding:12px 0;
  border-bottom:1px solid var(--hair)}
.terms dt{font-weight:800;font-size:1.1875rem;color:var(--blue)}
.terms dd{margin:0;font-size:0.96875rem;color:var(--ink2);line-height:1.5}
.sheet{background:var(--cream);padding:clamp(20px,2.6vw,30px)}
.sheet h3{font-size:1.25rem;margin-bottom:3px}
.sheet .sub{font-size:0.875rem;color:var(--ink3);margin:0 0 13px;padding-bottom:13px;
  border-bottom:2px solid var(--heavy)}
.r{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:9px 0;
  font-size:1rem;color:var(--ink2);
  background-image:linear-gradient(to right,var(--rule) 34%,rgba(255,255,255,0) 0);
  background-position:bottom;background-size:5px 1px;background-repeat:repeat-x}
.r span{background:var(--cream);padding-right:7px}
.r b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;background:var(--cream);
  padding-left:7px}
.r.cut b{color:var(--ink3);text-decoration:line-through}
.r.neg b{color:var(--red)}
.r.sub2{background-image:none;border-bottom:1px solid var(--rule)}
.r.sub2 span,.r.sub2 b{font-weight:800;color:var(--ink)}
.r.net{background-image:none;border-top:2px solid var(--heavy);margin-top:6px;padding-top:12px}
.r.net span{font-weight:800;font-size:1.0625rem;color:var(--ink)}
.r.net b{font-weight:800;font-size:1.4375rem;color:var(--green)}
.fine{font-size:0.84375rem;color:var(--ink3);line-height:1.55;margin:13px 0 0}

/* ---------- reviews ---------- */
.revs .big{border-top:2px solid var(--blue);padding-top:22px;margin-bottom:26px}
.revs .big blockquote{margin:0;font-size:clamp(1.375rem,2.8vw,2.0625rem);line-height:1.3;
  font-style:normal;max-width:24ch}
.revs cite{display:block;font-style:normal;font-size:0.90625rem;color:var(--ink3);margin-top:13px}
.revs cite b{font-weight:800;color:var(--ink);font-size:0.9375rem}
.revs .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3.8vw,56px);border-top:1px solid var(--hair);padding-top:20px}
.revs .two blockquote{margin:0;font-size:1.03125rem;color:var(--ink2);line-height:1.58}
.stars{color:var(--ochre);letter-spacing:2px;font-size:0.875rem;margin-bottom:9px}

/* ---------- faq ---------- */
#faq .head{border-top-color:var(--ochre)}
.faq{border-top:1px solid var(--rule);max-width:840px}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:16px 34px 16px 0;position:relative;
  font-weight:800;font-size:1.09375rem;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:13px;font-size:1.4375rem;
  color:var(--ochre);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{color:var(--ochre)}
.faq p{margin:0 0 17px;color:var(--ink2);font-size:1.03125rem;max-width:66ch}

/* ---------- contact ---------- */
.contact .head{border-top-color:var(--red)}
.contact .g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(26px,4.4vw,66px);align-items:start}
.contact .acts{display:flex;gap:11px;flex-wrap:wrap}
.dl{border-top:1px solid var(--rule)}
.dl>div{display:grid;grid-template-columns:106px minmax(0,1fr);gap:14px;padding:12px 0;
  border-bottom:1px solid var(--hair)}
.dl dt{font-weight:700;font-size:0.875rem;letter-spacing:0;text-transform:none;
  color:var(--ink3);padding-top:3px}
.dl dd{margin:0;font-size:1.03125rem;color:var(--ink)}
.dl dd small{display:block;font-size:0.90625rem;color:var(--ink3)}

/* ---------- footer ---------- */
footer.site{border-top:2px solid var(--heavy);background:var(--heavy);color:#B9C0C7;padding:34px 0 28px;font-size:0.96875rem;color:var(--ink2)}
footer .fg{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:28px}
footer .about{margin:14px 0 0;line-height:1.68;color:#9AA2AA;max-width:38ch;font-size:0.9375rem}
footer .mark .tag{border-left-color:#464E56;color:#9AA2AA}
footer .fh{color:#fff}
footer a{color:#B9C0C7}
footer a:hover{color:#fff}
.fbot{border-top-color:#3A424A;color:#8E969E}
footer .fh{font-weight:700;font-size:0.875rem;letter-spacing:0;
  text-transform:none;margin:0 0 11px}
footer ul{list-style:none;margin:0;padding:0}
footer a{display:inline-flex;align-items:center;min-height:34px}

.fbot{border-top:1px solid #3A424A;margin-top:28px;padding-top:17px;display:flex;
  flex-wrap:wrap;gap:8px 26px;justify-content:space-between;color:#8E969E;font-size:0.84375rem}


/* =====================================================================
   WordPress theme additions (v1.0.0). Everything above is the approved
   Driveway IV home design; everything below extends it to every page.
   ===================================================================== */

/* ---------- base ---------- */
.skip{position:absolute;left:10px;top:10px;background:var(--ink);color:#fff;padding:12px 16px;z-index:100;font-weight:700;
  clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip:focus{clip-path:none;width:auto;height:auto;overflow:visible}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn:focus-visible{outline-color:var(--navy)}
.h3{font-size:1.25rem;line-height:1.25;margin:0 0 14px}
.mt{margin-top:18px}
.narrow{max-width:800px}
.note{margin-top:20px;font-size:1rem;color:var(--ink2);max-width:46ch}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.stars{color:var(--ochre)}
.stars.sm{letter-spacing:0;font-size:inherit;margin:0}
main{display:block}
.admin-bar header.site{top:32px}
@media(max-width:782px){.admin-bar header.site{top:0}}

#cost{background:var(--white)}
#contact{background:var(--cream)}

/* ---------- header additions ---------- */
.mark{flex:none}
header.site .w{padding-top:10px;padding-bottom:10px}
.util .util-tel{color:#fff;font-weight:700;border-left:0;padding:0}
.macts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.macts .btn{flex:1 1 200px}

/* ---------- page hero ---------- */
.phero{padding:clamp(22px,3vw,38px) 0 clamp(30px,4vw,54px);border-bottom:1px solid var(--hair)}
.phero.tone-cream{background:var(--cream);border-bottom-color:var(--cream2)}
.phero .g{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,4.4vw,58px);align-items:start}
.phero.has-aside .g{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.phero h1{font-size:clamp(1.9375rem,4.1vw,3.125rem);line-height:1.07;margin:0 0 18px;max-width:22ch}
.phero .deck{font-size:clamp(1.03125rem,1.45vw,1.1875rem);color:var(--ink2);max-width:58ch}
.phero .deck p{margin:0 0 14px}
.phero .deck b{color:var(--ink)}
.hlinks{font-size:1rem;color:var(--ink2);margin:6px 0 0}
.hero .hlinks{margin:0}
.crumbs ol{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:0.84375rem;color:var(--ink3)}
.crumbs li+li::before{content:"/";margin:0 9px;color:var(--rule)}
.crumbs a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:32px}
.crumbs a:hover{color:var(--blue)}
.crumbs li[aria-current]{display:inline-flex;align-items:center;min-height:32px}
.pphoto{margin:0}
.pphoto img,.pphoto-img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pphoto figcaption{font-size:0.84375rem;color:var(--ink3);margin-top:8px}
.port-sm{max-width:360px}
.port-sm img{aspect-ratio:4/5;object-position:50% 20%}
.phero .tool{background:var(--paper);padding:20px clamp(18px,2.4vw,28px) 22px;border-top-width:3px}
.phero.tone-cream .tool{background:var(--white)}
.bigrate{font-size:1.125rem;margin:4px 0 12px;color:var(--ink2)}
.bigrate a{color:inherit}
.bigrate b{color:var(--ink);font-size:1.375rem}

/* ---------- forms ---------- */
.tool .fld{min-width:0}
.tool select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E666E' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") no-repeat right 4px center}
.tool select:focus{outline:0;border-bottom-color:var(--navy);border-bottom-width:2px}
.tool .rq{color:var(--red)}
.req-note{font-size:0.84375rem;color:var(--ink3);margin:-4px 0 14px}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;left:0;top:0}
.hp input{width:1px;height:1px}
.tool{position:relative}
.ferr{background:#FBEDEE;border-left:3px solid var(--red);padding:12px 14px;margin:0 0 18px;font-size:0.9375rem;color:var(--ink)}
.ferr ul{margin:6px 0 0;padding-left:18px}
.tool .fine a{color:var(--ink2);text-decoration:underline}
.post-form{margin:32px 0;padding:24px;background:var(--cream)}

/* ---------- review wall (text version of the old photo wall) ---------- */
.wall .shots{padding-bottom:12px;scroll-snap-type:x proximity}
.wall .shots:focus-visible{outline-offset:4px}
.wall .shot{width:clamp(250px,27vw,320px);display:flex;flex-direction:column;scroll-snap-align:start;
  border-top:2px solid var(--gold);padding-top:14px}
.wall .shot .stars{color:var(--gold);margin-bottom:8px}
.wall .shot blockquote{margin:0;font-size:1.0625rem;line-height:1.5;color:#E6EFEA;font-style:normal;flex:1}
.wall .shot .cap{margin-top:14px}
.wall .hd p .tl{color:var(--gold);text-decoration-color:#9C8A3A}
.wall .hd p .tl:hover{color:#fff}
.wall .hd p b{color:#fff}
.wall .hd p .stars{color:var(--gold)}

/* ---------- content blocks ---------- */
.qa{border-top:1px solid var(--rule);max-width:900px}
.qi{padding:18px 0;border-bottom:1px solid var(--hair)}
.qi h3{font-size:1.15625rem;line-height:1.3;margin:0 0 6px}
.qi p{margin:0 0 8px;color:var(--ink2);font-size:1.03125rem;max-width:70ch}
.qi p:last-child{margin-bottom:0}
.qi a,.faq p a,.prose a,.hitem p a:not(.tl),.terms dd a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;font-weight:600}
.qi a:hover,.faq p a:hover,.prose a:hover{color:var(--red)}
.hitem h3 a{color:inherit;text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1.5px;text-underline-offset:4px}
.hitem h3 a:hover{color:var(--red)}
.terms.wide>div{grid-template-columns:130px minmax(0,1fr)}
.terms dd b{color:var(--ink)}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(26px,4.4vw,66px);align-items:start}
.steps .step>div>p{margin:0}
.step .mt{margin-top:11px}
.money .sheet .lbl,.calc-out .lbl{margin-bottom:5px}
.money .mt{font-size:1rem;max-width:52ch}

/* related links */
.related .lbl{margin-bottom:14px}
.related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(26px,4.4vw,68px);border-top:1px solid var(--rule)}
.related li{border-bottom:1px solid var(--hair)}
.related a{display:block;padding:16px 26px 16px 0;position:relative}
.related a::after{content:"\2192";position:absolute;right:2px;top:15px;color:var(--blue);font-weight:800;transition:transform .15s}
.related a:hover::after{transform:translateX(3px)}
.related b{display:block;font-size:1.0625rem;font-weight:800;color:var(--ink)}
.related a:hover b{color:var(--blue)}
.related a>span{display:block;font-size:0.9375rem;color:var(--ink2);margin-top:2px}

/* services grid */
.svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(26px,4.4vw,68px);border-top:1px solid var(--rule)}
.svci{display:block;padding:20px 0;border-bottom:1px solid var(--hair)}
.svci h3{font-size:1.3125rem;margin-bottom:5px}
.svci p{margin:0;color:var(--ink2);font-size:1rem}
.svci .go{display:inline-block;margin-top:8px;font-size:0.875rem;font-weight:800;color:var(--blue);
  text-decoration:underline;text-underline-offset:3px}
.svci:hover h3{color:var(--blue)}

/* call to action band */
.cta{background:var(--navy);color:#C6D3E0;padding:clamp(40px,5vw,70px) 0}
.cta .g{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:clamp(20px,4vw,50px);align-items:center;
  border-top:2px solid var(--gold);padding-top:24px}
.cta h2{color:#fff;font-size:clamp(1.5625rem,3vw,2.25rem);line-height:1.12;margin-bottom:10px;max-width:24ch}
.cta p{margin:0;font-size:1.03125rem;max-width:60ch}
.cta .tl{color:#F0C060;text-decoration-color:#B08A2E}
.cta .tl:hover{color:#fff}
.cta .acts{display:flex;flex-direction:column;gap:10px}

/* reviews page */
.revgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(26px,4.4vw,68px);border-top:2px solid var(--blue)}
.rev{margin:0;padding:22px 0;border-bottom:1px solid var(--hair)}
.rev blockquote{margin:0}
.rev blockquote p{margin:0;font-size:1.03125rem;line-height:1.6;color:var(--ink2)}
.rev figcaption{margin-top:10px;font-size:0.90625rem;color:var(--ink3)}
.rev figcaption b{color:var(--ink);font-weight:800;margin-right:8px}
.rev.lead{grid-column:1/-1}
.rev.lead blockquote p{font-family:'Source Serif 4',Georgia,serif;font-style:normal;font-size:clamp(1.3125rem,2.5vw,1.75rem);line-height:1.34;color:var(--ink);max-width:40ch}

/* faq page */
.faqwrap{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(26px,5vw,70px);align-items:start}
.faq{max-width:none}
.faqside{position:sticky;top:130px;border-top:2px solid var(--ochre);padding-top:14px}
.faqside a{display:flex;align-items:center;min-height:40px;border-bottom:1px solid var(--hair);font-weight:700;font-size:0.9375rem;color:var(--ink2)}
.faqside a:hover{color:var(--blue)}

/* about story */
.jeff-story h2{font-size:clamp(1.4375rem,2.6vw,1.875rem);line-height:1.15;margin:40px 0 12px}
.jeff-story h2:first-child{margin-top:0}
.jeff-story p{color:var(--ink2);font-size:1.09375rem;margin:0 0 16px}
.jeff-story .pull{font-size:clamp(1.3125rem,2.5vw,1.8125rem);line-height:1.32;color:var(--ink);font-style:normal;
  border-top:2px solid var(--red);border-bottom:1px solid var(--hair);padding:19px 0;margin:28px 0}

/* contact */
.contact .tool{border-top:0;padding-top:0}

/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(26px,4.4vw,60px);align-items:start}
.calc-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px;border-top:3px solid var(--navy);padding-top:18px}
.cf{min-width:0;margin-bottom:12px}
.cf.full{grid-column:1/-1}
.cf label{display:block;font-size:0.875rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink3);margin:0 0 2px}
.cf .inp{display:flex;align-items:center;border-bottom:1.5px solid var(--rule)}
.cf .inp:focus-within{border-bottom-color:var(--navy);border-bottom-width:2px}
.cf .inp span{color:var(--ink3);font-weight:700;padding:0 4px}
.cf input,.cf select{width:100%;font:inherit;font-size:1.125rem;font-weight:700;font-variant-numeric:tabular-nums;border:0;background:transparent;
  color:var(--ink);min-height:46px;padding:6px 2px;border-radius:0}
.cf input:focus,.cf select:focus{outline:0}
.cf select{font-size:1rem;font-weight:600;border-bottom:1.5px solid var(--rule);appearance:none;-webkit-appearance:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E666E' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") no-repeat right 4px center;padding-right:22px}
.cf small{display:block;font-size:0.8125rem;color:var(--ink3);line-height:1.45;margin-top:5px}
.calc-out{position:sticky;top:130px}
.calc-out .r b{min-width:80px;text-align:right}
.feebox{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.feebox p{margin:0 0 12px;font-size:0.96875rem;color:var(--ink2)}
.feebox b{color:var(--ink)}

/* ---------- blog ---------- */
.topics{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid var(--hair)}
.topics .lbl{margin:0}
.topics a{font-weight:700;font-size:0.9375rem;color:var(--blue);display:inline-flex;align-items:center;min-height:40px;
  text-decoration:underline;text-underline-offset:3px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
.card{min-width:0;border-top:2px solid var(--heavy);padding-top:14px}
.card .ci{display:block;margin-bottom:14px}
.card .ci img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card .lbl{margin-bottom:6px;font-size:0.75rem}
.card h3{font-size:1.25rem;line-height:1.22;margin-bottom:8px}
.card h3 a:hover{color:var(--blue)}
.card p{margin:0 0 8px;color:var(--ink2);font-size:0.96875rem;line-height:1.55}
.card .meta{font-size:0.84375rem;color:var(--ink3)}
.nav-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.nav-links a,.nav-links span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  padding:0 14px;border:1.5px solid var(--rule);font-weight:700}
.nav-links .current{background:var(--ink);color:#fff;border-color:var(--ink)}
.nav-links a:hover{border-color:var(--blue);color:var(--blue)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.slist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.slist li{padding:14px 0;border-bottom:1px solid var(--hair)}
.slist b{font-size:1.125rem}.slist span{display:block;color:var(--ink2)}

/* single post */
.post-hero h1{max-width:28ch}
.post-hero .lbl a{color:var(--red)}
.post-hero .deck{max-width:62ch;margin:0 0 14px}
.byline{font-size:0.90625rem;color:var(--ink3);margin:0}
.byline a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.post-body{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(30px,5vw,72px);align-items:start;
  padding-top:clamp(28px,3.4vw,44px);padding-bottom:clamp(40px,5vw,70px)}
.post-img{margin:0 0 28px}
.post-img img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
.prose{font-size:1.125rem;line-height:1.7;color:var(--ink);max-width:70ch}
.prose>*:first-child{margin-top:0}
.prose p,.prose ul,.prose ol{margin:0 0 20px}
.prose h2{font-size:clamp(1.4375rem,2.5vw,1.8125rem);line-height:1.2;margin:42px 0 12px;padding-top:18px;border-top:1px solid var(--rule)}
.prose h3{font-size:1.25rem;margin:28px 0 8px}
.prose li{margin-bottom:8px}
.prose ul,.prose ol{padding-left:22px}
.prose img{height:auto}
.prose blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid var(--gold);font-style:normal;color:var(--ink2)}
.prose table{border-collapse:collapse;width:100%;font-size:1rem;margin:0 0 20px}
.prose th,.prose td{border-bottom:1px solid var(--hair);padding:9px 8px;text-align:left}
.prose th{border-bottom:2px solid var(--heavy)}
.author{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;margin-top:40px;padding-top:22px;border-top:2px solid var(--heavy)}
.author .ph{width:96px;height:120px;object-fit:cover;object-position:50% 20%}
.author .lbl{margin-bottom:2px}
.author .nm{font-weight:800;font-size:1.125rem;margin:0 0 6px}
.author p{margin:0;color:var(--ink2);font-size:0.96875rem}
.post-side{position:sticky;top:130px}
.side-box{background:var(--cream);padding:20px}
.side-box .sh{font-weight:800;font-size:1.1875rem;line-height:1.2;margin:0 0 8px}
.side-box p{font-size:0.9375rem;color:var(--ink2);margin:0 0 14px}
.side-box .btn{width:100%}
.side-box .or{margin:12px 0 0}
.side-links{margin-top:22px;border-top:2px solid var(--blue);padding-top:12px}
.side-links a{display:flex;align-items:center;min-height:42px;border-bottom:1px solid var(--hair);font-weight:700;font-size:0.9375rem;color:var(--ink2)}
.side-links a:hover{color:var(--blue)}

/* ---------- footer ---------- */
footer.site{color:#B9C0C7}
footer .fg{grid-template-columns:1.5fr 1fr 1fr 1fr}
footer .fmark{display:inline-block}
footer .fmark img{height:110px;width:auto}
footer .about a{color:#DDE2E6;text-decoration:underline;text-underline-offset:3px;display:inline}
.credit{margin:14px 0 0;padding-top:12px;border-top:1px solid #3A424A;font-size:0.8125rem;color:#8E969E;text-align:center}
.credit a{color:#C8CDD3;text-decoration:underline;text-underline-offset:3px;display:inline-flex;min-height:32px;align-items:center}
.credit a:hover{color:#fff}

/* ---------- responsive ---------- */
.hero .g>*,.head>*,.step>*,.hlist>*,.money .g>*,.contact .g>*,.jeff .g>*,
.revs .two>*,.vs>*,.creds .w>*,.tool .row2>*,footer .fg>*,.phero .g>*,.calc>*,.split>*,.post-body>*{min-width:0}
@media(max-width:1100px){
  header.site nav.main{gap:16px}
  header.site nav.main a{font-size:0.90625rem}
  .mark img{height:70px}
}
@media(max-width:1020px){
  header.site nav.main{display:none}
  .navtoggle{display:inline-flex}
  header.site .hcall{margin-left:auto}
  header.site .hcall~.navtoggle{margin-left:10px}
  .hero .g,.head,.jeff .g,.money .g,.contact .g,.vs,.phero.has-aside .g,.calc,.split,.cta .g,.post-body,.faqwrap{grid-template-columns:1fr;gap:26px}
  .jeff .port img{aspect-ratio:4/3.2;object-position:50% 20%}
  .jeff .port{max-width:400px}
  .step{grid-template-columns:50px minmax(0,1fr)}
  .step>*:not(.n){grid-column:2}
  .creds .w{grid-template-columns:1fr;gap:10px}
  footer .fg{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc-out,.post-side,.faqside{position:static}
  .cta .acts{flex-direction:row;flex-wrap:wrap}
  .phero .pphoto{max-width:620px}
}
@media(max-width:700px){
  .hlist,.revs .two,.related ul,.svc,.revgrid,.cards,.calc-in{grid-template-columns:1fr}
  .terms>div,.dl>div,.terms.wide>div{grid-template-columns:1fr;gap:3px}
  .tool .row2{grid-template-columns:1fr}
  footer .fg{grid-template-columns:1fr}
  .util a{padding:0 9px;font-size:0.78125rem}
  .hide-s{display:none}
  .hcall{display:none!important}
  header.site .hcall~.navtoggle{margin-left:auto}
  .author{grid-template-columns:72px minmax(0,1fr)}
  .author .ph{width:72px;height:90px}
  .prose{font-size:1.0625rem}
}
@media(max-width:560px){
  .mark img{height:62px}
  .util .w{flex-wrap:nowrap}
  .util .w>a:nth-of-type(3),.util .w>a:nth-of-type(4){display:none}
  .util .sp{white-space:nowrap}
}
@media(max-width:380px){
  .mark img{height:50px}
  .util .w>a:nth-of-type(2){display:none}
}
/* tap targets, carried over from the approved design audit */
@media(max-width:1366px){
  .crumbs a,.crumbs li[aria-current],.topics a,.faqside a,.side-links a,.credit a,.util .util-tel,
  .hitem h3 a,.author .nm a,.post-hero .lbl a,.side-box .or a,.dl dd a{display:inline-flex;align-items:center;min-height:44px}
  .card h3 a{display:block}
}
@media(max-width:1366px){
  footer a,footer li a{display:inline-flex;align-items:center;min-height:44px}
  .faq summary{display:block;min-height:44px;padding-top:18px;padding-bottom:18px}
  .util a{min-height:44px;display:inline-flex;align-items:center}
  .tool .or a{display:inline-flex;align-items:center;min-height:44px}
  .util .w{padding-top:0;padding-bottom:0}
  .dl dd a{display:inline-flex;align-items:center;min-height:44px}
  footer li{padding:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{.util,header.site,.ticker,.cta,footer.site,.post-side,.navtoggle,.mpanel,.mbar{display:none}}

/* ---------- v1.1.0: state-aware calculator ---------- */
.state-info{background:var(--cream);padding:14px 16px;margin:2px 0 16px;border-left:3px solid var(--navy)}
.state-info .si-h{margin:0 0 6px;font-weight:800;font-size:0.96875rem;color:var(--ink)}
.state-info ul{margin:0;padding-left:18px}
.state-info li{font-size:0.90625rem;color:var(--ink2);line-height:1.5;margin-bottom:4px}
.calc-warn{margin:12px 0 0;padding:10px 12px;background:#FBEDEE;border-left:3px solid var(--red);font-size:0.90625rem;color:var(--ink)}
.st-wrap{overflow-x:auto;border-top:2px solid var(--heavy)}
.st-table{width:100%;border-collapse:collapse;font-size:0.9375rem;min-width:620px}
.st-table th,.st-table td{text-align:left;padding:9px 10px 9px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.st-table thead th{font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:800;border-bottom:1px solid var(--rule)}
.st-table tbody th{font-weight:700;color:var(--ink)}
.st-table td{color:var(--ink2);font-variant-numeric:tabular-nums}
.st-table small{color:var(--ink3)}
#state-rules .fine{max-width:80ch;margin-top:16px}


/* ---------- v1.2.0: navigation ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* desktop services dropdown */
.dd{position:relative;display:flex;align-items:center}
.ddt{width:26px;min-height:44px;border:0;background:transparent;cursor:pointer;padding:0;margin-left:2px;display:inline-flex;align-items:center;justify-content:center}
.ddt::before{content:"";width:7px;height:7px;border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.dd.open .ddt::before{transform:translateY(2px) rotate(-135deg)}
.ddp{display:none;position:absolute;top:100%;left:-16px;min-width:290px;background:var(--paper);border-top:2px solid var(--heavy);
  box-shadow:0 14px 30px rgba(28,33,38,.16);padding:6px 0;z-index:65}
.dd:hover .ddp,.dd:focus-within .ddp,.dd.open .ddp{display:block}
.dd.closed .ddp{display:none}
header.site nav.main .ddp a{display:flex;align-items:center;min-height:44px;padding:0 18px;border-bottom:1px solid var(--hair);
  font-weight:600;font-size:0.9375rem;color:var(--ink2)}
header.site nav.main .ddp a:last-child{border-bottom:0}
header.site nav.main #dd-services a:last-child{font-weight:800;color:var(--blue)}
header.site nav.main .ddp a:hover,header.site nav.main .ddp a[aria-current]{color:var(--blue);background:var(--cream);border-bottom-color:var(--hair)}

/* hamburger that turns into an X */
.navtoggle{display:none;align-items:center;gap:10px;min-height:48px;min-width:48px;padding:0 14px;margin-left:auto;
  border:1.5px solid var(--ink);border-radius:3px;background:var(--paper);color:var(--ink);font:inherit;font-weight:800;font-size:0.9375rem;line-height:1;cursor:pointer;flex:none}
.navtoggle .ico{position:relative;width:20px;height:14px;display:block}
.navtoggle .ico i{position:absolute;left:0;width:20px;height:2px;background:currentColor;border-radius:1px;transition:transform .2s,opacity .15s,top .2s}
.navtoggle .ico i:nth-child(1){top:0}.navtoggle .ico i:nth-child(2){top:6px}.navtoggle .ico i:nth-child(3){top:12px}
.navtoggle[aria-expanded="true"]{background:var(--ink);color:#fff}
.navtoggle[aria-expanded="true"] .ico i:nth-child(1){top:6px;transform:rotate(45deg)}
.navtoggle[aria-expanded="true"] .ico i:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] .ico i:nth-child(3){top:6px;transform:rotate(-45deg)}

/* mobile menu panel: sits under the header, header and the X stay visible */
.mpanel{position:fixed;left:0;right:0;top:var(--mtop,110px);bottom:0;z-index:59;background:var(--paper);
  border-top:2px solid var(--heavy);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:4px var(--pad) calc(28px + env(safe-area-inset-bottom))}
.mpanel[hidden]{display:none}
.mlist,.msub{list-style:none;margin:0;padding:0}
.mlist>li{border-bottom:1px solid var(--hair)}
.mlist a{display:flex;align-items:center;min-height:54px;font-weight:800;font-size:1.125rem;color:var(--ink)}
.mlist a[aria-current]{color:var(--blue)}
.mrow{display:flex;align-items:stretch}
.mrow a{flex:1}
.subt{flex:none;width:54px;min-height:54px;border:0;border-left:1px solid var(--hair);background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);font:inherit}
.subt::after{content:"";width:9px;height:9px;border-right:2.2px solid currentColor;border-bottom:2.2px solid currentColor;
  transform:translateY(-3px) rotate(45deg);transition:transform .18s}
.subt[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.subt.full{width:100%;border-left:0;justify-content:space-between;font-weight:800;font-size:1.125rem;text-align:left;padding:0}
.subt.full::after{margin-right:22px}
.msub{padding:0 0 10px 14px;border-left:3px solid var(--blue);margin:0 0 12px 2px}
.msub[hidden]{display:none}
.msub a{min-height:48px;font-weight:600;font-size:1.03125rem;color:var(--ink2);border-bottom:1px solid var(--hair)}
.msub li:last-child a{border-bottom:0}
.mpanel .macts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.mpanel .macts .btn{width:100%;padding-left:10px;padding-right:10px}
.mhours{font-size:0.875rem;color:var(--ink3);margin:14px 0 0}

@media(max-width:1020px){.navtoggle{display:inline-flex}}
@media(min-width:1021px){.mpanel{display:none!important}}

/* phone action bar */
.mbar{display:none}
@media(max-width:700px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:58;
    background:var(--heavy);padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:8px;box-shadow:0 -6px 18px rgba(28,33,38,.18)}
  .mbar a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:3px;font-weight:800;font-size:1rem;color:#fff}
  .mbar .mb-call{background:var(--red)}
  .mbar .mb-send{background:var(--blue)}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  html.nav-open .mbar{display:none}
}
@media(max-width:380px){.mpanel .macts{grid-template-columns:1fr}}

/* ---------- v1.2.0: UX audit fixes ---------- */
/* whole blog card is one tap target */
.card.has-link{position:relative}
.card.has-link h3 a::after{content:"";position:absolute;inset:0}
.card.has-link:hover h3 a{color:var(--blue)}
.card.has-link:focus-within{outline:3px solid var(--gold);outline-offset:4px}
.card.has-link h3 a:focus-visible{outline:0}
.arch-all{margin-top:28px}
.arch-all a{display:inline-flex;align-items:center;min-height:44px}
.ddt{width:44px;margin-left:-8px}
@media(max-width:1020px){
  .phero .pphoto{max-width:560px}
  .phero .port-sm{max-width:340px}
}
/* phones held sideways: keep the header compact so content has room */
@media(orientation:landscape) and (max-height:500px){
  .mark img{height:50px}
  header.site .w{padding-top:5px;padding-bottom:5px}
  .navtoggle{min-height:44px}
}

/* ---------- v1.2.0: visual review fixes ---------- */
h1,h2,h3{text-wrap:balance}
.nw{white-space:nowrap}
img{background-color:var(--cream2)}
.mark img,.fmark img,footer img,.stars img{background:none}
.card .ci{aspect-ratio:16/10;background:var(--cream2);overflow:hidden}
.card .ci img{height:100%}
/* grids never leave an orphan gap */
.cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.cards:has(> :only-child){max-width:560px}
.related li:last-child:nth-child(odd),.svc>.svci:last-child:nth-child(odd){grid-column:1/-1}
.qa{max-width:none}
.qi p{max-width:72ch}
/* review wall */
.wall .shots.fit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,36px);overflow:visible}
.wall .shots.fit .shot{width:auto}
.wall .swipe{display:none;margin:10px 0 0;font-size:0.84375rem;color:#A8C0B3}
@media(max-width:1020px){.wall .shots.fit{grid-template-columns:repeat(2,minmax(0,1fr))}.wall .shots.fit .shot:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:700px){
  .wall .shots.fit{display:flex;overflow-x:auto;gap:14px}
  .wall .shots.fit .shot{width:min(82vw,320px);flex:none}
  .wall .swipe{display:block}
  .wall .shots{scroll-padding-left:var(--pad)}
}
@media(pointer:coarse) and (min-width:701px){.wall .swipe:not(.fit){display:block}}
/* desktop dropdown: small close delay, clear top edge, separator before entry points */
.ddp{display:block;visibility:hidden;opacity:0;transform:translateY(4px);transition:visibility 0s .18s,opacity .15s .05s,transform .15s .05s;
  border-top:3px solid var(--blue);margin-top:0}
.dd:hover .ddp,.dd:focus-within .ddp,.dd.open .ddp{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.dd.closed .ddp{visibility:hidden;opacity:0}
header.site nav.main .ddp a[href*="find-my-car"]{border-top:2px solid var(--rule)}
/* sidebars and jump lists stay vertical rows at every width */
.side-links a,.faqside a{display:flex!important;width:100%}
/* tablet: hero photos go full width instead of a narrow column */
@media(min-width:701px) and (max-width:1020px){
  .phero .pphoto{max-width:none}
  .phero .pphoto img,.phero .pphoto-img{aspect-ratio:16/9;object-position:50% 45%}
  .phero .port-sm{max-width:340px}
  .phero .port-sm img{aspect-ratio:4/5}
  .jeff .pull{max-width:34ch}
}
@media(max-width:1020px){.head h2{max-width:28ch}.phero h1{max-width:26ch}}
.st-table small{white-space:nowrap}
.calc-in{align-items:end}

/* ---------- v1.2.0: second review pass ---------- */
/* blog cards: three across on tablets too; a single card lies flat */
.cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.cards:has(> :only-child){max-width:none}
@media(min-width:701px){
  .cards>.card:only-child{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:32px;align-content:start}
  .cards>.card:only-child .ci{grid-row:1/span 5;margin:0}
}
.related li:last-child:nth-child(odd){grid-column:auto}
/* home step 2 matches the other steps */
.step.wide{grid-template-columns:58px minmax(0,1fr) minmax(0,1.2fr)}
.step.wide>p{margin:0;color:var(--ink2);font-size:0.96875rem;line-height:1.58}
.step.wide .full{grid-column:2/-1;margin:16px 0 0}
@media(max-width:1020px){.step.wide{grid-template-columns:50px minmax(0,1fr)}.step.wide .full{grid-column:2}}
.step .rt .who{margin-bottom:0}
/* "usual way" and "with Jeff" rows share heights */
@media(min-width:1021px){
  .vs{grid-template-rows:repeat(7,auto)}
  .vs .col{display:grid;grid-row:1/span 7;grid-template-rows:subgrid}
}
/* byline pieces wrap as whole items */
.byline{display:flex;flex-wrap:wrap;gap:2px 0}
.byline>span{white-space:nowrap}
.byline>span+span::before{content:"\00b7";margin:0 9px;color:var(--rule)}
@media(max-width:700px){.byline>span:first-child{white-space:normal;flex-basis:100%}.byline>span:nth-child(2)::before{display:none}}
/* breadcrumbs: current page is already the H1 on phones */
@media(max-width:700px){.crumbs li[aria-current]{display:none}}
/* phone numbers never split */
a[href^="tel:"]{white-space:nowrap}
/* FAQ plus/minus centred on the question */
.faq summary::after{top:50%;transform:translateY(-50%)}
/* help row in the phone menu matches the services row */
.subt.full::after{content:none}
.subt.full>span{flex:1;display:flex;align-items:center}
.subt.full .chev{width:54px;align-self:stretch;border-left:1px solid var(--hair);display:flex;align-items:center;justify-content:center}
.subt.full .chev::after{content:"";width:9px;height:9px;border-right:2.2px solid currentColor;border-bottom:2.2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .18s}
.subt.full[aria-expanded="true"] .chev::after{transform:translateY(2px) rotate(-135deg)}
/* calculator grid lines up */
.calc-in{align-items:start}
.cf small{min-height:2.9em}
.cf select{text-overflow:ellipsis;padding-right:26px}
.st-hint{display:none;font-size:0.84375rem;color:var(--ink3);margin:0 0 8px}
@media(max-width:700px){.st-hint{display:block}}
.st-table td{white-space:nowrap}
/* reviews page: every quote in the same voice */
.rev blockquote p{font-family:'Source Serif 4',Georgia,serif;font-style:normal;font-size:1.125rem;line-height:1.5;color:var(--ink)}
.stars{font-size:0.9375rem}
.wall .shot .cap span{font-size:0.875rem;color:#B9CDC2}
.wall .swipe{font-size:0.875rem;color:#C3D4CA}
/* photo crops keep heads in frame */
.pphoto img,.post-img img{object-position:50% 28%}
.jeff .port img{object-position:50% 18%}
/* fact panel used where a hero has no photo */
.facts{background:var(--cream);padding:clamp(18px,2.4vw,26px);border-top:3px solid var(--navy)}
.facts .lbl{color:var(--navy);margin-bottom:10px}
.facts dl{margin:0}
.facts dl>div{padding:11px 0;border-bottom:1px solid var(--cream2)}
.facts dl>div:last-child{border-bottom:0}
.facts dt{font-weight:800;font-size:1rem;color:var(--ink)}
.facts dd{margin:2px 0 0;font-size:0.9375rem;color:var(--ink2);line-height:1.5}
/* narrow text columns stay on the site grid instead of centring */
.w.narrow{max-width:var(--max)}
.w.narrow>*{max-width:760px}
/* footer */
.fbot{align-items:baseline}
footer .fg a{white-space:normal}
@media(min-width:701px) and (max-width:1020px){footer .fabout{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}footer .fg{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){body{padding-bottom:0}footer.site{padding-bottom:calc(28px + 72px + env(safe-area-inset-bottom))}}
/* tablets and phones held sideways use the width */
.hide-s{display:inline}
@media(max-width:1020px){.hide-s{display:none}}
@media(min-width:800px) and (max-width:1020px){
  .hero .g{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:30px}
  .jeff .g{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:34px}
  .jeff .port{max-width:none}
  .jeff .port img{aspect-ratio:4/5}
}
@media(min-width:701px) and (max-width:1020px){
  .phero.has-aside .g:has(.port-sm),.phero.has-aside .g:has(.facts){grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}
.phero .aside .port-sm{margin-left:auto}
@media(orientation:landscape) and (max-height:500px){.mark img{height:56px}}
.contact .acts .btn{flex:1 1 200px}
::placeholder{color:#737B82}
.tool input::placeholder,.tool textarea::placeholder{color:#737B82}
.hitem h3{word-spacing:.04em}
/* bigger invisible tap area on short standalone links, without changing line spacing */
.wall .hd p .tl,.sign a,.sign .cpn-tel,.ticker .tl,.head p .tl,.jeff-story .sign a{position:relative}
.wall .hd p .tl::after,.sign a::after,.ticker .tl::after,.head p .tl::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}

/* ---------- v1.2.0: final review pass ---------- */
/* no-break wrapper is plain inline text everywhere */
.nw{display:inline!important;white-space:nowrap;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;margin:0;padding:0}
/* links that contain a no-break word must not be flex containers */
footer .fg li a{display:inline-block!important;padding:12px 0;min-height:0;line-height:1.4}
.hitem h3 a{display:inline-block!important;padding:10px 0;margin:-10px 0;min-height:0}
.sign .tl,.fine a,.tool .fine a{white-space:nowrap}
blockquote,.pull,.jeff-story p,.qi p,.faq p{text-wrap:pretty}
.byline>span:first-child{white-space:normal;flex-basis:100%}
.byline>span:nth-child(2)::before{display:none}
.side-links a,.faqside a{min-height:46px;font-size:1rem}
.rev.lead blockquote p{max-width:52ch}
@media(min-width:701px) and (max-width:1020px){.wall .shots.fit{grid-template-columns:repeat(3,minmax(0,1fr))}.wall .shots.fit .shot:last-child:nth-child(odd){grid-column:auto}}
@media(max-width:1020px){.vs .a{padding-right:0}}
@media(max-width:799px){.jeff .port img{aspect-ratio:1/1;object-position:50% 22%}}
.ddt{margin-right:-12px}
.r .zero,.r b.zero{color:var(--ink)}
@media(max-width:700px){.byline .upd{display:none}}

/* ---------- v1.2.1 ---------- */
/* related rows and service cards: link text is the title, the whole row still taps */
.related li{position:relative;padding:16px 26px 16px 0}
.related li>a{display:block;padding:0;position:static}
.related li>a::before{content:"";position:absolute;inset:0}
.related li>a::after{top:15px}
.related li:hover b{color:var(--blue)}
.related li>span{display:block;font-size:0.9375rem;color:var(--ink2);margin-top:2px}
.related li:focus-within{outline:3px solid var(--gold);outline-offset:2px}
.related li>a:focus-visible{outline:0}
.svci{position:relative}
.svci h3 a{color:inherit}
.svci h3 a::after{content:"";position:absolute;inset:0}
.svci:hover h3{color:var(--blue)}
.svci:focus-within{outline:3px solid var(--gold);outline-offset:3px}
.svci h3 a:focus-visible{outline:0}
/* FAQ questions are headings but look like the accordion rows */
.faq summary .fq{display:inline;font:inherit;margin:0;letter-spacing:inherit;color:inherit}
/* Google attribution under live reviews */
.attrib{font-size:0.84375rem;color:var(--ink3);margin:8px 0 0}
.wall .attrib{color:#B9CDC2;flex-basis:100%}
.wall .attrib a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.attrib a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- v1.2.2: recent deliveries strip ---------- */
.deliv{padding:clamp(34px,4.4vw,56px) 0;border-bottom:1px solid var(--hair)}
.dhd{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap;margin-bottom:18px;
  border-top:2px solid var(--heavy);padding-top:16px}
.dhd h2{font-size:clamp(1.3125rem,2.2vw,1.625rem)}
.dhd p{margin:0;font-size:0.9375rem;color:var(--ink2)}
.dstrip{display:flex;gap:clamp(12px,1.6vw,18px);height:clamp(250px,26vw,330px)}
.dstrip figure{margin:0;height:100%;flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.dstrip figure:nth-child(1){flex-grow:.86}
.dstrip figure:nth-child(2){flex-grow:1.4}
.dstrip figure:nth-child(3){flex-grow:1.4}
.dstrip img{flex:1;min-height:0;width:100%;height:100%;object-fit:cover}
.dstrip figure:nth-child(1) img{object-position:50% 40%}
.dstrip figcaption{font-size:0.875rem;font-weight:700;color:var(--ink);padding-top:8px}
@media(max-width:700px){
  .dstrip{overflow-x:auto;scroll-snap-type:x mandatory;height:280px;padding-bottom:6px}
  .dstrip figure{flex:none;scroll-snap-align:start}
  .dstrip figure:nth-child(1){width:62vw}
  .dstrip figure:nth-child(2),.dstrip figure:nth-child(3){width:84vw}
}

/* v1.2.4: plain byline in place of the ticker band */
.hbyline{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding:14px 0 0;border-top:1px solid var(--cream2);max-width:46ch}
.hbyline img{width:56px;height:56px;border-radius:50%;flex:none;object-fit:cover}
.hbyline p{margin:0;font-size:0.9375rem;line-height:1.45;color:var(--ink2)}
.hbyline b{display:block;color:var(--ink);font-weight:700}
.hbyline .rt{display:block;margin-top:2px}
.hbyline .rt a{color:inherit}
.hbyline .rt .stars{color:var(--ochre)}
.hero h1{font-weight:600;line-height:1.08;letter-spacing:-.012em}
.hbyline{flex-wrap:nowrap}.hbyline p{flex:1 1 auto;min-width:0}
.tool .top p{font-size:0.9375rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink2);line-height:1.4}
.tool .top b{display:block;font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:1.4375rem;color:var(--ink);margin-bottom:2px}
.tool label,.cf label{font-size:0.875rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink2)}
/* v1.2.5: author box carries the company mark rather than a portrait */
.author .ph.mk{width:96px;height:auto;object-fit:contain;align-self:start}
/* v1.2.6: founder profile on the About page, sized like a leadership bio */
.founder .fg>p{margin:0 0 14px;max-width:70ch}
.fhead{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid var(--rule)}
.fpic{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.fname{margin:0;font-weight:700;font-size:1.0625rem;color:var(--ink)}
.frole{margin:0;font-size:0.9375rem;color:var(--ink2)}
.flinks{margin:4px 0 0;font-size:0.90625rem;color:var(--ink3)}
@media(max-width:520px){.fhead{gap:12px}.fpic{width:56px;height:56px}}

/* v1.2.8: proof ticker returns, in the new type */
.ticker{background:var(--cream);border-bottom:1px solid var(--cream2);font-size:0.875rem}
.ticker .w{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding-top:11px;padding-bottom:11px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;box-shadow:0 0 0 3px rgba(21,104,63,.16)}
.ticker .k{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:0.75rem;color:var(--green)}
.ticker span{color:var(--ink2)}
.ticker b{color:var(--ink);font-weight:800}
.ticker .rt a{color:inherit;text-decoration:none}
.ticker .rt a:hover b{color:var(--blue)}
.ticker .rt .stars{color:var(--ochre)}
.ticker .tl{font-weight:700}
@media(max-width:700px){.ticker .w{padding-top:7px;padding-bottom:7px}}
@media print{.ticker{display:none}}
.hero h1 em{font-style:normal;color:var(--blue)}

/* v1.2.9: brand line above the home headline */
.hero h1 .brand{display:block;font-family:'Libre Franklin','Helvetica Neue',sans-serif;font-weight:800;
  font-size:clamp(0.9375rem,1.5vw,1.125rem);letter-spacing:.06em;text-transform:uppercase;color:var(--navy);
  margin:0 0 10px;line-height:1.2}

/* ============================================================
   v1.4.0: contrast, color panels and motion
   Reference points the client picked: dark panels with white type,
   black on white elsewhere, photography given room, small fast moves.
   ============================================================ */

/* Pricing becomes a near-black panel, the strongest contrast on the page. */
#cost.money{background:var(--coal);color:#D7DDE3;border-top:1px solid var(--coal2);border-bottom:1px solid var(--coal2)}
#cost.money .head{border-top-color:var(--gold)}
#cost.money .head h2{color:#fff}
#cost.money .head p,#cost.money p,#cost.money .mt{color:#B4BDC6}
#cost.money .head p b,#cost.money p b{color:#fff}
#cost.money .terms dt{color:var(--gold)}
#cost.money .terms dd{color:#B4BDC6}
#cost.money .terms dd b,#cost.money b{color:#fff}
#cost.money .terms div{border-bottom-color:#2A343D}
#cost.money .sheet{background:var(--coal2);border-color:#2E3942;color:#E6EBEF}
#cost.money .sheet .lbl,#cost.money .sheet .r span{color:#A9B3BC}
#cost.money .sheet .r b,#cost.money .sheet .r.tot b{color:#fff}
#cost.money .sheet .r{border-bottom-color:#2E3942}
#cost.money .sheet .r.neg b{color:#6FD39B}
#cost.money .sheet .r span,#cost.money .sheet .r b{background:var(--coal2)}
#cost.money .sheet .r{background-image:linear-gradient(to right,#3A454F 34%,rgba(255,255,255,0) 0)}
#cost.money .sheet .r.sub2,#cost.money .sheet .r.net{background-image:none;border-color:#3A454F}
#cost.money .sheet .r.sub2 span,#cost.money .sheet .r.sub2 b,#cost.money .sheet .r.net span{color:#fff}
#cost.money .sheet .r.net{border-top-color:#5C6772}
#cost.money .sheet .r.net b{color:#6FD39B}
#cost.money .sheet .r.cut b{color:#8A939C}
#cost.money .sheet h3{color:#fff}
#cost.money .sheet .sub{color:#A9B3BC;border-bottom-color:#3A454F}
#cost.money .fine{color:#98A2AB}
#cost.money .tl{color:#F0C060;text-decoration-color:#B08A2E}
#cost.money .tl:hover{color:#fff}
#cost.money .cpn-tel{color:#fff}

/* Services list: a full-width photograph with the heading over it. */
.shot-band{position:relative;margin:0;overflow:hidden;background:var(--coal)}
.shot-band img{width:100%;height:clamp(320px,42vw,520px);object-fit:cover;display:block;
  transform:scale(1.01);transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.shot-band:hover img{transform:scale(1.045)}
.shot-band .ov{position:absolute;inset:auto 0 0 0;padding:clamp(22px,3.4vw,44px) 0;
  background:linear-gradient(to top,rgba(14,20,25,.88),rgba(14,20,25,.55) 55%,rgba(14,20,25,0))}
.shot-band h2{color:#fff;font-size:clamp(1.625rem,3.6vw,2.75rem);line-height:1.08;max-width:20ch;margin:0 0 10px}
.shot-band p{color:#D7DDE3;margin:0;max-width:52ch;font-size:clamp(0.96875rem,1.4vw,1.09375rem)}
.shot-band .tl{color:#FFD74A;text-decoration-color:#B08A2E}
.shot-band .tl:hover{color:#fff}

/* Motion: short, quick, and off entirely for anyone who asks for less. */
a,.btn,.hitem h3 a,.card,.tl{transition:color .15s ease,background-color .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.btn:active{transform:translateY(1px)}
.card img,.dstrip img,.wall .shot img{transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.card:hover img,.dstrip figure:hover img,.wall .shot:hover img{transform:scale(1.035)}
.dstrip figure,.card{overflow:hidden}
.hitem h3 a::after{content:"\2192";display:inline-block;margin-left:.4em;text-decoration:none;
  transform:translateX(0);transition:transform .2s ease;opacity:.5}
.hitem h3 a:hover::after{transform:translateX(.3em);opacity:1}
.related a:hover{background:var(--paper2)}

/* Desktop call button, always within reach, the way the reference sites do it. */
.callpill{position:fixed;right:22px;bottom:22px;z-index:60;display:none;align-items:center;gap:9px;
  background:var(--red);color:#fff;font-weight:700;font-size:0.96875rem;padding:13px 20px;border-radius:999px;
  box-shadow:0 10px 30px rgba(14,20,25,.28);opacity:0;transform:translateY(12px);pointer-events:none}
.callpill.on{opacity:1;transform:none;pointer-events:auto}
.callpill:hover{background:var(--red-deep)}
@media(min-width:701px){.callpill{display:inline-flex}}
@media(prefers-reduced-motion:reduce){.shot-band img{transform:none}}

/* ============================================================
   v1.5.0: interaction pass. Every control answers the pointer,
   every hover has a matching tap state for phones, and every
   focus state stays visible for keyboard users. Hover effects
   are behind (hover:hover) so phones never get stuck states.
   ============================================================ */

/* --- buttons ------------------------------------------------ */
.btn{transition:background-color .15s ease,box-shadow .15s ease,transform .1s ease,color .15s ease}
@media(hover:hover){
  .btn:hover{box-shadow:0 6px 18px rgba(14,20,25,.18)}
  .btn.b:hover{box-shadow:0 6px 18px rgba(27,84,136,.28)}
}
.btn:active{transform:translateY(1px);box-shadow:none}
.mbar .btn:active,.mb-call:active{filter:brightness(.92)}

/* --- header and navigation ---------------------------------- */
header.site{transition:box-shadow .2s ease,border-color .2s ease}
header.site.stuck{box-shadow:0 8px 22px rgba(14,20,25,.10)}
header.site nav.main a{position:relative;transition:color .15s ease,border-color .15s ease}
.util a{transition:color .15s ease}
@media(hover:hover){.util a:hover{color:#fff}}
.ddt::before{transition:transform .2s ease,border-color .15s ease}
@media(hover:hover){.dd:hover .ddt::before{border-color:var(--blue)}}
@media(hover:hover){
  header.site nav.main .ddp a{transition:background-color .12s ease,color .12s ease,padding-left .15s ease}
  header.site nav.main .ddp a:hover{padding-left:22px}
}
.mlist a,.subt{transition:background-color .12s ease,color .12s ease}
.mlist a:active,.subt:active{background:var(--paper2)}

/* --- body links --------------------------------------------- */
.tl{transition:color .15s ease,text-decoration-color .15s ease}
@media(hover:hover){.tl:hover{text-decoration-color:currentColor}}
.qi a,.faq p a,.prose a,.hitem p a:not(.tl),.terms dd a{transition:color .15s ease,background-color .15s ease}
@media(hover:hover){
  .qi a:hover,.faq p a:hover,.prose a:hover{background:rgba(46,125,82,.08)}
}
footer a{transition:color .15s ease}
@media(hover:hover){footer a:hover{color:#fff}}
.cpn-tel{transition:color .15s ease}

/* --- cards, lists and rows ---------------------------------- */
.card{transition:border-color .15s ease,transform .18s ease}
@media(hover:hover){
  .card:hover{border-top-color:var(--red);transform:translateY(-3px)}
  .card:hover h3 a{color:var(--blue)}
}
.svci{transition:background-color .15s ease,padding-left .18s ease}
@media(hover:hover){
  .svci:hover{background:var(--paper2);padding-left:12px}
  .svci:hover .go{color:var(--red)}
}
.svci .go{transition:color .15s ease}
.svci .go::after{content:"\2192";display:inline-block;margin-left:.35em;transition:transform .18s ease}
@media(hover:hover){.svci:hover .go::after{transform:translateX(.3em)}}
.hitem{transition:background-color .15s ease,border-color .15s ease}
@media(hover:hover){.hitem:hover{background:var(--paper2);border-bottom-color:var(--teal)}}
.related a{transition:background-color .15s ease,padding-left .18s ease}
@media(hover:hover){.related a:hover{padding-left:10px}}
.related a::after{transition:transform .18s ease,color .15s ease}
@media(hover:hover){.related a:hover::after{color:var(--red)}}
.qi{transition:background-color .15s ease}
.terms div{transition:border-color .15s ease}
@media(hover:hover){.terms div:hover{border-bottom-color:var(--blue)}}

/* --- the four steps ----------------------------------------- */
.step{transition:background-color .15s ease}
.step .n{transition:color .18s ease,transform .18s ease}
@media(hover:hover){
  .step:hover .n{color:var(--red);transform:translateY(-2px)}
  .step:hover h3{color:var(--blue)}
}
.step h3{transition:color .15s ease}

/* --- reviews and delivery photos ---------------------------- */
.wall .shot{transition:transform .2s ease}
@media(hover:hover){.wall .shot:hover{transform:translateY(-4px)}}
.dstrip figure{transition:transform .2s ease}
@media(hover:hover){.dstrip figure:hover{transform:translateY(-3px)}}

/* --- FAQ ----------------------------------------------------- */
.faq summary{transition:color .15s ease,background-color .15s ease}
.faq summary::after{transition:transform .2s ease,color .15s ease}
@media(hover:hover){
  .faq summary:hover{color:var(--blue)}
  .faq summary:hover::after{color:var(--blue);transform:scale(1.15)}
}
.faq summary:active{color:var(--red)}
.faq details[open] summary::after{transform:none}

/* --- forms --------------------------------------------------- */
.tool label,.cf label{transition:color .15s ease}
.tool input,.tool select,.tool textarea{transition:border-color .15s ease,background-color .15s ease}
@media(hover:hover){
  .tool input:hover,.tool select:hover,.tool textarea:hover{border-bottom-color:var(--blue-soft)}
}
.tool .fld:focus-within label{color:var(--blue)}
.tool input:focus,.tool select:focus,.tool textarea:focus{background:rgba(27,84,136,.04)}
.tool input.ok,.tool textarea.ok{border-bottom-color:var(--green)}
.tool .fld{position:relative}
.tool .fld .tick{position:absolute;right:2px;bottom:26px;color:var(--green);font-weight:800;
  opacity:0;transform:scale(.7);transition:opacity .18s ease,transform .18s ease}
.tool .fld.done .tick{opacity:1;transform:none}
.tool .fld textarea~.tick{bottom:auto;top:30px}

/* --- state fee table ---------------------------------------- */
@media(hover:hover){
  .st-table tbody tr{transition:background-color .12s ease}
  .st-table tbody tr:hover{background:var(--tint)}
  .st-table tbody tr:hover th{color:var(--blue)}
}

/* --- calculator: the total acknowledges every change --------- */
.calc-out .r.net b{transition:color .25s ease,transform .25s ease;display:inline-block}
.calc-out.flash .r.net b{color:var(--blue);transform:scale(1.06)}

/* --- focus, for anyone moving by keyboard -------------------- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:2px}
.card:focus-within{border-top-color:var(--red)}

@media(prefers-reduced-motion:reduce){
  .card:hover,.wall .shot:hover,.dstrip figure:hover,.step:hover .n{transform:none!important}
}

/* ============================================================
   v1.6.0: touch feedback. A phone has no pointer to hover, so
   every hover effect gets a press equivalent (.tapped, set by
   the script on touch) plus an "in view" highlight for the row
   sitting in the middle of the screen while the user scrolls.
   ============================================================ */
@media(hover:none){
  .svci.tapped,.hitem.tapped,.related a.tapped,.card.tapped,.qi.tapped{background:var(--paper2)}
  .svci.tapped h3,.hitem.tapped h3 a,.related a.tapped b,.card.tapped h3 a{color:var(--blue)}
  .related a.tapped::after,.svci.tapped .go::after{transform:translateX(.3em);color:var(--red)}
  .btn.tapped{filter:brightness(.9)}
  .faq summary.tapped{color:var(--blue)}
  .step.tapped .n{color:var(--red)}
  .wall .shot.tapped,.dstrip figure.tapped{transform:translateY(-3px)}

  /* The item in the middle of the screen leans forward as you scroll past it. */
  .svci.mid,.hitem.mid{background:var(--paper2)}
  .svci.mid h3,.hitem.mid h3 a{color:var(--blue)}
  .card.mid{border-top-color:var(--red)}
  .dstrip figure.mid img,.card.mid img{transform:scale(1.03)}
  .step.mid .n{color:var(--red)}
}
.tapped{transition:background-color .1s ease,color .1s ease,transform .12s ease,filter .1s ease}
.svci.mid,.hitem.mid,.card.mid,.step.mid .n,.dstrip figure.mid img,.card.mid img{
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,transform .5s ease}
@media(prefers-reduced-motion:reduce){
  .dstrip figure.mid img,.card.mid img,.wall .shot.tapped,.dstrip figure.tapped{transform:none!important}
}

/* ============================================================
   v1.7.0: scroll reveal. Blocks rise and fade as they arrive,
   with the rows inside them following one after another. The
   opening state is faint, never invisible, so the page is still
   readable to a crawler, a screenshot, or anyone whose script
   never runs. Off entirely under reduced motion.
   ============================================================ */
.rv,.rv-row{opacity:.18;transform:translateY(28px)}
.rv{transition:opacity .55s ease-out,transform .6s cubic-bezier(.2,.65,.25,1)}
.rv-row{transition:opacity .5s ease-out,transform .55s cubic-bezier(.2,.65,.25,1)}
.rv.in,.rv-row.in{opacity:1;transform:none}
/* A block that is revealing carries its rows: no double movement. */
.rv:not(.in) .rv-row{transform:none}
.shot-band.rv img,.dstrip.rv img{transform:scale(1.05)}
.shot-band.rv.in img,.dstrip.rv.in img{transform:none;transition:transform .9s cubic-bezier(.2,.65,.25,1)}
@media(max-width:700px){
  .rv,.rv-row{transform:translateY(18px)}
  .rv{transition-duration:.45s,.5s}
  .rv-row{transition-duration:.4s,.45s}
}
@media(prefers-reduced-motion:reduce){
  .rv,.rv-row,.rv.in,.rv-row.in{opacity:1!important;transform:none!important;transition:none!important}
}
@media print{.rv,.rv-row{opacity:1!important;transform:none!important}}

/* ============================================================
   v1.9.0: dark theme. Client direction: a black page, hunter
   green, greys, blues and whites, with red and yellow as the
   two accents, and no beige anywhere. Layout, type, motion and
   every hover state from v1.8.1 are unchanged; only the
   surfaces and the ink flip. Everything below is an override,
   so the light design above stays intact and readable.
   ============================================================ */
:root{
  color-scheme:dark;
  /* ink */
  --ink:#EEF2F5; --ink2:#B7C2CA; --ink3:#95A1AA;
  /* surfaces, darkest band to lightest panel */
  --heavy:#06090B;   /* utility bar, footer, phone action bar */
  --paper:#0C1114;   /* the page */
  --white:#10171C;   /* alternating section band */
  --cream:#131C22;   /* panels that used to be cream */
  --cream2:#212B33;
  --paper2:#18222A;  /* hover and pressed rows */
  --coal:#131C22; --coal2:#0A1014;
  --hair:#1F272E; --rule:#39444D; --edge:#4A5863;
  /* color */
  --blue:#6FB0EA; --blue-deep:#9CCBF5; --blue-soft:#4C7EAE;
  --tint:#17232D; --tint2:#1D2B37;
  --red:#2E7D52; --red-deep:#236340; --red-t:#7CC49A; --alert:#E0707A;
  --green:#3FA873; --gold:#FFD74A; --ochre:#E2B451; --teal:#46ADA4;
  --navy:#0F2840; --forest:#113425;
}
::selection{background:var(--gold);color:#17110A}

/* --- strong rules: --heavy is a background on dark, so every
       2px hairline that used it moves to --edge ------------- */
header.site,footer.site{border-color:var(--edge)}
.head,.card,.st-wrap,.author,.dhd,.mpanel{border-top-color:var(--edge)}
.sheet .sub,.prose th{border-bottom-color:var(--edge)}
.r.net{border-top-color:var(--edge)}

/* --- inverted chips: light background needs dark type ----- */
.skip,.nav-links .current,.navtoggle[aria-expanded="true"]{color:var(--heavy)}

/* --- navy at 3px disappears on black, so structural accents
       move to the brighter blue ------------------------------ */
.tool,.calc-in,.facts{border-top-color:var(--blue)}
.state-info{border-left-color:var(--blue)}
.facts .lbl,.hero h1 .brand{color:var(--blue)}
.tool input:focus,.tool select:focus,.tool textarea:focus,.cf .inp:focus-within,.cf select:focus{border-bottom-color:var(--blue)}
.btn:focus-visible{outline-color:#fff}
.step .n{color:#7FA8CE}

/* --- red reads as a button color, not as type, so every
       foreground use switches to the lighter red ------------ */
.tl:hover,.qi a:hover,.faq p a:hover,.prose a:hover,.hitem h3 a:hover,
.step .who,#jeff .lbl,.post-hero .lbl a,.r.neg b,.tool .rq,.faq summary:active,
.svci:hover .go,.related a:hover::after,.related a.tapped::after,.svci.tapped .go::after,
.step:hover .n,.step.tapped .n,.step.mid .n{color:var(--red-t)}
.card:hover,.card:focus-within,.card.mid{border-top-color:var(--red-t)}
.pull,.jeff-story .pull,.contact .head,.post-hero .lbl{border-top-color:var(--red-t)}
@media(hover:none){.card.tapped{border-top-color:var(--red-t)}}

/* --- panels that were tinted pink ------------------------- */
.ferr,.calc-warn{background:#2A1417;border-left-color:var(--red-t);color:var(--ink)}

/* --- proof strip picks up the hunter green ----------------- */
.ticker{background:#0E1A15;border-bottom-color:#1D2F26}
.dot{box-shadow:0 0 0 3px rgba(63,168,115,.24)}

/* --- forms: placeholders, select arrows, focus wash -------- */
::placeholder,.tool input::placeholder,.tool textarea::placeholder{color:#8B949C}
.tool select,.cf select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2395A1AA' stroke-width='1.8' fill='none'/%3E%3C/svg%3E")}
.tool input:focus,.tool select:focus,.tool textarea:focus{background-color:rgba(111,176,234,.07)}
.phero.tone-cream .tool{background:var(--coal2)}

/* --- photographs and placeholder blocks ------------------- */
.shot img{background:#1A232A}
.author .ph.mk{background:none}

/* --- shadows have to be darker than the page to read ------ */
header.site.stuck{box-shadow:0 8px 22px rgba(0,0,0,.55)}
.ddp{box-shadow:0 18px 40px rgba(0,0,0,.66)}
.callpill{box-shadow:0 12px 34px rgba(0,0,0,.6)}
.mbar{box-shadow:0 -6px 18px rgba(0,0,0,.5)}
@media(hover:hover){
  .btn:hover{box-shadow:0 6px 18px rgba(0,0,0,.5)}
  .btn.b:hover{box-shadow:0 6px 18px rgba(111,176,234,.22)}
  .qi a:hover,.faq p a:hover,.prose a:hover{background:rgba(124,196,154,.12)}
  header.site nav.main .ddp a:hover,header.site nav.main .ddp a[aria-current]{background:var(--paper2)}
}

/* --- the reveal starts a little stronger here: faint white
       type on black is harder to read than faint black on
       white, and this is only the first half second -------- */
.rv,.rv-row{opacity:.3}

/* Bright blue is a surface color here, not a type color: the
   secondary button takes near-black type so it stays legible. */
.btn.b,.mbar .mb-send{color:#06121C}
.btn.b:hover{background:var(--blue-deep);color:#06121C}
.btn.b:focus-visible{outline-color:#fff}
/* the light divider inside the comparison panel was drawn for a
   white page; on navy it only needs to be a shade lighter */
.vs .b .row{border-bottom-color:#3F6E9C}
/* the dropdown has to separate from the page it floats over */
.ddp{background:var(--paper2)}
@media(hover:hover){
  header.site nav.main .ddp a:hover,header.site nav.main .ddp a[aria-current]{background:var(--tint2)}
}

/* ---------- v1.9.1: the review band goes black and white ----
   The green panel was the one colored surface left above the
   fold. It becomes the darkest band on the page instead, with
   white type, grey captions and the yellow kept only on the
   stars. The proof strip above the fold loses its green tint
   for the same reason. */
.wall{background:var(--heavy);color:#DCE1E6}
.wall .hd p{color:#98A2AA}
.wall .note{color:#8A949C}
.wall .shot{border-top-color:#E8ECEF}
.wall .shot blockquote{color:#E4E9ED}
.wall .shot .cap{border-top-color:#2C353D}
.wall .shot .cap span{color:#98A2AA}
.wall .swipe{color:#A8B2BA}
.wall .attrib{color:#98A2AA}
.wall .hd p .tl{color:#fff;text-decoration-color:#6C757D}
.wall .hd p .tl:hover{color:var(--gold)}
.ticker{background:#10161B;border-bottom-color:#232C33}
.ticker .k{color:#D5DCE2}

/* ============================================================
   v1.9.2: a bigger mark, bigger type, and a text size control.
   Every font-size in this stylesheet is a rem, so the browser's
   own font setting and the A / A / A control in the utility bar
   both move the whole page's type. Spacing stays in px, so the
   layout holds its shape while the words grow.
   ============================================================ */
html{font-size:100%}

/* --- the logo, about a fifth larger at every width ---------- */
.mark img{height:116px}
@media(max-width:1100px){.mark img{height:88px}}
@media(max-width:560px){.mark img{height:74px}}
@media(max-width:380px){.mark img{height:60px}}
@media(orientation:landscape) and (max-height:500px){.mark img{height:58px}}
/* the sticky sidebars clear the taller header */
.calc-out,.post-side,.faqside{top:152px}

/* --- body copy up one step throughout ---------------------- */
body{font-size:1.125rem}
.hero .deck{font-size:clamp(1.09375rem,1.55vw,1.28125rem)}
.phero .deck,.bigrate{font-size:clamp(1.09375rem,1.5vw,1.28125rem)}
.creds p,.svci p,.dl dd,.money p,.jeff p,.jeff-story p,.note,.vsfoot,.feebox p{font-size:1.09375rem}
.money p,.jeff p,.jeff-story p{font-size:1.125rem}
.step p,.step.wide>p,.hitem p,.row p,.terms dd,.card p,.revs .two blockquote,
.related li>span,.related a>span,.slist span,.author p,.side-box p,.facts dd,
.hbyline p,.qi p,.faq p,.contact p,.money .mt{font-size:1.05rem}
.qi p,.faq p,.terms dd,.hitem p{font-size:1.0875rem}
.faq summary{font-size:1.15625rem}
.prose{font-size:1.1875rem}
.rev blockquote p{font-size:1.1875rem}
.st-table{font-size:1rem}
.lbl,.tool label,.cf label,.dl dt,.creds .k,.vs .col>.k,.row .t,.step .who,.card .lbl{font-size:0.9375rem}
.tool input,.tool select,.tool textarea{font-size:1.09375rem}
.tool .or,.tool .top p{font-size:1rem}
.fine,.tool .fine,.crumbs ol,.attrib,.req-note,.byline,.card .meta,.cf small,
.pphoto figcaption,.jeff .port figcaption,.step.wide .full figcaption{font-size:0.9125rem}
.state-info li,.shot .cap span,.mhours,.wall .hd p,.wall .note,.wall .swipe{font-size:0.9625rem}
.wall .shot blockquote{font-size:1.125rem}
.util,.util a{font-size:0.875rem}
.ticker{font-size:0.9375rem}
header.site nav.main a{font-size:1rem}
header.site nav.main .ddp a{font-size:1rem}
.mlist a{font-size:1.1875rem}
.msub a{font-size:1.09375rem}
.side-links a,.faqside a{font-size:1.0625rem}
.related b,.slist b{font-size:1.125rem}
.svci h3{font-size:1.375rem}
.hitem h3{font-size:1.125rem}
.qi h3{font-size:1.21875rem}
footer.site{font-size:1.03125rem}
footer .about{font-size:1rem}
footer .fh{font-size:0.9375rem}
.fbot{font-size:0.9125rem}
.credit{font-size:0.875rem}
.btn{font-size:1.0625rem}
.mbar a{font-size:1.0625rem}
.callpill{font-size:1.03125rem}

/* --- the text size control in the utility bar --------------- */
.tsz{display:inline-flex;align-items:center;gap:4px;padding-left:13px;margin-left:4px;
  border-left:1px solid #3B4249}
.tsz-l{color:#98A2AA;font-size:0.8125rem;margin-right:2px}
.tsz-b{min-width:34px;min-height:34px;padding:0 6px;border:1px solid #3B4249;border-radius:3px;
  background:transparent;color:#C8CDD3;font-family:inherit;font-weight:700;font-size:0.875rem;
  line-height:1;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.tsz-m{font-size:1.0625rem}
.tsz-g{font-size:1.25rem}
.tsz-b[aria-pressed="true"]{background:#E8ECEF;border-color:#E8ECEF;color:#06090B}
@media(hover:hover){.tsz-b:hover{border-color:var(--blue);color:#fff}}
@media(max-width:1366px){.tsz-b{min-height:44px}}
@media(max-width:820px){.tsz-l{display:none}.tsz{padding-left:9px}}
@media(max-width:700px){.util .w{flex-wrap:nowrap;gap:0}}
@media(max-width:480px){
  .util .w>a:nth-of-type(2),.util .w>a:nth-of-type(3),.util .w>a:nth-of-type(4){display:none}
  .tsz{margin-left:auto;border-left:0;padding-left:0}
  .util .sp{padding-left:10px}
}
@media(max-width:360px){.util .w>a{display:none}}
/* touch targets: the size buttons are a full 44 square on a phone */
@media(max-width:1366px){.tsz-b{min-width:44px;min-height:44px;padding:0 4px}}

/* ============================================================
   v1.9.3: type on black. Mid grey looks washed out against a
   near-black page even when the contrast maths passes, and
   antialiased smoothing thins every stroke. Body copy gets
   brighter, slightly heavier and a touch larger, and the grey
   used inside the dark bands comes up with it.
   ============================================================ */
body{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;font-weight:420;font-size:1.1625rem}
:root{--ink:#F4F7F9; --ink2:#D3DBE1; --ink3:#AAB5BD}
.deck,.prose,.jeff p,.jeff-story p,.money p,.qi p,.faq p,.step p,.hitem p,.row p,
.terms dd,.card p,.rev blockquote p,.revs .two blockquote,.side-box p,.facts dd,
.svci p,.creds p,.dl dd,.slist span,.author p,.vsfoot,.note,.feebox p{font-weight:420}
.hero .deck{font-size:clamp(1.125rem,1.6vw,1.3125rem)}
.phero .deck{font-size:clamp(1.125rem,1.55vw,1.3125rem)}
.prose{font-size:1.225rem}

/* the greys inside the dark bands, brought up to match */
.util,.util a{color:#D9DEE3}
footer.site{color:#CBD2D8}
footer .about,footer .mark .tag{color:#B3BBC2}
footer a,.credit a{color:#CBD2D8}
.fbot,.credit{color:#A7AFB6}
.wall{color:#E6EBEF}
.wall .hd p,.wall .shot .cap span,.wall .attrib,.wall .note{color:#B4BEC6}
.wall .swipe{color:#C2CBD2}
.wall .shot blockquote{color:#EDF1F4}
.vsec,.cta{color:#D6E1EC}
.vsec .head p,.vsec .vsfoot,.vsec .row p{color:#CBD7E3}
.vsec .row .t,.vs .a>.k{color:#B4C4D4}
#cost.money{color:#E2E7EB}
#cost.money .head p,#cost.money p,#cost.money .mt,#cost.money .terms dd{color:#CBD3DA}
#cost.money .sheet{color:#EDF1F4}
#cost.money .sheet .lbl,#cost.money .sheet .r span,#cost.money .sheet .sub{color:#BFC8D0}
#cost.money .fine{color:#B0BAC2}
.shot-band p{color:#E4E9ED}
.tsz-l{color:#AAB5BD}
.tsz-b{color:#D9DEE3}

/* ---------- v1.9.4: a bigger mark, without a bigger sticky bar
   The logo is the first thing on the page and it should land
   like one. It stands full size at the top, then settles to a
   compact size once the header sticks, so a reader scrolling a
   price page is not looking past a tall bar. ---------------- */
.mark img{height:146px;transition:height .22s ease}
header.site.stuck .mark img{height:98px}
@media(max-width:1100px){.mark img{height:110px}header.site.stuck .mark img{height:80px}}
@media(max-width:560px){.mark img{height:88px}header.site.stuck .mark img{height:66px}}
@media(max-width:380px){.mark img{height:72px}header.site.stuck .mark img{height:58px}}
@media(orientation:landscape) and (max-height:500px){.mark img,header.site.stuck .mark img{height:62px}}
@media(prefers-reduced-motion:reduce){.mark img{transition:none}}

/* ============================================================
   v2.0.0: the light palette the client specified.
   Canvas  #E8F1F5 soft ice blue
   Cards   #FFFFFF
   Type    #1B2A4A deep navy
   Accents #D69E2E champagne gold, #2E7D52 deep green (crimson until 2.9.0)
   Footer  #1B2A4A solid navy
   This block reverses the dark theme above rather than
   replacing it, so the dark build stays recoverable in one
   step if the direction changes again.
   ============================================================ */
:root{
  color-scheme:light;
  --ink:#1B2A4A; --ink2:#3C4C6B; --ink3:#5E6D87;
  --paper:#E8F1F5;    /* the canvas */
  --paper2:#DBE8EF;   /* hover and pressed rows */
  --white:#FFFFFF;    /* content bands */
  --cream:#FFFFFF;    /* cards and panels */
  --cream2:#D5E4EC;
  --hair:#D2E0E8; --rule:#A7BCC8; --edge:#1B2A4A;
  --heavy:#1B2A4A;    /* utility bar, footer, phone bar */
  --coal:#1B2A4A; --coal2:#16223C;   /* the pricing panel */
  --navy:#1B2A4A; --forest:#173D2C;
  --blue:#1F5FA8; --blue-deep:#164478; --blue-soft:#6A87AC;
  --tint:#DDEAF3; --tint2:#CCDEEB;
  --red:#2E7D52; --red-deep:#236340; --red-t:#236340; --alert:#B42A2A;
  --green:#15683F; --gold:#D69E2E; --ochre:#8A6410; --teal:#1A5E57;
}
::selection{background:#D69E2E;color:#2A1F05}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400}
.deck,.prose,.jeff p,.jeff-story p,.money p,.qi p,.faq p,.step p,.hitem p,.row p,
.terms dd,.card p,.rev blockquote p,.revs .two blockquote,.side-box p,.facts dd,
.svci p,.creds p,.dl dd,.slist span,.author p,.vsfoot,.note,.feebox p{font-weight:400}

/* --- light chips on dark type go back to white ------------- */
.skip,.nav-links .current,.navtoggle[aria-expanded="true"]{color:#fff}
.btn.b,.mbar .mb-send,.btn.b:hover{color:#fff}
.btn.b{background:var(--navy)}.btn.b:hover{background:#12203A}
.btn.b:focus-visible{outline-color:var(--gold)}

/* --- cards and floating containers -------------------------- */
.sheet,.side-box,.facts,.state-info,.post-form,.phero .tool,.phero.tone-cream .tool,.card{
  background:var(--white);border:1px solid var(--hair);
  box-shadow:0 1px 2px rgba(27,42,74,.05),0 10px 26px rgba(27,42,74,.06)}
.phero .tool,.phero.tone-cream .tool{border-top:3px solid var(--navy);padding:22px clamp(18px,2.4vw,28px) 24px}
.card{padding:0 18px 18px;border-top:3px solid var(--navy)}
.card .ci{margin:0 -18px 14px}
.state-info{border-left:3px solid var(--navy)}
.facts{border-top:3px solid var(--navy)}
.sheet{padding:clamp(20px,2.6vw,30px)}
#cost.money .sheet{background:var(--coal2);border-color:#2C3A5A;box-shadow:none}
.r span,.r b{background:var(--white)}
#cost.money .sheet .r span,#cost.money .sheet .r b{background:var(--coal2)}
.tool,.calc-in{border-top-color:var(--navy)}
.facts .lbl,.hero h1 .brand{color:var(--navy)}
.tool input:focus,.tool select:focus,.tool textarea:focus,.cf .inp:focus-within,.cf select:focus{border-bottom-color:var(--navy)}
.step .n{color:#7189AE}

/* --- bands ------------------------------------------------- */
.ticker{background:#F3F9FB;border-bottom-color:var(--hair)}
.ticker .k{color:var(--green)}
.ticker span{color:var(--ink2)}
.dot{box-shadow:0 0 0 3px rgba(21,104,63,.14)}
.wall{background:var(--navy);color:#DCE5EF}
.wall .hd p,.wall .shot .cap span,.wall .attrib,.wall .note{color:#A9BACE}
.wall .swipe{color:#BCC9DA}
.wall .shot{border-top-color:var(--gold)}
.wall .shot .stars{color:var(--gold)}
.wall .shot blockquote{color:#EDF1F6}
.wall .shot .cap{border-top-color:#33456A}
.wall .hd p .tl{color:var(--gold);text-decoration-color:#9C7526}
.wall .hd p .tl:hover{color:#fff}
.vsec,.cta{color:#D3DDEA}
.vsec .row{border-bottom-color:#33456A}
.vs .b .row{border-bottom-color:#4A6390}
#cost.money{border-top-color:#12203A;border-bottom-color:#12203A}

/* --- accents ----------------------------------------------- */
.stars,.wall .stars,.revs .stars,.ticker .rt .stars,.hbyline .rt .stars{color:var(--gold)}
.r.net b,.calc-out .r.net b{color:var(--green)}
.faq summary::after{color:var(--ochre)}
.faq details[open] summary{color:var(--navy)}
#faq .head{border-top-color:var(--gold)}
.money .head,#cost.money .head{border-top-color:var(--gold)}

/* --- panels that were inverted for the dark build ---------- */
.ferr,.calc-warn{background:#FBEDEE;border-left-color:var(--red);color:var(--ink)}
.ddp{background:#fff}
.shot img{background:var(--cream2)}
::placeholder,.tool input::placeholder,.tool textarea::placeholder{color:#6E7D91}
.tool select,.cf select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E666E' stroke-width='1.8' fill='none'/%3E%3C/svg%3E")}
.tool input:focus,.tool select:focus,.tool textarea:focus{background-color:rgba(27,42,74,.04)}
header.site{background:var(--white)}
header.site.stuck{box-shadow:0 8px 22px rgba(27,42,74,.10)}
.ddp{box-shadow:0 14px 30px rgba(27,42,74,.16)}
.callpill{box-shadow:0 10px 30px rgba(27,42,74,.28)}
.mbar{box-shadow:0 -6px 18px rgba(27,42,74,.18)}
@media(hover:hover){
  .btn:hover{box-shadow:0 6px 18px rgba(27,42,74,.18)}
  .btn.b:hover{box-shadow:0 6px 18px rgba(27,42,74,.26)}
  .qi a:hover,.faq p a:hover,.prose a:hover{background:rgba(46,125,82,.08)}
  header.site nav.main .ddp a:hover,header.site nav.main .ddp a[aria-current]{background:var(--tint)}
  .svci:hover,.hitem:hover,.related a:hover{background:var(--paper2)}
}
@media(hover:none){
  .svci.tapped,.hitem.tapped,.related a.tapped,.card.tapped,.qi.tapped,.svci.mid,.hitem.mid{background:var(--paper2)}
}
/* the utility bar and footer are navy, so their type stays light */
.util,.util a{color:#C9D4E3}
.util a{border-left-color:#3B4C6E}
.util a:hover,.util .sp,.util .util-tel{color:#fff}
.tsz{border-left-color:#3B4C6E}
.tsz-l{color:#A9BACE}
.tsz-b{border-color:#3B4C6E;color:#C9D4E3}
.tsz-b[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--navy)}
footer.site{color:#C3CEDD}
footer .about,footer .mark .tag{color:#A9B6C8}
footer a,.credit a{color:#C3CEDD}
footer .mark .tag{border-left-color:#3B4C6E}
.fbot,.credit{color:#9DAABC}
.fbot,.credit{border-top-color:#33456A}
/* the home hero form is a floating white card too, and its submit is
   the page's primary action, so it takes the crimson */
.hero .tool{background:var(--white);border:1px solid var(--hair);border-top:3px solid var(--navy);
  padding:22px clamp(18px,2.4vw,28px) 24px;
  box-shadow:0 1px 2px rgba(27,42,74,.05),0 10px 26px rgba(27,42,74,.06)}
.tool .btn.b,.side-box .btn.b{background:var(--red)}
.tool .btn.b:hover,.side-box .btn.b:hover{background:var(--red-deep)}
/* the palette the client gave has no teal in it, so the service
   headings take the navy like every other heading */
:root{--teal:#1B2A4A}
.hsec .head{border-top-color:var(--gold)}
.founder .hlist .hitem:last-child:nth-child(odd){grid-column:1/-1}
/* champagne gold at full strength only where it sits on navy; on
   white it drops a couple of steps so the rating is still legible */
.stars{color:#8A6410}
.wall .stars,.wall .shot .stars,#cost.money .stars,.vsec .stars,.cta .stars{color:var(--gold)}
.revs .stars,.rev .stars,.revgrid .stars,.ticker .rt .stars,.hbyline .rt .stars{color:#8A6410}

/* v2.0.5: the founder photo carries more weight on the About page */
.fpic{width:96px;height:96px}
@media(max-width:520px){.fpic{width:78px;height:78px}}
.fhead{gap:18px}

/* ============================================================
   v2.1.0: one navigation for both screens, two calls to action
   in the masthead, and the Google rating in the utility bar.
   ============================================================ */

/* a dropdown whose label is not itself a page: the label is the button */
.ddt.ddl{width:auto;min-width:0;margin:0;padding:0 2px;font:inherit;font-weight:700;
  font-size:1rem;color:var(--ink2);display:inline-flex;align-items:center;gap:7px;
  border-bottom:2px solid transparent;min-height:44px}
.ddt.ddl::before{content:"";width:7px;height:7px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.dd.open .ddt.ddl::before{transform:translateY(2px) rotate(-135deg)}
.ddt.ddl[data-current]{color:var(--blue);border-bottom-color:var(--blue)}
@media(hover:hover){.ddt.ddl:hover{color:var(--blue)}}
.dd:has(.ddl){margin-left:0}

/* two buttons side by side in the masthead */
header.site .hsend{flex:none;white-space:nowrap}
header.site .hcall{flex:none;white-space:nowrap}
header.site .w{gap:16px}

@media(max-width:1200px){header.site nav.main{gap:16px}}

/* the utility bar now carries the Google rating instead of links */
.util .w{gap:0 14px}
.urt{display:inline-flex;align-items:center;gap:8px;color:#C9D4E3;padding-right:4px}
.urt .stars{color:var(--gold);letter-spacing:1px;font-size:0.875rem;margin:0}
.urt a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.urt b{color:#fff}
@media(hover:hover){.urt a:hover{color:var(--gold)}}
@media(max-width:900px){.urt{display:none}}
@media(max-width:480px){.tsz{margin-left:auto}}
/* nav sits on one line, and the group chevron follows its label */
header.site nav.main a,.ddt.ddl{white-space:nowrap}
header.site nav.main{gap:18px}
.ddt.ddl::before{content:none}
.ddt.ddl::after{content:"";width:7px;height:7px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.dd.open .ddt.ddl::after{transform:translateY(2px) rotate(-135deg)}
/* the text size control keeps to the right, beside the phone number */
.util .sp{margin-left:0}
.tsz{margin-left:auto}
@media(max-width:1400px){.mark img{height:120px}header.site.stuck .mark img{height:92px}}
/* the mobile number in the contact list landed a fraction under 44 on iPad landscape */
@media(max-width:1366px){.dl dd a,.flinks a{min-height:46px}}
/* the rating stays on phones: the stars and the score keep their place, the
   wordier half and the phone number drop out, since the phone already sits in
   the fixed bar at the bottom of the screen */
@media(max-width:900px){.urt{display:inline-flex}}
@media(max-width:760px){
  .urt .urt-long{display:none}
  .util .sp{display:none}
  .urt{gap:6px;font-size:0.8125rem}
  .urt .stars{letter-spacing:0}
}
@media(max-width:360px){.urt .stars{font-size:0.75rem}}
/* a phone held sideways has very little height: the compact logo wins over the
   desktop step-down rule above, which it has to follow to do */
@media(orientation:landscape) and (max-height:500px){
  .mark img,header.site.stuck .mark img{height:62px}
  header.site .w{padding-top:5px;padding-bottom:5px}
}

/* 2.2.3: photo anchors for the review links */
#photo-steps,#photo-band,#photo-check,#page-photo,#post-photo{scroll-margin-top:11rem}
@media (max-width:760px){#photo-steps,#photo-band,#photo-check,#page-photo,#post-photo{scroll-margin-top:9rem}}

/* ============================================================
   v2.3.0: the client's banding.
   Navy hero with white type, an ice-blue trust bar under it,
   review cards in white, and the page bands alternating from
   there. The two calls to action in every hero are real
   buttons: Send the link, and Call.
   ============================================================ */

/* --- the hero, home and interior, is solid navy ------------- */
.hero,.phero,.phero.tone-cream{background:#1B2A4A;color:#D5DEEA;border-bottom:0}
.hero h1,.phero h1{color:#fff}
.hero h1 .brand{color:#D69E2E}
.hero h1 em{color:#A9CDEE}
.hero .deck,.phero .deck{color:#D5DEEA}
.hero .deck b,.phero .deck b{color:#fff}
.hlinks,.hero .hlinks,.phero .hlinks{color:#C9D4E3}
.hero .tl,.phero .tl{color:#E8B652;text-decoration-color:#9C7526}
@media(hover:hover){.hero .tl:hover,.phero .tl:hover{color:#fff;text-decoration-color:#fff}}
.phero .lbl,.phero .lbl a,.phero .kick{color:#A9BACE}
.phero .facts .lbl,.phero .tool .lbl,.phero .side-box .lbl,.phero .card .lbl{color:#1B2A4A}
.phero .byline,.phero .byline span{color:#C3CEDD}
.phero .byline a{color:#fff}
.phero .pphoto figcaption,.phero figcaption{color:#A9BACE}
.crumbs ol{color:#A9BACE}
.crumbs a{color:#DCE5EF;text-decoration-color:#55688D}
.crumbs li+li::before{color:#5A6C8E}
@media(hover:hover){.crumbs a:hover{color:#fff}}
.hero .tool,.phero .tool,.phero.tone-cream .tool{background:#fff;border-color:#fff;
  box-shadow:0 2px 4px rgba(6,12,24,.18),0 18px 40px rgba(6,12,24,.28)}
.hero .tool .tl,.phero .tool .tl,.hero .tool a,.phero .tool a{color:#1F5FA8;text-decoration-color:#9DB6D3}
@media(hover:hover){.hero .tool .tl:hover,.phero .tool .tl:hover{color:#236340;text-decoration-color:#236340}}
.phero .bigrate,.phero .bigrate a{color:#D5DEEA}
.phero .bigrate b{color:#fff}
.phero .bigrate .stars{color:#D69E2E}
.phero .searchform input,.phero input[type="search"]{background:#fff;color:var(--ink)}

/* --- the two hero buttons ---------------------------------- */
.hacts{display:flex;flex-wrap:wrap;gap:12px;margin:2px 0 18px}
.hacts .btn{min-height:54px;padding:15px 28px;font-size:1.0625rem;border-radius:4px}
.btn.wh{background:#fff;color:#1B2A4A}
@media(hover:hover){
  .btn.wh:hover{background:#E8F1F5;color:#1B2A4A;box-shadow:0 6px 18px rgba(6,12,24,.3)}
  .hacts .hb-call:hover{box-shadow:0 6px 18px rgba(6,12,24,.3)}
}
.hero .btn:focus-visible,.phero .btn:focus-visible{outline:3px solid #D69E2E;outline-offset:3px}
.phero .hacts{margin-top:4px}
@media(max-width:560px){.hacts .btn{flex:1 1 100%}}

/* --- the trust bar: ice blue, directly under the hero ------- */
.ticker{background:#D3E5F1;border-top:0;border-bottom:1px solid #BCD3E4}
.ticker span{color:#2B3B5C}
.ticker b{color:#1B2A4A}
.ticker .k{color:#125B37}

/* --- reviews: white cards ---------------------------------- */
.wall{background:#E8F1F5;color:var(--ink)}
.ticker + .wall{background:#fff}
.wall h2{color:#1B2A4A}
.wall .hd p{color:#3C4C6B}
.wall .hd p b{color:#1B2A4A}
.wall .hd p .stars{color:#8A6410}
.wall .hd p .tl{color:#1F5FA8;text-decoration-color:#9DB6D3}
@media(hover:hover){.wall .hd p .tl:hover{color:#236340;text-decoration-color:#236340}}
.wall .attrib,.wall .note,.wall .swipe{color:#5E6D87}
.wall .shots{padding-top:6px;padding-bottom:18px}
.wall .shot{background:#fff;border:1px solid #D2E0E8;border-top:3px solid #D69E2E;border-radius:4px;
  padding:20px 20px 18px;box-shadow:0 1px 2px rgba(27,42,74,.05),0 10px 24px rgba(27,42,74,.08)}
.wall .shot .stars{color:#8A6410}
.wall .shot blockquote{color:#1B2A4A}
.wall .shot .cap{border-top-color:#D2E0E8}
.wall .shot .cap b{color:#1B2A4A}
.wall .shot .cap span{color:#5E6D87}

/* --- home: the bands alternate all the way down ------------ */
.creds{background:#fff;border-top:1px solid #D2E0E8;border-bottom:1px solid #D2E0E8}
.home #contact{background:#E8F1F5;border-top:0}

/* --- footer a step darker, so it separates from a navy band above it */
footer.site{background:#142039;border-top-color:#142039}

/* ============================================================
   v2.4.0: white cards, the client's step 8.
   The service list (key features) and the fee breakdown sit in
   white cards with a hairline border, a soft shadow and a rule
   across the top. Reviews already moved to cards in 2.3.0.
   ============================================================ */
:root{--card-b:#D2E0E8;--card-sh:0 1px 2px rgba(27,42,74,.05),0 10px 24px rgba(27,42,74,.08)}

/* --- key features: the service list on the home page and the
   services page ------------------------------------------- */
.hsec .hlist,.svc{border-top:0;gap:16px;margin-top:6px}
.hsec .hitem,.svci{background:#fff;border:1px solid var(--card-b);border-top:3px solid #1B2A4A;
  border-radius:4px;box-shadow:var(--card-sh)}
.hsec .hitem{padding:18px 20px 17px}
.svci{padding:22px 24px 20px}
.hsec .hitem h3{color:#1B2A4A}
@media(hover:hover){
  .hsec .hitem:hover,.svci:hover{background:#fff;border-top-color:#2E7D52;
    box-shadow:0 2px 4px rgba(27,42,74,.06),0 16px 32px rgba(27,42,74,.12)}
}
@media(hover:none){.hsec .hitem.tapped,.svci.tapped,.hsec .hitem.mid,.svci.mid{background:#fff}}

/* --- the fee breakdown: $100, 1%, $0 ------------------------ */
.money .terms{border-top:0;display:grid;gap:12px;margin-top:22px}
.money .terms>div{background:#fff;border:1px solid var(--card-b);border-top:3px solid #D69E2E;
  border-radius:4px;box-shadow:var(--card-sh);padding:16px 20px;grid-template-columns:92px minmax(0,1fr);align-items:baseline}
.money .terms dt,#cost.money .terms dt{color:#1B2A4A;font-size:1.625rem;line-height:1.1}
.money .terms dd,#cost.money .terms dd{color:#3C4C6B}
.money .terms dd b,#cost.money .terms dd b{color:#1B2A4A}
#cost.money .terms div{border-bottom-color:var(--card-b)}
#cost.money .terms>div{box-shadow:0 2px 4px rgba(6,12,24,.18),0 14px 30px rgba(6,12,24,.22)}
@media(max-width:480px){.money .terms>div{grid-template-columns:78px minmax(0,1fr);padding:14px 16px}}

/* the worked example on the home page turns into a white card too,
   so the whole fee breakdown reads the same way */
.money .sheet,#cost.money .sheet{background:#fff;color:var(--ink);border:1px solid var(--card-b);
  border-top:3px solid #D69E2E;border-radius:4px;box-shadow:var(--card-sh)}
#cost.money .sheet{box-shadow:0 2px 4px rgba(6,12,24,.18),0 14px 30px rgba(6,12,24,.22)}
#cost.money .sheet h3{color:#1B2A4A}
#cost.money .sheet .lbl,#cost.money .sheet .sub,#cost.money .sheet .r span{color:#3C4C6B}
#cost.money .sheet .sub{border-bottom-color:var(--card-b)}
#cost.money .sheet .r span,#cost.money .sheet .r b{background:#fff}
#cost.money .sheet .r b,#cost.money .sheet .r.tot b{color:#1B2A4A}
#cost.money .sheet .r{border-bottom-color:var(--card-b);background-image:linear-gradient(to right,#B9CAD6 34%,rgba(255,255,255,0) 0)}
#cost.money .sheet .r.sub2,#cost.money .sheet .r.net{background-image:none;border-color:#A7BCC8}
#cost.money .sheet .r.sub2 span,#cost.money .sheet .r.sub2 b,#cost.money .sheet .r.net span{color:#1B2A4A}
#cost.money .sheet .r.net{border-top-color:#1B2A4A}
#cost.money .sheet .r.neg b,#cost.money .sheet .r.net b{color:#15683F}
#cost.money .sheet .r.cut b{color:#5E6D87}
#cost.money .sheet .fine{color:#5E6D87}
#cost.money .sheet .tl{color:#1F5FA8;text-decoration-color:#9DB6D3}
@media(hover:hover){#cost.money .sheet .tl:hover{color:#236340;text-decoration-color:#236340}}

/* ============================================================
   v2.5.0: the founder's bio leads the About page.
   ============================================================ */
.founder .fg>p.lead{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(1.25rem,2vw,1.5rem);
  line-height:1.3;color:#1B2A4A;margin:4px 0 16px}
.founder .fg>p.lead b{font-weight:600}
.founder .lbl{color:#1B2A4A;margin-top:30px}
/* "Why clients work with me": the same white cards as the service list */
.founder .hlist{border-top:0;gap:14px;margin-top:6px}
.founder .hitem{background:#fff;border:1px solid var(--card-b);border-top:3px solid #1B2A4A;border-radius:4px;
  box-shadow:var(--card-sh);padding:16px 18px 15px}
.founder .hitem h3{color:#1B2A4A}

/* ============================================================
   v2.6.0: horizontal logo. Mark on the left, CAR PRICE /
   NEGOTIATOR / tagline to the right, so the masthead is about
   half the height it was.
   ============================================================ */
.mark img,header.site .mark img{height:76px;width:auto}
header.site.stuck .mark img{height:58px}
header.site .w{padding-top:12px;padding-bottom:12px}
@media(max-width:1400px){.mark img,header.site .mark img{height:68px}header.site.stuck .mark img{height:56px}}
@media(max-width:1320px){.mark img,header.site .mark img{height:64px}header.site.stuck .mark img{height:54px}}
@media(max-width:1020px){.mark img,header.site .mark img{height:58px}header.site.stuck .mark img{height:50px}}
@media(max-width:560px){.mark img,header.site .mark img{height:54px}header.site.stuck .mark img{height:48px}}
@media(max-width:380px){.mark img,header.site .mark img{height:46px}header.site.stuck .mark img{height:44px}}
@media(orientation:landscape) and (max-height:500px){.mark img,header.site.stuck .mark img{height:42px}}
footer .fmark img{height:76px;width:auto}
@media(max-width:560px){footer .fmark img{height:54px}}
/* the wider logo needs the room: the masthead drops "Send the link" a little
   earlier (it is in every hero now), and between 1021 and 1180 the logo
   and the gaps step down so the call button still fits */
@media(max-width:1020px){header.site .hsend{display:none}}
@media(min-width:1021px) and (max-width:1180px){
  .mark img,header.site .mark img{height:56px}header.site.stuck .mark img{height:50px}
  header.site nav.main{gap:12px}header.site .w{gap:12px}
  header.site .hcall{padding-left:14px;padding-right:14px}
}
/* 2.6.2: breathing room between the logo and the first menu item */
header.site .mark{margin-right:48px}
@media(max-width:1400px){header.site .mark{margin-right:38px}}
@media(max-width:1320px){header.site .mark{margin-right:32px}}
@media(min-width:1021px) and (max-width:1180px){header.site .mark{margin-right:20px}}
@media(max-width:1020px){header.site .mark{margin-right:16px}}

/* 2.6.3: headquarters line under the founder's title */
.fhq{margin:2px 0 4px;font-size:0.9375rem;font-weight:700;color:#1B2A4A}

/* 2.6.4: the masthead call button says "Call us" (the number sits in the
   utility bar right above it) and is a size smaller than the hero buttons */
header.site .hcall,header.site .hsend{min-height:44px;padding:10px 18px;font-size:0.9375rem;border-radius:4px}
@media(min-width:1021px) and (max-width:1180px){header.site .hcall{padding-left:16px;padding-right:16px}}
header.site nav.main .ddp a[href*="find-my-car"]{border-top:0}

/* 2.6.6: the fee box shows where the service pays for itself */
.feebox .breakeven{background:#E8F1F5;border-left:3px solid #15683F;padding:10px 14px;color:#1B2A4A}
.feebox .breakeven b{color:#15683F}
.feebox .feeex{font-size:0.9375rem;color:var(--ink3)}
/* 2.6.7: the menu sits next to the logo (fixed gap) and the two buttons go to the right edge */
@media(min-width:1021px){
  header.site nav.main{margin-left:0}
  header.site .hcall{margin-left:auto}
}
@media(min-width:1021px) and (max-width:1180px){header.site .hsend{padding-left:14px;padding-right:14px}}
@media(min-width:1021px) and (max-width:1180px){.mark img,header.site .mark img{height:58px}header.site.stuck .mark img{height:50px}header.site nav.main{gap:16px}}

/* ============================================================
   v2.7.0: car lease calculator, and a Buying / Leasing switch
   above both calculators.
   ============================================================ */
.calc-switch{display:inline-flex;border:1px solid #A7BCC8;border-radius:4px;overflow:hidden;margin:0 0 22px;background:#fff}
.calc-switch a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;font-weight:700;font-size:1rem;color:#1B2A4A}
.calc-switch a+a{border-left:1px solid #A7BCC8}
.calc-switch a[aria-current]{background:#1B2A4A;color:#fff}
@media(hover:hover){.calc-switch a:not([aria-current]):hover{background:#E8F1F5}}
.calc-in .cgroup{margin:10px 0 2px;padding-top:12px;border-top:1px solid var(--hair);font-size:0.8125rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#1B2A4A}
.calc-in .cgroup:first-of-type{border-top:0}
.calc-out .subhead{font-family:inherit;font-size:1rem;font-weight:800;color:#1B2A4A;margin:22px 0 4px}
.lease-levers{margin-top:16px;background:#E8F1F5;border-left:3px solid #1B2A4A;padding:12px 14px}
.lease-levers p{margin:0 0 6px;font-size:0.9375rem;color:#1B2A4A;line-height:1.5}
.lease-levers p:last-child{margin:0}
.lease-levers b{color:#15683F}
.calc-out .r[hidden]{display:none}

/* --- 2.8.0: home hero photo behind a navy wash --------------- */
.hero.has-photo{isolation:isolate;overflow:hidden}
.hero.has-photo::before{content:"";position:absolute;inset:0;z-index:-2;
  background:#1B2A4A url(../img/photo-hero-office-c.webp) center 30%/cover no-repeat}
.hero.has-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(27,42,74,.90) 0%,rgba(27,42,74,.86) 48%,rgba(27,42,74,.66) 100%)}
@media(max-width:1020px){.hero.has-photo::after{background:rgba(27,42,74,.87)}}
/* the office photo is a wide strip: crop from the right so the logo on the screen stays whole */
.post-img img[src*="photo-office"],.card .ci img[src*="photo-office"]{object-position:100% 50%}

/* ============================================================
   2.9.0: green replaces red as the action color (buttons,
   hovers, rules). Red stays only where it means "problem":
   form errors, calculator warnings, required-field marks and
   negative figures.
   ============================================================ */
.ferr,.calc-warn{border-left-color:var(--alert)}
.tool .rq,.r.neg b{color:var(--alert)}

/* --- home: the four steps, one white sheet ---------------- */
.hhow .steps-sheet{background:#fff;border-top:4px solid var(--red);margin-top:clamp(22px,2.6vw,32px);
  padding:clamp(24px,3vw,40px);box-shadow:0 1px 2px rgba(27,42,74,.06),0 16px 36px rgba(27,42,74,.10)}
.steps4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.steps4 .st{padding:0 clamp(16px,1.9vw,28px);border-left:1px solid var(--hair);min-width:0}
.steps4 .st:first-child{padding-left:0;border-left:0}
.steps4 .st:last-child{padding-right:0}
.steps4 .n{display:flex;align-items:center;justify-content:center;width:58px;height:58px;margin:0 0 18px;
  border-radius:50%;background:var(--red);color:#fff;font-family:'Source Serif 4',Georgia,serif;
  font-weight:700;font-size:1.875rem;line-height:1;transition:background-color .15s ease,transform .18s ease}
.steps4 h3{font-size:clamp(1.15625rem,1.6vw,1.3125rem);line-height:1.22;margin:0 0 6px;color:var(--ink)}
.steps4 .who{margin:0 0 12px;color:var(--red-t);font-weight:700;font-size:0.9375rem}
.steps4 p{margin:0;color:var(--ink2);font-size:1rem;line-height:1.58}
.steps4 .who{color:var(--red-t)}
@media(hover:hover){.steps4 .st:hover .n{background:var(--red-deep);transform:translateY(-2px)}}
.steps4 .st.mid .n,.steps4 .st.tapped .n{background:var(--red-deep)}
.hhow .steps-sheet .full{margin:clamp(24px,3vw,36px) 0 0}
.hhow .steps-sheet .full img{width:100%;height:clamp(160px,18vw,250px);object-fit:cover;object-position:50% 60%}
.hhow .steps-sheet .full figcaption{font-size:0.9125rem;color:var(--ink3);margin-top:8px}
@media(max-width:1020px){
  .steps4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .steps4 .st:nth-child(odd){padding-left:0;border-left:0}
  .steps4 .st:nth-child(even){padding-right:0}
}
@media(max-width:600px){
  .steps4{grid-template-columns:1fr;row-gap:0}
  .steps4 .st{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;padding:0 0 22px;margin:0 0 22px;
    border-left:0;border-bottom:1px solid var(--hair)}
  .steps4 .st:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
  .steps4 .st>*:not(.n){grid-column:2}
  .steps4 .n{grid-row:1/span 3;width:48px;height:48px;font-size:1.5rem;margin:0}
}

/* ============================================================
   2.10.0: Jeff's October 5 notes
   ============================================================ */

/* --- hero: navy on the left behind the words, photo clear on the right */
.hero.has-photo::after{background:linear-gradient(90deg,rgba(27,42,74,.93) 0%,rgba(27,42,74,.86) 38%,rgba(27,42,74,.30) 62%,rgba(27,42,74,.08) 100%)}
@media(max-width:1020px){.hero.has-photo::after{background:linear-gradient(180deg,rgba(27,42,74,.35) 0%,rgba(27,42,74,.88) 45%,rgba(27,42,74,.93) 100%)}}

/* --- "Send the link" hero button: light blue, with clear hover and press states */
.btn.wh{background:#CFE3F4;color:#1B2A4A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transition:background-color .15s ease,box-shadow .15s ease,transform .08s ease}
@media(hover:hover){.btn.wh:hover{background:#A9CDEE;color:#1B2A4A;box-shadow:0 6px 18px rgba(6,12,24,.3)}}
.btn.wh:active{background:#8DBCE6;transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(6,12,24,.25)}

/* --- One call / One decision / One visit: highlight the row under the pointer or finger */
.facts dl>div{transition:background-color .15s ease,box-shadow .15s ease;border-radius:2px}
@media(hover:hover){.facts dl>div:hover{background:#EAF2FA;box-shadow:inset 3px 0 0 #D69E2E}}
.facts dl>div:active,.facts dl>div.tapped{background:#EAF2FA;box-shadow:inset 3px 0 0 #D69E2E}
.facts dl>div:hover dt,.facts dl>div:hover dd,.facts dl>div:active dt,.facts dl>div:active dd{color:#1B2A4A}

/* --- the steps: soft yellow highlight on hover, focus or tap */
.steps4 .st{padding:18px clamp(14px,1.7vw,24px);transition:background-color .15s ease,box-shadow .15s ease}
.steps4 .st:first-child{padding-left:clamp(14px,1.7vw,24px)}
.steps4 .st:last-child{padding-right:clamp(14px,1.7vw,24px)}
.hhow .steps-sheet{padding:clamp(14px,2vw,24px)}
@media(hover:hover){.steps4 .st:hover{background:#EAF2FA;box-shadow:inset 0 3px 0 #D69E2E}}
.steps4 .st:focus-within,.steps4 .st.tapped{background:#EAF2FA;box-shadow:inset 0 3px 0 #D69E2E}
@media(max-width:1020px){.steps4 .st:nth-child(odd),.steps4 .st:nth-child(even){padding:18px}}
@media(max-width:600px){.steps4 .st{padding:16px 12px;margin:0}.steps4 .st:last-child{padding-bottom:16px}}
.step{transition:background-color .15s ease,box-shadow .15s ease}
@media(hover:hover){.steps .step:hover{background:#EAF2FA;box-shadow:inset 3px 0 0 #D69E2E}}
.steps .step:focus-within,.steps .step.tapped{background:#EAF2FA;box-shadow:inset 3px 0 0 #D69E2E}
.steps .step{padding-left:12px;padding-right:12px}

/* --- Google mark beside ratings */
.gg{display:inline-block;vertical-align:-3px;flex:none}
.urt .gg{vertical-align:-2px;margin-right:2px}
.wall .hd p .gg{margin-right:4px}
.bigrate .gg{vertical-align:-4px;margin-right:4px}
.wall .shot{position:relative}
.wall .shot .gmark{position:absolute;top:14px;right:14px;line-height:0}

/* --- makes we negotiate */
.brands{background:#fff;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:clamp(26px,3.4vw,44px) 0}
.brands .bhd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(14px,3vw,40px);align-items:end;margin-bottom:clamp(16px,2.2vw,26px)}
.brands h2{font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:1.15}
.brands .bhd p{margin:0;color:var(--ink2);font-size:1rem}
.blogos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.blogos li{display:flex;align-items:center;justify-content:center;padding:clamp(14px,1.8vw,22px) 8px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.blogos img{width:clamp(30px,3vw,40px);height:clamp(30px,3vw,40px);opacity:.85;transition:opacity .15s ease}
@media(hover:hover){.blogos li:hover img{opacity:1}}
.bnote{margin:12px 0 0;font-size:0.8125rem;color:var(--ink3)}
@media(max-width:1020px){.brands .bhd{grid-template-columns:1fr}.blogos{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* --- nationwide shipping callout */
.shipband{background:#fff;padding:clamp(40px,5vw,72px) 0;border-bottom:1px solid var(--hair)}
.shipband .sg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.shipband .k{margin:0 0 10px;font-size:0.875rem;font-weight:700;color:var(--green)}
.shipband h2{font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.12;margin:0 0 14px}
.shipband p{margin:0 0 14px;color:var(--ink2)}
.shipband p:last-child{margin-bottom:0}
.shipband .st-photo{margin:0;border-top:4px solid var(--red)}
.shipband .st-photo img{width:100%;aspect-ratio:16/10;object-fit:cover}
@media(max-width:1020px){.shipband .sg{grid-template-columns:1fr}}
.facts dl>div{padding:11px 10px;margin:0 -10px}
.blogos img{background:none!important;border:0}
.shipband .st-copy p:last-child .tl{display:inline-block;padding:11px 0;line-height:1.3}

/* --- 2.10.1: brand logos scroll in a slow, continuous loop -------- */
.bmarquee{overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.btrack{display:flex;width:max-content;animation:cpn-brands 45s linear infinite}
.bmarquee .blogos{display:flex;grid-template-columns:none;border:0;flex:none}
.bmarquee .blogos li{width:clamp(110px,10vw,150px);border:0;border-right:1px solid var(--hair);border-bottom:0;padding:clamp(16px,1.8vw,22px) 10px}
@media(hover:hover){.bmarquee:hover .btrack{animation-play-state:paused}}
@keyframes cpn-brands{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .btrack{animation:none;width:auto;display:block}
  .bmarquee{-webkit-mask-image:none;mask-image:none}
  .bmarquee .blogos{display:grid;grid-template-columns:repeat(8,minmax(0,1fr))}
  .bmarquee .blogos[aria-hidden]{display:none}
  .bmarquee .blogos li{width:auto;border-bottom:1px solid var(--hair)}
}
@media(prefers-reduced-motion:reduce) and (max-width:1020px){.bmarquee .blogos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bmarquee .blogos img{width:clamp(36px,3.4vw,46px);height:clamp(36px,3.4vw,46px)}

/* --- 2.10.2: phones and tablets go back to solid navy in the home hero.
       The photo stays on desktop. No photo is downloaded on small screens. */
@media(max-width:1020px){
  /* 2.10.3: photo back on phones and tablets, under an 80% navy layer, scaled to cover and
     anchored on the quiet window side of the office so nothing busy sits behind the copy.
     No filters of any kind are applied to the hero. */
  /* 2.10.6: on phones and tablets a separate photo of the logo on a wall screen,
     shown as a band across the top of the hero, fading into solid navy behind the text. */
  .hero.has-photo{padding-top:calc(min(58vw,300px) + 18px)}
  .hero.has-photo::before{inset:0 0 auto 0;height:min(58vw,300px);background:#1B2A4A url(../img/photo-hero-mobile.webp) 50% 50%/cover no-repeat;filter:none}
  .hero.has-photo::after{inset:0 0 auto 0;height:calc(min(58vw,300px) + 2px);background:linear-gradient(180deg,rgba(27,42,74,0) 0%,rgba(27,42,74,0) 55%,rgba(27,42,74,.6) 82%,#1B2A4A 100%)}
}
@media(max-width:1020px){.hero.has-photo .hlinks .tl{color:#F5CD78}}
/* tablets: show the whole name at its natural shape, centered, with soft side edges */
@media(min-width:600px) and (max-width:1020px){
  .hero.has-photo::before{background-size:auto 100%;background-position:50% 50%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
}

.brands .bhd{align-items:start}

/* 2.10.13: brand logos bigger and solid navy so they stand out (Jeff) */
.bmarquee .blogos li{width:clamp(140px,13vw,190px);padding:clamp(22px,2.4vw,32px) 12px}
.bmarquee .blogos img{width:clamp(52px,5vw,72px);height:clamp(52px,5vw,72px);opacity:1}
@media(prefers-reduced-motion:reduce){.bmarquee .blogos li{width:auto}}

/* 2.10.14: phones and tablets get no hero photo at all, just solid navy. Desktop keeps its photo. */
@media(max-width:1020px){
  .hero.has-photo{padding-top:clamp(34px,4.6vw,62px)}
  .hero.has-photo::before{inset:0;height:auto;background:#1B2A4A;-webkit-mask-image:none;mask-image:none}
  .hero.has-photo::after{display:none}
}

/* 2.10.16: Google G locked to a small icon everywhere (it ran full width on the Reviews page) */
svg.gg{width:18px;height:18px;max-width:none}
.urt svg.gg{width:14px;height:14px}
.bigrate svg.gg{width:22px;height:22px}
/* 2.10.16: desktop header has one button (Send the link, light blue) plus the phone as a call link (Jeff) */
header.site .hcall .hc-n{display:none}
@media(min-width:1021px){
  header.site .hcall{background:none;border:0;box-shadow:none;color:var(--ink);padding-left:4px;padding-right:4px;font-weight:700;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}
  header.site .hcall:hover,header.site .hcall:focus-visible{background:none;color:var(--ink);text-decoration-color:currentColor}
  header.site .hcall .hc-t{display:none}
  header.site .hcall .hc-n{display:inline}
  header.site .hsend{background:#CFE3F4;color:#1B2A4A;border-color:#CFE3F4}
  header.site .hsend:hover,header.site .hsend:focus-visible{background:#A9CDEE;border-color:#A9CDEE;color:#1B2A4A}
  header.site .hsend:active{background:#8DBCE6;border-color:#8DBCE6}
}

/* 2.10.18: Jeff's page icons, used only beside links (menus, service list, related links) */
img.ic{flex:none;object-fit:contain;background:none!important;border:0}
header.site nav.main .ddp a .ic{width:24px;height:24px;margin-right:12px}
.msub a{display:flex;align-items:center}
.msub a .ic{width:26px;height:26px;margin-right:12px}
.svci .ic{display:block;width:40px;height:40px;margin-bottom:10px}
.related b{display:flex;align-items:center}
.related b .ic{width:28px;height:28px;margin-right:12px}
.related li:has(.ic)>span{padding-left:40px}

/* 2.10.19: Calendly booking calendar on the thank-you page */
.calbox{max-width:1000px;border-top:3px solid var(--navy);background:#fff}
.calbox .calendly-inline-widget{min-width:300px;height:720px}
@media(max-width:600px){.calbox .calendly-inline-widget{height:1000px}}
.tool .cf-turnstile{margin:4px 0 12px}

/* 2.10.21: small visible note that Turnstile is protecting the form */
.tool .tsbadge{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:0.75rem;line-height:1.3;color:var(--ink3)}
.tool .tsbadge svg{flex:none;color:#2E7D52}

/* 2.10.22: worksheet checkers. A plain, impossible-to-miss "information only" note above the result */
.calc-out .calc-disc{margin:0 0 18px;padding:12px 14px;background:#EAF2FA;border-left:4px solid #E8B54A;font-size:0.9375rem;line-height:1.45;color:var(--ink)}
.calc-in .calc-note{margin:0 0 10px;font-size:0.9375rem;color:var(--ink2)}
.calc-out .calc-check{margin:14px 0 4px;padding:10px 12px;border-left:4px solid #B42A2A;background:#FDF0F0;font-size:0.9375rem;color:var(--ink)}
.calc-out .calc-check.ok{border-left-color:#2E7D52;background:#EEF7F1}
.calc-out .fine{font-size:0.875rem}

/* 2.10.23: field tips on the worksheet checkers */
.calc-in .cf{position:relative}
.calc-in .lrow{display:flex;align-items:center;gap:7px}
.calc-in .lrow label{margin-bottom:2px}
.cf .tip{flex:none;width:18px;height:18px;padding:0;border:1.5px solid var(--ink3);border-radius:50%;background:transparent;color:var(--ink3);font:italic 700 11px/15px Georgia,serif;text-align:center;cursor:pointer}
.cf .tip:hover,.cf .tip:focus-visible,.cf .tip[aria-expanded="true"]{border-color:var(--navy);color:#fff;background:var(--navy)}
.cf .tip:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.cf .tipt{position:absolute;left:0;right:0;top:26px;z-index:6;padding:10px 12px;background:#1B2A4A;color:#fff;font-size:0.8125rem;line-height:1.5;border-radius:4px;box-shadow:0 6px 18px rgba(15,23,42,.18)}
.cf .tipt[hidden]{display:none}
@media(hover:hover){.cf .lrow:hover + .tipt[hidden]{display:block}}
.cf .lrow:has(.tip:focus-visible) + .tipt[hidden]{display:block}
.calc-out .r b[data-o="vs"]{white-space:nowrap}

/* 2.10.25: handshake photo under the home steps, framed on the hands */
.full img[src*="photo-handshake"]{object-position:50% 46%}

/* 2.10.26: keys photo in the home band, framed on her face and the key */
.shot-band img[src*="photo-keys-v3"]{object-position:50% 70%}

/* 2.10.27: the Boston skyline shows whole, at its own shape, instead of the 4:3 / 16:9 crop */
.pphoto img[src*="photo-skyline"],.phero .pphoto img[src*="photo-skyline"]{aspect-ratio:auto;height:auto;object-fit:contain}

/* 2.10.27: phone photo under the steps on Send the Link */
.send-shot{margin:clamp(22px,3vw,34px) 0 0}
.send-shot img{display:block;width:100%;height:clamp(200px,30vw,400px);object-fit:cover;object-position:50% 42%}
.send-shot figcaption{font-size:0.9125rem;color:var(--ink3);margin-top:8px}

/* ============================================================
   2.10.28: home hero is a photo slideshow (no form). Photos sit on
   the right and fade into the navy behind the text; a white logo
   card stays in the corner on every slide.
   ============================================================ */
.hero.hero-slides{position:relative;overflow:hidden;isolation:isolate;background:#1B2A4A;padding:0}
.hero-slides .hslides{position:absolute;top:0;bottom:0;right:0;left:calc(50vw - 360px);z-index:-2;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 260px);mask-image:linear-gradient(90deg,transparent 0,#000 260px)}
.hero-slides .hslides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.hero-slides .hslides img.on{opacity:1}
.hero-slides .hslides img[data-slide="photo-hero-office-c"]{object-position:62% 30%}
.hero-slides .hslides img[data-slide="photo-hero-lot"]{object-position:50% 55%}
.hero-slides .hslides img[data-slide="photo-keys-v3"]{object-position:50% 25%}
.hero-slides .hslides img[data-slide="photo-hero-carrier"]{object-position:55% 50%}
.hero-slides::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(27,42,74,.94) 0,rgba(27,42,74,.82) calc(50vw - 160px),rgba(27,42,74,.28) calc(50vw + 120px),rgba(27,42,74,.06) 100%)}
.hero-slides .w{position:relative;min-height:clamp(520px,42vw,640px);display:flex;align-items:center;padding-top:clamp(34px,4vw,56px);padding-bottom:clamp(96px,8vw,120px)}
.hero-slides .hcol{max-width:720px}
.hero-slides .hacts{flex-wrap:wrap}
@media(min-width:1021px){.hero-slides .hacts .btn{padding:15px 22px}}
.hero-slides .hconcierge{margin:-4px 0 14px;font-size:clamp(1.125rem,1.7vw,1.375rem);font-weight:700;color:#CFE3F4;letter-spacing:.005em}
.hero-slides .deck{color:#E3EAF3;max-width:50ch}
.hacts .hb-book{background:#E8B54A;color:#1B2A4A;border:0;font-weight:800}
.hacts .hb-book:hover,.hacts .hb-book:focus-visible{background:#F2C76A;color:#1B2A4A}
.hero-slides .hcorner{position:absolute;right:0;bottom:clamp(22px,2.6vw,34px);display:flex;align-items:center;gap:10px}
.hero-slides .hbadge{background:#fff;padding:12px 16px;border-radius:4px;box-shadow:0 10px 28px rgba(6,12,24,.32)}
.hero-slides .hbadge img{display:block;width:clamp(170px,15vw,230px);height:auto;background:transparent!important;box-shadow:none}
.hero-slides .hpause{width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);background:rgba(27,42,74,.55);cursor:pointer;display:grid;place-items:center;padding:0}
.hero-slides .hpause span{width:10px;height:12px;border-left:3px solid #fff;border-right:3px solid #fff}
.hero-slides .hpause[aria-pressed="true"] span{width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff;margin-left:3px}
.hero-slides .hpause:focus-visible{outline:3px solid #E8B54A;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.hero-slides .hslides img{transition:none}.hero-slides .hpause{display:none}}
/* tablet and phone: solid navy hero, no photos; the logo card sits under the buttons */
@media(max-width:1020px){
  .hero-slides .hslides,.hero-slides::after,.hero-slides .hpause{display:none}
  .hero-slides .w{display:block;min-height:0;padding-top:clamp(30px,5vw,48px);padding-bottom:clamp(30px,5vw,44px)}
  .hero-slides .hcorner{position:static;margin-top:22px}
  .hero-slides .hbadge img{width:200px}
}
/* the home form now lives in the "Tell us the car" section */
.contact .tool{background:var(--white);border:1px solid var(--hair);border-top:3px solid var(--navy);padding:22px clamp(18px,2.4vw,28px) 24px}
.contact .dl{margin-top:22px}

/* 2.10.28: Jeff's comparison table replaces the Saturday / Tuesday columns */
.vsec .cmp{width:100%;border-collapse:separate;border-spacing:0;margin-top:clamp(18px,2.4vw,28px);font-size:1rem;line-height:1.55}
.vsec .cmp th,.vsec .cmp td{padding:18px 20px;vertical-align:top;text-align:left;border-bottom:1px solid rgba(255,255,255,.12)}
.vsec .cmp thead th{font-size:0.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9FB2C5;border-bottom:2px solid rgba(255,255,255,.28);padding-top:14px;padding-bottom:14px;vertical-align:bottom}
.vsec .cmp thead th.us{color:#1B2A4A;background:#E8B54A;border-bottom-color:#E8B54A;border-radius:4px 4px 0 0}
.vsec .cmp tbody th{width:22%;color:#fff;font-family:'Source Serif 4',Georgia,serif;font-size:1.125rem;font-weight:600;line-height:1.3}
.vsec .cmp tbody td{width:37%;color:#C6D3E0}
.vsec .cmp tbody td.us{background:rgba(255,255,255,.07);color:#EEF3F8;border-left:3px solid #E8B54A}
.vsec .cmp tbody tr:last-child td.us{border-radius:0 0 4px 0}
.vsec .cmp td.us b{color:#F2C76A}
.vsec .cmp td a.tl{color:#fff}
@media(max-width:760px){
  .vsec .cmp,.vsec .cmp tbody,.vsec .cmp tr,.vsec .cmp tbody th,.vsec .cmp tbody td,.vsec .cmp tbody td.us{display:block;width:auto}
  .vsec .cmp thead{display:none}
  .vsec .cmp tr{margin:0 0 16px;border:1px solid rgba(255,255,255,.16);border-radius:4px;overflow:hidden}
  .vsec .cmp tbody th{padding:14px 16px 10px;border-bottom:1px solid rgba(255,255,255,.12)}
  .vsec .cmp td{padding:12px 16px}
  .vsec .cmp td::before{content:attr(data-l);display:block;margin-bottom:4px;font-size:0.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9FB2C5}
  .vsec .cmp tbody td.us{border-left:0;border-top:3px solid #E8B54A}
  .vsec .cmp td.us::before{color:#E8B54A}
}
/* 2.10.28: small label above the pricing heading */
.money .sec-k{margin:0 0 6px;font-size:0.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}

/* ============================================================
   2.10.28: brand grid replaces the logo carousel. Tiles rise in one
   after another, then a highlight moves from brand to brand.
   ============================================================ */
.brands .bwrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(22px,4vw,56px);align-items:center}
.brands .bwrap .bhd{display:block;margin:0}
.brands .bwrap .bhd p{margin:12px 0 0}
.brands .bwrap .bnote{font-size:0.8125rem;color:var(--ink3);margin-top:16px}
.bgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.bgrid li{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--hair);border-radius:4px;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease,opacity .5s ease;transition-delay:calc(var(--i) * 45ms)}
.bgrid img{width:clamp(30px,3.4vw,46px);height:clamp(30px,3.4vw,46px);background:none!important;opacity:.9}
.bgrid .bname{font-size:clamp(0.625rem,0.95vw,0.8125rem);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#1B2A4A;text-align:center;line-height:1.2;padding:0 4px}
.bgrid.anim li{opacity:0;transform:translateY(18px) scale(.94)}
.bgrid.anim.in li{opacity:1;transform:none}
.bgrid.in li.lit{transition-delay:0s;transform:translateY(-6px);border-color:#1B2A4A;box-shadow:0 12px 26px rgba(27,42,74,.18),inset 0 -3px 0 #E8B54A}
@media(max-width:1020px){.brands .bwrap{grid-template-columns:1fr}}
@media(max-width:1020px){.bgrid{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(max-width:560px){.bgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.bgrid li{aspect-ratio:auto;height:76px}}
@media(prefers-reduced-motion:reduce){.bgrid li{transition:none}.bgrid.anim li{opacity:1;transform:none}}

/* ============================================================
   2.10.28: solid blue cards with large white icons for the key
   service sections (Jeff, Oct 18, after northwestregisteredagent.com).
   Home "Car negotiation services" list and the Services page.
   ============================================================ */
.bcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;border-top:0}
.svc.bcards{grid-template-columns:repeat(3,minmax(0,1fr))}
.bcards>.hitem,.bcards>.svci{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px 22px 22px;background:#1D4F8C;border:0;border-radius:4px;color:#E6EEF8;
  transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease}
.bcards>.hitem:hover,.bcards>.svci:hover,.bcards>.hitem:focus-within,.bcards>.svci:focus-within{background:#173F70;transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,40,64,.22);padding-left:22px}
.bcards img.ic{width:56px;height:56px;margin:0 0 10px;filter:brightness(0) invert(1);background:none!important}
.bcards h3{margin:0;font-size:1.1875rem;line-height:1.25;color:#fff}
.bcards h3 a,.bcards .svci h3 a{color:#fff;text-decoration:none}
.bcards h3 a::after{content:"";position:absolute;inset:0}
.bcards .hitem h3 a{display:inline!important;padding:0;margin:0;min-height:0}
.bcards .hitem h3 a:hover::after{transform:none}
.bcards p{margin:0;color:#D7E3F1;font-size:0.96875rem;line-height:1.55}
.bcards .go{margin-top:auto;padding-top:10px;color:#F2C76A;font-weight:700;font-size:0.9375rem}
.bcards>.svci:hover .go{color:#F2C76A}
.bcards>.hitem:focus-within,.bcards>.svci:focus-within{outline:3px solid #E8B54A;outline-offset:3px}
.svc.bcards>.svci:last-child:nth-child(odd){grid-column:auto}
@media(max-width:1020px){.bcards,.svc.bcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.bcards,.svc.bcards{grid-template-columns:1fr}.bcards>.hitem,.bcards>.svci{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:14px;padding:18px}
  .bcards img.ic{width:48px;height:48px;margin:0}.bcards h3{flex:1 1 0;min-width:0}.bcards p,.bcards .go{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){.bcards>.hitem,.bcards>.svci{transition:none}.bcards>.hitem:hover,.bcards>.svci:hover{transform:none}}

/* 2.10.28: bigger icons elsewhere (#13) */
.related b .ic{width:40px;height:40px;margin-right:14px}
.related li:has(.ic)>span{padding-left:54px}
.ddp a .ic{width:28px;height:28px}
.msub a .ic{width:30px;height:30px}

/* 2.10.29: customer-focused hero photos, and a lighter wash over them */
.hero-slides .hslides img[data-slide="photo-keys-v3"]{object-position:42% 28%}
.hero-slides .hslides img[data-slide="photo-hero-couple"]{object-position:60% 45%}
.hero-slides .hslides img[data-slide="photo-handshake"]{object-position:50% 46%}
.hero-slides .hslides img[data-slide="photo-hero-tradein"]{object-position:55% 45%}
.hero-slides .hslides img{filter:brightness(1.06)}
.hero-slides::after{background:linear-gradient(90deg,rgba(27,42,74,.94) 0,rgba(27,42,74,.80) calc(50vw - 200px),rgba(27,42,74,.14) calc(50vw + 80px),rgba(27,42,74,0) 100%)}


/* ============================================================
   2.10.29: reviews page as cards, each with the Google G
   ============================================================ */
.rev .rhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.rev .rsrc{display:inline-flex;align-items:center;gap:6px;font-size:0.8125rem;font-weight:700;color:var(--ink3)}
.rev .rsrc svg.gg{width:18px;height:18px}
.revsum{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin:0 0 clamp(20px,2.6vw,30px);padding:20px 24px;background:#fff;border:1px solid var(--hair);border-left:4px solid #E8B54A;border-radius:4px}
.revsum .rs-score{display:flex;align-items:center;gap:12px}
.revsum .rs-score b{font-size:2.25rem;line-height:1;color:var(--ink)}
.revsum .rs-score .stars{font-size:1.375rem}
.revsum p{margin:0;flex:1 1 280px;color:var(--ink2)}
.revgrid.revcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border-top:0}
.revcards .rev{display:flex;flex-direction:column;margin:0;padding:22px 22px 18px;background:#fff;border:1px solid var(--hair);border-radius:4px}
.revcards .rev[hidden]{display:none}
.revcards .rev blockquote{flex:1 1 auto}
.revcards .rev blockquote p{font-size:1.0625rem;line-height:1.55}
.revcards .rev figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px}
.revcards .rev.lead{grid-column:1/-1;background:#1B2A4A;border-color:#1B2A4A}
.revcards .rev.lead blockquote p{color:#fff;font-size:clamp(1.25rem,2.2vw,1.625rem);line-height:1.4;max-width:60ch}
.revcards .rev.lead figcaption{border-top-color:rgba(255,255,255,.18);color:#B9C7D8}
.revcards .rev.lead figcaption b{color:#fff}
.revcards .rev.lead .rsrc{color:#D5DEEA}
.revcards .rev.lead .stars{color:#E8B54A}
.revmore{display:flex;align-items:center;gap:14px;margin:22px 0 0}
.revmore span{color:var(--ink3);font-size:0.9375rem}
@media(max-width:1020px){.revgrid.revcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.revgrid.revcards{grid-template-columns:1fr}}

/* 2.10.29: the checker fine print moves out of the results card to the foot of the page */
.finebar{background:var(--paper2,#F3F6F9);border-top:1px solid var(--hair);padding:18px 0}
.finebar .fine{margin:0;max-width:110ch;font-size:0.8125rem;line-height:1.55;color:var(--ink3)}
/* 2.10.29: menu icons a little larger again */
.ddp a .ic{width:32px;height:32px}
.msub a .ic{width:32px;height:32px}
/* 2.10.29: photos start further right so the people sit beside the text, not behind it */
@media(min-width:1021px){
  .hero-slides .hslides{left:calc(50vw - 140px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 200px);mask-image:linear-gradient(90deg,transparent 0,#000 200px)}
  .hero-slides::after{background:linear-gradient(90deg,rgba(27,42,74,.95) 0,rgba(27,42,74,.88) calc(50vw - 160px),rgba(27,42,74,.12) calc(50vw + 120px),rgba(27,42,74,0) 100%)}
  .hero-slides .hcol{max-width:660px}
}

/* 2.10.30: tablet photo in the hero, placed so the tablet sits right of the text */
.hero-slides .hslides img[data-slide="photo-hero-tablet"]{object-position:30% 55%}
/* 2.10.30: small blue USA map icon beside the shipping heading; the highway photo is back */
.shipband .ship-hd{display:flex;align-items:flex-start;gap:16px}
.shipband .usicon{flex:none;width:clamp(68px,7vw,96px);height:auto;margin-top:4px;background:none!important}

/* 2.10.31: logo card and pause button removed, so the hero no longer needs room at the bottom for them */
@media(min-width:1021px){.hero-slides .w{padding-bottom:clamp(40px,4vw,60px);min-height:clamp(480px,38vw,600px)}}

/* 2.10.32: hero rotates the earlier hero photos */
.hero-slides .hslides img[data-slide="photo-hero-office-c"]{object-position:100% 35%}
.hero-slides .hslides img[data-slide="photo-hero-office-a"]{object-position:100% 40%}

/* 2.10.33: Jeff's wide banner photos, framed on the logo screen in each */
.hero-slides .hslides img[data-slide="photo-hero-hand"]{object-position:100% 50%}
@media(max-width:1300px){.hero-slides .hslides img[data-slide="photo-hero-hand"],.hero-slides .hslides img[data-slide="photo-hero-family"]{object-position:100% 50%;transform:scale(.92);transform-origin:100% 50%}}
.hero-slides .hslides img[data-slide="photo-hero-family"]{object-position:100% 50%}

/* 2.10.36: "Who does the negotiating": pull quote gone, title on one line, and the
   photo stretches the full height of the text so every paragraph sits beside it */
.jeff h2{max-width:none}
@media(min-width:1021px){
  .jeff .g{align-items:stretch;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
  .jeff .port{display:flex;flex-direction:column;height:100%}
  .jeff .port img{flex:1 1 auto;height:100%;min-height:0;aspect-ratio:auto;object-fit:cover;object-position:50% 30%}
  .jeff .port figcaption{flex:none}
}
@media(min-width:1021px){
  .jeff .g{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr)}
  .jeff h2{white-space:nowrap;font-size:clamp(1.5rem,2.05vw,1.875rem)}
}
@media(max-width:760px){.shot-band img[src*="photo-keys-v3"]{object-position:72% 70%}}
/* 2.10.37: on phones the band text sits below the photo, so the keys stay visible */
@media(max-width:760px){.shot-band img{height:260px}.shot-band img[src*="photo-keys-v3"]{object-position:70% 62%}.shot-band .ov{position:static;background:#1B2A4A}}
/* 2.10.38: six menu items now (Contact and Price Checker added). The phone number is
   already in the bar above, so the header copy of it is dropped on desktop to make room. */
/* 2.10.44: back to four menu items, so the header phone number is shown again on desktop. */
@media(min-width:1021px) and (max-width:1199px){nav.main{gap:0}nav.main>a,nav.main .dd>a,nav.main .dd>.ddl{padding-left:8px;padding-right:8px;font-size:0.9375rem}}
.util .w>.sp{margin-left:auto!important}

/* ============================================================
   2.10.39: Google review cards in the Trustindex style.
   Home (and a few pages): slider with arrows. Reviews page: grid.
   ============================================================ */
.tcard{display:flex;flex-direction:column;background:#F4F5F7;border-radius:6px;padding:18px 18px 16px;color:#1F2937;text-align:left;min-width:0}
.tcard .th{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.tcard .tav{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.0625rem;background:#ccc}
.tcard .tn{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.3}
.tcard .tn b{font-size:1rem;color:#111827;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcard .tn span{font-size:0.875rem;color:#6B7280}
.tcard .tg{flex:none;align-self:flex-start}
.tcard .tg svg.gg{width:22px;height:22px}
.tcard .stars{color:#F6BB06!important;font-size:1.25rem;letter-spacing:2px;margin:0 0 8px;line-height:1}
.tcard .tt{margin:0;font-size:1rem;line-height:1.55;color:#1F2937;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.tcard.open .tt{display:block;-webkit-line-clamp:unset}
.tcard .tmore{align-self:flex-start;margin-top:8px;padding:6px 0;border:0;background:none;color:#6B7280;font:inherit;font-size:0.9375rem;cursor:pointer}
.tcard .tmore:hover,.tcard .tmore:focus-visible{color:#111827;text-decoration:underline}

/* slider */
.tslider{position:relative;margin-top:clamp(18px,2.4vw,26px)}
/* 2.10.109: no CSS smooth scrolling on the review track. With scroll snapping it made newer Chrome treat the page load as a scroll, so PageSpeed reported NO_LCP on phones. The arrow buttons still scroll smoothly from main.js. */
.ttrack{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*16px)/4);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 10px}
.ttrack::-webkit-scrollbar{display:none}
.ttrack .tcard{scroll-snap-align:start}
.ttrack:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.tarr{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid #D1D5DB;background:#fff;color:#111827;font-size:1.75rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.tarr.prev{left:-20px}.tarr.next{right:-20px}
.tarr[disabled]{opacity:.35;cursor:default}
.tarr:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media(max-width:1020px){.ttrack{grid-auto-columns:calc((100% - 16px)/2)}.tarr.prev{left:-6px}.tarr.next{right:-6px}}
@media(max-width:640px){.ttrack{grid-auto-columns:86%}.tarr{display:none}}

/* reviews page grid */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tgrid .tcard[hidden]{display:none}
@media(max-width:1020px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.tgrid{grid-template-columns:1fr}}
.tcard .tav{position:relative;overflow:hidden}
.tcard .tav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;background:none!important}

/* =========================================================
   v2.10.41: checkers styled as a modern navy calculator.
   Keys (inputs) on the left, the result screen on the right.
   ========================================================= */
form.calc{background:#1B2A4A;border-radius:28px;padding:clamp(16px,2.4vw,28px);gap:clamp(18px,2.4vw,28px);box-shadow:0 18px 40px rgba(15,23,42,.28)}
form.calc .calc-in{border-top:0;padding-top:0;gap:12px}
form.calc .cf{margin:0;background:#26385E;border-radius:16px;padding:12px 14px 10px;transition:background .15s ease,box-shadow .15s ease}
form.calc .cf:hover{background:#2C4170}
form.calc .cf:focus-within{background:#E8B54A;box-shadow:0 0 0 3px rgba(232,181,74,.35)}
form.calc .cf label,form.calc .cf .lrow label{color:#C9D5E8;font-size:.875rem;font-weight:700}
form.calc .cf .inp{border-bottom:0}
form.calc .cf .inp span{color:#AFC0DA;padding:0 4px 0 0}
form.calc .cf input{color:#fff;font-size:1.375rem;font-weight:600;padding:4px 0 2px}
form.calc .cf input::placeholder{color:rgba(255,255,255,.42);font-weight:500}
form.calc .cf small{color:#AFC0DA;min-height:0;margin-top:4px}
form.calc .cf small b{color:#fff}
form.calc .cf:focus-within label,form.calc .cf:focus-within input,form.calc .cf:focus-within .inp span,form.calc .cf:focus-within small,form.calc .cf:focus-within small b{color:#1B2A4A}
form.calc .cf:focus-within input::placeholder{color:rgba(27,42,74,.5)}
form.calc .cf .tip{border-color:#AFC0DA;color:#AFC0DA}
form.calc .cf:focus-within .tip{border-color:#1B2A4A;color:#1B2A4A}
form.calc .cf .tipt{background:#fff;color:#1B2A4A;box-shadow:0 8px 22px rgba(0,0,0,.3)}
form.calc .cf.full:not(.calc-note):not(.cgroup){border:1.5px dashed #4A608C}
form.calc .cf.full:not(.calc-note):not(.cgroup):focus-within{border-color:#E8B54A}
form.calc .calc-note,form.calc .cgroup{background:transparent;padding:0;border-radius:0}
form.calc .calc-note:hover,form.calc .cgroup:hover{background:transparent}
form.calc .calc-in .calc-note{color:#C9D5E8;margin:0 0 4px}
form.calc .calc-in .cgroup{color:#E8B54A;border-top-color:#2C3E66;margin:8px 0 0;padding-top:14px}
form.calc .calc-in .cgroup:first-of-type{padding-top:0}

form.calc .calc-out{background:#13203A;border:1px solid #2C3E66;border-radius:20px;color:#fff;box-shadow:none}
form.calc .calc-out .lbl{color:#E8B54A}
form.calc .calc-out h2,form.calc .calc-out .subhead{color:#fff}
form.calc .calc-out .sub{color:#AFC0DA;border-bottom-color:#2C3E66}
form.calc .calc-out .r{border-bottom-color:#2C3E66;background-image:linear-gradient(to right,#3A4F7A 34%,rgba(255,255,255,0) 0)}
form.calc .calc-out .r span,form.calc .calc-out .r b{background:#13203A}
form.calc .calc-out .r span{color:#C9D5E8}
form.calc .calc-out .r b,form.calc .calc-out .r b.zero{color:#fff}
form.calc .calc-out .r.neg b{color:#7FD8A4}
form.calc .calc-out .r.neg b.zero{color:#fff}
form.calc .calc-out .r.sub2{border-bottom-color:#3A4F7A}
form.calc .calc-out .r.sub2 span,form.calc .calc-out .r.sub2 b{color:#fff}
form.calc .calc-out .r.net{border-top:2px solid #3A4F7A;align-items:center;flex-wrap:wrap}
form.calc .calc-out .r.net span{color:#fff}
form.calc .calc-out .r.net b{color:#fff;font-size:clamp(2rem,3.4vw,2.75rem);font-weight:700;letter-spacing:-.01em;line-height:1.1}
form.calc .calc-out.flash .r.net b{color:#E8B54A}
form.calc .calc-out .lease-levers{background:#1F3157;border-left-color:#E8B54A;border-radius:0 8px 8px 0}
form.calc .calc-out .lease-levers p,form.calc .calc-out .feebox p{color:#D5DFEE}
form.calc .calc-out .feebox p b{color:#fff}
form.calc .calc-out .lease-levers b{color:#7FD8A4}
form.calc .calc-out .feebox{border-top-color:#2C3E66}
form.calc .calc-out .feebox .breakeven{background:#E8F1F5;color:#1B2A4A}
form.calc .calc-out .feebox .breakeven b{color:#15683F}
form.calc .calc-out .tl{color:#E8B54A;text-decoration-color:rgba(232,181,74,.5)}
@media(hover:hover){form.calc .calc-out .tl:hover{color:#fff;text-decoration-color:#fff}}
form.calc .calc-out .btn.b{background:#E8B54A;color:#1B2A4A}
form.calc .calc-out .btn.b:hover{background:#F2C76A;color:#1B2A4A}
form.calc .calc-out .btn.b:focus-visible{outline-color:#fff}
form.calc .calc-out .calc-disc{border-radius:6px}
form.calc .calc-out .calc-check{border-radius:6px}
@media(max-width:1020px){form.calc{border-radius:22px}}
@media(max-width:640px){form.calc{padding:12px;border-radius:18px;margin:0 -4px}form.calc .calc-out{padding:18px 16px}}

/* 2.10.43: "Reviews from Google" link was white on the light reviews band. */
.wall .attrib a,.attrib a{color:#1F5FA8;font-weight:700;text-decoration:underline;text-decoration-color:#9DB6D3;text-underline-offset:3px}
@media(hover:hover){.wall .attrib a:hover,.attrib a:hover{color:#1B2A4A;text-decoration-color:#1B2A4A}}
/* 2.10.44: phone number back in the desktop header; tighten the bar between 1021 and 1199px so everything fits */
@media(min-width:1021px) and (max-width:1199px){
  header.site > .w{padding-left:22px;padding-right:22px;gap:10px}
  header.site nav.main{gap:0}
  header.site .mark{margin-right:6px}
  .mark img,header.site .mark img{height:52px}
  header.site .hcall{padding-left:2px;padding-right:2px;font-size:0.9375rem}
  header.site .hsend{padding-left:12px;padding-right:12px}
}
/* 2.10.46: Mercedes-Benz, Lexus, Genesis and Jaguar logos added; the two wide emblems get extra width */
.bgrid img.wide{width:clamp(44px,4.4vw,64px);max-width:78%;height:auto;max-height:clamp(30px,3.4vw,46px)}
@media(max-width:640px){.bgrid img.wide{width:58px}}
/* 2.10.47: on wide screens the header ran about 45px past the page's right edge; pull it back in line */
@media(min-width:1200px){
  header.site .mark{margin-right:20px}
  header.site nav.main{gap:12px}
  header.site .hsend{padding-left:16px;padding-right:16px}
}

/* 2.10.49: brand grid inverted: navy band, white logos */
.brands{background:#1B2A4A;border-top-color:#1B2A4A;border-bottom-color:#1B2A4A}
.brands h2{color:#fff}
.brands .bhd p,.brands .bwrap .bnote{color:#AFC0DA}
.bgrid li{background:#22355C;border-color:#33496F}
.bgrid img{filter:brightness(0) invert(1);opacity:.94}
.bgrid .bname{color:#fff}
.bgrid.in li.lit{background:#2B4170;border-color:#E8B54A;box-shadow:0 12px 26px rgba(0,0,0,.35),inset 0 -3px 0 #E8B54A}

/* =========================================================
   2.10.50: home services as pill buttons (Northwest style):
   dark pill, icon in a light blue circle, white label.
   ========================================================= */
.npills{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.npill{display:flex;align-items:center;gap:14px;min-height:68px;padding:10px 22px 10px 10px;background:#16384F;border-radius:999px;color:#fff;font-weight:700;font-size:1.0625rem;line-height:1.25;text-decoration:none;
  transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}
.npill .nic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#C9DAEA}
.npill .nic img.ic{width:30px;height:30px;background:none!important;filter:none}
.npill .nl{min-width:0}
@media(hover:hover){.npill:hover{background:#1D4F8C;color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,40,64,.22)}}
.npill:focus-visible{outline:3px solid #E8B54A;outline-offset:3px;color:#fff}
@media(max-width:1180px){.npills{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.npills{grid-template-columns:1fr;gap:10px}.npill{min-height:60px;font-size:1rem}.npill .nic{width:42px;height:42px}.npill .nic img.ic{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){.npill{transition:none}.npill:hover{transform:none}}

/* Services page cards: same navy and the icon in a light circle */
.svc.bcards>.svci{background:#16384F;border-radius:14px}
.svc.bcards>.svci:hover,.svc.bcards>.svci:focus-within{background:#1D4F8C}
.svc.bcards img.ic{width:40px;height:40px;padding:12px;box-sizing:content-box;border-radius:50%;background:#C9DAEA!important;filter:none}
@media(max-width:560px){.svc.bcards img.ic{width:32px;height:32px;padding:10px}}

/* Brand grid: 25 brands in a 5 by 5 grid */
.bgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
.bgrid li{aspect-ratio:auto;height:clamp(64px,7vw,92px)}
@media(max-width:1020px){.bgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:560px){.bgrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.bgrid li{height:62px}.bgrid img{width:28px;height:28px}.bgrid img.wide{width:48px;max-width:84%}}
#handled .head{grid-template-columns:1fr}#handled .head h2{max-width:none}
/* 2.10.51: brand logos no longer rise in or jump; the grid stays still */
.bgrid li,.bgrid.anim li,.bgrid.in li.lit{opacity:1;transform:none;transition:none;box-shadow:none}
.bgrid.in li.lit{background:#22355C;border-color:#33496F}

/* ============================================================
   2.10.52 (Jeff's Oct 18 to 20 review)
   ============================================================ */
/* Stronger body and caption text everywhere (Jeff: text faded, FAQ needs more vibrancy). */
:root{--ink2:#2B3A57;--ink3:#46546E}
.qi p{color:var(--ink2)}
.pphoto figcaption,.send-shot figcaption,.step.wide .full figcaption,.hhow .steps-sheet .full figcaption,.jeff .port figcaption{font-size:1rem;color:var(--ink2);line-height:1.45}
.phero .pphoto figcaption,.phero figcaption{color:#C9D4E3}

/* Interior hero: Jeff's subline, the points list, and the phone line under the buttons. */
.phero .deck .hsub{margin:-6px 0 12px;font-size:clamp(1.125rem,1.7vw,1.375rem);font-weight:700;line-height:1.3;color:#CFE3F4}
.phero .deck .pbul{list-style:none;margin:4px 0 14px;padding:0;display:grid;gap:10px}
.phero .deck .pbul li{position:relative;padding-left:26px;line-height:1.5}
.phero .deck .pbul li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:10px;border-radius:50%;background:#E8B54A}
.phero .deck .hfine{font-size:.9375rem;color:#B9C7D8;margin-top:4px}
.phero .hphone{margin:-6px 0 14px}
.phero .hacts .hb-book{background:#E8B54A;color:#1B2A4A}

/* CPO audit pillars: inverted blue cards with white line icons (Jeff's Northwest reference). */
.pillars{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pillars li{background:#16384F;color:#fff;border-radius:8px;padding:26px 26px 24px;border-left:4px solid #E8B54A}
.pillars .pic{width:48px;height:48px;color:#fff;display:block;margin-bottom:14px}
.pillars h3{color:#fff;font-size:1.25rem;line-height:1.25;margin:0 0 8px}
.pillars p{color:#DCE6F1;margin:0;font-size:1.0625rem;line-height:1.55}
.pillars-cta{margin:22px 0 0}
.pillars-cta .btn{min-height:54px;padding:15px 28px;font-size:1.0625rem;border-radius:4px;background:#E8B54A;color:#1B2A4A;font-weight:800}
.pillars-cta .btn:hover{background:#F2C76A;color:#1B2A4A}
@media(max-width:700px){.pillars{grid-template-columns:1fr}.pillars li{padding:22px 20px}}

/* About: dark value cards (Jeff's spec: deep charcoal, rounded, white text, blue accent on the left). */
.vcards{list-style:none;margin:14px 0 30px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vcards li{background:#1A1F2C;border-left:4px solid #3B82C4;border-radius:8px;padding:20px 22px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.vcards h3{color:#fff;font-size:1.15rem;font-weight:700;margin:0 0 8px;line-height:1.3}
.jeff-story .vcards p{color:#B6C2D2;font-size:1rem;line-height:1.55;margin:0}
@media(max-width:700px){.vcards{grid-template-columns:1fr}}
.jeff-story .pull cite{display:block;margin-top:12px;font-family:inherit;font-size:1rem;font-style:normal;font-weight:700;color:var(--ink2)}
.jeff-story .aboutlead{font-size:clamp(1.1875rem,2vw,1.4375rem);line-height:1.4;color:var(--ink);font-weight:600;margin:40px 0 0;padding-top:28px;border-top:1px solid var(--hair)}

/* Home, "Who does the negotiating": on desktop the photo now fills the height of the text beside it (Jeff). */
@media(min-width:1021px){
  .jeff .g{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch;gap:48px}
  .jeff .port{display:flex;flex-direction:column}
  .jeff .port img{flex:1 1 auto;height:100%;min-height:420px;aspect-ratio:auto;object-fit:cover;object-position:50% 45%}
}

/* Buying / Leasing switch lands below the sticky header. */
#checker{scroll-margin-top:120px}

/* Shipping callout: the new 48-state map, larger. */
.shipband .usicon{width:clamp(110px,11vw,150px)}
.split .split-h{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.1;margin:0 0 12px;max-width:18ch}
.split .split-sub{font-size:1.125rem;font-weight:600;color:var(--ink);margin:0 0 14px;max-width:46ch}

/* Hero slideshow, Jeff's six photos (2.10.52). On desktop the photo covers about 80% of the hero
   and fades in behind the text, as in the approved photo options. Phones keep the solid navy hero. */
@media(min-width:1021px){
  .hero-slides .hslides{left:20%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 240px);mask-image:linear-gradient(90deg,transparent 0,#000 240px)}
  .hero-slides::after{background:linear-gradient(90deg,rgba(27,42,74,.96) 0,rgba(27,42,74,.9) 40%,rgba(27,42,74,.5) 53%,rgba(27,42,74,.1) 64%,rgba(27,42,74,0) 100%)}
  .hero-slides .hcol{max-width:620px}
}
.hero-slides .hslides img[data-slide="photo-hero-keys"]{object-position:62% 35%}
.hero-slides .hslides img[data-slide="photo-hero-kitchen"]{object-position:62% 40%}
.hero-slides .hslides img[data-slide="photo-hero-advisor"]{object-position:62% 35%}
.hero-slides .hslides img[data-slide="photo-hero-drive"]{object-position:60% 40%}
.hero-slides .hslides img[data-slide="photo-hero-suv"]{object-position:60% 30%}
.hero-slides .hslides img[data-slide="photo-hero-handoff"]{object-position:60% 50%}
@media(min-width:1021px) and (max-width:1199px){.hero-slides .hcol{max-width:540px}}
/* Long, flat marks need more width to read at tile size. */
.bgrid img[alt="Dodge"]{width:84%;max-width:none;height:auto;max-height:none}
.bgrid img[alt="Chrysler"]{width:clamp(54px,6vw,82px);height:auto}
@media(max-width:560px){.bgrid img[alt="Dodge"]{width:88%}.bgrid img[alt="Chrysler"]{width:48px}}

/* 2.10.53 Icons (Jeff: washed out, not sharp). The icon files are now 256 px, so they stay crisp on high-resolution
   screens, and they sit on white instead of pale blue so the details do not blend into the circle. */
.npill .nic{background:#fff}
.npill .nic img.ic{width:34px;height:34px}
.svc.bcards img.ic{background:#fff!important;width:44px;height:44px}
@media(max-width:560px){.npill .nic img.ic{width:30px;height:30px}.svc.bcards img.ic{width:36px;height:36px}}

/* 2.10.53 Hero photo captions (Jeff's lines, one per photo) and the pause button, bottom right of the photo. Desktop only. */
.hero-slides .hcorner{z-index:2}
.hero-slides .hcap{margin:0;max-width:320px;padding:12px 16px 12px 18px;border-left:3px solid #E8B54A;background:rgba(15,26,48,.72);
  color:#fff;font-weight:700;font-size:1rem;line-height:1.4;border-radius:0 4px 4px 0;transition:opacity .45s ease;box-shadow:0 8px 24px rgba(6,12,24,.28)}
.hero-slides .hcap.out{opacity:0}
@media(min-width:1021px){.hero-slides .hcorner{bottom:clamp(20px,2.4vw,32px)}}
@media(max-width:1020px){.hero-slides .hcorner{display:none}}
@media(prefers-reduced-motion:reduce){.hero-slides .hcap{transition:none}}

/* ============================================================
   2.10.55 (UI/UX test fixes)
   ============================================================ */
/* Review cards: the grey text was 4.43:1, below the 4.5:1 WCAG minimum. Now about 7.5:1. */
.tcard .tn span,.tcard .tmore{color:#4B5563}
/* Phones: the sticky bar already has Call and Send, so the hero keeps one call to action less. */
@media(max-width:700px){.hero .hacts .hb-call{display:none}}
/* Phones: the comparison reads tighter, the "on your own" side smaller so the answer stands out. */
@media(max-width:700px){
  .vsec .cmp tr{margin-bottom:12px}
  .vsec .cmp tbody th{padding:12px 14px 8px;font-size:1.0625rem}
  .vsec .cmp td{padding:10px 14px;line-height:1.5}
  .vsec .cmp td:not(.us){font-size:.9375rem}
  .vsec .cmp td::before{margin-bottom:2px}
}
/* The landmark wrappers added around the call buttons carry no styling of their own. */
.callwrap{display:contents}

/* ============================================================
   2.10.56: lease checker in the "classic handheld calculator" style (option A,
   Jeff's pick for the lease page), with white keys instead of tan.
   The out-the-door checker keeps its navy colors; 2.10.60 gives both checkers the same key sizing.
   ============================================================ */
form.calc#lease{background:linear-gradient(180deg,#2B3442,#1A2029);box-shadow:inset 0 2px 0 #3D4757,0 18px 40px rgba(0,0,0,.35)}
#lease .calc-in{background:#232B36;border-radius:18px;padding:clamp(14px,2vw,22px)}
#lease .cf{background:#fff;border-radius:16px;padding:12px 14px 10px;box-shadow:0 4px 0 #9AA3AE,0 6px 10px rgba(0,0,0,.35)}
#lease .cf:hover{background:#F3F5F8}
#lease .cf:focus-within{background:#E8B54A;box-shadow:0 4px 0 #B58A2E,0 0 0 3px rgba(232,181,74,.35)}
#lease .cf label{color:#2B3442}
#lease .cf .inp span{color:#5B6472}
#lease .cf input{color:#1B2A4A}
#lease .cf input::placeholder{color:rgba(27,42,74,.45)}
#lease .cf small{color:#4B5563}
#lease .cf small b{color:#1B2A4A}
#lease .cf .tip{border-color:#5B6472;color:#5B6472}
#lease .cf:focus-within label,#lease .cf:focus-within input,#lease .cf:focus-within .inp span,#lease .cf:focus-within small,#lease .cf:focus-within small b{color:#1B2A4A}
#lease .cf.full:not(.calc-note):not(.cgroup){border:1.5px dashed #9AA3AE}
#lease .calc-note,#lease .cgroup{background:transparent;box-shadow:none;border-radius:0}
#lease .calc-note:hover,#lease .cgroup:hover{background:transparent}
#lease .calc-in .calc-note{color:#C9D2DD}
#lease .calc-in .cgroup{color:#E8B54A;border-top-color:#323C49}

/* The results side: a dark printout with a green display for the monthly payment on top. */
#lease .calc-out{display:flex;flex-direction:column;background:#1A2029;border:1px solid #323C49;border-radius:18px}
#lease .calc-out > *{order:2}
#lease .calc-out .r.net{order:0;display:block;background:#B8C9A3;border:3px solid #0E1218;border-radius:10px;padding:14px 18px;margin:0 0 18px;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.35);background-image:none}
#lease .calc-out .r.net span,#lease .calc-out .r.net b{background:transparent}
#lease .calc-out .r.net span{display:block;color:#33402A;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
#lease .calc-out .r.net b{display:block;text-align:right;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:clamp(2rem,3.4vw,2.6rem);font-weight:700;color:#1F2A16;letter-spacing:.04em}
#lease .calc-out.flash .r.net b{color:#0E3B12}
#lease .calc-out .calc-disc{order:20;margin-top:16px}
#lease .calc-out .r{border-bottom-color:#323C49;background-image:linear-gradient(to right,#3D4757 34%,rgba(255,255,255,0) 0);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95rem}
#lease .calc-out .r span,#lease .calc-out .r b{background:#1A2029}
#lease .calc-out .r span{color:#D7DEE6}
#lease .calc-out .r b{color:#fff}
#lease .calc-out .r.sub2{border-bottom-color:#3D4757}
#lease .calc-out .lbl,#lease .calc-out h2{color:#E8B54A}
#lease .calc-out .subhead{color:#fff}
#lease .calc-out .lease-levers{background:#232B36}
#lease .calc-out .feebox{border-top-color:#323C49}
/* No tan or cream on the lease checker (Jeff): the fine print sits on white. */
#lease .calc-out .calc-disc{background:#fff;color:#2B3442;border-left:4px solid #E8B54A}
#lease .calc-out .calc-disc b{color:#1B2A4A}
/* 2.10.57: even keys on the lease checker. Keys in a row share one height, labels take the same
   two-line space so the amounts line up, and a lone last key spans the row. */
:is(#lease,#otd) .calc-in{align-items:stretch}
:is(#lease,#otd) .cf{display:flex;flex-direction:column}
#lease .cf.span2{grid-column:1 / -1}
/* 2.10.60: both checkers use the buying checker's key sizing: sentence-case labels, the same
   type sizes and padding, keys sized to their content, keys in a row matching in height. */
:is(#lease,#otd) .cf .tip{flex:none}

/* 2.10.58: brand banner is Jeff's top 10, centered: heading, a 5 by 2 grid with larger logos, then the ownership note. */
.brands10 .bhd10{text-align:center;max-width:720px;margin:0 auto clamp(18px,2.6vw,30px)}
.brands10 h2{font-size:clamp(1.5rem,2.8vw,2.125rem);line-height:1.15;margin:0}
.brands10 .bsub{margin:10px 0 0;color:#C9D5E8;font-size:clamp(1rem,1.3vw,1.125rem)}
.brands10 .bgrid10{grid-template-columns:repeat(5,minmax(0,1fr));max-width:920px;margin:0 auto;gap:clamp(8px,1.2vw,14px)}
.brands10 .bgrid10 li{height:clamp(84px,10vw,128px);gap:clamp(8px,1.2vw,14px)}
.brands10 .bgrid10 img{width:clamp(40px,5.4vw,68px);height:clamp(40px,5.4vw,68px);max-width:none;max-height:none}
.brands10 .bgrid10 li.pair img{width:clamp(30px,4vw,52px);height:clamp(30px,4vw,52px)}
.brands10 .bnote{text-align:center;max-width:720px;margin:clamp(16px,2.2vw,24px) auto 0;color:#AFC0DA;font-size:.875rem}
@media(max-width:560px){
  .brands10 .bgrid10{gap:6px}
  .brands10 .bgrid10 li{height:64px}
  .brands10 .bgrid10 img{width:32px;height:32px}
  .brands10 .bgrid10 li.pair{gap:4px}
  .brands10 .bgrid10 li.pair img{width:24px;height:24px}
}

/* ============================================================
   2.10.62: chat assistant. Round button bottom right, a short greeting that
   fades in and out, and a panel above the button (a bottom sheet on phones).
   The desktop Call Us pill moves left to make room.
   ============================================================ */
.cchat{position:fixed;right:22px;bottom:22px;z-index:61;font-family:'Libre Franklin','Helvetica Neue',Helvetica,Arial,sans-serif}
.cchat[hidden]{display:none}
@media(min-width:701px){body:has(.cchat:not([hidden])) .callpill{right:94px}}
.cchat-btn{width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:var(--navy);color:#fff;box-shadow:0 10px 26px rgba(14,20,25,.32);transition:transform .15s ease,background .15s ease}
.cchat-btn:hover{background:var(--blue-deep);transform:translateY(-1px)}
.cchat-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.cchat.open .cchat-btn{background:var(--blue-deep)}

.cchat-teaser{position:absolute;right:0;bottom:74px;width:min(270px,calc(100vw - 44px));margin:0;padding:12px 34px 12px 14px;
  background:#fff;color:var(--ink);border:1px solid var(--hair);border-radius:12px;box-shadow:0 12px 30px rgba(14,20,25,.2);
  font-size:.9375rem;line-height:1.4;cursor:pointer;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.cchat-teaser.on{opacity:1;transform:none}
.cchat-teaser::after{content:"";position:absolute;right:22px;bottom:-7px;width:12px;height:12px;background:#fff;
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);transform:rotate(45deg)}
.cchat-tx{position:absolute;top:4px;right:4px;width:28px;height:28px;border:0;background:none;color:var(--ink3);font-size:1.25rem;line-height:1;cursor:pointer;border-radius:6px}
.cchat-tx:hover{background:var(--paper2);color:var(--ink)}

.cchat-panel{position:absolute;right:0;bottom:74px;width:380px;height:min(600px,calc(100vh - 120px));display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--hair);border-radius:14px;box-shadow:0 20px 50px rgba(14,20,25,.28);overflow:hidden}
.cchat-panel[hidden]{display:none}
.cchat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 14px 12px 18px;background:var(--navy);color:#fff}
.cchat-title{margin:0;font-weight:800;font-size:1rem}
.cchat-sub{margin:2px 0 0;font-size:.8125rem;color:#C9D5E8}
.cchat-x{border:0;background:none;color:#fff;font-size:1.6rem;line-height:1;width:34px;height:34px;border-radius:8px;cursor:pointer}
.cchat-x:hover{background:rgba(255,255,255,.12)}
.cchat-x:focus-visible,.cchat-send:focus-visible,.cchat-act:focus-visible,.cchat-go:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cchat-log{flex:1;overflow-y:auto;padding:16px 14px 6px;background:var(--paper2);overscroll-behavior:contain}
.cchat-m{max-width:88%;margin:0 0 10px;padding:10px 12px;border-radius:12px;font-size:.9375rem;line-height:1.48;overflow-wrap:anywhere}
.cchat-m.bot{background:#fff;color:var(--ink);border:1px solid var(--hair);border-bottom-left-radius:4px}
.cchat-m.me{margin-left:auto;background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.cchat-a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.cchat-gos{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cchat-go{display:inline-block;padding:7px 12px;border-radius:8px;background:var(--red);color:#fff;font-weight:700;font-size:.875rem}
.cchat-go:hover{background:var(--red-deep)}
.cchat-m.typing{display:inline-flex;gap:4px;padding:12px 14px}
.cchat-m.typing span{width:7px;height:7px;border-radius:50%;background:var(--ink3);animation:cchat-dot 1s infinite ease-in-out}
.cchat-m.typing span:nth-child(2){animation-delay:.15s}.cchat-m.typing span:nth-child(3){animation-delay:.3s}
@keyframes cchat-dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media(prefers-reduced-motion:reduce){.cchat-m.typing span{animation:none;opacity:.6}.cchat-teaser,.cchat-btn{transition:none}}
.cchat-acts{display:flex;flex-wrap:wrap;gap:4px 14px;padding:8px 14px;border-top:1px solid var(--hair);background:#fff}
.cchat-act{font-size:.8125rem;font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.cchat-act:hover{color:var(--blue-deep)}
.cchat-form{display:flex;align-items:flex-end;gap:8px;padding:8px 10px 6px 14px;background:#fff}
.cchat-form textarea{flex:1;resize:none;border:1px solid var(--rule);border-radius:10px;padding:9px 11px;font:inherit;font-size:1rem;line-height:1.35;max-height:120px;color:var(--ink);background:#fff}
.cchat-form textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.cchat-send{flex:none;width:42px;height:42px;border-radius:10px;border:0;background:var(--red);color:#fff;display:grid;place-items:center;cursor:pointer}
.cchat-send:hover{background:var(--red-deep)}
.cchat-send:disabled{opacity:.55;cursor:default}
.cchat-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cchat-fine{margin:0;padding:0 14px 10px;background:#fff;font-size:.75rem;line-height:1.4;color:var(--ink3)}
.cchat-fine a{text-decoration:underline}

@media(max-width:700px){
  .cchat{right:14px;bottom:calc(80px + env(safe-area-inset-bottom))}
  .cchat-btn{width:54px;height:54px}
  .cchat-teaser{bottom:66px}
  .cchat.open{position:fixed;inset:auto 0 0 0}
  .cchat.open .cchat-btn{display:none}
  .cchat-panel{position:fixed;left:0;right:0;bottom:0;width:auto;height:min(82vh,640px);height:min(82dvh,640px);border-radius:16px 16px 0 0;
    padding-bottom:env(safe-area-inset-bottom)}
}
html.nav-open .cchat{display:none}
@media print{.cchat{display:none}}

/* 2.10.65: photo crops on desktop and tablet (Jeff, Oct 2026).
   The "Taking the Keys" band was framed low, so her face was cut off above the nose; it is now
   taller and framed on her face, the key and the hands. The handshake strip under the four steps
   was a thin sliver (about a quarter of the photo); it is now taller. Phones keep their own framing. */
@media(min-width:761px){
  .shot-band img{height:clamp(380px,48vw,640px)}
  .shot-band img[src*="photo-keys-v3"]{object-position:50% 22%}
  .hhow .steps-sheet .full img,.step.wide .full img{height:clamp(240px,30vw,400px)}
  .hhow .steps-sheet .full img[src*="photo-handshake"],.step.wide .full img[src*="photo-handshake"]{object-position:50% 50%}
}

/* ============================================================
   2.10.66: outside-eye audit fixes (consistency pass).
   ============================================================ */

/* One color per action, everywhere: gold books the call, light blue sends the car link, green calls. */
.btn.hb-book{background:#E8B54A;color:#1B2A4A}
.btn.hb-book:hover,.btn.hb-book:focus-visible{background:#F2C76A;color:#1B2A4A}
.btn.wh,.mbar .mb-send,.side-box .btn.wh,.feebox .btn.wh,.pillars-cta .btn.wh,.cf .btn.wh{background:#CFE3F4;color:#1B2A4A;box-shadow:inset 0 0 0 1px rgba(27,42,74,.28)}
.btn.wh:hover,.mbar .mb-send:hover,.side-box .btn.wh:hover,.feebox .btn.wh:hover,.pillars-cta .btn.wh:hover,.cf .btn.wh:hover{background:#B7D5EE;color:#1B2A4A}
.hero .btn.wh,.phero .hacts .btn.wh,.cta .btn.wh{box-shadow:none}
.btn{white-space:nowrap}
.cta .acts .btn{min-width:230px}

/* Top bar: "5.0 on Google, 64 reviews"; phones "5.0 on Google (64)". */
.urt a{display:inline-flex;align-items:center;gap:8px}
.urt .urt-short{display:none}
@media(max-width:760px){.urt .urt-long{display:none}.urt .urt-short{display:inline}}

/* Review cards: full names on two lines if needed, dates on one; three cards across on tablets. */
.tcard .tn b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
.tcard .tn span{white-space:nowrap}
.wall .hd p .tl,.wall .hd p a{white-space:nowrap}
@media(min-width:761px) and (max-width:1020px){.ttrack{grid-auto-columns:calc((100% - 2*16px)/3)}}

/* Section headings had room to breathe but were held to 20 characters. */
.head h2{max-width:26ch}
.head{align-items:end}
.head p{margin-bottom:4px}
@media(max-width:1020px){.head{align-items:start}}

/* Services: eight cards, four across, two rows. */
@media(min-width:1021px){.svc.bcards{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:701px) and (max-width:1020px){.svc.bcards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* CPO: the standard list, like the other service pages. */
.pillars-cta .btn{border-radius:3px}

/* Home signature photo: no longer stretched to the full height of the story. */
@media(min-width:1021px){
  .jeff .port{height:auto;align-self:start;position:sticky;top:150px}
  .jeff .port img{flex:none;height:auto;aspect-ratio:4/5;object-position:50% 40%}
}

/* Send-a-listing photo on phones: frame the phone in hand, not the sofa. */
@media(max-width:700px){.send-shot img{height:240px;object-position:72% 45%}}

/* Pricing hero: the photo sits level with the middle of the longer text, not stranded at the top. */
@media(min-width:1021px){.phero.has-aside:has(.pbul) .aside{align-self:center}}

/* Send the car link and Find my car heroes: a short check list under the intro. */
.hchecks{list-style:none;margin:4px 0 22px;padding:0;display:grid;gap:9px}
.hchecks li{position:relative;padding-left:30px;color:#E3EAF3;font-size:1.125rem;line-height:1.45;margin:0}
.hchecks li::before{content:"";position:absolute;left:2px;top:.28em;width:18px;height:18px;border-radius:50%;background:#E8B54A}
.hchecks li::after{content:"";position:absolute;left:8px;top:calc(.28em + 4px);width:5px;height:9px;border:solid #1B2A4A;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

/* Out-of-state: the highway photo at its own size, in the column. */
.oos-band .oos-photo img{aspect-ratio:1024/655;object-position:50% 50%}
@media(min-width:1021px){.oos-band .split{align-items:center}}

/* Blog: three columns, newest post featured across two. */
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card .meta{white-space:nowrap}
.card.feat{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;column-gap:26px;padding-top:18px}
.card.feat .ci{grid-row:1/6;margin:-18px 0 -18px -18px;aspect-ratio:auto;height:auto;min-height:300px;position:relative}
.card.feat .ci img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card.feat h3{font-size:1.5rem;line-height:1.2}
@media(max-width:1020px){.cards.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .cards.c3{grid-template-columns:1fr}
  .card.feat{grid-column:auto;display:block;padding-top:0}
  .card.feat .ci{aspect-ratio:16/10;height:auto;min-height:0;margin:0 -18px 14px}
  .card.feat .ci img{position:static}
}
/* A small source photo is never blown up past its own width. */
.post-img img{width:auto;max-width:100%;margin:0 auto;display:block}
.post-img img[width="648"]{aspect-ratio:auto}

/* Blog sidebar stays in view while reading. */
@media(min-width:1021px){.post-body{align-items:start}.post-side{position:sticky;top:152px;align-self:start}}

/* Author box: Jeff's photo, round. */
.author .ph{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 25%}
.author .role{margin:-4px 0 8px;font-size:.9375rem;color:var(--ink3)}
@media(max-width:700px){.author .ph{width:72px;height:72px}}

/* Phones: the breadcrumb shows where you are, on one line. */
@media(max-width:700px){
  .crumbs ol{flex-wrap:nowrap;min-width:0}
  .crumbs li{flex:none}
  .crumbs li[aria-current]{display:block;flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:44px}
}

/* Bigger tap target for the little "i" on the calculators. */
.cf .tip{width:24px;height:24px;font-size:13px;line-height:20px;position:relative}
.cf .tip::after{content:"";position:absolute;inset:-10px}

/* Lease calculator on phones: long values drop under the label instead of running off the edge. */
@media(max-width:560px){
  .calc-out .r{flex-wrap:wrap;row-gap:2px}
  .calc-out .r span{flex:1 1 150px}
  .calc-out .r b{margin-left:auto}
  #lease .calc-out .r{font-size:.8125rem;gap:10px}
}

/* Phone footer: link groups open and close. */
footer .fht{all:unset;display:block;font:inherit;color:inherit;cursor:default}
@media(max-width:700px){
  footer.fjs .fcol{border-top:1px solid rgba(255,255,255,.14)}
  footer.fjs .fcol .fh{margin:0}
  footer.fjs .fht{cursor:pointer;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;box-sizing:border-box}
  footer.fjs .fht::after{content:"";width:9px;height:9px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin:-4px 6px 0 0;transition:transform .2s ease}
  footer.fjs .fcol.open .fht::after{transform:rotate(-135deg);margin-top:4px}
  footer.fjs .fcol ul{display:none}
  footer.fjs .fcol.open ul{display:block;padding-bottom:10px}
  footer.fjs .fcol:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
  footer .fg{gap:0}
  footer .fabout{margin-bottom:22px}
}
footer .fht:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Chat button: up and in on phones, above the call bar; the page ends with room for it. */
@media(max-width:700px){
  .cchat{right:12px;bottom:calc(84px + env(safe-area-inset-bottom))}
  .cchat-btn{width:50px;height:50px}
  body:has(.cchat:not([hidden])) footer.site{padding-bottom:calc(28px + 72px + 70px + env(safe-area-inset-bottom))}
}
@media(min-width:701px){body:has(.cchat:not([hidden])) footer.site{padding-bottom:110px}}

/* Contact hours never split mid-time. */
.dl dd .nw{white-space:nowrap}
.split .split-h{max-width:24ch}
/* Trust strip: one line on desktop instead of a stray second line. */
@media(min-width:1021px){.ticker .w{gap:8px 16px}.ticker{font-size:.875rem}.ticker span{white-space:nowrap}}
@media(min-width:1021px) and (max-width:1199px){.ticker .hide-s{display:none}}

/* 2.10.66: brand grid with the makers' full-color logos on white tiles (Jeff). */
.brands10 .bgrid10 li{background:#fff;border-color:#fff}
.brands10 .bgrid10 li.pair{gap:clamp(10px,1.6vw,18px)}
.brands10 .bgrid10 img{width:auto;height:auto;opacity:1;filter:none;object-fit:contain;max-width:none}
.brands10 .bgrid10 img.bl-sq{height:clamp(44px,5.6vw,72px)}
.brands10 .bgrid10 img.bl-mid{width:clamp(70px,8vw,112px)}
.brands10 .bgrid10 img.bl-oval{width:clamp(76px,8.4vw,118px)}
.brands10 .bgrid10 img.bl-wide{width:clamp(88px,10.4vw,144px)}
.brands10 .bgrid10 li.pair img.bl-sq{height:clamp(36px,4.4vw,58px)}
.brands10 .bgrid10 li.pair img.bl-oval{width:clamp(56px,6vw,84px)}
@media(max-width:560px){
  .brands10 .bgrid10{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .brands10 .bgrid10 li{height:72px}
  .brands10 .bgrid10 img.bl-sq{height:46px;width:auto}
  .brands10 .bgrid10 img.bl-mid{width:84px;height:auto}
  .brands10 .bgrid10 img.bl-oval{width:92px;height:auto}
  .brands10 .bgrid10 img.bl-wide{width:112px;height:auto}
  .brands10 .bgrid10 li.pair img.bl-sq{height:40px;width:auto}
  .brands10 .bgrid10 li.pair img.bl-oval{width:72px;height:auto}
}

/* ============================================================
   2.10.68: Jeff's latest review comments (by timestamp).
   ============================================================ */

/* Desktop heroes: the photo gets more of the row and sits level with the text (photos looked small on laptops). */
@media(min-width:1021px){
  .phero.has-aside:has(.pphoto) .g{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}
  .phero.has-aside .aside .pphoto img{aspect-ratio:4/3}
  .phero.has-aside .aside .pphoto img[src*="photo-skyline"]{aspect-ratio:auto}
}

/* Questions-and-answers blocks: tinted cards with a navy edge instead of plain text on white. */
.qa{border-top:0;display:grid;gap:12px}
.qi{background:#EEF4FA;border-left:4px solid #1B2A4A;border-radius:4px;padding:16px 20px;border-bottom:0}
.qi h3{color:#1B2A4A}
.qi p{color:#2B3B5C}
.s.white .qi{background:#EEF4FA}
.s:not(.white) .qi{background:#fff}

/* Brand section: trust points under the grid. */
.btrust{max-width:980px;margin:clamp(22px,3vw,34px) auto 0;text-align:left}
.btrust h3{color:#fff;text-align:center;font-size:clamp(1.25rem,2vw,1.5rem);margin:0 0 14px}
.btrust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.btrust li{background:#22355C;border-left:3px solid #E8B54A;border-radius:4px;padding:16px 18px;color:#D5DEEA;font-size:1rem;line-height:1.5}
.btrust li b{display:block;color:#fff;font-size:1.0625rem;margin-bottom:4px}
@media(max-width:820px){.btrust ul{grid-template-columns:1fr}}
.brands10 .bnote{max-width:860px}

/* Related links: the same navy pill buttons as the home page. */
.rel-pills .npills{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.rel-pills.related ul{border-top:0}
.rel-pills li{border-bottom:0;padding:0}
.rel-pills li>a::before,.rel-pills li>a::after{content:none}
.npill,.npill:hover,.npill:focus,.npill:active{border-radius:999px}
.npill:active{transform:none}

/* CPO: 2 by 2 cards with icons, same blue cards as the Services page. */
.cpo-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.cpo-cards .pic{width:44px;height:44px;color:#fff;margin-bottom:6px}
.cpo-cards h3{color:#fff;font-size:1.25rem}
.cpo-cards p{color:#E6EEF8}
@media(max-width:700px){.cpo-cards{grid-template-columns:1fr}}

/* Find My Car and Send the Car Link forms look different at a glance. */
#form-listing{background:#EAF3FB;box-shadow:inset 0 5px 0 #8DBCE6,0 18px 40px rgba(6,12,24,.25)}
#form-search{background:#fff;box-shadow:inset 0 5px 0 #E8B54A,0 18px 40px rgba(6,12,24,.25)}

/* Blog: bigger topic links; sidebar points and tool buttons. */
.topics a{font-size:1.0625rem}
.topics .lbl{font-size:1rem}
.side-pts{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.side-pts li{font-size:.96875rem;line-height:1.45;color:var(--ink2)}
.side-pts b{color:var(--ink)}
.side-btns{border-top:0;padding-top:0;display:grid;gap:8px}
.side-btns .lbl{margin-bottom:2px}
.side-btns a{justify-content:center;border:1.5px solid #1B2A4A;border-radius:3px;background:#fff;color:#1B2A4A!important;font-weight:800;min-height:46px;padding:8px 12px;text-align:center}
.side-btns a:hover{background:#1B2A4A;color:#fff!important}

/* Trust strip: small USA map beside "nationwide". */
.ticker .tnat{display:inline-flex;align-items:center;gap:7px}
.ticker .tusa{width:30px;height:auto;flex:none}

/* Footer: USA line with a small flag. */
footer .usa{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font-size:.9375rem;line-height:1.5}
footer .usa .flag{flex:none;margin-top:3px;border-radius:2px}
footer .usa b{color:#fff}
footer .about b{color:#fff}

/* Lease checker: same type and number sizes as the buying checker (colors stay separate). */
#lease .calc-out .r{font-family:inherit;font-size:inherit}
#lease .calc-out .r.net b{font-family:inherit;font-size:clamp(2rem,3.4vw,2.75rem);letter-spacing:-.01em;line-height:1.1}
#lease .calc-out .r.net span{font-size:.875rem;letter-spacing:.06em}
@media(max-width:560px){#lease .calc-out .r{font-size:inherit}}

/* One-line logo is wider: hold it to the header width on desktop so the nav and buttons fit. */
@media(min-width:1021px){header.site .mark img{height:auto!important;width:clamp(212px,19vw,276px)!important;max-width:none}}
@media(min-width:1021px) and (max-width:1100px){header.site .mark img{width:206px!important}}
/* Trust strip keeps one line with the map icon. */
@media(min-width:1021px){.ticker .w{gap:8px 9px}.ticker .tusa{width:24px}.ticker .tnat{gap:6px}}
/* Related pills: undo the older list styling underneath. */
.related.rel-pills ul.npills{display:grid;border-top:0;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.related.rel-pills li{position:static;padding:0;border:0;grid-column:auto}
.related.rel-pills li>a.npill{display:flex;align-items:center;gap:14px;position:relative;padding:10px 22px 10px 10px;min-height:68px;color:#fff;background:#16384F;border-radius:999px;text-decoration:none}
.related.rel-pills li>a.npill:hover{background:#1D4F8C;padding-left:10px}
.related.rel-pills li>a.npill::before,.related.rel-pills li>a.npill::after{content:none}
.related.rel-pills .npill .nl{color:#fff;font-weight:700;font-size:1.0625rem;line-height:1.25}
.related.rel-pills li:focus-within{outline:0}
@media(max-width:560px){.related.rel-pills li>a.npill{min-height:60px}.related.rel-pills .npill .nl{font-size:1rem}}

/* 2.10.69: new photos framed for their slots. */
@media(min-width:761px){.hhow .steps-sheet .full img[src*="photo-handshake-v2"],.full img[src*="photo-handshake-v2"]{height:clamp(300px,38vw,500px);object-position:50% 4%}}
.shot-band img[src*="photo-keys-v4"]{object-position:50% 38%}
@media(max-width:760px){.shot-band img[src*="photo-keys-v4"]{object-position:42% 45%}}
.send-shot{text-align:center}
.send-shot img[src*="photo-phone-v3"]{width:auto;max-width:100%;height:clamp(380px,36vw,480px);object-fit:cover;margin:0 auto;border-radius:4px}
.send-shot figcaption{text-align:center}
@media(max-width:700px){.send-shot img[src*="photo-phone-v3"]{height:420px;object-position:50% 40%}}

/* 2.10.70: brand heading breaks at the colon, not mid-phrase. */
.brands10 #brands-h{max-width:none}
.brands10 #brands-h span{display:inline-block}
@media (max-width:520px){.brands10 #brands-h span{display:inline}}
/* 2.10.70: on phones the logo shrinks so the Menu button always fits. */
@media (max-width:480px){header.site .mark img{height:auto!important;width:min(250px,calc(100vw - 160px))!important;max-width:none}}

/* 2.10.71: simpler home hero. Brand line above a keyword H1, one short line, one button. */
.hero .hkick{font-family:'Libre Franklin','Helvetica Neue',sans-serif;font-weight:800;
  font-size:clamp(0.9375rem,1.5vw,1.125rem);letter-spacing:.06em;text-transform:uppercase;color:#D69E2E;
  margin:0 0 10px;line-height:1.2}
.hero-slides .hsub{color:#E3EAF3;font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.5;margin:0 0 26px;max-width:44ch}
.hero-slides .hacts .hb-start{min-width:220px;padding:16px 40px;font-size:1.125rem}
@media(max-width:560px){.hero-slides .hacts .hb-start{min-width:0}}
/* 2.10.71: one Get Started button in the phone bar; the number shows in the top bar again. */
@media(max-width:1020px){
  .mbar{grid-template-columns:1fr}
  .mbar .mb-start{background:#E8B54A;color:#1B2A4A;font-weight:800}
  .mbar .mb-start:active{filter:brightness(.92)}
}
@media(max-width:760px){
  .util .sp{display:inline;margin-left:auto;padding-left:10px}
}
@media(max-width:480px){.util .urt,.util .urt a{white-space:nowrap}.urt .urt-short{display:none}}
@media(max-width:360px){.util .urt .stars{display:none}}

/* 2.10.72: phones and tablets (no hero photos): a taller banner, tighter text lines, and the Google rating in it. */
.hero-slides .hrev{display:none}
@media(max-width:1020px){
  .hero-slides .w{padding-top:clamp(40px,8vw,64px);padding-bottom:clamp(48px,9vw,72px)}
  .hero-slides .hrev{display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;padding:8px 14px;border-radius:999px;
    background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#E3EAF3;font-size:.9375rem;line-height:1.2;text-decoration:none}
  .hero-slides .hrev b{color:#fff}
  .hero-slides .hrev-stars{color:#F2C76A;letter-spacing:1px;font-size:.9375rem}
  .hero-slides a.hrev:hover{background:rgba(255,255,255,.14)}
  .hero-slides h1{font-size:clamp(2.25rem,8.6vw,3rem);max-width:14ch;text-wrap:balance;margin-bottom:20px}
  .hero-slides .hsub{max-width:27ch;font-size:clamp(1.125rem,4.6vw,1.25rem);margin-bottom:30px}
  .hero-slides .hkick{margin-bottom:12px}
  body.home .util .urt{display:none}
}
@media(max-width:360px){.hero-slides .hrev{font-size:.8125rem;gap:6px;padding:7px 11px}.hero-slides .hrev-stars{font-size:.8125rem}}

/* 2.10.74: the shorter hero text (2.10.71) made the desktop hero shorter, so the photos were cropped
   tighter (heads cut off, the caption over the logos). The hero keeps its earlier height on desktop. */
@media(min-width:1021px){.hero-slides .w{min-height:clamp(636px,45.3vw,660px)}}

/* 2.10.75: hero photos frame from nearer the top, so no head is cut off under the menu bar on wide screens. */
@media(min-width:1021px){
  .hero-slides .hslides img[data-slide="photo-hero-keys"]{object-position:62% 0%}
  .hero-slides .hslides img[data-slide="photo-hero-kitchen"]{object-position:62% 14%}
  .hero-slides .hslides img[data-slide="photo-hero-advisor"]{object-position:62% 8%}
  .hero-slides .hslides img[data-slide="photo-hero-drive"]{object-position:60% 0%}
  .hero-slides .hslides img[data-slide="photo-hero-suv"]{object-position:60% 16%}
}
/* 2.10.75: on wide screens the banner grows a little with the width, so the photos keep both the faces and the logos in frame. */
@media(min-width:1600px){.hero-slides .w{min-height:clamp(660px,38vw,820px)}}

/* 2.10.77: How it works. The handshake photo sits beside the heading, exactly as tall as the heading and intro,
   framed from the top so no head is cut. The four steps line up row by row (number, title, timing, text). */
.hhow .how-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:stretch}
.hhow .how-top .head{display:block;margin:0;align-self:end}
.hhow .how-top .head > *{max-width:none}
.hhow .how-photo{margin:0;position:relative;min-height:0}
.hhow .how-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
@media(max-width:900px){
  .hhow .how-top{grid-template-columns:1fr;gap:20px}
  .hhow .how-photo img{position:static;height:auto;aspect-ratio:3/2}
}
@media(min-width:1021px){
  .steps4{grid-template-rows:auto auto auto 1fr}
  .steps4 .st{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
  .steps4 .st > *{margin-top:0}
}
.steps4 .stlink{margin-top:8px}
@media(max-width:900px){.hhow .how-photo img{aspect-ratio:16/9;object-position:50% 0%}}
/* 2.10.78: "The full walkthrough" link stays on one line */
.hhow .how-top .head .tl{white-space:nowrap}

/* 2.10.79: the USA line is a full-width row across the footer, above the copyright line. */
footer .fusa{display:flex;align-items:center;gap:14px;margin:clamp(26px,3vw,36px) 0 0;padding:18px 0;border-top:1px solid rgba(255,255,255,.14);
  color:#C9D4E3;font-size:.9688rem;line-height:1.5}
footer .fusa .flag{flex:none;width:38px;height:20px;border-radius:2px}
footer .fusa b{color:#fff;margin-right:4px}
footer .fusa + .fbot{margin-top:0}
@media(max-width:700px){footer .fusa{align-items:flex-start;gap:12px;font-size:.9375rem}footer .fusa .flag{width:30px;height:16px;margin-top:3px}}

/* 2.10.80: hero headlines in Archivo Expanded ExtraBold (Jeff wanted them bigger and more prominent). */
.hero h1,.phero h1{font-family:'Archivo','Libre Franklin','Helvetica Neue',sans-serif;font-weight:800;font-stretch:112%;letter-spacing:-.02em}
.hero h1 em,.phero h1 em{font-style:normal}
.hero-slides h1{font-size:clamp(2.6rem,4.6vw,4.3rem);line-height:1.02;max-width:14ch}
.phero h1{font-size:clamp(1.875rem,2.9vw,2.6rem);line-height:1.1;max-width:24ch}
@media(max-width:1020px){
  .hero-slides h1{font-size:clamp(2.2rem,9.2vw,2.9rem);line-height:1.03;max-width:13ch}
  .phero h1{font-size:clamp(1.75rem,7vw,2.375rem);max-width:none}
}

/* 2.10.81: Get Started in the sticky header on desktop. */
header.site .hstart{flex:none;white-space:nowrap;min-height:44px;padding:10px 18px;font-size:0.9375rem;border-radius:4px;background:#E8B54A;color:#1B2A4A;border:0;font-weight:800}
header.site .hstart:hover,header.site .hstart:focus-visible{background:#F2C76A;color:#1B2A4A}
@media(max-width:1020px){header.site .hstart{display:none}}
/* The phone number already sits in the top bar right above, so the header drops its copy to make room. */
@media(min-width:1021px){header.site .hcall{display:none}}
@media(min-width:1021px) and (max-width:1180px){header.site .hstart,header.site .hsend{padding-left:13px;padding-right:13px}}


/* 2.10.83: section headings and subheadings in Archivo too, so the type matches the hero headlines (Jeff).
   Normal width and a lighter bold than the hero; body text stays Libre Franklin, review quotes stay serif. */
h2,h3{font-family:'Archivo','Libre Franklin','Helvetica Neue',sans-serif;font-stretch:100%;letter-spacing:-.012em}
h2{font-weight:750}
h3{font-weight:700;letter-spacing:-.005em}
.tool .top b,.vsec .cmp tbody th{font-family:'Archivo','Libre Franklin',sans-serif;font-weight:700;letter-spacing:-.005em}
.steps4 .n{font-family:'Archivo','Libre Franklin',sans-serif;font-weight:800}
/* Archivo runs wider than the serif: section headings get a wider column so they keep their line count. */
@media(min-width:1021px){.head{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.head h2{max-width:24ch}}
@media(max-width:1020px){.head h2{max-width:none}}

/* 2.10.83: Send the Car Link, the phone photo beside the four steps; it stays in view while the steps scroll. */
.send-split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,4vw,52px);align-items:start}
.send-split .steps{margin:0}
.send-split .step{grid-template-columns:50px minmax(0,1fr);row-gap:6px}
.send-split .step>*:not(.n){grid-column:2}
.send-split .send-shot{margin:0;position:sticky;top:110px;text-align:left}
.send-split .send-shot img,.send-split .send-shot img[src*="photo-phone-v3"]{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 45%;border-radius:4px}
.send-split .send-shot figcaption{text-align:left;margin-top:10px}
@media(max-width:900px){
  .send-split{grid-template-columns:1fr}
  .send-split .send-shot{position:static;max-width:420px;margin:0 auto}
  .send-split .send-shot figcaption{text-align:center}
}
@media(max-width:600px){.head h2{font-size:clamp(1.3125rem,5.9vw,1.5rem);line-height:1.15;font-stretch:90%;font-weight:700}}

/* 2.10.86: floating desktop button is Get Started, in the header button's gold. */
.callpill.startpill{background:#E8B54A;color:#1B2A4A;font-weight:800}
.callpill.startpill:hover,.callpill.startpill:focus-visible{background:#F2C76A;color:#1B2A4A}

/* 2.10.87: keep the logos printed in the hero photos in view (Harsh). On wider screens the photo panel
   is narrower, so more of each photo's height shows (faces and the logos lower down). The caption sits
   at the far right edge and is a little more compact, so it no longer covers the portfolio logos. */
@media(min-width:1400px) and (max-width:1599px){.hero-slides .hslides{left:27%}}
@media(min-width:1600px){.hero-slides .hslides{left:38%}}
@media(min-width:2200px){.hero-slides .hslides{left:46%}}
@media(min-width:1021px){
  .hero-slides .hcorner{right:calc((100% - 100vw)/2 + 24px)}
  .hero-slides .hcap{max-width:250px;font-size:.875rem;padding:10px 14px 10px 16px}
}

/* 2.10.87: blog posts read like a news article (Harsh). White header, section kicker, large headline,
   standfirst, then Jeff's byline with his photo, date and reading time. No author box at the end. */
.art-head{background:#fff;border-bottom:1px solid var(--rule);padding:clamp(18px,2.6vw,28px) 0 clamp(26px,3.4vw,38px)}
.art-hw{max-width:820px}
.art-kick{margin:clamp(18px,2.4vw,28px) 0 12px;font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1.3}
.art-kick a{color:var(--red);text-decoration:none}
.art-kick a:hover{text-decoration:underline;text-underline-offset:3px}
.art-head h1{font-size:clamp(2.125rem,4.3vw,3.375rem);line-height:1.06;letter-spacing:-.01em;margin:0 0 16px;max-width:22ch;color:var(--ink);text-wrap:balance}
.art-dek{font-size:clamp(1.1875rem,1.8vw,1.4375rem);line-height:1.45;color:var(--ink2);max-width:54ch;margin:0 0 24px;text-wrap:pretty}
.art-by{display:flex;gap:14px;align-items:center;padding-top:18px;border-top:1px solid var(--rule);max-width:680px}
.art-by img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none;background:var(--paper2)}
.art-by p{margin:0;line-height:1.4}
.art-name{font-weight:700;font-size:1rem;color:var(--ink)}
.art-name a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.art-name a:hover{text-decoration-color:currentColor}
.art-role,.art-meta{font-size:.875rem;color:var(--ink3)}
.art-meta{display:flex;flex-wrap:wrap}
.art-meta span+span::before{content:"\00b7";margin:0 8px;color:var(--rule)}
.art-body{padding-top:clamp(26px,3.2vw,40px)}
.art-img{margin:0 0 30px}
.art-img figcaption{font-size:.8125rem;color:var(--ink3);margin-top:8px;line-height:1.4}
@media(max-width:700px){.art-by img{width:48px;height:48px}.art-meta .upd{display:none}}
.art{background:#fff}
.art-head h1{font-family:'Archivo','Libre Franklin','Helvetica Neue',sans-serif;font-weight:800;font-stretch:108%;letter-spacing:-.02em}
.art-head .crumbs ol{color:var(--ink3)}
.art-head .crumbs a{color:var(--ink2);text-decoration-color:var(--rule)}
.art-head .crumbs li+li::before{color:var(--rule)}
@media(hover:hover){.art-head .crumbs a:hover{color:var(--blue)}}
.art-head .crumbs ol{margin-bottom:0}
.art-img img{width:100%;max-width:100%;height:auto;margin:0}

/* 2.10.88: brand badges in chrome on the white tiles (Harsh). Each SVG is cropped to its badge, so one
   rule sizes them all: wide badges hit the width cap, tall ones the height cap. BMW and Mercedes are round, so a bit larger. */
.brands10 .bgrid10 img.bl-badge,.brands10 .bgrid10 img.bl-round{width:auto;height:auto;max-height:clamp(36px,4.6vw,60px);max-width:clamp(64px,8.2vw,118px)}
.brands10 .bgrid10 img.bl-round{max-height:clamp(42px,5.4vw,70px)}
@media(max-width:560px){.brands10 .bgrid10 img.bl-badge{max-height:42px;max-width:96px}.brands10 .bgrid10 img.bl-round{max-height:48px}}
/* 2.10.90: Jeff's location line, first in the footer's Get in touch column. Plain text, not a link. */
footer.site .floc{color:#fff;font-weight:700;line-height:1.35;padding-bottom:6px}
footer.site .floc span{display:block;font-weight:400;color:#A9BACE;font-size:.875rem}

/* 2.10.91: the out-the-door key line stands out (Jeff #146). */
.head p.hl-lead{font-size:clamp(1.1875rem,1.9vw,1.4375rem);line-height:1.4;font-weight:700;color:var(--ink);border-left:4px solid #E8B54A;padding:2px 0 2px 16px;max-width:36ch}

/* 2.10.91: home hero headline about 3px larger (Jeff #130). Same line breaks at every width checked (1280 to 1920, 360 to 390). */
@media(min-width:1021px){.hero-slides h1{font-size:clamp(2.75rem,4.8vw,4.5rem)}}
@media(max-width:1020px){.hero-slides h1{font-size:clamp(2.3rem,9.6vw,3.05rem)}}
/* 2.10.91: the trust strip under each hero is a little taller on desktop (Jeff #139). The text is already as large as fits on one line. */
@media(min-width:1021px){.ticker .w{padding-top:15px;padding-bottom:15px}}

/* 2.10.91: white badges on solid black tiles, a crisp one-color look (Jeff #149, #150). */
.brands10 .bgrid10 li{background:#0B0D10;border-color:#0B0D10}

/* 2.10.93: phones (700px and under) show one Get Started (the gold bar fixed at the bottom) and one call button
   (green, in the hero, in place of the gold hero button). Wider screens are unchanged. */
.hacts .hb-tel{display:none}
@media(max-width:700px){
  .hacts .hb-book{display:none}
  .hacts .hb-tel{display:flex;align-items:center;justify-content:center;background:#2E7D52;color:#fff;font-weight:800;border:0}
  .hacts .hb-tel:active{filter:brightness(.92)}
  .phero .hphone{display:none}
}

/* 2.10.93: no pale tan/cream anywhere (Jeff). Highlights and the checker note use light blue (#EAF2FA); the gold accents stay. */

/* 2.10.94: the header logo is a little larger on desktop and sized in whole pixels, so it looks crisper on
   regular laptop screens (Jeff: sharper on his phone than his laptop). Same file and design. */
@media(min-width:1021px){header.site .mark img{width:221px!important;height:48px!important}}
@media(min-width:1101px){header.site .mark img{width:249px!important;height:54px!important}}
@media(min-width:1181px){header.site .mark img{width:276px!important;height:60px!important}}
@media(min-width:1366px){header.site .mark img{width:295px!important;height:64px!important}}
@media(min-width:1440px){header.site .mark img{width:304px!important;height:66px!important}}

/* 2.10.101: page heroes with a photo (Harsh).
   Desktop: the whole photo, uncropped and a little larger, centered beside the text; buttons side by side.
   Phones and tablets: the photo sits behind the text under a navy tint with a soft blur (text contrast 5.6 or better on every page). */
.phero .phbg{display:none}
.hmore{margin:-6px 0 26px;max-width:none;color:var(--ink2);font-size:1.0625rem;line-height:1.6}
.faqside .faqnote{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--hair);font-size:.9375rem;line-height:1.55;color:var(--ink2)}
@media(min-width:1021px){
  .phero.has-aside.ph-photo .g{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;column-gap:48px}
  .phero.has-aside.ph-photo .aside{align-self:center}
  .phero.has-aside.ph-photo .aside .pphoto{margin:0;max-width:none;width:100%}
  .phero.has-aside.ph-photo .aside img,.phero.has-aside.ph-photo .aside .pphoto img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
  .phero.ph-photo .hacts .btn{padding:15px 21px}
}
/* 2.10.105: phones and tablets show the hero photo under the text again, as before 2.10.101 (Harsh). */

/* 2.10.103: home comparison on phones and tablets, one clear card per topic (Harsh): a gold topic bar,
   then "On your own" (gray x, muted) and "With us" (green check). Desktop keeps the three-column table. */
@media(max-width:1020px){
  .vsec .cmp tr{border:0;border-radius:6px;overflow:hidden;margin:0 0 18px;background:rgba(255,255,255,.04)}
  .vsec .cmp tbody th{background:#E8B54A;color:#1B2A4A;font-size:1.125rem;padding:12px 16px;border:0}
  .vsec .cmp td{position:relative;padding:14px 16px 14px 46px}
  .vsec .cmp td::before{content:attr(data-m);font-size:.6875rem}
  .vsec .cmp td::after{position:absolute;left:14px;top:14px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:800 13px/1 'Libre Franklin',sans-serif}
  .vsec .cmp td:not(.us){color:#AEBBCB;font-size:.9375rem;border-bottom:1px solid rgba(255,255,255,.12)}
  .vsec .cmp td:not(.us)::before{color:#8EA0B5}
  .vsec .cmp td:not(.us)::after{content:"\2715";background:rgba(255,255,255,.12);color:#C6D3E0}
  .vsec .cmp tbody td.us{border-top:0;border-left:0;background:rgba(255,255,255,.08)}
  .vsec .cmp td.us::before{color:#E8B54A}
  .vsec .cmp td.us::after{content:"\2713";background:#2E7D52;color:#fff}
}