/* Red Crest Garage Doors - Scottsdale
   Colour tokens, grid and breakpoints for every page. */
:root{
    --brand:#b93525;
    --brand-dark:#8c2419;
    --brand-text:#a5301f;
    --accent:#000000;
    --accent-dark:#b93525;
    --accent-ink:#ffffff;
    --tint:#fbeeec;

    /* typefaces */
    --font-head:'Barlow Condensed','Archivo','Helvetica Neue',Arial,sans-serif;
    --font-body:'Source Sans 3','Segoe UI',Arial,sans-serif;
    --page-bg:#dbdbdb;
    --panel:#ffffff;
    --top-bar:#eeeeee;
    --ink:#333333;
    --rule:#dddddd;

    /* side gutter for every full-bleed container */
    --gutter:clamp(16px,3.6vw,60px);
    /* comfortable reading measure for running prose */
    --measure:1140px;
  }

  *{box-sizing:border-box;}

  html{-webkit-text-size-adjust:100%;}

  body{
    margin:0;
    background:var(--page-bg);
    font-family:var(--font-body);
    font-size:17px;
    line-height:1.62;
    color:var(--ink);
  }

  a{text-decoration:none;color:inherit;}

  /* masthead */
  .topbar{
    background:linear-gradient(#f7f7f7,#e7e7e7);
    border-bottom:1px solid #d5d5d5;
  }
  .topbar-inner{
    max-width:none;margin:0;padding:14px var(--gutter);
    display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  }

  .brandmark{display:flex;align-items:center;gap:14px;}
  .brandmark-img{height:82px;width:auto;max-width:100%;flex:none;display:block;}
  .brandmark-text{
    font-family:var(--font-head);font-weight:600;font-size:27px;line-height:1.06;
    color:var(--brand-text);letter-spacing:.2px;text-transform:uppercase;
  }
  /* city label on a location page, set off from the wordmark by a rule */
  .brandmark-city{
    font-family:var(--font-head);font-weight:700;font-size:27px;line-height:1.06;
    color:var(--brand);text-transform:uppercase;letter-spacing:.4px;
    padding-left:14px;margin-left:2px;border-left:2px solid var(--rule);
  }

  .topbar-pitch{
    margin:0;flex:0 1 auto;text-align:center;
    font-family:var(--font-head);font-weight:500;font-size:20px;line-height:1.2;
    color:var(--ink);letter-spacing:.3px;text-transform:uppercase;
  }
  .topbar-pitch strong{font-weight:700;color:var(--brand-text);}
  /* third line, set smaller so the emergency line stays the emphasis */
  .topbar-pitch-sub{
    display:block;font-weight:500;font-size:.72em;letter-spacing:1.3px;
    color:#5a5a5a;margin-top:2px;
  }

  .topbar-contact{text-align:right;line-height:1.1;}
  .topbar-contact .topbar-strap{
    font-family:var(--font-head);
    font-size:19px;color:var(--brand-text);
  }
  .topbar-contact .topbar-phone{
    font-family:var(--font-head);
    font-size:32px;font-weight:700;color:var(--brand);display:block;margin-top:2px;
  }

  /* red navigation bar */
  nav{background:linear-gradient(var(--brand),var(--brand-dark));}
  .mainnav{
    max-width:none;margin:0;padding:0 calc(var(--gutter) - 17px);
    display:flex;justify-content:space-between;flex-wrap:wrap;
  }
  .mainnav a{
    font-family:var(--font-head);
    font-size:16px;font-weight:500;letter-spacing:.2px;color:#fff;padding:15px 17px;display:block;
  }
  .mainnav a:hover,.mainnav a:focus-visible{background:rgba(0,0,0,.18);}
  .mainnav a.is-current{background:rgba(0,0,0,.25);font-weight:700;}

  /* ---- page container ---- */
  .pagewrap{
    max-width:none;margin:0;background:var(--panel);
    padding:26px var(--gutter) 40px;
  }


  /* ---- service shortcut tiles ---- */
  .servicetiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
  .servicetile{display:block;background:var(--brand);text-align:center;}
  .servicetile .servicetile-media{height:clamp(118px,8.6vw,178px);display:flex;align-items:center;justify-content:center;}
  .servicetile svg{width:74px;height:74px;fill:#fff;}
  .servicetile .servicetile-media.servicetile-photo{padding:0;}
  .servicetile .servicetile-photo img{width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block;}
  .servicetile:hover .servicetile-photo img{opacity:.9;}

  .servicetile .servicetile-label{
    display:block;background:var(--brand-dark);color:#fff;font-size:14px;font-weight:600;
    letter-spacing:.6px;text-transform:uppercase;padding:11px 5px;line-height:1.25;
  }
  .servicetile:hover .servicetile-label,.servicetile:focus-visible .servicetile-label{background:var(--accent);color:var(--accent-ink);}
  .servicetile:hover,.servicetile:focus-visible{background:var(--brand-dark);}

  /* article now runs the full width of the page */
  .contentwrap{display:block;margin-top:32px;}
  .contentwrap > main{max-width:var(--measure);margin:0 auto;}

  /* plain link list, still used by the 404 page */
  .linklist{list-style:none;margin:0;padding:6px 0 8px;}
  .linklist li{border-bottom:1px solid #eee;}
  .linklist li:last-child{border-bottom:0;}
  .linklist a{
    display:block;padding:8px 16px 8px 30px;position:relative;font-size:16px;color:#3b3b3b;
  }
  .linklist a::before{
    content:"";position:absolute;left:16px;top:15px;
    width:6px;height:6px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);
    transform:rotate(45deg);
  }
  .linklist a:hover,.linklist a:focus-visible{background:var(--tint);color:var(--brand-text);}
  .linklist .linklist-current{
    display:block;padding:8px 16px 8px 30px;position:relative;font-size:16px;
    background:var(--tint);color:var(--brand-text);font-weight:600;
  }
  .linklist .linklist-current::before{
    content:"";position:absolute;left:16px;top:15px;
    width:6px;height:6px;border-top:2px solid var(--brand);border-right:2px solid var(--brand);
    transform:rotate(45deg);
  }

  /* ---- question and answer list ---- */
  .faqs{margin-top:42px;border-top:3px solid var(--brand);padding-top:24px;}
  .faqs h2{
    font-family:var(--font-head);font-weight:600;font-size:28px;
    color:var(--brand-text);margin:0 0 8px;
  }
  .faq{border:1px solid var(--rule);border-left:4px solid var(--brand);margin-bottom:8px;background:#fff;}
  .faq summary{
    list-style:none;cursor:pointer;padding:13px 44px 13px 16px;position:relative;
    font-family:var(--font-head);font-size:19px;font-weight:600;color:var(--brand-text);
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{
    content:"";position:absolute;right:18px;top:20px;width:9px;height:9px;
    border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
    transform:rotate(45deg);transition:transform .18s ease;
  }
  .faq[open] summary::after{transform:rotate(-135deg);top:24px;}
  .faq summary:hover{background:var(--tint);}
  .faq summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;}
  .faq-answer{padding:0 16px 14px;border-top:1px solid #f0f0f0;}
  .faq-answer p{margin:12px 0 0;}
  @media (prefers-reduced-motion:reduce){.faq summary::after{transition:none;}}

  /* ---- service area block ---- */

  /* article typography */
  main h1{
    letter-spacing:-.2px;
    font-family:var(--font-head);font-weight:700;
    font-size:33px;color:var(--brand-text);margin:0 0 22px;line-height:1.2;letter-spacing:-.4px;
  }
  main h2{
    font-family:var(--font-head);font-weight:600;
    font-size:24px;color:var(--brand-text);margin:34px 0 12px;letter-spacing:-.2px;
  }
  main p{margin:0 0 18px;}
  .updated{margin:0 0 22px;font-size:15px;color:#6a6a6a;}
  main h3{
    font-family:var(--font-head);font-weight:600;font-size:21px;
    color:var(--brand-text);margin:26px 0 8px;letter-spacing:-.1px;
  }
  main ul{margin:0 0 18px;padding-left:20px;}
  main li{margin-bottom:7px;}


  .inlinebanner{margin:0 0 26px;}
  .inlinebanner img{
    display:block;width:100%;height:auto;border:1px solid var(--rule);
  }

  .phonelink{color:var(--brand-text);font-weight:700;}
  main p a:not(.phonelink){color:var(--brand-text);text-decoration:underline;text-underline-offset:2px;}
  main p a:not(.phonelink):hover,main p a:not(.phonelink):focus-visible{color:var(--brand-dark);background:var(--tint);}

  .ctastrip{
    background:var(--accent);color:var(--accent-ink);text-align:center;padding:18px;
    margin-top:34px;border-top:4px solid var(--brand);
    font-family:var(--font-head);font-size:24px;font-weight:600;
  }
  .ctastrip a{text-decoration:underline;}

  /* footer */
  footer{background:linear-gradient(var(--brand),var(--brand-dark));color:#ffffff;font-size:15px;}
  .footcols{
    max-width:none;margin:0;padding:34px var(--gutter);
    display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
  }
  footer h3{
    font-family:var(--font-head);font-size:18px;font-weight:600;color:#fff;
    margin:0 0 10px;font-weight:400;
  }
  footer ul{list-style:none;margin:0;padding:0;}
  footer li{margin-bottom:5px;}
  footer a:hover,footer a:focus-visible{color:#ffffff;text-decoration:underline;text-underline-offset:2px;}
  .roc{margin-top:12px;}
  .roc-num{
    font-family:var(--font-head);font-size:19px;font-weight:600;
    letter-spacing:1.2px;color:#ffffff;display:inline-block;
    border:1px solid rgba(255,255,255,.45);padding:3px 10px;margin-top:3px;
  }
  .footbar{border-top:1px solid rgba(255,255,255,.28);text-align:center;padding:14px;font-size:13px;color:#f4e2df;}

  /* responsive steps */
  @media (max-width:1080px){
    .brandmark-img{height:72px;width:auto;}
    .brandmark-text{font-size:23px;}
    .brandmark-city{font-size:23px;padding-left:11px;}
    .topbar-pitch{font-size:17px;}
    .topbar-contact .topbar-phone{font-size:36px;}
    .topbar-contact .topbar-strap{font-size:22px;}
  }

  @media (max-width:900px){
    .servicetiles{grid-template-columns:repeat(2,1fr);}
    .footcols{grid-template-columns:1fr;}
  }
  @media (max-width:760px){
    .topbar-inner{flex-direction:column;text-align:center;}
    .topbar-contact{text-align:center;}
    .brandmark-img{height:60px;width:auto;}
    .brandmark-text{font-size:19px;}
    .brandmark-city{font-size:18px;padding-left:9px;}
    .topbar-contact .topbar-phone{font-size:27px;}
    .mainnav{justify-content:center;}
    .mainnav a{padding:11px 12px;font-size:15px;}
    main h1{font-size:26px;}
    .pagewrap{padding:18px var(--gutter) 30px;}
  }
  @media (max-width:430px){
    .navtoggle{min-height:42px;padding:0 12px 0 11px;gap:7px;}
    .navtoggle-label{font-size:15px;letter-spacing:.8px;}
    .navtoggle .navtoggle-bars{width:19px;height:14px;}
    .navtoggle .navtoggle-bars span:nth-child(2){top:5.75px;}
    .navtoggle .navtoggle-bars span:nth-child(3){top:11.5px;}
    .servicetiles{grid-template-columns:1fr;}
    .brandmark{gap:10px;}
    .brandmark-img{height:50px;width:auto;}
    .brandmark-text{font-size:16px;}
    .brandmark-city{font-size:15px;padding-left:7px;}
    .topbar-pitch{font-size:14px;}
  }

  @media (prefers-reduced-motion:reduce){
    *{transition:none!important;animation:none!important;}
  }

  /* mobile menu button */
  .navtoggle{
    display:none;align-items:center;justify-content:center;gap:9px;
    min-height:46px;flex:none;padding:0 16px 0 14px;cursor:pointer;
    background:linear-gradient(var(--brand),var(--brand-dark));
    border:0;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.25);
  }
  /* the word carries the meaning; the bars are decoration beside it */
  .navtoggle-label{
    font-family:var(--font-head);font-size:17px;font-weight:600;
    letter-spacing:1.1px;text-transform:uppercase;color:#fff;line-height:1;
  }
  .navtoggle-label::after{content:"Menu";}
  .navtoggle[aria-expanded="true"] .navtoggle-label::after{content:"Close";}
  .navtoggle:active{background:var(--brand-dark);}
  .navtoggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
  .navtoggle .navtoggle-bars{display:block;width:22px;height:16px;position:relative;}
  .navtoggle .navtoggle-bars span{
    position:absolute;left:0;width:100%;height:2.5px;background:#fff;border-radius:2px;
    transition:transform .22s ease,opacity .18s ease,top .22s ease;
  }
  .navtoggle .navtoggle-bars span:nth-child(1){top:0;}
  .navtoggle .navtoggle-bars span:nth-child(2){top:6.75px;}
  .navtoggle .navtoggle-bars span:nth-child(3){top:13.5px;}
  .navtoggle[aria-expanded="true"] .navtoggle-bars span:nth-child(1){top:6.75px;transform:rotate(45deg);}
  .navtoggle[aria-expanded="true"] .navtoggle-bars span:nth-child(2){opacity:0;}
  .navtoggle[aria-expanded="true"] .navtoggle-bars span:nth-child(3){top:6.75px;transform:rotate(-45deg);}

  @media (max-width:760px){
    .navtoggle{display:inline-flex;}
    .topbar-inner{
      flex-direction:row;flex-wrap:wrap;align-items:center;
      justify-content:space-between;text-align:left;gap:12px;
    }
    .brandmark{flex:1 1 auto;min-width:0;}
    .topbar-pitch{flex:1 0 100%;order:2;font-size:16px;}
    .topbar-contact{flex:1 0 100%;text-align:center;order:3;}
    nav{padding:0;}
    nav .mainnav{display:none;flex-direction:column;padding:0;}
    nav.is-showing .mainnav{display:flex;}
    .mainnav a{
      padding:14px 18px;text-align:left;font-size:21px;
      border-top:1px solid rgba(255,255,255,.2);
    }
    .mainnav a:first-child{border-top:0;}
  }

  @media (prefers-reduced-motion:reduce){
    .navtoggle .navtoggle-bars span{transition:none;}
  }
  /* masthead behaviour on scroll */
  .topbar{position:sticky;top:0;z-index:60;box-shadow:0 2px 6px rgba(0,0,0,.14);}
  [id]{scroll-margin-top:104px;}
  @media (max-width:760px){
    .topbar-inner{padding:10px 16px;}
    [id]{scroll-margin-top:120px;}
  }

  .officebox{
    margin:26px 0 0;padding:16px;border:1px solid var(--rule);border-left:4px solid var(--accent);
  }
  .officebox p{margin:0 0 6px;}
  .officebox p:last-child{margin-bottom:0;}


  /* the pale accent vanishes against white, so small marks use the darker
     tone in its place */
  .linklist a::before,
  .faq summary::after{
    border-color:var(--accent-dark);
  }

  /* ---- tile columns per breakpoint ---- */
  @media (max-width:1180px){.servicetiles{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:400px){.servicetiles{grid-template-columns:1fr;}}

  /* spring runs across the upper third of this frame, so crop from near the top */
  .servicetile img[src$="tile-springs.jpg"]{object-position:center 30%;}

  /* the opener unit is the subject and it hangs high in the frame */
  .servicetile img[src$="tile-opener.jpg"]{object-position:center 40%;}

  /* the kneeling technician is the subject, mid frame */
  .servicetile img[src$="tile-installation.jpg"]{object-position:center 45%;}

  /* the technician and the spray can sit mid frame */
  .servicetile img[src$="tile-maintenance.jpg"]{object-position:center 45%;}

  /* ---- heading scale on wide screens ----
     Barlow Condensed sets narrow, so headings need a size bump to hold
     their own beside the body text around them. */
  /* 38px keeps the longest heading on one line in both the webfont and the
     Arial fallback, so nothing reflows while the font is loading. */
  main h1{font-size:38px;line-height:1.12;}
  main h2{font-size:29px;letter-spacing:.1px;}
  .faqs h2,.reviews h2{font-size:31px;}
  .faq summary{font-size:19px;}
  .servicetile .servicetile-label{font-size:15px;letter-spacing:.7px;}
  .mainnav a{font-size:17px;letter-spacing:.3px;}
  .topbar-contact .topbar-phone{font-size:35px;letter-spacing:.2px;}
  .topbar-contact .topbar-strap{font-size:20px;}
  .ctastrip{font-size:26px;}
  .contactphone .cta-number{letter-spacing:.2px;}
  .review-meta .review-author{font-size:17px;}
  footer h3{font-size:19px;}
  @media (max-width:760px){
    main h1{font-size:30px;}
    main h2{font-size:25px;}
  }

  /* ---------- hero picture ----------
     Negative margins cancel the padding on .pagewrap so the photograph meets
     the nav above it and the screen edges either side with no seam. They are
     expressed against --gutter, so they stay exact as the gutter scales. */
  .herobox{
    position:relative;display:block;line-height:0;background:var(--brand-dark);
    margin:-26px calc(var(--gutter) * -1) 26px;
  }
  .herobox-media{display:block;overflow:hidden;}
  .herobox-media img{display:block;width:100%;height:auto;}

  /* Overlaid headline. A scrim sits between photograph and text, because a
     dusk photo has both bright sky and dark roof and white type survives
     neither on its own. */
  /* Two columns over the photograph: the message on the left, the booking
     form on the right. The scrim moved up to the wrapper so it covers both. */
  .herobox-panels{
    position:absolute;inset:0;z-index:1;
    display:flex;align-items:center;justify-content:center;
    padding:16px var(--gutter);
    background:linear-gradient(180deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.52) 45%,rgba(0,0,0,.74) 100%);
  }
  .herobox-copy{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(6px,1.1vw,14px);line-height:1.15;text-align:center;min-width:0;
  }
  /* Lead and headline share one size so they read as a matched pair. The
     ceiling is set by the lead: 54 characters of condensed caps only stay on
     a single line up to about 3.3vw, so that is what both lines take. */
  .herobox-lead{
    margin:0;font-family:var(--font-head);font-weight:600;
    font-size:clamp(25px,3.15vw,58px);color:#fff;letter-spacing:.3px;
    text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.55);
    line-height:1.1;max-width:34ch;
  }
  .herobox-title{
    margin:0;font-family:var(--font-head);font-weight:700;
    font-size:clamp(22px,2.7vw,50px);color:#fff;letter-spacing:-.3px;
    text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.55);
  }
  .herobox-stars{
    margin:0;font-size:clamp(22px,2.4vw,44px);color:#ffc21a;letter-spacing:.14em;
    text-shadow:0 2px 8px rgba(0,0,0,.5);
  }
  .herobox-note{
    margin:0;font-family:var(--font-head);font-weight:600;
    font-size:clamp(16px,1.7vw,30px);color:#fff;letter-spacing:1.4px;
    text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.5);
  }
  .herobox-cta{
    display:inline-block;margin-top:clamp(2px,.6vw,8px);
    background:var(--brand);color:#fff;
    font-family:var(--font-head);font-weight:700;letter-spacing:.6px;
    font-size:clamp(16px,1.7vw,28px);text-transform:uppercase;
    padding:clamp(10px,1.2vw,17px) clamp(20px,2.8vw,42px);
    border-radius:4px;line-height:1.1;box-shadow:0 2px 10px rgba(0,0,0,.35);
  }
  .herobox-cta:hover,.herobox-cta:focus-visible{background:var(--brand-dark);color:#fff;}

  @media (max-width:760px){
    .herobox{margin:-18px calc(var(--gutter) * -1) 20px;}
  }

  /* ---- printable offers ---- */
  /* wide gutters keep each offer visually separate */
  .dealgrid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 0 24px;
  }
  /* the coupons now sit outside the reading column, so they spread wider */
  .offers-band{margin-top:30px;}
  .offers-band .dealgrid{grid-template-columns:repeat(6,1fr);margin:0;}
  @media (max-width:1180px){.offers-band .dealgrid{grid-template-columns:repeat(3,1fr);}}
  @media (max-width:640px){.offers-band .dealgrid{grid-template-columns:repeat(2,1fr);}}
  .deal{display:block;position:relative;}
  .deal-hint{
    position:absolute;left:0;right:0;bottom:0;
    background:var(--accent);color:var(--accent-ink);
    font-family:var(--font-head);font-size:13px;font-weight:700;
    letter-spacing:.4px;text-transform:uppercase;text-align:center;padding:7px 4px;
    opacity:0;transform:translateY(100%);transition:opacity .15s ease, transform .15s ease;
  }
  .deal:hover .deal-hint,.deal:focus-visible .deal-hint{
    opacity:1;transform:translateY(0);
  }
  .deal img{
    display:block;width:100%;height:auto;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .deal:hover img,.deal:focus-visible img{
    transform:translateY(-3px);box-shadow:0 6px 14px rgba(0,0,0,.18);
  }
  .deal:focus-visible{outline:3px solid var(--brand);outline-offset:3px;}
  @media (max-width:900px){.dealgrid{grid-template-columns:repeat(3,1fr);}}
  @media (max-width:640px){.dealgrid{grid-template-columns:repeat(2,1fr);gap:16px;}}
  @media (max-width:380px){.dealgrid{grid-template-columns:1fr;}}
  @media (prefers-reduced-motion:reduce){
    .deal img,.deal-hint{transition:none;}
    .deal:hover img,.deal:focus-visible img{transform:none;}
  }
  /* no hover on touch, so the caption stays put */
  @media (hover:none){
    .deal-hint{opacity:1;transform:translateY(0);}
  }

  /* the photograph is too short to carry the message at these widths */
  @media (max-width:900px){
    .herobox-panels{position:static;background:#000;padding:18px var(--gutter) 22px;}
    .herobox-lead{font-size:21px;letter-spacing:.3px;}
    .herobox-title{font-size:24px;}
    .herobox-stars{font-size:21px;}
    .herobox-note{font-size:15px;}
    .herobox-cta{font-size:17px;padding:11px 26px;}
  }

  /* ---- page header image ---- */
  .pagebanner{margin:0 0 22px;}
  .pagebanner img{
    display:block;width:100%;height:auto;border:1px solid var(--rule);
  }
  @media (max-width:760px){.pagebanner{margin:0 0 16px;}}
  @media print{.pagebanner{display:none;}}

  /* ---- copyright strip ---- */
  .footbar a{text-decoration:underline;text-underline-offset:2px;}
  .footbar a:hover,.footbar a:focus-visible{color:#ffffff;}
  .footbar span{margin:0 6px;opacity:.55;}

  /* ---- address formatting ---- */
  .postaddr{font-style:normal;line-height:1.5;}
  footer .postaddr{color:#f7ebe9;}
  .postaddr-note{margin:10px 0 0;font-size:15px;color:#5f5f5f;}

  /* ---- brand logo wall ----
     Butts directly against the footer, so nothing below carries a margin. */
  .brandwall{background:var(--panel);margin:0;}
  .brandwall-inner{
    max-width:none;margin:0;padding:0 var(--gutter) 24px;
  }
  /* fourteen marks across seven columns gives two even rows; the hairline
     between cells stops adjacent logos reading as one */
  .brandwall-list{
    list-style:none;margin:0;padding:20px 0 0;border-top:1px solid var(--rule);
    display:grid;grid-template-columns:repeat(7,1fr);align-items:center;
    row-gap:20px;
  }
  .brandwall-list li{
    display:flex;align-items:center;justify-content:center;margin:0;
    padding:6px 16px;border-left:1px solid var(--rule);min-width:0;
  }
  .brandwall-list li:nth-child(7n+1){border-left:0;}
  .brandwall-list img{display:block;max-width:100%;height:auto;max-height:30px;width:auto;}

  /* column count drops with the viewport; dividers track it */
  @media (max-width:1000px){
    .brandwall-list{grid-template-columns:repeat(5,1fr);}
    .brandwall-list li{border-left:1px solid var(--rule);padding:6px 12px;}
    .brandwall-list li:nth-child(7n+1){border-left:1px solid var(--rule);}
    .brandwall-list li:nth-child(5n+1){border-left:0;}
  }
  @media (max-width:620px){
    .brandwall-list{grid-template-columns:repeat(3,1fr);row-gap:16px;}
    .brandwall-list li{padding:6px 10px;border-left:1px solid var(--rule);}
    .brandwall-list li:nth-child(7n+1),.brandwall-list li:nth-child(5n+1){border-left:1px solid var(--rule);}
    .brandwall-list li:nth-child(3n+1){border-left:0;}
    .brandwall-list img{max-height:26px;}
  }
  @media (max-width:760px){.brandwall-inner{padding:0 16px 20px;}}
  @media print{.brandwall{display:none;}}

  /* ---- single offer print view ---- */
  .print-frame{display:none;}
  @media print{
    /* hide the page, then reveal only the selected offer */
    body.is-printmode > *{display:none !important;}
    body.is-printmode .print-frame{display:block !important;}
    .print-frame{text-align:center;padding:12mm 0 0;}
    .print-frame img{width:105mm;height:auto;}
    .print-frame p{
      font-family:var(--font-body);font-size:11pt;color:#000;margin:8mm 0 0;
    }
    .deal-hint{display:none;}
  }

  /* ---- reviews ---- */
  .reviews{margin-top:42px;border-top:3px solid var(--brand);padding-top:24px;}
  .reviews h2{
    font-family:var(--font-head);font-size:27px;font-weight:700;
    color:var(--brand-text);margin:0 0 10px;
  }
  .reviews-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start;}
  .review{
    border:1px solid var(--rule);border-top:4px solid var(--accent);
    background:#fff;padding:16px 18px;
  }
  .review .review-stars{
    margin:0 0 8px;font-size:19px;letter-spacing:2px;color:var(--accent-dark);line-height:1;
  }
  .review-job{
    margin:0 0 8px;font-family:var(--font-head);font-size:13px;font-weight:600;
    letter-spacing:.8px;text-transform:uppercase;color:var(--brand-text);
  }
  .review-body{margin:0 0 12px;font-size:16px;}
  .review-meta{
    margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
    border-top:1px solid #f0f0f0;padding-top:10px;
  }
  .review-meta .review-author{font-family:var(--font-head);font-weight:700;color:var(--brand-text);}
  .review-meta .review-date{font-size:13px;color:#8a8a8a;margin-left:auto;white-space:nowrap;}
  @media (max-width:420px){.review-meta .review-date{margin-left:0;}}
  @media (max-width:1180px){.reviews-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:680px){.reviews-grid{grid-template-columns:1fr;}}

  /* ---- contact page phone panel ---- */
  .contactphone{
    background:var(--accent);color:var(--accent-ink);
    border-left:6px solid var(--brand);padding:18px 20px;margin:0 0 26px;
  }
  .contactphone .cta-lead{
    margin:0;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;opacity:.85;
  }
  .contactphone .cta-number{
    font-family:var(--font-head);font-size:34px;font-weight:700;
    display:block;line-height:1.1;margin:4px 0 6px;
  }
  .contactphone .cta-number:hover{text-decoration:underline;}
  .contactphone .cta-note{margin:0;font-size:15px;}
  .contactphone .cta-note a{text-decoration:underline;}

  /* ---- small screens: two rows each ----
     Three columns puts the four tiles and the six coupons into two rows each,
     so the phone view keeps three across instead of stepping down to two and
     then one. Kept last so it wins over the earlier tile and heading sizes. */
  @media (max-width:620px){
    .servicetiles{grid-template-columns:repeat(2,1fr);gap:8px;}
    .servicetile .servicetile-media{height:80px;}
    .servicetile .servicetile-label{font-size:11px;letter-spacing:.3px;padding:8px 3px;}
    .dealgrid{grid-template-columns:repeat(3,1fr);gap:10px;}
  }
  @media (max-width:400px){
    .servicetiles{gap:6px;}
    .servicetile .servicetile-media{height:64px;}
    .servicetile .servicetile-label{font-size:10px;letter-spacing:.2px;padding:7px 2px;}
    .dealgrid{grid-template-columns:repeat(3,1fr);gap:7px;}
  }

  /* ==========================================================
     Full width sections that replaced the old left hand column
     ========================================================== */

  /* shared section furniture */
  .band{margin-top:44px;}
  .band > h2{
    font-family:var(--font-head);font-weight:600;font-size:29px;
    color:var(--brand-text);margin:0 0 4px;letter-spacing:-.2px;
  }
  .band > .band-note{
    margin:0 0 18px;font-size:13px;letter-spacing:1.4px;
    text-transform:uppercase;color:var(--accent-dark);
  }
  /* the note normally supplies the gap under the heading; where a page drops
     it, the list itself has to take that spacing on */
  .band > h2 + .promise-grid,
  .band > h2 + .jobs-grid{margin-top:18px;}
  .band-head{border-top:3px solid var(--brand);padding-top:22px;}
  /* Our Services heads a full width block, so its title is centred */
  .band-centred > h2{text-align:center;}

  /* --- what is included on every job --- */
  .promise-grid{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  }
  .promise-grid li{
    display:flex;gap:11px;align-items:flex-start;
    background:#fff;border:1px solid var(--rule);border-top:4px solid var(--brand);
    padding:16px 16px 17px;font-size:16px;line-height:1.45;margin:0;
  }
  .promise-grid svg{width:19px;height:19px;flex:none;margin-top:3px;fill:var(--brand);}

  /* --- index of every job we take on --- */
  .jobs-grid{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(3,1fr);
    column-gap:0;border-top:1px solid var(--rule);
  }
  .jobs-grid li{margin:0;border-bottom:1px solid var(--rule);}
  .jobs-grid a,.jobs-grid .jobs-on,.jobs-grid .jobs-item{
    display:block;padding:11px 14px 11px 34px;position:relative;
    font-size:16px;color:#3b3b3b;
  }
  .jobs-grid a::before,.jobs-grid .jobs-on::before,.jobs-grid .jobs-item::before{
    content:"";position:absolute;left:12px;top:15px;
    width:15px;height:15px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23b93525' d='M7.6 15.2L2.8 10.4l1.7-1.7 3.1 3.1 7.9-7.9 1.7 1.7z'/%3E%3C/svg%3E") no-repeat center;
    background-size:contain;
  }
  .jobs-grid a:hover,.jobs-grid a:focus-visible{background:var(--tint);color:var(--brand-text);}
  .jobs-grid .jobs-on{background:var(--tint);color:var(--brand-text);font-weight:600;}

  /* --- seasonal offer --- */
  .deal-band{
    margin-top:44px;display:grid;grid-template-columns:260px 1fr;
    gap:26px;align-items:center;
    background:var(--tint);border-left:6px solid var(--brand);padding:22px 26px;
  }
  .deal-pic{display:block;border:1px solid var(--rule);background:#fff;}
  .deal-pic img{display:block;width:100%;height:auto;}
  .deal-pic:hover img,.deal-pic:focus-visible img{opacity:.93;}
  .deal-words h2{
    font-family:var(--font-head);font-weight:600;font-size:27px;
    color:var(--brand-text);margin:0 0 8px;
  }
  .deal-words p{margin:0 0 16px;font-size:17px;}
  .deal-btn{
    display:inline-block;background:var(--brand);color:#fff;
    font-family:var(--font-head);font-size:19px;font-weight:600;
    padding:11px 22px;letter-spacing:.3px;
  }
  .deal-btn:hover,.deal-btn:focus-visible{background:var(--brand-dark);}

  /* --- black telephone band --- */
  .call-band{
    margin-top:44px;background:var(--accent);color:var(--accent-ink);
    border-top:4px solid var(--brand);padding:24px var(--gutter);
    margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);
  }
  .call-band-inner{
    display:flex;align-items:center;justify-content:space-between;
    gap:20px;flex-wrap:wrap;
  }
  .call-band .cta-lead{
    margin:0;font-family:var(--font-head);font-size:26px;font-weight:600;line-height:1.2;
  }
  .call-band .cta-note{margin:4px 0 0;font-size:15px;opacity:.75;}
  .call-band .cta-number{
    font-family:var(--font-head);font-size:44px;font-weight:700;
    color:#fff;line-height:1;white-space:nowrap;
  }
  .call-band .cta-number:hover,.call-band .cta-number:focus-visible{color:var(--brand);}

  @media (max-width:1080px){
    .promise-grid{grid-template-columns:repeat(2,1fr);}
    .jobs-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:760px){
    .promise-grid{grid-template-columns:1fr;}
    .jobs-grid{grid-template-columns:1fr;}
    .deal-band{grid-template-columns:1fr;padding:20px;}
    .deal-pic{max-width:260px;}
    .call-band .cta-number{font-size:36px;}
    .band > h2{font-size:25px;}
  }

  /* ==========================================================
     Sticky call bar
     The masthead already sticks, which keeps the number in view on a
     desktop. On a handset the masthead is short and the number sits in a
     wrapped row, so a fixed bar along the bottom carries it instead. It is
     the primary action on a paid landing page, so it never scrolls away.
     ========================================================== */
  .callbar-sticky{
    display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
    align-items:center;justify-content:center;gap:10px;
    background:linear-gradient(var(--brand),var(--brand-dark));color:#fff;
    padding:11px 14px calc(11px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 10px rgba(0,0,0,.28);text-align:center;
  }
  .callbar-sticky-tag{
    font-family:var(--font-head);font-size:14px;font-weight:600;
    letter-spacing:1.2px;text-transform:uppercase;opacity:.92;
  }
  .callbar-sticky-num{
    font-family:var(--font-head);font-size:24px;font-weight:700;
    letter-spacing:.4px;line-height:1;white-space:nowrap;
  }
  .callbar-sticky:hover,.callbar-sticky:focus-visible{color:#fff;}

  @media (max-width:900px){
    .callbar-sticky{display:flex;}
    /* leave room so the footer is not hidden behind the bar */
    footer{padding-bottom:72px;}
  }
  @media (max-width:430px){
    .callbar-sticky{flex-direction:column;gap:1px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));}
    .callbar-sticky-tag{font-size:12px;}
    .callbar-sticky-num{font-size:22px;}
  }
  @media print{.callbar-sticky{display:none;}}