/* =============================================================================
   lajunkhauling.com — design system
   The brand orange #fe8100 and the brand charcoal, an editorial serif for voice,
   a monospace for anything sourced, measured or dialled.
   ============================================================================= */

@font-face{
  font-family:"Siche Text";
  src:url("/fonts/siche-text-regular.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Siche Text";
  src:url("/fonts/siche-text-italic.otf") format("opentype");
  font-weight:400;font-style:italic;font-display:swap;
}

:root{
  --ink:#2a2523;
  --ink-2:#4a4341;
  --muted:#6b625f;
  --faint:#948b87;
  --rule:#e9e2dc;
  --paper:#ffffff;
  --paper-2:#faf6f1;

  /* the brand: the logo's orange, the logo's charcoal */
  --accent:#fe8100;        /* the mark itself — rules, bars, dots, stars, fills */
  --accent-ink:#a8500a;    /* the orange, taken down until it can carry small type */
  --accent-dark:#b85200;   /* deep enough to hold white text on a filled band */
  --accent-lift:#ff9426;   /* the orange, lifted for dark surfaces */
  --accent-tint:#fff4e8;
  --accent-rule:#f2cba2;

  --serif:"Siche Text","Iowan Old Style",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  font-size:19px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:920px;margin:0 auto;padding:0 28px}

/* keyboard focus — visible everywhere, graded */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.btn:focus-visible,form.qf button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.quote :focus-visible{outline-color:#ffffff}

/* ---------------------------------------------------------------- TOP BAR */
.topbar{padding:14px 0;border-bottom:1px solid var(--rule);background:var(--paper);
        font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--muted)}
.topbar .row{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;justify-content:space-between}
.topbar .meta{display:flex;flex-wrap:wrap;gap:18px}
.topbar a{color:var(--muted);text-underline-offset:3px}
.topbar a:hover{color:var(--accent-ink)}

/* ---------------------------------------------------------------- MASTHEAD */
.masthead{padding:34px 0 26px;border-bottom:1px solid var(--rule)}
.masthead .row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.masthead .logo{display:inline-flex;flex-direction:column;align-items:flex-start;gap:11px}
.masthead .logo img.wm-img{height:70px;width:auto;display:block;
       transition:transform .34s var(--ease),opacity .2s var(--ease)}
.masthead a.logo:hover img.wm-img{transform:translateX(3px)}
.masthead a.logo:active img.wm-img{transform:translateX(1px)}
@media (prefers-reduced-motion:reduce){
  .masthead a.logo:hover img.wm-img{transform:none;opacity:.85}
}
.masthead .phone{
  text-align:right;font-family:var(--mono);font-size:27px;font-weight:600;
  letter-spacing:-.02em;color:var(--ink);transition:color .2s var(--ease);
}
.masthead .phone .label{
  display:block;font-family:var(--mono);font-size:11px;color:var(--faint);
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px;font-style:normal;font-weight:400;
}
.masthead .phone:hover{color:var(--accent-ink);text-decoration:none}
.masthead .phone:hover .label{color:var(--accent-ink)}
.masthead .phone:active{color:var(--accent-dark)}
.masthead a.logo:hover{text-decoration:none}
.masthead a.logo:hover .wm-main{color:var(--accent-ink)}

/* WORDMARK */
.masthead .wordmark{line-height:1}
.masthead .wordmark .wm-sub{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
      text-transform:uppercase;color:var(--muted);margin:0 0 0 2px;font-style:normal}
@media (max-width:760px){
  .masthead .logo img.wm-img{height:52px}
  .masthead .wordmark .wm-sub{font-size:9px;letter-spacing:.14em}
}
@media (max-width:420px){.masthead .logo img.wm-img{height:38px}}

/* ---------------------------------------------------------------- PRIMARY NAV */
.nav{border-bottom:1px solid var(--rule);background:#fff}
.nav ul{display:flex;flex-wrap:wrap;gap:0 26px;list-style:none;margin:0;padding:13px 0;
        font-size:16px;letter-spacing:.01em}
.nav a{position:relative;color:var(--muted);padding:3px 0 5px;
       transition:color .18s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
       background:var(--accent);transform:scaleX(0);transform-origin:left;
       transition:transform .26s var(--ease)}
.nav a:hover{color:var(--accent-ink);text-decoration:none}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.nav a::after{transition:none}}
@media (max-width:760px){
  .nav{position:relative}
  .nav::after{content:"";position:absolute;right:0;top:0;bottom:0;width:44px;pointer-events:none;
              background:linear-gradient(90deg,rgba(255,255,255,0),#fff 72%)}
  .nav ul{gap:0 18px;font-size:15px;overflow-x:auto;flex-wrap:nowrap;
          -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:11px 0}
  .nav ul::-webkit-scrollbar{display:none}
  .nav li{white-space:nowrap}
  .nav a{padding:9px 0 11px}
}

/* ---------------------------------------------------------------- HERO */
.hero{padding:76px 0 58px}
.hero h1{
  font-family:var(--serif);font-weight:400;font-style:normal;
  font-size:clamp(40px,7.2vw,74px);line-height:1.01;letter-spacing:-.03em;
  margin:0 0 24px;color:var(--ink);text-wrap:balance;
}
.hero h1 em{font-style:italic;color:var(--accent-ink)}
.hero p.lead{font-size:clamp(19px,2.2vw,23px);color:var(--ink-2);max-width:600px;
             margin:0 0 34px;line-height:1.45}
.hero .ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------------------------------------------------------------- BUTTONS */
.btn{
  --btn-bg:var(--accent);--btn-fg:var(--ink);--btn-bd:var(--accent);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  padding:19px 30px;border-radius:3px;
  font-family:var(--serif);font-size:20px;line-height:1;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;cursor:pointer;
  transition:background .2s var(--ease),transform .18s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease);
  box-shadow:0 1px 0 rgba(120,60,6,.26);
}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;
           text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 14px rgba(120,60,6,.24)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--rule);box-shadow:none}
.btn-ghost:hover{background:var(--accent-tint);border-color:var(--accent-rule);color:var(--accent-dark);
                 box-shadow:none}
.link{font-size:18px;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;
      text-decoration-color:var(--accent-rule);transition:color .18s var(--ease)}
.link:hover{color:var(--accent-ink);text-decoration-color:var(--accent)}

/* slot-text roll: two stacked copies, one clipped window */
.roll{display:block;overflow:hidden;height:1.45em}
.roll-t{display:block;transition:transform .42s var(--ease)}
.roll-l{display:block;height:1.45em;line-height:1.45em;font-style:normal}
.btn:hover .roll-t,.btn:focus-visible .roll-t{transform:translateY(-1.45em)}

/* reassurance + proof pillars under the hero CTAs */
.hero .reassure{margin:18px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;
                color:var(--muted);line-height:1.7;max-width:640px}
.hero .pillars{list-style:none;margin:28px 0 0;padding:22px 0 0;border-top:1px solid var(--rule);
               display:flex;flex-wrap:wrap;gap:10px 30px;max-width:860px}
.hero .pillars li{position:relative;padding-left:18px;font-size:15.5px;color:var(--ink-2);
                  letter-spacing:-.005em}
.hero .pillars a{color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;
                 text-decoration-thickness:1px;text-decoration-color:var(--accent-rule);
                 transition:color .16s var(--ease),text-decoration-color .16s var(--ease)}
.hero .pillars a:hover{color:var(--accent-ink);text-decoration-color:var(--accent)}
.hero .pillars .n-count{font-family:var(--mono);font-size:1em;font-weight:600;
                        color:var(--accent-ink);letter-spacing:-.02em;margin-right:.3em}
.hero .pillars li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
                          background:var(--accent);border-radius:50%;
                          transform:scale(0);transition:transform .38s var(--ease)}
/* the proof row arrives a beat after the headline, dot by dot, left to right */
.js .hero .pillars li{opacity:0;transform:translateY(6px);
                      transition:opacity .5s var(--ease),transform .5s var(--ease)}
.hero .pillars.is-in li{opacity:1;transform:none}
.hero .pillars.is-in li::before{transform:scale(1)}
.hero .pillars li:nth-child(1),.hero .pillars li:nth-child(1)::before{transition-delay:.05s}
.hero .pillars li:nth-child(2),.hero .pillars li:nth-child(2)::before{transition-delay:.12s}
.hero .pillars li:nth-child(3),.hero .pillars li:nth-child(3)::before{transition-delay:.19s}
.hero .pillars li:nth-child(4),.hero .pillars li:nth-child(4)::before{transition-delay:.26s}
.hero .pillars li:nth-child(5),.hero .pillars li:nth-child(5)::before{transition-delay:.33s}
@media (prefers-reduced-motion:reduce){
  .js .hero .pillars li{opacity:1;transform:none;transition:none}
  .hero .pillars li::before{transform:scale(1);transition:none}
}
@media (max-width:760px){
  .hero .pillars{gap:9px 0;flex-direction:column;margin-top:22px}
}

/* ---------------------------------------------------------------- SECTIONS */
section{padding:66px 0;border-top:1px solid var(--rule)}
section h2{
  font-family:var(--serif);font-weight:400;font-style:normal;
  font-size:clamp(28px,4.2vw,44px);line-height:1.08;margin:0 0 14px;
  letter-spacing:-.022em;color:var(--ink);text-wrap:balance;
}
section h2 em{font-style:italic;color:var(--muted)}
section .sub{color:var(--muted);margin:0 0 36px;font-size:19px;max-width:620px;line-height:1.55}

/* eyebrow — mono, with the accent rule that marks every section */
.eyebrow{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
         text-transform:uppercase;color:var(--accent-ink);margin:0 0 14px;font-style:normal}
.eyebrow::before{content:"";display:inline-block;width:22px;height:2px;background:var(--accent);
                 vertical-align:middle;margin:-2px 11px 0 0}

/* ---------------------------------------------------------------- STEPS */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 50px;max-width:760px}
@media (max-width:640px){.steps{grid-template-columns:1fr}}
.step .n{font-family:var(--mono);font-size:11.5px;color:var(--accent-ink);letter-spacing:.18em;
         text-transform:uppercase;font-style:normal;margin-bottom:10px}
.step h3{font-family:var(--serif);font-weight:400;font-size:23px;margin:0 0 8px;line-height:1.25;
         letter-spacing:-.015em}
.step p{margin:0;color:var(--ink-2);font-size:17px;line-height:1.6}

/* ---------------------------------------------------------------- HAUL LIST */
.haul{columns:2;column-gap:50px;max-width:780px;color:var(--ink);font-size:18px;line-height:1.95}
.haul .item{break-inside:avoid;padding:6px 0;border-bottom:1px solid var(--rule)}
.haul .item em{color:var(--faint);font-style:italic;font-size:15px;margin-left:8px}
@media (max-width:560px){.haul{columns:1}}

/* ---------------------------------------------------------------- PRICING TABLE */
.ptable{width:100%;border-collapse:collapse;max-width:760px;font-size:18px}
.ptable th,.ptable td{padding:18px 0;text-align:left;border-bottom:1px solid var(--rule);vertical-align:baseline}
.ptable th{font-family:var(--mono);font-weight:400;font-style:normal;color:var(--faint);font-size:11.5px;
           letter-spacing:.16em;text-transform:uppercase}
.ptable td.price{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;
                 color:var(--accent-ink);white-space:nowrap;font-size:18px}
.pnote{font-size:16px;color:var(--muted);margin-top:22px;max-width:760px;line-height:1.6;font-style:italic}

/* ---------------------------------------------------------------- WHY */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 50px;max-width:780px}
@media (max-width:640px){.why{grid-template-columns:1fr}}
.why h4{font-family:var(--serif);font-weight:400;font-size:21px;margin:0 0 8px;line-height:1.25;
        letter-spacing:-.015em}
.why h4::before{content:"";display:block;width:26px;height:2px;background:var(--accent);margin:0 0 12px}
.why p{margin:0;color:var(--ink-2);font-size:17px;line-height:1.6}

/* ---------------------------------------------------------------- AREA LIST */
.area-list{column-count:3;column-gap:40px;max-width:780px;color:var(--ink);font-size:17px;
           line-height:1.95;padding-left:0;list-style:none}
.area-list li{padding:0}
.area-list a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;
             transition:border-color .15s var(--ease),color .15s var(--ease)}
.area-list a:hover{border-bottom-color:var(--accent);color:var(--accent-ink);text-decoration:none}
@media (max-width:680px){.area-list{column-count:2}}
@media (max-width:420px){.area-list{column-count:1}}

/* ---------------------------------------------------------------- CHIPS BAND */
.chips{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:9px;max-width:860px}
.chips li{margin:0}
.chips li a,.chips li > span{
  display:inline-block;padding:8px 15px;border:1px solid var(--rule);border-radius:999px;
  background:var(--paper);color:var(--ink);font-size:16px;line-height:1.25;letter-spacing:-.005em;
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.chips li a:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-tint);
                  text-decoration:none;transform:translateY(-1px)}
.chips li a:active{transform:translateY(0)}
.chips-note{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--faint);
            margin:18px 0 0}

/* ---------------------------------------------------------------- FAQ */
.faq{max-width:780px}
.faq-item{padding:22px 0;border-bottom:1px solid var(--rule);transition:border-color .2s var(--ease)}
.faq-item:first-of-type{border-top:1px solid var(--rule)}
.faq-item summary{cursor:pointer;list-style:none;color:var(--ink);font-size:20px;font-family:var(--serif);
                  line-height:1.35;display:flex;justify-content:space-between;align-items:baseline;gap:20px;
                  letter-spacing:-.015em;transition:color .18s var(--ease)}
.faq-item summary:hover{color:var(--accent-ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--mono);color:var(--accent-ink);font-size:20px;
                         font-style:normal;transition:transform .2s var(--ease)}
.faq-item[open] summary::after{content:"\2212"}
.faq-item[open]{border-bottom-color:var(--accent-rule)}
.faq-item p{margin:14px 0 0;color:var(--ink-2);font-size:17px;line-height:1.65;max-width:660px}

/* ---------------------------------------------------------------- QUOTE BAND */
.quote{background:var(--ink);color:#ffffff;border-top:none}
.quote h2{color:#ffffff}
.quote h2 em{color:var(--accent-lift)}
.quote .sub{color:#cbc2bd}
.quote .eyebrow{color:var(--accent-lift)}
.quote .eyebrow::before{background:var(--accent-lift)}
form.qf{display:grid;gap:14px;max-width:560px}
form.qf input,form.qf select,form.qf textarea{
  padding:16px;border-radius:3px;border:1px solid #4a4341;background:#ffffff;color:var(--ink);
  font-size:18px;font-family:inherit;width:100%;transition:box-shadow .18s var(--ease),border-color .18s var(--ease);
}
form.qf input:focus,form.qf select:focus,form.qf textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(254,129,0,.42);
}
form.qf input::placeholder,form.qf textarea::placeholder{color:var(--faint);font-style:italic}
form.qf button{
  background:var(--accent-lift);color:var(--ink);border:1px solid var(--accent-lift);
  padding:19px 26px;border-radius:3px;
  font-family:var(--serif);font-size:20px;line-height:1;cursor:pointer;overflow:hidden;
  transition:background .2s var(--ease),transform .18s var(--ease);
}
form.qf button:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
form.qf button:active{transform:translateY(1px)}
/* slot-text submit states: label -> Sending -> Thanks */
.slotbtn .roll{height:1.45em}
.slotbtn .roll-t{transition:transform .45s var(--ease)}
.slotbtn[data-state="1"] .roll-t{transform:translateY(-1.45em)}
.slotbtn[data-state="2"] .roll-t{transform:translateY(-2.9em)}
.quote .or{color:#cbc2bd;font-size:17px;margin:14px 0 0;font-style:italic}
.quote .or a{color:#ffffff;font-family:var(--mono);font-size:15px;letter-spacing:-.02em;
             text-decoration:underline;text-underline-offset:4px;font-style:normal}
.quote .or a:hover{color:var(--accent-rule)}

/* ---------------------------------------------------------------- FOOTER */
footer{padding:52px 0 40px;background:var(--paper);border-top:3px solid var(--accent);
       color:var(--muted);font-size:16px}
.foot{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start}
.foot .b{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
         color:var(--accent-ink);margin-bottom:12px;font-style:normal}
.foot .b-logo{margin-bottom:16px}
.foot .b-logo img{height:42px;width:auto;display:block}
.foot .col{min-width:200px}
.foot .col div{line-height:1.75}
.foot a{color:var(--ink);text-underline-offset:3px}
.foot a:hover{color:var(--accent-ink)}
.copy{width:100%;border-top:1px solid var(--rule);padding-top:18px;margin-top:22px;
      font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--faint);font-style:normal}

/* ---------------------------------------------------------------- JOB PHOTOS */
.band-jobs{background:var(--paper-2)}
.band-soft{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0}
.jobs figure{margin:0}
.jobs picture,.hero-m picture{display:block}
.jobs img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
          background:var(--rule);border-radius:3px}
.jobs figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);
                 margin-top:10px;line-height:1.5}
.jobs-caption{font-size:16px;color:var(--muted);font-style:italic;margin:20px 0 0;max-width:700px;
              line-height:1.6}
@media (max-width:680px){.jobs{grid-template-columns:1fr 1fr;gap:12px}}
@media (max-width:420px){.jobs{grid-template-columns:1fr}}

/* ------------------------------------------------------------ MAPS/DIAGRAMS */
.band-graphic .figure-graphic{margin:0}
.figure-graphic picture{display:block}
.figure-graphic .map-link{display:block;text-decoration:none;color:inherit;border-radius:2px}
.figure-graphic .map-link:focus-visible{outline:2px solid var(--accent,currentColor);outline-offset:3px}
.figure-graphic .map-link img{transition:filter .25s ease}
@media (hover:hover){.figure-graphic .map-link:hover img{filter:saturate(1.08) contrast(1.03)}}
.figure-graphic img{width:100%;height:auto;display:block;border:1px solid var(--rule);
                    border-radius:4px;background:var(--paper-2)}
.figure-graphic figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
                           color:var(--muted);margin-top:12px;line-height:1.5}

/* ---------------------------------------------------------------- A11Y / CRUMBS */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0}
.crumbs{border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
        color:var(--faint);padding:13px 0;font-style:normal;text-transform:uppercase}
.crumbs a{color:var(--faint)}
.crumbs a:hover{color:var(--accent-ink)}
.crumbs .sep{margin:0 9px;color:var(--accent-rule)}
.crumbs span[aria-current]{color:var(--ink)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--ink);padding:12px 18px;z-index:200}
.skip:focus{left:0}

/* ---------------------------------------------------------------- PROSE */
.prose{max-width:680px;font-size:18px;line-height:1.7;color:var(--ink-2)}
.prose p{margin:0 0 20px}
.prose h3{font-family:var(--serif);font-weight:400;font-size:25px;color:var(--ink);
          margin:36px 0 10px;line-height:1.2;letter-spacing:-.02em}
.prose strong{font-weight:400;color:var(--ink);font-style:italic}
.prose ul{margin:0 0 22px;padding-left:20px}
.prose li{margin:0 0 9px}
.prose li::marker{color:var(--accent-ink)}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
         text-decoration-thickness:1px;text-decoration-color:var(--accent-rule);
         transition:color .16s var(--ease),text-decoration-color .16s var(--ease)}
.prose a:hover{color:var(--accent-ink);text-decoration-color:var(--accent)}

/* ---------------------------------------------------------------- ANSWER BLOCK */
.answer{
  position:relative;border-left:3px solid var(--accent);background:var(--accent-tint);
  padding:26px 30px 28px;margin:0 0 36px;max-width:720px;border-radius:0 3px 3px 0;
  font-size:clamp(19px,2vw,22px);line-height:1.5;color:var(--ink);letter-spacing:-.011em;
}
.answer .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.22em;
           text-transform:uppercase;color:var(--accent-ink);font-style:normal;margin-bottom:14px}
.answer .snap{margin:0 0 18px;padding:0 0 18px;border-bottom:1px solid var(--rule);
              font-weight:600;letter-spacing:-.018em;color:var(--ink);text-wrap:pretty}
.answer .snap:last-child{margin:0;padding:0;border-bottom:none}
.answer p{margin:0 0 14px}
.answer p:last-child{margin:0}
.answer a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){.answer{padding:22px 20px 24px}}

/* ---------------------------------------------------------------- FACTS TABLE */
.facts{width:100%;border-collapse:collapse;max-width:820px;font-size:17px;margin:0 0 20px;
       border-top:2px solid var(--accent)}
.facts th,.facts td{padding:16px 18px 16px 0;text-align:left;border-bottom:1px solid var(--rule);
                    vertical-align:top;line-height:1.5}
.facts th{font-family:var(--mono);font-weight:600;font-style:normal;color:var(--muted);font-size:11.5px;
          letter-spacing:.14em;text-transform:uppercase;width:31%;padding-top:19px}
.facts td{font-family:var(--mono);font-size:15px;letter-spacing:-.01em;color:var(--ink);
          font-variant-numeric:tabular-nums;line-height:1.65;padding-right:0}
.facts td strong{font-weight:600;color:var(--ink);
                 box-shadow:inset 0 -.42em 0 var(--accent-tint)}
.facts tr:hover th{color:var(--accent-ink)}
.facts tr:hover td{background:var(--accent-tint)}
.facts td.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--accent-ink)}
.facts a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
/* Tappable addresses and phone numbers inside a guide. Dotted rather than
   solid so a table of seven addresses does not read as seven citations. */
/* Status word at the head of a facts cell. Emphasis only: the word is already
   the first word the author wrote, and any qualifier after it stays visible. */
.st{font-weight:600;letter-spacing:.01em}
.st::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
            margin-right:7px;vertical-align:.08em}
.st-yes{color:var(--accent-dark)}
.st-yes::before{background:var(--accent)}
.st-no{color:#8a1c15}
.st-no::before{background:#b3261e}
@media (prefers-contrast:more){.st{text-decoration:underline;text-underline-offset:3px}}

.taplink{color:var(--ink);text-decoration:underline;text-decoration-style:dotted;
         text-decoration-thickness:1px;text-underline-offset:3px;
         text-decoration-color:var(--accent);white-space:normal}
.taplink:hover,.taplink:focus-visible{color:var(--accent-ink);
         text-decoration-style:solid}
a[href^="tel:"].taplink{white-space:nowrap}
@media (hover:none){.taplink{color:var(--accent-dark)}}

.n-count{display:inline-block;font-family:var(--mono);font-variant-numeric:tabular-nums;
         color:var(--accent-ink);font-size:1.15em;font-weight:600;letter-spacing:-.02em}
.src{font-family:var(--mono);font-size:12px;letter-spacing:.01em;color:var(--faint);font-style:normal;
     line-height:1.65;max-width:720px;margin:0 0 10px;padding-left:14px;
     border-left:2px solid var(--rule)}
.src a{color:var(--faint);text-decoration:underline;text-underline-offset:3px}
.src a:hover{color:var(--accent-ink)}
@media (max-width:560px){
  /* Stacked rows: the label has to carry its own weight once it is no longer
     in a column of its own, so it gets an accent rule and a tighter gap. */
  .facts th,.facts td{display:block;padding:0;border:none;width:auto}
  .facts th{color:var(--accent-dark);font-size:11px;letter-spacing:.16em;
            padding:0 0 5px 9px;border-left:2px solid var(--accent);
            margin-left:-11px}
  .facts td{padding:0 0 0 0;font-size:14px;line-height:1.7}
  .facts tr{display:block;padding:15px 0 16px;border-bottom:1px solid var(--rule)}
  .facts tr:hover td{background:none}
  .facts td.num{text-align:left}
}

/* ---------------------------------------------------------------- GUIDE: TOC */
.toc{max-width:720px;margin:6px 0 4px;padding:22px 26px 24px;background:var(--paper-2);
     border:1px solid var(--rule);border-left:3px solid var(--accent-rule);border-radius:0 3px 3px 0}
.toc .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
        text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.toc li{counter-increment:toc;margin:0 0 10px;padding-left:30px;position:relative;
        font-size:17px;line-height:1.45}
.toc li:last-child{margin-bottom:0}
.toc li::before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:3px;
                font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--accent-ink)}
.toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);
       padding-bottom:1px;transition:color .16s var(--ease),border-color .16s var(--ease)}
.toc a:hover{color:var(--accent-ink);border-color:var(--accent)}
@media (max-width:560px){.toc{padding:20px 20px 22px}}

/* ---------------------------------------------------------------- GUIDE: COMPARISON GRID */
.grid-wrap{margin:0 0 20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.grid{width:100%;border-collapse:collapse;font-size:15px;border-top:2px solid var(--accent);
      min-width:720px}
.grid caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:11px;
              letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
              padding:0 0 12px}
.grid thead th{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.16em;
               text-transform:uppercase;color:var(--muted);text-align:left;
               padding:14px 16px 12px 0;border-bottom:1px solid var(--accent-rule);
               vertical-align:bottom;white-space:nowrap}
.grid tbody th{font-family:var(--serif);font-weight:400;font-style:normal;font-size:18px;
               color:var(--ink);text-align:left;padding:15px 16px 15px 0;
               border-bottom:1px solid var(--rule);vertical-align:top;white-space:nowrap}
.grid td{font-family:var(--mono);font-size:13.5px;line-height:1.6;color:var(--ink-2);
         padding:15px 16px 15px 0;border-bottom:1px solid var(--rule);vertical-align:top;
         letter-spacing:-.01em}
.grid td:last-child,.grid thead th:last-child{padding-right:0}
.grid tbody tr:hover th{color:var(--accent-ink)}
.grid tbody tr:hover td{background:var(--accent-tint)}
.grid .y{color:var(--accent-ink);font-variant-numeric:tabular-nums}
.grid a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  .grid-wrap{overflow-x:visible}
  .grid{min-width:0;border-top:none}
  .grid thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .grid tbody tr{display:block;padding:18px 0 4px;border-top:2px solid var(--accent)}
  .grid tbody tr+tr{margin-top:18px}
  .grid tbody th,.grid td{display:block;width:auto;border:none;padding:0 0 12px;
                          white-space:normal}
  .grid tbody th{font-size:21px;padding-bottom:12px}
  .grid td::before{content:attr(data-l);display:block;font-family:var(--mono);
                   font-size:10px;letter-spacing:.16em;text-transform:uppercase;
                   color:var(--faint);margin-bottom:4px}
  .grid tbody tr:hover td{background:none}
}

/* ---------------------------------------------------------------- GUIDE: CITATIONS */
.cites{max-width:820px;margin:0;padding:0;list-style:none;counter-reset:cite;
       border-top:2px solid var(--accent)}
.cites li{counter-increment:cite;position:relative;padding:18px 0 18px 46px;
          border-bottom:1px solid var(--rule)}
.cites li::before{content:counter(cite);position:absolute;left:0;top:20px;width:28px;
                  text-align:right;font-family:var(--mono);font-size:12px;color:var(--accent-ink);
                  font-variant-numeric:tabular-nums}
.cites a{display:block;font-size:18px;line-height:1.45;color:var(--ink);
         text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
         text-decoration-color:var(--accent-rule);transition:color .16s var(--ease)}
.cites a:hover{color:var(--accent-ink);text-decoration-color:var(--accent)}
.cites span{display:block;margin-top:7px;font-family:var(--mono);font-size:13px;
            line-height:1.6;color:var(--muted);letter-spacing:-.005em}
@media (max-width:560px){.cites li{padding-left:34px}.cites li::before{width:22px}
  .cites a{font-size:17px}}

/* ---------------------------------------------------------------- CARDS */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:0 50px;max-width:840px}
.cards a.card{display:block;padding:26px 0;border-bottom:1px solid var(--rule);color:var(--ink);
              position:relative;transition:padding-left .22s var(--ease)}
.cards a.card::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:2px;
                      background:var(--accent);opacity:0;transition:opacity .22s var(--ease)}
.cards a.card:hover{text-decoration:none;padding-left:16px}
.cards a.card:hover::before{opacity:1}
.cards a.card:hover h3{color:var(--accent-ink)}
.cards a.card:focus-visible{padding-left:16px}
.cards h3{font-family:var(--serif);font-weight:400;font-size:23px;margin:0 0 7px;line-height:1.22;
          letter-spacing:-.02em;transition:color .18s var(--ease)}
.cards p{margin:0;color:var(--muted);font-size:16.5px;line-height:1.55}
.cards .meta{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
             text-transform:uppercase;color:var(--accent-ink);font-style:normal;margin-bottom:9px}
@media (max-width:640px){.cards{grid-template-columns:1fr;gap:0}}

/* ---------------------------------------------------------------- NOTE */
.note{background:var(--paper-2);border:1px solid var(--rule);border-left:3px solid var(--accent);
      padding:24px 26px;max-width:760px;font-size:17px;line-height:1.65;color:var(--ink-2);
      border-radius:0 3px 3px 0}
.note strong{color:var(--ink);font-style:italic;font-weight:400}

/* ---------------------------------------------------------------- SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px 50px;max-width:820px}
@media (max-width:700px){.split{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- TAKEAWAY */
.takeaway{background:var(--ink);color:#ece7e2;padding:30px 32px 32px;max-width:800px;margin:0 0 34px;
          border-radius:3px;border-top:3px solid var(--accent)}
.takeaway .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.22em;
             text-transform:uppercase;color:var(--accent-lift);font-style:normal;margin-bottom:18px}
.takeaway ol{margin:0;padding-left:22px}
.takeaway li{margin:0 0 12px;font-size:17px;line-height:1.6;padding-left:6px}
.takeaway li::marker{color:var(--accent-rule);font-family:var(--mono);font-size:13px}
.takeaway li:last-child{margin-bottom:0}
.takeaway a{color:#fff;text-decoration:underline;text-underline-offset:3px;
            text-decoration-color:var(--accent-rule)}
.takeaway a:hover{text-decoration-color:#fff}
@media (max-width:560px){.takeaway{padding:24px 22px 26px}.takeaway li{font-size:16px}}

/* ---------------------------------------------------------------- FLOW */
.flow{list-style:none;margin:0 0 10px;padding:0;max-width:800px}
.flow li{position:relative;padding:0 0 26px 56px;margin:0 0 26px;border-bottom:1px solid var(--rule)}
.flow li:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.flow .n{position:absolute;left:0;top:0;width:34px;height:34px;line-height:32px;text-align:center;
         border:1px solid var(--accent);border-radius:50%;font-family:var(--mono);font-size:13px;
         font-style:normal;color:var(--accent-ink);background:var(--accent-tint)}
.flow h3{font-family:var(--serif);font-weight:400;font-size:23px;color:var(--ink);margin:2px 0 8px;
         line-height:1.22;letter-spacing:-.02em}
.flow p{margin:0;font-size:17px;line-height:1.65;color:var(--ink-2)}
.flow a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
        text-decoration-color:var(--accent-rule)}
.flow a:hover{color:var(--accent-ink);text-decoration-color:var(--accent)}
@media (max-width:560px){.flow li{padding-left:46px}.flow .n{width:30px;height:30px;line-height:28px}}

/* ---------------------------------------------------------------- LANDING PAGES */
.pricepill{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
           text-transform:uppercase;color:var(--accent-ink);border:1px solid var(--accent-rule);
           background:var(--accent-tint);padding:7px 14px;border-radius:999px;margin:0 0 20px}
.trustrow{background:var(--ink);color:#d3cac5;font-family:var(--mono);font-size:11.5px;
          letter-spacing:.14em;text-transform:uppercase;padding:15px 0}
.trustrow .row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:center}
body.lp .qf{margin-top:26px}

/* ---------------------------------------------------------------- MOBILE STICKY */
.mobile-sticky{display:none}
@media (min-width:761px){.mobile-sticky{display:none}}
@media (max-width:760px){
  a.mobile-sticky{display:block;position:fixed;bottom:0;left:0;right:0;z-index:99;
                  background:var(--accent);color:var(--ink);text-align:center;padding:18px 16px;min-height:58px;
                  font-size:18px;text-decoration:none;box-shadow:0 -2px 14px rgba(42,37,35,.16)}
  div.mobile-sticky{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:99;
                    border-top:1px solid var(--accent-dark);box-shadow:0 -2px 14px rgba(42,37,35,.16)}
  .mobile-sticky a{flex:1;background:var(--accent);color:var(--ink);text-align:center;padding:18px 8px;min-height:58px;display:flex;align-items:center;justify-content:center;
                   font-size:17px;text-decoration:none;letter-spacing:-.01em}
  .mobile-sticky a:active{background:var(--accent-dark)}
  .mobile-sticky a.alt{background:#fff;color:var(--ink);border-left:1px solid var(--rule)}
  body{padding-bottom:60px}
}

/* ---------------------------------------------------------------- NARROW */
@media (max-width:760px){
  body{padding-bottom:62px;font-size:18px}
  .wrap{padding:0 20px}
  .hero{padding:44px 0 38px}
  .hero .ctas{gap:12px}
  .hero .ctas .btn{width:100%;justify-content:center;text-align:center;font-size:19px;padding:18px 20px}
  section{padding:46px 0}
  section .sub{font-size:18px;margin-bottom:28px}
  .masthead{padding:24px 0 20px}
  .masthead .row{align-items:flex-start}
  .masthead .phone{font-size:23px;text-align:left;width:100%}
  .facts td{font-size:14px}
  .answer{font-size:19px}
  .prose{font-size:17.5px}
  form.qf button{width:100%}
}

/* ---------------------------------------------------------------- BLOG */
.post-header{padding:62px 0 26px}
.post-header .meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
                   text-transform:uppercase;color:var(--accent-ink);margin-bottom:20px}
.post-header h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5.4vw,58px);
                line-height:1.04;letter-spacing:-.03em;margin:0;text-wrap:balance}
.post-header h1 em{font-style:italic;color:var(--accent-ink)}
.post-body{font-size:18.5px;line-height:1.72;color:var(--ink-2)}
.post-body p{margin:0 0 22px}
.post-body h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.6vw,36px);
              color:var(--ink);letter-spacing:-.025em;line-height:1.12;margin:46px 0 14px}
.post-body h2 em{font-style:italic;color:var(--muted)}
.post-body h3{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--ink);
              letter-spacing:-.02em;margin:34px 0 10px;line-height:1.22}
.post-body ul,.post-body ol{margin:0 0 24px;padding-left:22px}
.post-body li{margin:0 0 10px}
.post-body li::marker{color:var(--accent-ink)}
.post-body strong{font-weight:400;font-style:italic;color:var(--ink)}
.post-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
             text-decoration-color:var(--accent-rule);transition:color .16s var(--ease)}
.post-body a:hover{color:var(--accent-ink);text-decoration-color:var(--accent)}
.post-cta{background:var(--ink);border-top:3px solid var(--accent);border-radius:3px;
          padding:30px 32px 32px;margin:46px 0 0;color:#ece7e2}
.post-cta .btn{margin-top:8px;box-shadow:none}
.post-list{margin:0}
.post-card{padding:30px 0;border-bottom:1px solid var(--rule)}
.post-card:first-child{border-top:1px solid var(--rule)}
.post-card .meta{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
                 color:var(--accent-ink);margin-bottom:11px}
.post-card h3{font-family:var(--serif);font-weight:400;font-size:26px;margin:0 0 9px;line-height:1.2;
              letter-spacing:-.022em}
.post-card h3 a{transition:color .18s var(--ease)}
.post-card h3 a:hover{color:var(--accent-ink);text-decoration:none}
.post-card p{margin:0;color:var(--muted);font-size:17px;line-height:1.6}
.post-card .pquestion{margin-top:10px;font-family:var(--mono);font-size:12.5px;
                      line-height:1.55;color:var(--faint);letter-spacing:-.005em}
@media (max-width:560px){.post-cta{padding:24px 22px 26px}.post-body{font-size:17.5px}}

/* ================================================================ MOTION
   Scroll-driven and PURE CSS. There is deliberately no JS-dependent hidden
   state anywhere: if a browser, crawler or headless renderer does not support
   animation-timeline, the @supports block never applies and every element is
   simply visible. Content can never be trapped behind a script that failed
   to run. Reduced-motion users get the static page.
   ================================================================ */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    :where(section > .wrap > .eyebrow, section > .wrap > h2, section > .wrap > .sub,
           .answer, .facts, .cards, .jobs, .takeaway, .note, .flow, .chips,
           .post-card, .post-cta, .rv-empty, .pf-body,
           .rj-hero, .rj-trust-row, .rj-mosaic){
      animation:rv both linear;
      animation-timeline:view();
      animation-range:entry 0% cover 18%;
    }
  }
}
@keyframes rv{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rj-hero{animation:rv-panel both linear;animation-timeline:view();
             animation-range:entry 0% cover 20%}}}
@keyframes rv-panel{from{opacity:0;transform:translateY(16px) scale(.985);
                          border-color:transparent}
                    to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;scroll-behavior:auto!important;
  }
}

/* --- service x city pill links (crosslink blocks) ------------------------ */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pills .pill{display:inline-block;padding:9px 16px;border:1px solid var(--rule);
  border-radius:999px;background:var(--paper);color:var(--ink);text-decoration:none;
  font-size:15px;line-height:1.2;transition:border-color .18s var(--ease),
  background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)}
.pills .pill:hover{border-color:var(--accent-rule);background:var(--accent-tint);
  color:var(--accent-dark);transform:translateY(-1px)}
.pills .pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:640px){.pills .pill{font-size:14.5px;padding:8px 14px}}

/* --- mid-page conversion band ------------------------------------------- */
.band-cta{background:var(--accent-dark);color:#fff}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.cta-band-t{max-width:620px}
.cta-band-line{font-family:var(--serif);font-size:clamp(24px,3.1vw,34px);line-height:1.18;
  letter-spacing:-.015em;margin:0;color:#fff}
.cta-band-sub{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;line-height:1.7;
  margin:14px 0 0;color:rgba(255,255,255,.72)}
.cta-band-proof{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 0;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:rgba(255,255,255,.9)}
.cta-band-proof a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);
  padding-bottom:2px;transition:border-color .18s var(--ease)}
.cta-band-proof a:hover,.cta-band-proof a:focus-visible{border-bottom-color:#fff}
.cta-band-dot{color:rgba(255,255,255,.45)}
.cta-band-a{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cta-band-tel{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);line-height:1;color:#fff;
  text-decoration:none;letter-spacing:-.02em;border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:4px;transition:border-color .18s var(--ease),color .18s var(--ease)}
.cta-band-tel:hover,.cta-band-tel:focus-visible{color:#fff;border-bottom-color:#fff}
.cta-band-tel:focus-visible{outline:2px solid #fff;outline-offset:6px}
.btn.btn-onaccent{--btn-bg:#fff;--btn-fg:var(--accent-dark);--btn-bd:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.18)}
.btn.btn-onaccent:hover{background:var(--accent-tint);border-color:var(--accent-tint);
  color:var(--accent-dark);box-shadow:0 4px 14px rgba(0,0,0,.22)}
.btn.btn-onaccent:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media (max-width:760px){
  .cta-band{gap:24px}
  .cta-band-a{width:100%;flex-direction:column;align-items:stretch;gap:16px}
  .cta-band-tel{text-align:center;border-bottom:none;font-size:34px}
  .btn.btn-onaccent{justify-content:center;text-align:center;width:100%}
}

/* --- signal accent: used ONLY for hard deadlines and refusals ------------ */
:root{--signal:#a8251c;--signal-tint:#fcf0ee}

/* --- big sourced numbers ------------------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin:36px 0 0}
.stat{background:var(--paper);padding:26px 22px 24px;display:flex;flex-direction:column;gap:10px}
.stat-n{font-family:var(--serif);font-size:clamp(30px,3.6vw,42px);line-height:1;
  letter-spacing:-.025em;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.stat-l{font-family:var(--mono);font-size:12px;letter-spacing:.02em;line-height:1.65;
  color:var(--muted)}
.stat-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--faint);
  margin:14px 0 0;line-height:1.7}
@media (max-width:560px){.stat{padding:22px 18px}}

/* --- the day clock ------------------------------------------------------ */
.clock{position:relative;margin:40px 0 0;padding:0 0 8px}
.clock-l{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.clock-i{background:var(--paper);padding:24px 20px 22px;display:flex;flex-direction:column;gap:9px;
  border-top:3px solid var(--accent-rule)}
.clock-i.is-deadline{border-top-color:var(--signal);background:var(--signal-tint)}
.clock-t{font-family:var(--serif);font-size:clamp(24px,2.8vw,32px);line-height:1;
  letter-spacing:-.02em;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.clock-i.is-deadline .clock-t{color:var(--signal)}
.clock-x{font-family:var(--mono);font-size:12px;letter-spacing:.02em;line-height:1.65;
  color:var(--ink-2)}
.clock-bar{display:none}
@media (max-width:560px){.clock-i{padding:20px 18px}}

/* --- hero with a real photograph ---------------------------------------- */
.hero-grid{display:block}
.hero.has-media .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:52px;align-items:center}
.hero.has-media .hero-t{min-width:0}
.hero-m{margin:0;position:relative}
.hero-m img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  border-radius:3px;background:var(--rule)}
.hero-m figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);
  margin-top:11px;line-height:1.55;max-width:44ch}
@media (max-width:960px){
  .hero.has-media .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-m img{aspect-ratio:16/9}
}

/* --- the day clock, as a timeline --------------------------------------- */
.clock{position:relative;margin:40px 0 0}
.clock-l{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;position:relative;
  background:none;border:none}
.clock-i{background:none;border:none;padding:34px 22px 0 0;position:relative;
  display:flex;flex-direction:column;gap:8px}
/* the rail */
.clock-i::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;
  background:var(--accent-rule)}
.clock-i.is-deadline::before{background:linear-gradient(90deg,var(--accent-rule),var(--signal))}
.clock-i:last-child::before{right:22px}
/* the stop */
.clock-i::after{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;
  border-radius:50%;background:var(--paper);border:2px solid var(--accent);z-index:1}
.clock-i.is-deadline::after{border-color:var(--signal);background:var(--signal);
  box-shadow:0 0 0 5px var(--signal-tint)}
.clock-t{font-family:var(--serif);font-size:clamp(26px,3vw,34px);line-height:1;
  letter-spacing:-.02em;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.clock-i.is-deadline .clock-t{color:var(--signal)}
.clock-x{font-family:var(--mono);font-size:12px;letter-spacing:.02em;line-height:1.65;
  color:var(--ink-2);max-width:30ch}
.clock-bar{display:none}
/* stops arrive in order, left to right, once the block scrolls in */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .clock-i{opacity:0;transform:translateY(10px);
      animation:clock-in .01s linear forwards;
      animation-timeline:view();animation-range:entry 12% cover 26%}
    .clock-i:nth-child(2){animation-range:entry 12% cover 32%}
    .clock-i:nth-child(3){animation-range:entry 12% cover 38%}
    .clock-i:nth-child(4){animation-range:entry 12% cover 44%}
  }
}
@keyframes clock-in{to{opacity:1;transform:none}}
@media (max-width:760px){
  .clock-l{grid-template-columns:1fr}
  .clock-i{padding:0 0 26px 30px}
  .clock-i::before{left:6px;right:auto;top:6px;bottom:-6px;width:2px;height:auto}
  .clock-i:last-child::before{display:none}
  .clock-i::after{top:2px;left:0}
  .clock-x{max-width:none}
}

/* Google Business Profile link in the footer */
.foot .grev{margin-top:14px}
.foot .grev a{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.foot .grev-s{letter-spacing:1px;color:var(--accent);font-size:.95em;line-height:1}
.foot .grev-w{margin-top:6px}
.foot .grev-w a{font-weight:400;opacity:.75}
.foot .grev-w a:hover{opacity:1}

/* ---------------------------------------------------------------- PROOF BAND
   Sitewide social proof, above the quote form. Editorial, not a widget: no
   carousel, no slider, no star-rating chrome fighting the page. One figure, one
   claim, links out to somewhere we cannot edit. */
.band-proof{background:var(--paper-2);border-top:1px solid var(--rule);
            border-bottom:1px solid var(--rule);padding:52px 0 50px}
.pf{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:44px;
    align-items:start;margin-top:22px}
.pf-score{display:flex;flex-direction:column;gap:8px;padding-right:36px;
          border-right:1px solid var(--rule)}
.pf-n{font-family:var(--serif);font-size:clamp(64px,9vw,92px);line-height:.85;
      letter-spacing:-.03em;color:var(--accent-ink);text-decoration:none;
      display:block;font-variant-numeric:tabular-nums lining-nums;
      transition:color .2s var(--ease)}
.pf-n:hover{color:var(--accent-dark);text-decoration:none}
.pf-stars{color:var(--accent);font-size:19px;letter-spacing:.24em;line-height:1}
.pf-l{font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.6;
      color:var(--muted);max-width:15em}
.pf-line{font-family:var(--serif);font-size:clamp(21px,2.5vw,27px);line-height:1.42;
         margin:0;color:var(--ink);max-width:26em;text-wrap:pretty}
.pf-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin:22px 0 0;
          font-family:var(--mono);font-size:12.5px;letter-spacing:.03em}
.pf-links a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:4px;
            text-decoration-thickness:1px}
.pf-links a:hover{color:var(--accent-dark)}
.pf-more{margin-left:auto}
.pf-quotes{display:grid;gap:26px}
.pf-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;
         color:var(--faint);margin:20px 0 0}
@media (max-width:760px){
  .pf{grid-template-columns:1fr;gap:26px}
  .pf-score{border-right:none;border-bottom:1px solid var(--rule);
            padding:0 0 22px;flex-direction:row;align-items:baseline;gap:16px;
            flex-wrap:wrap}
  .pf-n{font-size:58px}
  .pf-l{max-width:none}
  .pf-more{margin-left:0}
}

/* ---------------------------------------------------------------- REVIEWS
   A review is set like a piece of editorial writing: the customer's words are
   the hero, attribution underneath like an author line. */
.rv{margin:0;position:relative;padding-left:30px}
.rv::before{content:"\201C";position:absolute;left:-2px;top:-.12em;
            font-family:var(--serif);font-size:56px;line-height:1;
            color:var(--accent-rule)}
.rv-q{font-family:var(--serif);font-size:clamp(19px,2.1vw,23px);line-height:1.5;
      margin:0;color:var(--ink);max-width:34em;text-wrap:pretty}
.rv-by{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:12px}
.rv-by cite{font-style:normal;font-family:var(--serif);font-size:17px;color:var(--ink)}
.rv-m{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--faint)}
.rv-full .rv-q{font-size:clamp(20px,2.3vw,25px)}
.rv-l{list-style:none;margin:0;padding:0;display:grid;gap:44px}
.rv-i{padding-bottom:40px;border-bottom:1px solid var(--rule)}
.rv-i:last-child{border-bottom:none;padding-bottom:0}
.rv-count{font-family:var(--mono);font-size:12px;letter-spacing:.04em;
          color:var(--muted);margin:0 0 32px}
.rv-empty{position:relative;padding:6px 0 6px 46px;max-width:32em}
.rv-empty::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
                  background:linear-gradient(var(--accent),var(--accent-rule))}
.rv-empty-l{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);line-height:1.22;
            letter-spacing:-.02em;margin:0 0 18px;color:var(--ink);text-wrap:balance}
.rv-empty-l::first-letter{initial-letter:normal}
.rv-empty p{color:var(--ink-2);margin:0 0 16px}
.rv-empty-cta{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 22px !important}
.rv-empty-n{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;
            line-height:1.75;color:var(--muted);margin:0 !important}
.rv-form{max-width:560px}
.rv-form input,.rv-form select,.rv-form textarea{border:1px solid var(--rule);
        background:var(--paper)}
.rv-form .or{color:var(--muted);font-size:16px;font-style:italic;margin:14px 0 0}
.rv-form .or a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;
        font-style:normal}

/* ------------------------------------------------------- GOOGLE REVIEWS
   The section on /reviews/. Everything above .gr-list is server-rendered and is
   the whole section without JavaScript; .gr-list is empty until /api/reviews/
   answers, and an empty <ol> takes no space. Cards are deliberately not a grid
   of three identical boxes: the longest review leads at full measure, the rest
   run two-up, so the block reads as people talking rather than as a widget. */
.gr-top{display:grid;grid-template-columns:minmax(170px,225px) 1fr;gap:44px;
        align-items:start;margin:26px 0 0}
.gr-score{display:flex;flex-direction:column;gap:8px;padding-right:36px;
          border-right:1px solid var(--rule)}
.gr-line{font-family:var(--serif);font-size:clamp(19px,2.2vw,24px);line-height:1.46;
         color:var(--ink-2);margin:0;max-width:34em}
.gr-cta{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.gr-att{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;
        line-height:1.85;color:var(--muted);margin:20px 0 0;max-width:46em}
.gr-att a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.gr-mark{display:inline-block;margin:0 9px 0 0;padding:3px 9px 4px;
         border:1px solid var(--rule);border-radius:3px;background:var(--paper);
         font-family:var(--mono);font-size:10px;letter-spacing:.14em;
         text-transform:uppercase;color:var(--ink-2);vertical-align:1px}
.gr-order{display:block;color:var(--faint)}
@media (max-width:820px){
  .gr-top{grid-template-columns:1fr;gap:24px}
  .gr-score{border-right:none;border-bottom:1px solid var(--rule);
            padding:0 0 22px;flex-direction:row;align-items:baseline;gap:14px;
            flex-wrap:wrap}
  .gr-score .pf-n{font-size:56px}
  .gr-score .pf-l{max-width:none}
}

.gr-list{list-style:none;margin:40px 0 0;padding:0;
         display:grid;grid-template-columns:repeat(2,1fr);gap:30px 34px}
.gr-list:empty{margin:0}
.gr-i{margin:0;min-width:0}
.gr-i-lead{grid-column:1 / -1}
.gr-c{position:relative;padding:28px 30px 26px;background:var(--paper);
      border:1px solid var(--rule);border-radius:2px;height:100%;
      display:flex;flex-direction:column;gap:16px}
.gr-i-lead .gr-c{padding:34px 38px 30px;border-color:var(--accent-rule);
                 background:linear-gradient(180deg,var(--accent-tint) 0%,var(--paper) 58%)}
.gr-c-head{display:flex;align-items:center;gap:14px}
.gr-av{flex:0 0 auto;width:56px;height:56px;border-radius:50%;object-fit:cover;
       background:var(--paper-2);
       box-shadow:0 2px 10px rgba(42,37,35,.13),0 0 0 1px rgba(42,37,35,.05)}
.gr-who{min-width:0}
.gr-name{display:block;font-family:var(--serif);font-size:18px;color:var(--ink);
         text-decoration:none;border-bottom:1px solid transparent;
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.gr-name:hover,a.gr-name:focus-visible{color:var(--accent-dark);
         border-bottom-color:var(--accent-rule)}
.gr-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:4px 0 0;
         font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--faint)}
.gr-stars-g{display:inline-flex;gap:2px;font-size:12.5px;line-height:1}
.gr-stars-g .on{color:var(--accent);font-style:normal}
.gr-stars-g .off{color:var(--rule);font-style:normal}
.gr-dot{color:var(--rule)}
.gr-q{font-family:var(--serif);font-size:18.5px;line-height:1.62;color:var(--ink-2);
      margin:0;max-width:64ch;flex:1 1 auto}
.gr-i-lead .gr-q{font-size:clamp(20px,2.2vw,25px);line-height:1.52;color:var(--ink)}
.gr-c-foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;
           font-family:var(--mono);font-size:10.5px;letter-spacing:.05em}
.gr-c-foot a{color:var(--muted);text-decoration:none;
             border-bottom:1px solid var(--rule);padding-bottom:2px}
.gr-c-foot a:hover,.gr-c-foot a:focus-visible{color:var(--accent-ink);
             border-bottom-color:var(--accent-rule)}
.gr-flag{opacity:.72}
@media (max-width:700px){
  .gr-list{grid-template-columns:1fr;gap:22px;margin-top:30px}
  .gr-c{padding:22px 22px 20px}
  .gr-i-lead .gr-c{padding:24px 24px 22px}
  .gr-av{width:48px;height:48px}
  .gr-q{font-size:17.5px}
  .gr-cta .btn{width:100%;justify-content:center}
}

/* ---------------------------------------------------------------- CITATION
   Sourcing is a feature on this site, so it gets set like a citation rather than
   buried as an inline link: mono, small caps label, outbound arrow. */
.src{display:inline-flex;align-items:baseline;gap:8px;margin-top:12px;
     font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
     color:var(--muted);text-decoration:none;
     border-bottom:1px solid var(--rule);padding-bottom:3px;
     transition:color .18s var(--ease),border-color .18s var(--ease)}
.src .src-k{text-transform:uppercase;letter-spacing:.18em;font-size:10px;
            color:var(--accent-ink);opacity:.85}
.src .src-a{font-size:12px;opacity:.6}
.src:hover{color:var(--accent-ink);border-bottom-color:var(--accent-rule);
           text-decoration:none}
.src:hover .src-a{opacity:1}
.flow .src{display:inline-flex}

/* Real quotes arrive one after the other rather than appearing as a block. Pure
   CSS and scroll-driven, so with no support the quotes are simply there. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .pf-quotes .rv{opacity:0;transform:translateY(10px);
      animation:rv-in .01s linear forwards;
      animation-timeline:view();animation-range:entry 10% cover 24%}
    .pf-quotes .rv:nth-child(2){animation-range:entry 10% cover 32%}
    .rv-l .rv-i{opacity:0;transform:translateY(12px);
      animation:rv-in .01s linear forwards;
      animation-timeline:view();animation-range:entry 6% cover 22%}
  }
}
@keyframes rv-in{to{opacity:1;transform:none}}

/* ------------------------------------------------------- REVIEW FORM FIELDS
   Visible labels, not placeholder-only: a placeholder vanishes the instant
   someone starts typing, which is exactly when a five-field form needs it.
   Validation is :user-invalid, so a field only goes red once it has been
   touched and left -- never on first paint. */
.rv-form{max-width:640px;gap:22px}
.rv-form .ff-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.rv-form .ff{margin:0;display:flex;flex-direction:column;gap:7px;
             border-left:2px solid transparent;padding-left:12px;margin-left:-14px;
             transition:border-color .2s var(--ease)}
.rv-form .ff:focus-within{border-left-color:var(--accent)}
.rv-form label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
               text-transform:uppercase;color:var(--muted);
               transition:color .2s var(--ease)}
.rv-form .ff:focus-within label{color:var(--accent-ink)}
.rv-form .ff-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
               line-height:1.6;color:var(--faint)}
.rv-form input,.rv-form textarea{border:1px solid var(--rule);background:var(--paper);
               padding:14px 15px;font-size:18px}
.rv-form textarea{line-height:1.55;resize:vertical}
.rv-form input:user-invalid,.rv-form textarea:user-invalid{
               border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.10)}
.rv-form input:user-valid,.rv-form textarea:user-valid{border-color:var(--accent-rule)}
.rv-form button{margin-top:4px;justify-self:start;padding:18px 34px}
.rv-form .or{color:var(--muted);font-size:16px;font-style:italic;margin:2px 0 0}
.rv-form .or a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;
               font-style:normal}
@media (max-width:620px){.rv-form .ff-row{grid-template-columns:1fr}}

/* the citation arrow leans out on hover, the way a link out should */
.src .src-a{transition:transform .22s var(--ease)}
.src:hover .src-a{transform:translate(2px,-2px)}

/* the empty -> first-review moment. Not a fade: the quote mark scales in from
   the rule, then the customer's own words wipe up from behind it. It happens
   once in the life of the page, so it is worth doing properly. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .pf-quotes .rv::before,.rv-l .rv::before{
      opacity:0;transform:translateY(6px) scale(.86);transform-origin:0 100%;
      animation:qm-in .01s linear forwards;
      animation-timeline:view();animation-range:entry 8% cover 20%}
    .pf-quotes .rv-q,.rv-l .rv-q{
      clip-path:inset(0 0 100% 0);
      animation:wipe-up .01s linear forwards;
      animation-timeline:view();animation-range:entry 10% cover 30%}
    .pf-quotes .rv-by,.rv-l .rv-by{
      opacity:0;animation:rv-in .01s linear forwards;
      animation-timeline:view();animation-range:entry 18% cover 36%}
    .pf-stars i{display:inline-block;opacity:0;transform:scale(.6);
      animation:star-in .01s linear forwards;
      animation-timeline:view();
      animation-range:entry calc(6% + var(--i) * 3%) cover calc(16% + var(--i) * 4%)}
  }
}
@keyframes qm-in{to{opacity:1;transform:none}}
@keyframes wipe-up{to{clip-path:inset(0 0 0 0)}}
@keyframes star-in{to{opacity:1;transform:none}}

/* anchored guide sections must not land under the sticky masthead */
section[id]{scroll-margin-top:24px}

/* ------------------------------------------------------------- RECENT JOBS */
.band-recent{background:var(--paper-2);border-top:1px solid var(--rule);
             border-bottom:1px solid var(--rule)}
.rj-h{margin:14px 0 8px}
.rj-lead{font-size:17.5px;color:var(--ink);max-width:660px;margin:0 0 34px;line-height:1.55;
         letter-spacing:-.005em}
.rj-lead a{color:inherit;text-decoration:underline;text-underline-offset:3px;
           text-decoration-thickness:1px;transition:text-decoration-thickness .2s ease}
.rj-tier{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;
         text-transform:uppercase;color:var(--muted);margin:52px 0 16px;
         padding-bottom:8px;border-bottom:1px solid var(--rule)}
/* The transformations get their own tinted panel. Everything else in the
   section is paper and hairlines, so this one green field is the signature and
   says, without a word, that these three frames are the argument. */
.rj-hero{background:var(--accent-tint);border:1px solid var(--accent-rule);
         border-radius:5px;padding:34px 34px 30px;margin-bottom:18px}
.rj-hero .rj-tier{color:var(--accent-dark);border-bottom-color:var(--accent-rule);
                  margin-top:38px}
.rj-hero .rj-tier:first-child{margin-top:0}
.rj-hero .rj-fig figcaption{color:var(--accent-dark);padding-left:11px;
                            border-left:2px solid var(--accent-rule)}
.rj-mid{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;
        color:var(--accent-dark);margin:26px 0 0;padding-top:20px;
        border-top:1px solid var(--accent-rule)}
.rj-mid a{color:inherit;font-weight:600;text-underline-offset:3px}
.rj-mid a span{display:inline-block;transition:transform .25s var(--ease)}
.rj-mid a:hover span{transform:translateX(4px)}
.rj-tier:first-of-type{margin-top:0}
.rj-fig{margin:0;position:relative;display:flex;flex-direction:column;
        transition:transform .3s var(--ease)}
.rj-fig picture{display:block;overflow:hidden;border-radius:4px;background:var(--rule);
                box-shadow:0 1px 2px rgba(42,37,35,.06);
                transition:box-shadow .3s var(--ease)}
.rj-fig img{width:100%;height:auto;display:block;
            transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.rj-fig figcaption{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;
                   color:var(--muted);margin-top:10px;line-height:1.5}
@media (hover:hover){
  .rj-fig:hover{transform:translateY(-3px)}
  .rj-fig:hover img{transform:scale(1.04)}
  .rj-fig:hover picture{box-shadow:0 14px 34px rgba(42,37,35,.15)}}
/* Before and after: one hero frame, two stacked beside it, so the row has a
   first read instead of three frames of equal weight. */
.rj-pairs{display:grid;grid-template-columns:2fr 1fr;gap:22px}
.rj-pairs .rj-fig img{aspect-ratio:1/1;object-fit:cover}
.rj-lead-fig{grid-row:span 2}
.rj-lead-fig picture{flex:1;min-height:0}
.rj-lead-fig img{height:100%;aspect-ratio:auto;object-fit:cover}
.rj-trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rj-trust-row .rj-fig img{aspect-ratio:4/3;object-fit:cover}
.rj-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rj-mosaic .rj-fig img{aspect-ratio:4/3;object-fit:cover}
.rj-close{font-size:16px;line-height:1.6;margin:46px 0 0;max-width:640px;color:var(--muted)}
.rj-cta{margin-top:18px}
.rj-cta span{display:inline-block;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.rj-cta:hover span,.rj-cta:focus-visible span{transform:translateX(5px)}
.rj-lead a:hover{text-decoration-thickness:2px}
@media (max-width:980px){
  .rj-pairs{grid-template-columns:1fr 1fr}
  .rj-lead-fig{grid-row:auto;grid-column:1 / -1}
  .rj-lead-fig img{height:auto;aspect-ratio:1/1}
  .rj-trust-row{grid-template-columns:repeat(2,1fr)}
  .rj-mosaic{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .rj-hero{padding:20px 16px 18px}
  .rj-pairs,.rj-trust-row{grid-template-columns:1fr;gap:16px}
  .rj-lead-fig{grid-column:auto}
  .rj-mosaic{grid-template-columns:repeat(2,1fr);gap:14px}
  .rj-fig figcaption{font-size:12px}}

/* =============================================================================
   Social proof — the Google reviews block
   Restraint is the whole design brief here. No cards-with-shadows, no badges,
   no five gold stars shouting at the reader. Hairline rules, a serif for the
   human part, the mono for anything counted. The numbers are real, so they are
   allowed to just sit there and be read.
   ============================================================================= */

/* --- the full band (homepage + /reviews/) ------------------------------- */
/* The full band puts the score on its own line and gives the reviews the whole
   container. Side-by-side, the score column ate a third of the width and left
   each of the three quotes about 250px -- unreadable, and the reason the serif
   was hyphenating. The number loses nothing by sitting inline above them. */
.band-proof.pf-full .pf{grid-template-columns:1fr;gap:0;align-items:start}
.pf-full .pf-score{flex-direction:row;align-items:baseline;flex-wrap:wrap;
  gap:8px 20px;padding:0 0 16px;border-right:none;
  border-bottom:1px solid var(--rule)}
.pf-full .pf-n{font-size:clamp(46px,5vw,62px)}
.pf-full .pf-l{max-width:none}
.pf-full .pf-body{padding-top:20px}
.pf-full .pf-line{max-width:34em;font-size:clamp(20px,2.1vw,24px)}
/* A lead review and two beside it, not three identical columns. The longest
   quote takes the wide column and is set a size up, so the band has somewhere
   to start reading instead of three equal blocks competing for the eye. The
   ORDER is Google's, not ours -- the first review is simply given the room its
   length needs. Below 1100px the columns are already tight, so it goes back to
   even rather than squeezing two of them further. */
@media (min-width:1101px){
  .pf-full .g-list{grid-template-columns:1.42fr 1fr 1fr}
  .pf-full .g-i:first-child .g-q p{font-size:19.5px;line-height:1.46}
  .pf-full .g-i:first-child .g-by cite{font-size:18px}
}

/* --- one reviewer ------------------------------------------------------- */
.g-list{list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--rule)}
.g-i{border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.g-i:last-child{border-right:none}
.g-c{padding:18px 22px 18px 0;height:100%;display:flex;flex-direction:column;gap:9px}
.g-i:not(:first-child) .g-c{padding-left:22px}
.g-c-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.g-stars{white-space:nowrap;font-size:13px;letter-spacing:.14em;line-height:1}
.g-stars .on{color:var(--accent);font-style:normal}
.g-stars .off{color:var(--rule);font-style:normal}
.g-when{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--faint);
  white-space:nowrap}
.g-q{margin:0;border:0;padding:0}
.g-q p{font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--ink);margin:0;
  text-wrap:pretty;overflow-wrap:break-word;hyphens:manual}
/* NEVER put hyphens:auto back on a review. A three-up grid makes each column
   narrow, auto-hyphenation then breaks "removal" into "re-moval" four times in
   one card, and a quotation that has been visibly chopped up reads as something
   we retyped rather than something a customer wrote. */
/* The page <footer> is styled globally (white, 3px accent border-top). Any
   attribution block must opt out of that explicitly, or it inherits a card it
   was never meant to have. */
.g-by,.rv-by{background:transparent;border-top:0;padding:0}
/* With a quote above it the attribution is pushed to the foot of the card, so a
   row of quotes of different lengths still lines up along the bottom. With no
   quote there is nothing to push against, and bottom-aligning just knocks the
   three names out of line -- so it only applies when a quote is actually there. */
.g-by{display:flex;flex-direction:column;gap:3px}
.g-c:has(.g-q) .g-by{margin-top:auto;padding-top:9px}
.g-by cite{font-style:normal;font-family:var(--serif);font-size:17px;color:var(--ink);
  line-height:1.3}
.g-job{font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);line-height:1.45}
/* The reviewer's own Google record. Deliberately quiet -- it is corroboration,
   not a headline -- but it is the line that separates a real account with a
   history from a name somebody typed into a testimonial slider. */
.g-cred{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;
  color:var(--faint);line-height:1.5}
/* Google was still hiding text behind a More control when this was captured, so
   the quote ends in an ellipsis and a route to the full thing. Never style this
   away -- a fragment presented as a whole review is a fabricated review. */
.g-ell{color:var(--faint);padding:0 .3em 0 .2em}
.g-more{font-family:var(--mono);font-size:11px;letter-spacing:.03em;
  margin-left:.15em;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--rule);white-space:nowrap}
.g-more:hover,.g-more:focus-visible{color:var(--accent-ink);
  text-decoration-color:currentColor}
.g-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;line-height:1.7;
  color:var(--muted);margin:14px 0 0;max-width:56em}
.g-note a{color:var(--accent-ink);text-underline-offset:3px}

/* the wide arrangement on /reviews/, where the block is the page */
/* One card on its own: the condensed band on every page that is not the
   homepage. It must not inherit the three-column grid, or a single review sits
   in a third of the width with two empty cells beside it. */
.g-list-one{display:block;border-top:1px solid var(--rule);margin:14px 0 0}
.g-list-one .g-i{border-right:none}
.g-list-one .g-c{padding:16px 0 16px 0;gap:8px}
.g-list-one .g-q p{font-size:17.5px;max-width:52em}

.g-list-wide{margin-top:30px}
.g-list-wide .g-c{padding-top:22px;padding-bottom:22px}

/* --- Google's topic tally ------------------------------------------------
   Plain inline runs, not chips. A border around each topic would read as a
   filter UI and invite a click that does nothing; these are evidence, so they
   are set as a sentence with the counts in the mono. */
.themes{margin:26px 0 0}
.t-h{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.t-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:2px 0;max-width:62em}
.t-list li{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.t-list li::after{content:"\00B7";color:var(--rule);margin:0 12px;font-size:15px}
.t-list li:last-child::after{content:none}
.t-l{font-size:15px;color:var(--ink-2);line-height:1.75}
.t-n{font-family:var(--mono);font-size:11.5px;color:var(--accent-ink);line-height:1.75;
  font-variant-numeric:tabular-nums}
.t-inline{margin-top:18px}

/* --- life, but only the CSS kind ----------------------------------------
   Every motion below is pure CSS and decorative. Nothing here gates content:
   with animation-timeline unsupported, or reduced-motion set, the band is
   simply there. */
.g-note a,.gr-att a{transition:color .2s var(--ease),
  text-decoration-thickness .2s var(--ease)}
/* A reviewer marks itself with an accent edge that wipes down from the top,
   rather than lifting on a shadow -- this band is flat editorial, and a
   floating card would be the one gaudy note in it. */
.g-i{position:relative;transition:background-color .35s var(--ease),
  transform .3s var(--ease)}
.g-i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;
  transition:transform .32s var(--ease)}
.pf-n{transition:transform .3s var(--ease),color .2s var(--ease);display:inline-block}
.t-l,.t-n{transition:color .2s var(--ease)}
/* the arrow on any "go and check it yourself" link travels on hover */
.pf-more span,.pf-links a span{display:inline-block;
  transition:transform .25s var(--ease)}
.pf-links a{transition:color .2s var(--ease),
  text-decoration-thickness .2s var(--ease);text-underline-offset:4px}

@media (hover:hover){
  .g-i:hover{background:rgba(254,129,0,.035)}
  .g-i:hover::before{transform:scaleY(1)}
  .g-i:hover .g-when{color:var(--muted)}
  .t-list li:hover .t-l{color:var(--ink)}
  .t-list li:hover .t-n{color:var(--accent-dark)}
  .pf-n:hover{transform:translateY(-1px)}
  .pf-links a:hover,.g-note a:hover,.gr-att a:hover{color:var(--accent-dark);
    text-decoration-thickness:2px}
  .pf-more:hover span,.pf-links a:hover span{transform:translateX(5px)}
}
.g-when{transition:color .25s var(--ease)}


@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* TWO scroll-driven effects here, and that is the ceiling. This was one
       for a while: there had been four at the start -- a score rise, a star
       wipe, a staggered card entrance and a quote fade -- and four at once is
       choreography, so three were cut. The stagger is back, alone, because
       first contact with someone else's words is the one moment in this band
       worth a beat of ceremony, and 60ms apart is a beat, not a performance.
       The star wipe and the quote fade stay dead: the stars are aria-hidden
       ornament and the quote is the content, which never animates. */
    .band-proof .pf-n{animation:rv-score both linear;animation-timeline:view();
      animation-range:entry 2% cover 18%}
    .pf-full .g-list .g-i{animation:rv-card both linear;animation-timeline:view();
      animation-range:entry 0% cover 14%}
    .pf-full .g-list .g-i:nth-child(2){animation-range:entry -60px cover 14%}
    .pf-full .g-list .g-i:nth-child(3){animation-range:entry -120px cover 14%}
  }
}
@keyframes rv-score{from{opacity:0;transform:translateY(8px) scale(.99)}
                    to{opacity:1;transform:none}}
/* 6px, not 20. The cards are separated by hairlines, so a large travel makes the
   rules visibly slide apart before they settle, which looks like a bug. */
@keyframes rv-card{from{opacity:0;transform:translateY(6px)}
                   to{opacity:1;transform:none}}

/* --- the sizes in between ------------------------------------------------ */
/* The three-up gets cramped before the old 900px stack, and the score used to
   jump 92px -> 58px in one step. Both curves are smoothed here. */
@media (max-width:1100px){
  .g-c{padding-right:16px}
  .g-i:not(:first-child) .g-c{padding-left:16px}
}
@media (max-width:1040px){
  /* stack earlier: three columns of a name plus a wrapping job tag stop
     reading well well before 900 */
  .g-list{grid-template-columns:1fr}
  .g-i{border-right:none}
  .g-c,.g-i:not(:first-child) .g-c{padding-left:0;padding-right:0}
}
@media (max-width:900px){
  .pf-n{font-size:72px}          /* the missing step between 92 and 58 */
  .pf-score{padding-right:30px}
}
@media (max-width:900px){
  .g-list{grid-template-columns:1fr}
  .g-i{border-right:none}
  .g-c,.g-i:not(:first-child) .g-c{padding-left:0;padding-right:0}
}