:root{
    color-scheme: light;
    --gold:#ECA33C;
    --gold-light:#F7BE63;
    --gold-dark:#C87E1C;
    --sage:#708B58;
    --sage-dark:#4E6B3C;
    --cream:#FFF2CA;
    --navy:#0F2C22;
    --navy-dark:#081A14;
    --ink:#0F2C22;
    --bg:#FFF2CA;
    --surface:#FFFFFF;
    --text:#0F2C22;
    --muted:#55684E;
    --line:rgba(15,44,34,.16);
    --shadow:0 20px 44px rgba(15,44,34,.18);
    /* quality-badge tints, one per item */
    --q1:#C87E1C; --q1bg:rgba(236,163,60,.16);
    --q2:#4E6B3C; --q2bg:rgba(112,139,88,.24);
    --q3:#0F2C22; --q3bg:rgba(15,44,34,.13);
    --card-tint:rgba(15,44,34,.065);
    --cta-bg:#0F2C22;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --bg:#0B2019; --surface:#143026; --text:#FFF2CA; --muted:#A8BD96;
      --ink:#FFF2CA; --line:rgba(255,242,202,.18);
      --shadow:0 20px 44px rgba(0,0,0,.55);
      --q1:#F7BE63; --q1bg:rgba(247,190,99,.16);
      --q2:#A8BD96; --q2bg:rgba(168,189,150,.16);
      --q3:#FFF2CA; --q3bg:rgba(255,242,202,.12);
      --card-tint:rgba(255,242,202,.075);
    --cta-bg:#1E4234;
    }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --bg:#0B2019; --surface:#143026; --text:#FFF2CA; --muted:#A8BD96;
    --ink:#FFF2CA; --line:rgba(255,242,202,.18);
    --shadow:0 20px 44px rgba(0,0,0,.55);
    --q1:#F7BE63; --q1bg:rgba(247,190,99,.16);
    --q2:#A8BD96; --q2bg:rgba(168,189,150,.16);
    --q3:#FFF2CA; --q3bg:rgba(255,242,202,.12);
    --card-tint:rgba(255,242,202,.075);
    --cta-bg:#1E4234;
  }
  *,*::before,*::after{box-sizing:border-box;}
  /* an explicit display (flex, grid) otherwise beats [hidden]'s display:none */
  [hidden]{display:none !important;}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1200px;margin:0 auto;padding:26px 20px 52px;}
  /* full-width white band behind the about + qualities sections;
     --surface keeps it a lifted panel rather than glare in dark mode */
  .band{background:var(--surface);}
  .band .wrap{padding-top:0;padding-bottom:88px;}

  /* ---------- shared header / menu ----------
     Markup is generated by build/build.js between the MENU markers.
     Edit data/site.js, then run: node build/build.js                */

  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }

  .site-head{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line);}
  .head-inner{
    max-width:1200px;margin:0 auto;padding:0 20px;
    min-height:68px;display:flex;align-items:center;gap:26px;
  }
  .logo{display:flex;align-items:center;flex:none;text-decoration:none;}
  .logo img{display:block;height:44px;width:auto;}
  /* the logo's wordmark is dark green, which disappears on a dark page, so in
     dark mode it sits on a light chip (box-sizing keeps the 44px height) */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .logo img{
      background:var(--cream);padding:5px 10px;border-radius:10px;
    }
  }
  :root[data-theme="dark"] .logo img{
    background:var(--cream);padding:5px 10px;border-radius:10px;
  }

  .nav-toggle{
    display:none;align-items:center;justify-content:center;
    width:42px;height:42px;flex:none;border:1px solid var(--line);border-radius:12px;
    background:transparent;color:var(--text);cursor:pointer;
  }
  .nav-toggle svg{width:20px;height:20px;}

  /* stretch the nav and its items to the full header height: otherwise the
     item is only ~36px tall inside a 68px bar, leaving a dead strip the
     mouse crosses on its way down to the panel, which closes it */
  .site-nav{margin-right:auto;align-self:stretch;display:flex;}
  .menu{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:2px;}
  /* position:relative so each dropdown opens under its own menu item, not full width */
  .menu > li{position:relative;display:flex;align-items:center;}
  .menu-link{
    display:inline-block;padding:10px 3px 10px 12px;text-decoration:none;
    color:var(--muted);font-size:14px;font-weight:600;transition:color .2s ease;
  }
  /* a plain item (no dropdown arrow) needs its right padding back */
  .menu > li:not(.has-mega) .menu-link{padding-right:12px;}
  .menu > li:hover .menu-link,
  .menu > li.is-trail .menu-link{color:var(--text);}
  .menu-arrow{
    display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:36px;padding:0;border:0;background:transparent;
    color:var(--muted);cursor:pointer;
  }
  .menu-arrow svg{width:14px;height:14px;transition:transform .25s ease;}
  .menu > li.open .menu-arrow svg{transform:rotate(180deg);}
  .menu > li.is-trail .menu-arrow{color:var(--text);}

  .mega{
    position:absolute;left:0;right:auto;top:100%;z-index:60;width:700px;
    background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px;
    box-shadow:0 22px 44px rgba(15,44,34,.2);
    max-height:calc(100vh - 68px);overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
    /* the .35s delay applies on the way OUT only - the open rules below reset
       it to 0 - so clipping a corner of the panel does not dismiss it */
    transition:opacity .18s ease .35s, transform .22s ease .35s, visibility .18s .35s;
  }
  .menu > li.open .mega{
    opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s;
  }
  @media (hover:hover) and (min-width:981px){
    .menu > li:hover .mega,
    .menu > li:focus-within .mega{
      opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s;
    }
  }

  /* Two-tier panel: regions down the left, and only the region being pointed
     at shows its towns on the right. --regw ties the left column width to
     where the towns pane starts. */
  .mega-inner{position:relative;margin:0;padding:18px 18px 14px;--regw:236px;}
  .mega-regions{list-style:none;margin:0;padding:0;width:var(--regw);}
  .mega-regions > li{position:static;}
  .mega-region{
    display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;
    text-decoration:none;color:var(--text);font-size:13.5px;font-weight:600;
    transition:background .15s ease, color .15s ease;
  }
  .mega-regions > li:hover .mega-region,
  .mega-regions > li:focus-within .mega-region,
  .mega-region.is-trail{background:var(--card-tint);color:var(--gold-dark);}
  .mega-n{
    margin-left:auto;flex:none;font-size:10.5px;font-weight:700;letter-spacing:0;
    color:var(--muted);background:var(--bg);border-radius:999px;padding:2px 8px;
  }

  /* The pane butts straight onto the region column (the gap is padding, not a
     dead offset) and fills the panel's full height, so moving right from any
     row always lands on it rather than on bare panel. */
  .mega-cities{
    position:absolute;top:18px;bottom:44px;left:calc(var(--regw) + 14px);right:18px;padding-left:26px;
    opacity:0;visibility:hidden;transition:opacity .15s ease;
  }
  /* the first region shows by default, until the list is actually pointed at */
  .mega-regions:not(:hover):not(:focus-within) > li:first-child .mega-cities,
  .mega-regions > li:hover .mega-cities,
  .mega-regions > li:focus-within .mega-cities{opacity:1;visibility:visible;}
  .mega-cities-head{
    display:flex;align-items:center;gap:12px;margin:0 0 12px;padding-bottom:10px;
    border-bottom:1px solid var(--line);
    font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text);
  }
  .mega-cities-head a{
    margin-left:auto;flex:none;font-size:11.5px;font-weight:700;letter-spacing:0;
    text-transform:none;color:var(--gold-dark);text-decoration:none;
  }
  .mega-cities-head a:hover{text-decoration:underline;}
  /* hover opens the pane on desktop, so the per-region arrow is mobile-only */
  .mega-arrow{display:none;}
  .mega-cities ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:1px 16px;}
  .mega-cities ul a{display:block;padding:4px 0;text-decoration:none;color:var(--muted);font-size:13px;line-height:1.45;}
  .mega-cities ul a:hover{color:var(--text);}
  .mega-cities ul a.is-here{color:var(--gold-dark);font-weight:600;}

  .mega-foot{
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding-top:16px;border-top:1px solid var(--line);
  }
  .mega-all{color:var(--text);font-size:13px;font-weight:600;text-decoration:none;}
  .mega-all:hover{color:var(--gold-dark);}
  .mega-call{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--gold-dark);font-size:14px;font-weight:700;}
  .mega-call svg{width:15px;height:15px;}

  .nav-call{
    display:inline-flex;align-items:center;gap:9px;text-decoration:none;flex:none;
    background:var(--navy);color:var(--cream);font-weight:600;font-size:14px;
    padding:11px 20px;border-radius:999px;box-shadow:0 10px 22px rgba(15,44,34,.3);
    transition:transform .2s ease, background .2s ease;
  }
  .nav-call:hover{background:var(--navy-dark);transform:translateY(-2px);}
  .nav-call svg{width:16px;height:16px;}

  /* ---------- hero ---------- */
  .hero{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:46px;align-items:center;padding-top:42px;}

  .status{
    display:inline-flex;align-items:center;gap:9px;background:var(--navy);color:var(--cream);
    font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
    padding:9px 16px;border-radius:999px;margin-bottom:22px;
  }
  .status i{width:8px;height:8px;border-radius:50%;background:var(--gold-light);animation:pulse 1.8s infinite;}
  .status b{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.06em;}
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(236,163,60,.8);}
    70%{box-shadow:0 0 0 11px rgba(236,163,60,0);}
    100%{box-shadow:0 0 0 0 rgba(236,163,60,0);}
  }

  h1{font-size:clamp(38px,5vw,60px);line-height:1.02;letter-spacing:-.035em;font-weight:800;margin:0 0 18px;}
  h1 em{font-style:normal;color:var(--gold);}
  .lead{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0 0 28px;max-width:36ch;}

  .call-big{
    display:inline-flex;align-items:center;gap:14px;text-decoration:none;
    background:linear-gradient(130deg,var(--gold-light),var(--gold-dark));
    color:var(--navy-dark);padding:14px 26px 14px 16px;border-radius:999px;
    box-shadow:0 16px 32px rgba(236,163,60,.42);
    transition:transform .22s ease, box-shadow .22s ease;
  }
  .call-big:hover{transform:translateY(-3px);box-shadow:0 22px 40px rgba(236,163,60,.52);}
  .call-big .ic{
    width:44px;height:44px;border-radius:50%;background:var(--cream);
    display:flex;align-items:center;justify-content:center;flex:none;
  }
  .call-big .ic svg{width:21px;height:21px;color:var(--navy-dark);}
  .call-big small{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.78;}
  .call-big b{display:block;font-size:21px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}

  .points{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px;}
  .points li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--text);}
  .points svg{width:16px;height:16px;flex:none;color:var(--sage-dark);}

  /* ---------- cards ---------- */
  .cards{display:flex;gap:14px;height:460px;min-width:0;}
  .card{
    position:relative;overflow:hidden;border-radius:26px;cursor:pointer;
    flex:1 1 0%;transition:flex-grow .6s cubic-bezier(.22,.9,.26,1), box-shadow .35s ease;
    box-shadow:var(--shadow);color:#fff;isolation:isolate;outline:none;
  }
  .card.active{flex-grow:3.4;}
  .card:focus-visible{box-shadow:0 0 0 3px var(--gold), var(--shadow);}
  .card .bg{
    position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;
    object-fit:cover;object-position:center;background:var(--navy-dark);
    transition:transform .6s cubic-bezier(.22,.9,.26,1);
  }
  .card.active .bg{transform:scale(1.05);}
  /* focal point per photo, so the narrow (inactive) crop keeps the worker in frame */
  #electrician .bg{object-position:64% center;}
  #plumber .bg{object-position:46% center;}
  #locksmith .bg{object-position:42% center;}
  .card .veil{position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.38) 42%,rgba(0,0,0,.86) 100%);}

  .v-label{
    position:absolute;left:0;right:0;bottom:24px;display:flex;justify-content:center;
    writing-mode:vertical-rl;transform:rotate(180deg);
    font-weight:700;font-size:17px;text-shadow:0 2px 10px rgba(0,0,0,.45);
    transition:opacity .25s ease;
  }
  .card.active .v-label{opacity:0;}

  .tag{
    position:absolute;top:18px;left:18px;background:rgba(255,255,255,.93);color:var(--navy-dark);
    font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
    padding:6px 12px;border-radius:999px;opacity:0;transition:opacity .3s ease .2s;
  }
  .card.active .tag{opacity:1;}

  .panel{
    position:absolute;left:0;right:0;bottom:0;padding:24px;
    opacity:0;transform:translateY(14px);
    transition:opacity .35s ease .16s, transform .45s ease .16s;
  }
  .card:not(.active) .panel{pointer-events:none;}
  .card.active .panel{opacity:1;transform:none;}
  .panel h3{margin:0 0 5px;font-size:23px;letter-spacing:-.02em;}
  .panel p{margin:0 0 16px;font-size:13px;line-height:1.5;opacity:.88;max-width:32ch;}
  .panel .row{display:flex;align-items:center;justify-content:space-between;gap:14px;}
  .card-call{
    display:inline-flex;align-items:center;gap:9px;text-decoration:none;
    background:var(--cream);color:var(--navy-dark);font-weight:700;font-size:13.5px;
    padding:11px 20px;border-radius:999px;white-space:nowrap;
    transition:transform .2s ease, background .2s ease;
  }
  .card-call:hover{transform:translateY(-2px);background:var(--gold-light);}
  .card-call svg{width:15px;height:15px;}
  .count{text-align:right;line-height:1.05;flex:none;}
  .count b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;}
  .count small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.82;}

  /* ---------- qualities ---------- */
  .qualities{
    display:grid;grid-template-columns:minmax(250px,340px) 1fr;gap:56px;
    align-items:center;padding-top:80px;
  }
  .q-eyebrow{
    display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;
    font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark);
  }
  .q-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--gold);}
  .qualities h2{font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin:0 0 14px;}
  .qualities h2 em{font-style:normal;color:var(--gold);}
  .q-lead{color:var(--muted);font-size:15px;line-height:1.6;margin:0;max-width:34ch;}

  /* --step drives both the staircase offset and the length of the
     dashed elbow, so one value keeps them lined up at every width */
  .q-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:30px;--step:180px;}
  .q-item{position:relative;display:flex;align-items:flex-start;gap:20px;}
  .q-item:nth-child(2){margin-left:var(--step);}
  .q-item:nth-child(3){margin-left:calc(var(--step) * 2);}
  .q-item:not(:last-child)::after{
    content:"";position:absolute;left:31px;top:72px;bottom:-30px;width:var(--step);
    border-left:2px dashed var(--line);border-bottom:2px dashed var(--line);
    border-radius:0 0 0 26px;pointer-events:none;
  }
  .q-ic{
    width:62px;height:62px;flex:none;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 24px rgba(15,44,34,.12);
  }
  .q-ic svg{width:26px;height:26px;}
  .q-item:nth-child(1) .q-ic{background:var(--q1bg);color:var(--q1);}
  .q-item:nth-child(2) .q-ic{background:var(--q2bg);color:var(--q2);}
  .q-item:nth-child(3) .q-ic{background:var(--q3bg);color:var(--q3);}
  .q-item h3{margin:7px 0 6px;font-size:17px;font-weight:700;letter-spacing:-.02em;}
  .q-item p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6;max-width:38ch;}

  /* ---------- about ---------- */
  .about{
    display:grid;grid-template-columns:minmax(240px,400px) 1fr;gap:58px;
    align-items:center;padding-top:88px;
  }
  .about-media{position:relative;margin:0;}
  /* alternate framing, for when a page shows the same photo twice */
  .about-media img.low{object-position:50% 68%;}
  .about-media img{
    display:block;width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;object-position:50% 32%;
    border-radius:26px;box-shadow:var(--shadow);background:var(--navy-dark);
  }
  /* echoes the 24h badge on the hero cards */
  .about-chip{
    position:absolute;right:-14px;bottom:26px;text-align:center;line-height:1.05;
    background:var(--cream);color:var(--navy-dark);
    padding:14px 20px;border-radius:18px;box-shadow:0 14px 30px rgba(15,44,34,.26);
  }
  .about-chip b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;}
  .about-chip small{font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;opacity:.75;}

  .about-text h2{font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin:0 0 18px;}
  .about-text h2 em{font-style:normal;color:var(--gold);}
  .about-text p{color:var(--muted);font-size:14.5px;line-height:1.75;margin:0 0 16px;max-width:64ch;}
  .about-text .about-last{color:var(--text);font-weight:600;}
  /* inline "call us" links inside body copy, matching .hoods-note / .areas-note */
  .about-text a,.detail-lead a,.detail-grid a{color:var(--gold-dark);font-weight:700;text-decoration:none;}
  .about-text a:hover,.detail-lead a:hover,.detail-grid a:hover{text-decoration:underline;}
  .about-cta{margin-top:8px;}

  /* ---------- services ---------- */
  .services{padding-top:50px;}
  .services-head{margin:0 0 44px;}
  .services-head h2{font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin:0 0 12px;}
  .services-head h2 em{font-style:normal;color:var(--gold);}
  .services-head p{color:var(--muted);font-size:15px;line-height:1.6;margin:0;max-width:52ch;}

  .svc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;}
  /* --c ribbon + numeral, --cd the darker fold, --ct text on the ribbon */
  .svc:nth-child(1){--c:var(--gold);      --cd:var(--gold-dark); --ct:var(--navy-dark);}
  .svc:nth-child(2){--c:var(--sage-dark); --cd:#3A5230;          --ct:#FFFFFF;}
  .svc:nth-child(3){--c:var(--navy);      --cd:var(--navy-dark); --ct:var(--cream);}
  /* flex chain so all three cards match the tallest and the links line up */
  .svc{position:relative;padding:34px 0 0 54px;display:flex;flex-direction:column;}
  .svc-num{
    position:absolute;left:0;top:0;z-index:0;
    font-size:124px;line-height:.78;font-weight:800;letter-spacing:-.07em;
    color:var(--c);-webkit-user-select:none;user-select:none;
  }
  .svc-card{
    position:relative;z-index:1;background:var(--surface);
    border-radius:12px;box-shadow:0 16px 34px rgba(15,44,34,.16);padding-bottom:22px;
    flex:1;display:flex;flex-direction:column;
  }
  /* overhangs the card on the right, with a folded tab tucked underneath */
  .svc-ribbon{
    position:relative;margin:0 -18px 18px 22px;padding:12px 18px;
    background:var(--c);color:var(--ct);border-radius:3px 3px 0 0;
    font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  }
  .svc-ribbon::after{
    content:"";position:absolute;top:100%;right:0;width:0;height:0;
    border-left:18px solid var(--cd);border-bottom:13px solid transparent;
  }
  .svc-body{padding:0 22px;flex:1;}
  .svc-body p{margin:0 0 18px;color:var(--muted);font-size:13.5px;line-height:1.65;}
  .svc-foot{margin:0 22px;padding-top:14px;border-top:1px dashed var(--line);}
  .svc-more{
    display:inline-flex;align-items:center;gap:8px;text-decoration:none;
    color:var(--text);font-size:12.5px;font-weight:700;letter-spacing:.01em;
  }
  .svc-more svg{width:14px;height:14px;color:var(--c);transition:transform .2s ease;}
  .svc-more:hover svg{transform:translateX(4px);}

  /* ---------- how we work ---------- */
  .how{position:relative;padding-top:78px;}
  .how-head{max-width:42ch;margin:0;}
  .how-head h2{font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin:0 0 12px;}
  .how-head h2 em{font-style:normal;color:var(--gold);}
  .how-head p{color:var(--muted);font-size:15px;line-height:1.6;margin:0;max-width:44ch;}

  .how-list{
    list-style:none;margin:46px 0 0;padding:0;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;align-items:start;
  }
  .step{position:relative;}
  .step:nth-child(1){--c:var(--q1);}
  .step:nth-child(2){--c:var(--q2);}
  .step:nth-child(3){--c:var(--q3);}
  /* dashed run from one illustration across to the next, with an arrow head.
     74px is the centre line of the 148px illustration */
  .step:not(:last-child)::after{
    content:"";position:absolute;top:74px;left:164px;width:calc(100% - 130px);
    border-top:2px dashed var(--gold);opacity:.55;
  }
  .step:not(:last-child)::before{
    content:"";position:absolute;top:74px;left:calc(100% + 20px);width:9px;height:9px;
    border-top:2px solid var(--gold);border-right:2px solid var(--gold);
    transform:translateY(-50%) rotate(45deg);opacity:.55;
  }
  .step-art{position:relative;width:148px;height:148px;margin:0 0 24px;}
  .step-art svg{display:block;width:100%;height:100%;}
  .step-n{
    position:absolute;left:-10px;bottom:-10px;
    width:44px;height:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--c);color:var(--surface);font-size:17px;font-weight:800;
    border:3px solid var(--surface);box-shadow:0 8px 18px rgba(15,44,34,.22);
  }
  .step h3{margin:0 0 9px;font-size:17px;font-weight:700;letter-spacing:-.02em;}
  .step p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.65;max-width:34ch;}

  /* ---------- coverage ----------
     Generated between the AREAS markers - see build/build.js */
  .areas{padding-top:62px;text-align:center;}
  .cov-eyebrow{
    margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:var(--gold-dark);
  }
  .areas h2{font-size:clamp(28px,3.4vw,42px);line-height:1.08;letter-spacing:-.03em;font-weight:800;margin:0 0 26px;}
  .areas h2 em{font-style:normal;color:var(--gold);}

  /* --svc is the accent for the trade on show: it tints the active tab and
     every pin, so switching service is visible, not just a moved pill.
     An unlisted service slug falls back to the gold of the first one. */
  .cov{--svc:var(--q1);}
  .cov[data-service="plumber"]{--svc:var(--q2);}
  .cov[data-service="locksmith"]{--svc:var(--q3);}

  /* service switcher - flips every city link to that trade */
  .cov-tabs{
    display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:5px;margin:0 0 18px;
    background:var(--card-tint);border-radius:999px;
  }
  .cov-tab{
    display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
    background:transparent;color:var(--muted);font-family:inherit;font-size:13.5px;font-weight:600;
    padding:10px 20px;border-radius:999px;transition:background .2s ease, color .2s ease;
  }
  .cov-tab svg{width:16px;height:16px;}
  .cov-tab:hover{color:var(--text);}
  .cov-tab.is-on{background:var(--svc);color:var(--surface);font-weight:700;}
  .cov-note{margin:0 0 34px;color:var(--muted);font-size:14px;}
  .cov-note b{color:var(--svc);}

  .cov-grid{
    list-style:none;margin:0;padding:0;text-align:left;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  }
  .cov-card{background:var(--card-tint);border-radius:16px;padding:22px 22px 24px;}
  .cov-head{display:flex;align-items:center;gap:12px;margin:0 0 14px;}
  .cov-pin{
    width:38px;height:38px;flex:none;border-radius:11px;background:var(--svc);
    display:flex;align-items:center;justify-content:center;color:var(--surface);
    transition:background .35s ease;
  }
  .cov-pin svg{width:19px;height:19px;}
  .cov-head h3{margin:0;font-size:15.5px;font-weight:700;letter-spacing:-.01em;}
  .cov-n{
    margin-left:auto;flex:none;min-width:28px;height:28px;padding:0 8px;border-radius:999px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--text);color:var(--bg);font-size:12px;font-weight:700;
  }
  .cov-cities{margin:0;font-size:13.5px;line-height:2;}
  .cov-cities a{color:var(--muted);text-decoration:none;transition:color .15s ease;}
  .cov-cities a:hover{color:var(--gold-dark);text-decoration:underline;}
  .cov-item{white-space:nowrap;}
  .cov-sep{color:var(--line);margin-left:6px;}

  /* switching service: js drops .is-swap on for one frame, which hides the
     grid with no transition, then removing it animates everything back in */
  .cov-card,.cov-note{transition:opacity .42s ease, transform .42s ease;}
  .cov.is-swap .cov-card,
  .cov.is-swap .cov-note{opacity:0;transform:translateY(14px);transition:none;}
  .cov-grid > :nth-child(1){transition-delay:0ms;}
  .cov-grid > :nth-child(2){transition-delay:45ms;}
  .cov-grid > :nth-child(3){transition-delay:90ms;}
  .cov-grid > :nth-child(4){transition-delay:135ms;}
  .cov-grid > :nth-child(5){transition-delay:180ms;}
  .cov-grid > :nth-child(6){transition-delay:225ms;}
  .cov-grid > :nth-child(7){transition-delay:270ms;}
  .cov-grid > :nth-child(8){transition-delay:315ms;}
  .cov-grid > :nth-child(9){transition-delay:360ms;}
  @media (prefers-reduced-motion:reduce){
    .cov-card,.cov-note,.cov-pin{transition:none;}
    .cov-grid > *{transition-delay:0ms;}
  }
  /* a coverage grid used on its own, away from the service switcher: it has to
     supply its own --svc, or .cov-pin loses its background entirely */
  .cov-plain{--svc:var(--q1);}
  .cov-plain .cov-cities{color:var(--muted);line-height:1.95;}

  .areas-note{margin:30px 0 0;color:var(--muted);font-size:13.5px;line-height:1.6;}
  .areas-note a{color:var(--gold-dark);font-weight:700;text-decoration:none;}
  .areas-note a:hover{text-decoration:underline;}

  /* ---------- faq ----------
     Native <details>, so it opens with no JS and stays keyboard accessible.
     name="faq" makes it an exclusive accordion where supported; where it is
     not, several simply open at once. */
  .faq{
    display:grid;grid-template-columns:minmax(250px,340px) 1fr;gap:56px;
    align-items:start;padding-top:84px;
  }
  .faq-intro h2{font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin:0 0 12px;}
  .faq-intro h2 em{font-style:normal;color:var(--gold);}
  .faq-intro p{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 22px;max-width:34ch;}

  .faq-list{display:flex;flex-direction:column;gap:12px;}
  .faq-item{background:var(--surface);border-radius:14px;box-shadow:0 8px 20px rgba(15,44,34,.07);}
  .faq-item summary{
    display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
    padding:18px 20px;font-size:15px;font-weight:600;color:var(--text);
    border-radius:14px;transition:color .2s ease;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary:hover{color:var(--gold-dark);}
  .faq-item summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
  .faq-ic{
    margin-left:auto;flex:none;width:27px;height:27px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--card-tint);color:var(--text);
    transition:transform .25s ease, background .25s ease, color .25s ease;
  }
  .faq-ic svg{width:13px;height:13px;}
  .faq-item[open] summary{color:var(--gold-dark);}
  .faq-item[open] .faq-ic{transform:rotate(180deg);background:var(--gold);color:var(--navy-dark);}
  /* details cannot transition its own height, so the answer fades in instead */
  .faq-a{padding:0 20px 20px;animation:faqIn .28s ease;}
  .faq-a p{margin:0;color:var(--muted);font-size:14px;line-height:1.7;max-width:62ch;}
  .faq-a a{color:var(--gold-dark);font-weight:600;}
  @keyframes faqIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
  @media (prefers-reduced-motion:reduce){
    .faq-a{animation:none;}
    .faq-ic{transition:none;}
  }

  /* ---------- inner page head ---------- */
  .crumbs{font-size:12.5px;color:var(--muted);margin:0 0 20px;}
  .crumbs a{color:var(--muted);text-decoration:none;}
  .crumbs a:hover{color:var(--text);text-decoration:underline;}
  .crumbs span{color:var(--text);font-weight:600;}
  .crumbs i{font-style:normal;margin:0 8px;opacity:.5;}

  .page-head{padding-top:46px;}
  .page-head h1{font-size:clamp(32px,4.4vw,50px);margin:0 0 16px;}
  .page-head .lead{max-width:62ch;margin:0 0 28px;}

  .stats{
    list-style:none;margin:44px 0 0;padding:0;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
  }
  .stats li{background:var(--card-tint);border-radius:14px;padding:20px 22px;}
  .stats b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:7px;}
  .stats small{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}

  /* ---------- service landing page ---------- */
  .svc-hero{
    display:grid;grid-template-columns:1fr minmax(250px,400px);gap:54px;
    align-items:center;padding-top:38px;
  }
  .svc-hero h1{font-size:clamp(32px,4.4vw,52px);margin:0 0 16px;}
  .svc-hero .lead{max-width:54ch;margin:0 0 28px;}
  .svc-hero .points{margin-top:26px;}
  .svc-hero-media{position:relative;margin:0;}
  .svc-hero-media img{
    display:block;width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;object-position:64% 28%;
    border-radius:26px;box-shadow:var(--shadow);background:var(--navy-dark);
  }

  /* grid of the faults this trade gets called out for */
  .fixes{padding-top:62px;}
  .fix-list{
    list-style:none;margin:34px 0 0;padding:0;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  }
  .fix{background:var(--card-tint);border-radius:14px;padding:20px 20px 22px;}
  .fix-ic{
    width:36px;height:36px;border-radius:10px;margin:0 0 13px;
    background:var(--gold);color:var(--navy-dark);
    display:flex;align-items:center;justify-content:center;
  }
  .fix-ic svg{width:18px;height:18px;}
  .fix h3{margin:0 0 6px;font-size:14.5px;font-weight:700;letter-spacing:-.01em;}
  .fix p{margin:0;color:var(--muted);font-size:13px;line-height:1.55;}

  /* 5-up variant: ten services land as two even rows. Cards are ~215px wide
     here, so the padding and type step down to stop them feeling cramped. */
  .fix-list--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}
  .fix-list--5 .fix{padding:16px 16px 18px;}
  .fix-list--5 .fix-ic{width:32px;height:32px;border-radius:9px;margin-bottom:11px;}
  .fix-list--5 .fix-ic svg{width:16px;height:16px;}
  .fix-list--5 .fix h3{font-size:13.5px;margin-bottom:5px;}
  .fix-list--5 .fix p{font-size:12.5px;line-height:1.5;}
  /* five columns need the width; fall back before the shared breakpoints */
  @media (max-width:1150px){
    .fix-list--5{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
    .hoods{grid-template-columns:repeat(4,minmax(0,1fr));}
  }

  /* reusable two-column section: heading on the left, content on the right */
  .split{
    display:grid;grid-template-columns:minmax(250px,340px) 1fr;gap:56px;
    align-items:start;padding-top:70px;
  }
  .split h2,.fixes h2{font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin:0 0 12px;}
  .split h2 em,.fixes h2 em{font-style:normal;color:var(--gold);}
  .split-intro p{color:var(--muted);font-size:15px;line-height:1.6;margin:0;max-width:34ch;}

  .checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
  .checks li{display:flex;gap:15px;align-items:flex-start;}
  .checks .n{
    flex:none;width:29px;height:29px;border-radius:50%;
    background:var(--q1bg);color:var(--q1);
    display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
  }
  .checks b{display:block;font-size:14.5px;margin-bottom:4px;}
  .checks p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6;max-width:58ch;}

  /* ---------- A-Z town directory (areas page) ----------
     Generated between the AZINDEX markers - see build/build.js  */
  .areas-hero{
    display:grid;grid-template-columns:1fr minmax(240px,330px);gap:50px;
    align-items:center;padding-top:44px;
  }
  .areas-hero h1{font-size:clamp(32px,4.4vw,50px);margin:0 0 16px;}
  .areas-hero .lead{max-width:56ch;margin:0 0 28px;}
  .areas-hero .stats{margin:0;}
  .stats--2{grid-template-columns:repeat(2,minmax(0,1fr));}

  /* .areas centres its own heading, which the directory must not inherit */
  .az{--svc:var(--q1);padding-top:8px;text-align:left;}
  .az[data-service="plumber"]{--svc:var(--q2);}
  .az[data-service="locksmith"]{--svc:var(--q3);}

  .az-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:0 0 16px;}
  .az-search{position:relative;flex:1 1 260px;max-width:400px;display:block;}
  .az-search svg{
    position:absolute;left:15px;top:50%;transform:translateY(-50%);
    width:16px;height:16px;color:var(--muted);pointer-events:none;
  }
  .az-search input{
    width:100%;font-family:inherit;font-size:14px;color:var(--text);
    background:var(--card-tint);border:1px solid transparent;border-radius:999px;
    padding:12px 18px 12px 42px;
  }
  .az-search input::placeholder{color:var(--muted);}
  .az-search input:focus{outline:none;border-color:var(--svc);background:var(--surface);}

  .az-services{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--card-tint);border-radius:999px;}
  .az-svc{
    display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;background:transparent;
    color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;
    padding:9px 16px;border-radius:999px;transition:background .2s ease, color .2s ease;
  }
  .az-svc svg{width:15px;height:15px;}
  .az-svc:hover{color:var(--text);}
  .az-svc.is-on{background:var(--svc);color:var(--surface);font-weight:700;}

  .az-count{margin:0 0 16px;font-size:13.5px;color:var(--muted);}
  .az-count b{color:var(--text);}
  .az-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;padding:0 0 20px;border-bottom:1px solid var(--line);}
  .az-nav a{
    min-width:31px;text-align:center;padding:5px 8px;border-radius:8px;text-decoration:none;
    font-size:12.5px;font-weight:700;color:var(--muted);background:var(--card-tint);
    transition:background .15s ease, color .15s ease;
  }
  .az-nav a:hover{background:var(--svc);color:var(--surface);}

  .az-group{margin:0 0 26px;scroll-margin-top:92px;}
  .az-group h3{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--svc);}
  .az-group ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
  .az-group a{
    display:block;padding:11px 14px;border-radius:11px;text-decoration:none;
    background:var(--card-tint);transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .az-group a:hover{background:var(--surface);transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,44,34,.12);}
  .az-group b{display:block;font-size:13.5px;font-weight:700;color:var(--text);}
  .az-group small{display:block;margin-top:2px;font-size:11px;color:var(--muted);}
  .az-empty{margin:4px 0 0;font-size:14px;color:var(--muted);}
  .az-empty a{color:var(--svc);font-weight:700;text-decoration:none;}

  /* ---------- region landing page ----------
     Generated between the REGION markers - see build/build.js  */
  .rg section + section{margin-top:52px;}
  .rg h2{font-size:clamp(24px,2.8vw,34px);line-height:1.12;letter-spacing:-.03em;font-weight:800;margin:0 0 22px;}
  .rg h2 em{font-style:normal;color:var(--gold);}

  .rg-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
  .rg-list a{
    display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:14px;
    background:var(--card-tint);text-decoration:none;
    transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .rg-list a:hover{background:var(--surface);transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,44,34,.12);}
  .rg-list b{display:block;font-size:15.5px;font-weight:700;color:var(--text);}
  .rg-list small{display:block;margin-top:2px;font-size:12px;color:var(--muted);}
  .rg-list svg{width:16px;height:16px;flex:none;margin-left:auto;color:var(--gold-dark);transition:transform .2s ease;}
  .rg-list a:hover svg{transform:translateX(3px);}

  .rg-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px;}
  .rg-pills a{
    display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
    border:1px solid var(--line);text-decoration:none;color:var(--text);font-size:13px;font-weight:600;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .rg-pills a:hover{background:var(--text);color:var(--bg);border-color:var(--text);}
  .rg-pills svg{width:14px;height:14px;}

  /* the way back up from a town page to its region */
  .rg-back{display:flex;align-items:center;gap:8px;margin:20px 0 0;font-size:13.5px;font-weight:700;}
  .rg-back a{color:var(--gold-dark);text-decoration:none;}
  .rg-back a:hover{text-decoration:underline;}
  .rg-back svg{width:15px;height:15px;color:var(--gold-dark);transition:transform .2s ease;}
  .rg-back:hover svg{transform:translateX(3px);}

  /* ---------- city landing page ----------
     the neighbourhoods and postcodes inside one town. Name on the left,
     postcode on the right, so the right-hand edge reads as a column */
  .hoods{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;
  }
  .hoods li{
    display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    padding:13px 15px;border-radius:12px;background:var(--card-tint);
  }
  .hoods b{font-size:13.5px;font-weight:700;letter-spacing:-.01em;}
  .hoods span{
    font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--gold-dark);
    font-variant-numeric:tabular-nums;flex:none;
  }
  /* ---------- detailed information ----------
     long-form copy on a town page. A lead, then short titled blocks two
     across, so it reads as answers rather than as a wall of text */
  .detail{padding-top:62px;}
  .detail h2{font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin:0 0 14px;}
  .detail h2 em{font-style:normal;color:var(--gold);}
  .detail-lead{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 36px;max-width:68ch;}
  /* with no lead paragraph the heading would sit right on top of the grid */
  .detail h2 + .detail-grid{margin-top:32px;}
  /* flowing prose, used where the copy is supplied as paragraphs */
  .detail-copy p{color:var(--muted);font-size:15px;line-height:1.85;margin:0 0 22px;max-width:76ch;}
  .detail-copy p:last-child{margin-bottom:0;}
  .detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 48px;}
  .detail-grid h3,.detail-copy h3{
    margin:0 0 9px;font-size:15px;font-weight:700;letter-spacing:-.01em;
    display:flex;align-items:center;gap:9px;
  }
  .detail-grid h3::before,.detail-copy h3::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--gold);flex:none;}
  .detail-copy p + h3{margin-top:30px;}
  .detail-grid p{margin:0;color:var(--muted);font-size:14px;line-height:1.75;}

  .hoods-note{margin:20px 0 0;color:var(--muted);font-size:13.5px;line-height:1.65;max-width:62ch;}
  /* a footnote to the whole detail section, not to the column above it */
  .detail .hoods-note{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);max-width:none;}
  .hoods-note a{color:var(--gold-dark);font-weight:700;text-decoration:none;}
  .hoods-note a:hover{text-decoration:underline;}

  /* ---------- closing call to action ----------
     --cta-bg is a touch lighter than the page in dark mode, so the band still
     reads as a band rather than merging into the background */
  .cta{background:var(--cta-bg);color:var(--cream);margin-top:20px;}
  .cta .wrap{padding-top:72px;padding-bottom:76px;}
  .cta-inner{max-width:720px;margin:0 auto;text-align:center;}
  .cta-pill{
    display:inline-flex;align-items:center;gap:9px;margin:0 0 22px;
    background:rgba(255,242,202,.13);color:var(--cream);
    font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
    padding:9px 16px;border-radius:999px;
  }
  .cta-pill i{width:8px;height:8px;border-radius:50%;background:var(--gold-light);animation:pulse 1.8s infinite;}
  .cta h2{font-size:clamp(30px,4vw,46px);line-height:1.05;letter-spacing:-.035em;font-weight:800;margin:0 0 14px;}
  .cta h2 em{font-style:normal;color:var(--gold);}
  .cta-lead{color:rgba(255,242,202,.78);font-size:15.5px;line-height:1.6;margin:0 auto 30px;max-width:46ch;}
  .cta-points{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;}
  .cta-points li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:rgba(255,242,202,.82);}
  .cta-points svg{width:16px;height:16px;flex:none;color:var(--gold-light);}

  @media (max-width:980px){
    .hero{grid-template-columns:1fr;gap:34px;padding-top:32px;}
    .about{grid-template-columns:1fr;gap:30px;padding-top:60px;}
    /* stacked, so the horizontal connectors no longer apply */
    .how{padding-top:56px;}
    .how-list{grid-template-columns:1fr;gap:28px;margin-top:34px;}
    .step:not(:last-child)::after,
    .step:not(:last-child)::before{display:none;}
    /* art beside the text rather than above it: the illustration spans both
       rows of a two-row grid, with the heading and copy stacked to its right */
    .step{
      display:grid;grid-template-columns:96px 1fr;column-gap:18px;align-items:start;
    }
    .step-art{grid-column:1;grid-row:1 / span 2;width:96px;height:96px;margin:0;}
    .step h3{grid-column:2;grid-row:1;margin-top:2px;}
    .step p{grid-column:2;grid-row:2;max-width:52ch;}
    .step-n{width:34px;height:34px;font-size:14px;left:-8px;bottom:-8px;border-width:2px;}
    .faq{grid-template-columns:1fr;gap:28px;padding-top:58px;}
    .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
    .page-head{padding-top:32px;}
    .areas-hero{grid-template-columns:1fr;gap:30px;padding-top:30px;}
    .rg-list{grid-template-columns:repeat(2,minmax(0,1fr));}
    .rg section + section{margin-top:40px;}
    .hoods{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
    .detail{padding-top:46px;}
    .detail-grid{grid-template-columns:1fr;gap:24px;}
    .az-group ul{grid-template-columns:repeat(3,minmax(0,1fr));}
    .az-bar{gap:12px;}
    .svc-hero{grid-template-columns:1fr;gap:30px;padding-top:10px;}
    .svc-hero-media{order:0;}
    .svc-hero-media img{aspect-ratio:16/10;object-position:64% 26%;}
    .fixes{padding-top:46px;}
    .fix-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
    .split{grid-template-columns:1fr;gap:26px;padding-top:50px;}
    .cov-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
    .svc-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;}
    .svc-num{font-size:104px;}
    .services-head{margin-bottom:34px;}
    .about-media img{aspect-ratio:16/10;object-position:50% 28%;}
    .about-chip{right:18px;bottom:18px;}
    .qualities{grid-template-columns:1fr;gap:30px;padding-top:100px;}
    .q-list{--step:36px;}
    .cards{height:340px;}
    .card.active{flex-grow:2.7;}
    .panel{padding:18px;}
    .panel h3{font-size:19px;}
    .count b{font-size:21px;}

    /* menu collapses into a toggled accordion */
    .nav-toggle{display:inline-flex;order:3;margin-left:auto;}
    .nav-call{order:2;margin-left:auto;}
    .site-nav{
      position:absolute;left:0;right:0;top:100%;margin:0;display:none;
      background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow);
      max-height:calc(100vh - 68px);overflow-y:auto;
    }
    .site-nav.open{display:block;}
    .menu{flex-direction:column;align-items:stretch;gap:0;padding:4px 0;}
    .menu > li{flex-wrap:wrap;padding:0 20px;border-top:1px solid var(--line);}
    .menu > li:first-child{border-top:0;}
    .menu-link{flex:1;padding:14px 0;font-size:15px;}
    .menu-arrow{width:44px;height:48px;}
    .mega{
      position:static;flex-basis:100%;display:none;background:transparent;
      box-shadow:none;border-bottom:0;max-height:none;overflow:visible;
      opacity:1;visibility:visible;transform:none;pointer-events:auto;
    }
    .menu > li.open .mega{display:block;}
    .mega-inner{padding:0 0 16px;}
    /* no room for a side-by-side pane on touch, so each region becomes a
       second accordion level: the label still links to the region page,
       the arrow expands its towns underneath */
    .mega-regions{width:auto;}
    .mega-regions > li{display:flex;flex-wrap:wrap;align-items:center;}
    .mega-region{flex:1;min-width:0;padding:12px 0;border-radius:0;}
    .mega-regions > li:hover .mega-region,
    .mega-regions > li:focus-within .mega-region{background:transparent;}
    .mega-arrow{
      display:inline-flex;align-items:center;justify-content:center;flex:none;
      width:42px;height:42px;padding:0;border:0;background:transparent;
      color:var(--muted);cursor:pointer;
    }
    .mega-arrow svg{width:13px;height:13px;transition:transform .25s ease;}
    .mega-regions > li.open .mega-arrow svg{transform:rotate(180deg);}
    .mega-cities{
      position:static;flex-basis:100%;display:none;
      opacity:1;visibility:visible;padding:0 0 14px;
    }
    .mega-regions > li.open .mega-cities{display:block;}
    .mega-cities-head{display:none;}
    .mega-cities ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;}
    .mega-cities ul a{padding:7px 0;}
    .step{grid-template-columns:76px 1fr;column-gap:14px;}
    .step-art{width:76px;height:76px;}
    .step-n{width:30px;height:30px;font-size:13px;left:-6px;bottom:-6px;}
  }
  @media (max-width:560px){
    .head-inner{gap:14px;min-height:60px;}
    .logo img{height:36px;}
    /* stay two-up on phones; cards are ~150px so the type, the padding and
       the arrow all step down to keep a two-word town on one line */
    .rg-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .rg-list a{padding:13px 13px;gap:8px;border-radius:12px;align-items:center;}
    .rg-list b{font-size:13px;line-height:1.25;}
    .rg-list small{margin-top:2px;font-size:10.5px;line-height:1.3;}
    .rg-list svg{width:13px;height:13px;}
    .az-group ul{grid-template-columns:repeat(2,minmax(0,1fr));}
    .hoods{grid-template-columns:repeat(2,minmax(0,1fr));}
    .hoods li{padding:11px 12px;}
    .hoods b{font-size:12.5px;}
    .hoods span{font-size:10px;}
    .az-search{max-width:none;}
    .az-services{width:100%;justify-content:center;}
    .fix-list,.fix-list--5{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .fix,.fix-list--5 .fix{padding:14px 14px 16px;}
    .fix-ic,.fix-list--5 .fix-ic{width:30px;height:30px;border-radius:8px;margin-bottom:10px;}
    .fix-ic svg,.fix-list--5 .fix-ic svg{width:15px;height:15px;}
    .fix h3,.fix-list--5 .fix h3{font-size:12.5px;margin-bottom:4px;}
    .fix p,.fix-list--5 .fix p{font-size:11.5px;line-height:1.5;}
    .nav-call{padding:10px 14px;}
    .nav-call-num{display:none;}
    .cards{height:320px;gap:10px;}
    .panel p{display:none;}
    .panel .row{flex-direction:column;align-items:flex-start;gap:10px;}
    .count{text-align:left;}
    .v-label{font-size:14px;}
    .call-big{width:100%;}
    /* no room to stagger - stack them with a straight dashed spine */
    .q-list{--step:0px;gap:26px;}
    .q-item:not(:last-child)::after{
      left:27px;top:64px;bottom:-26px;border-bottom:0;border-radius:0;
    }
    .q-ic{width:54px;height:54px;}
    .q-ic svg{width:23px;height:23px;}
    .svc-list{grid-template-columns:1fr;}
    .svc-num{font-size:96px;}
    .cov-grid{grid-template-columns:1fr;}
  }

  /* ---------- full photos on the electrician city pages ----------
     Each photo is shown whole, in its own proportions - nothing is cropped. The picture
     column is wider than the old 400px so a landscape shot is not small, and a tall photo
     is capped in height and sized by that. The 24h badge sits on the photo's own corner.
     Only pages that carry .photo-wide / .photo-full are affected. */
  .svc-hero.photo-wide{grid-template-columns:1fr minmax(300px,540px);gap:48px;}
  .about.photo-wide{grid-template-columns:minmax(300px,520px) 1fr;gap:52px;}
  .photo-full{width:fit-content;max-width:100%;}
  .svc-hero.photo-wide .photo-full{justify-self:end;}
  .about.photo-wide .photo-full{justify-self:start;}
  .svc-hero-media.photo-full img,
  .about-media.photo-full img{
    width:auto;max-width:100%;height:auto;max-height:540px;
    aspect-ratio:auto;object-fit:contain;
  }
  @media (max-width:980px){
    .svc-hero.photo-wide,
    .about.photo-wide{grid-template-columns:1fr;}
    .svc-hero.photo-wide .photo-full,
    .about.photo-wide .photo-full{justify-self:center;}
    /* on a phone the hero photo goes under the text (the base rule puts it first) */
    .svc-hero.photo-wide .svc-hero-media.photo-full{order:0;}
    .svc-hero-media.photo-full img,
    .about-media.photo-full img{max-height:420px;}
  }

  /* ---------- site footer ----------
     Generated by build/build.js between the FOOTER markers, on every page; the wording
     comes from the `footer` block in data/site.js. Three columns: the business (name,
     blurb, logo, hours), Explore, and Where we cover. A gold rule runs along the top, and the
     band is always the darkest green so it reads as the end of the page in either theme. */
  .site-foot{background:var(--navy-dark);color:var(--cream);border-top:6px solid var(--gold);}
  .foot-inner{max-width:1200px;margin:0 auto;padding:56px 20px 0;}
  .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:56px;align-items:start;}

  .foot-name{font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.01em;margin:0 0 14px;color:var(--cream);}
  .foot-blurb{color:rgba(255,242,202,.78);font-size:14.5px;line-height:1.7;margin:0 0 24px;max-width:46ch;}
  .foot-logo{
    display:inline-flex;background:var(--cream);padding:7px 14px;border-radius:12px;text-decoration:none;
  }
  .foot-logo img{display:block;height:46px;width:auto;}
  .foot-hours{color:rgba(255,242,202,.72);font-size:14px;line-height:1.5;margin:16px 0 0;}

  /* the optional "Find us on Google" button */
  .foot-google{
    display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:10px 20px 10px 12px;
    border:1px solid rgba(255,242,202,.16);border-radius:999px;background:rgba(255,242,202,.06);
    color:var(--cream);text-decoration:none;transition:background .2s ease,border-color .2s ease;
  }
  .foot-google:hover,.foot-google:focus-visible{background:rgba(255,242,202,.12);border-color:rgba(255,242,202,.32);}
  .foot-google svg{width:30px;height:30px;padding:5px;flex:none;background:#fff;border-radius:50%;}
  .foot-google span{display:flex;flex-direction:column;line-height:1.25;}
  .foot-google b{font-size:14px;font-weight:700;}
  .foot-google small{font-size:12px;color:rgba(255,242,202,.7);}

  .foot-title{
    font-size:15px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
    color:var(--cream);margin:2px 0 20px;
  }
  .foot-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
  /* the regions run in two columns, as in a five-and-four split */
  .foot-list.foot-cols{display:block;column-count:2;column-gap:32px;}
  .foot-list.foot-cols li{break-inside:avoid;margin:0 0 12px;}
  .foot-list a{
    color:rgba(255,242,202,.82);text-decoration:none;font-size:14.5px;font-weight:500;
    transition:color .2s ease;
  }
  .foot-list a:hover,
  .foot-list a:focus-visible,
  .foot-list a[aria-current="page"]{color:var(--gold-light);}
  .foot-list a:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:4px;}

  .foot-bar{
    margin-top:52px;padding:22px 0 calc(26px + env(safe-area-inset-bottom,0px));
    border-top:1px solid rgba(255,242,202,.14);
  }
  .foot-bar p{margin:0;font-size:13px;color:rgba(255,242,202,.6);}

  @media (max-width:980px){
    .foot-inner{padding-top:48px;}
    .foot-grid{grid-template-columns:1fr 1fr;gap:38px 32px;}
    .foot-brand{grid-column:1 / -1;}
  }
  @media (max-width:560px){
    .foot-grid{grid-template-columns:1fr;gap:32px;}
    .foot-bar{margin-top:40px;}
  }
  @media (max-width:380px){
    .foot-list.foot-cols{column-count:1;}
  }

  /* ---------- floating call button ----------
     Generated by build/build.js between the CALLBTN markers, on every page. A full-width bar
     fixed to the bottom of the screen, so a call is always one tap away; the number is the
     page's own. It shows on phones and tablets only - the width where the menu collapses to
     the burger button. On a desktop screen the header button is enough, so it is hidden. */
  .float-call{display:none;}
  @media (max-width:980px){
    .float-call{
      position:fixed;left:0;right:0;bottom:0;z-index:55;
      display:flex;align-items:center;justify-content:center;gap:14px;text-decoration:none;
      background:linear-gradient(130deg,var(--gold-light),var(--gold-dark));
      color:var(--navy-dark);
      padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));
      box-shadow:0 -10px 28px rgba(8,26,20,.3);
      transition:filter .2s ease;
    }
    .float-call:hover{filter:brightness(1.06);}
    .float-call:focus-visible{outline:3px solid var(--cream);outline-offset:-7px;}
    .float-call .ic{
      width:42px;height:42px;border-radius:50%;background:var(--cream);
      display:flex;align-items:center;justify-content:center;flex:none;
    }
    .float-call .ic svg{width:20px;height:20px;color:var(--navy-dark);}
    .float-call .txt{display:flex;align-items:center;gap:14px;line-height:1.15;}
    .float-call small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8;}
    .float-call b{font-size:22px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;}
    /* keep the end of the footer clear of the bar when scrolled to the very bottom */
    .foot-bar{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));}
  }
  @media (max-width:560px){
    .float-call{gap:12px;padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));}
    .float-call .ic{width:38px;height:38px;}
    .float-call .txt{flex-direction:column;align-items:flex-start;gap:1px;}
    .float-call small{font-size:10.5px;}
    .float-call b{font-size:19px;}
  }
  @media print{.float-call{display:none;}}

/* ---- contact page ---- */
.contact-card{width:100%;justify-self:end;background:var(--cta-bg);color:#FFF2CA;border-radius:22px;padding:28px 30px 12px;box-shadow:var(--shadow);}
.contact-card .cc-kicker{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);}
.contact-card .cc-num{display:block;margin:0 0 20px;font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.02em;color:#FFF2CA;text-decoration:none;}
.contact-card .cc-num:hover{color:var(--gold-light);}
.cc-row{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-top:1px solid rgba(255,242,202,.18);}
.cc-ic{flex:none;width:36px;height:36px;border-radius:10px;background:rgba(236,163,60,.2);color:var(--gold-light);display:grid;place-items:center;}
.cc-ic svg{width:18px;height:18px;}
.cc-row b{display:block;font-size:14px;font-weight:700;margin:0 0 2px;}
.cc-row span{display:block;font-size:13.5px;line-height:1.5;color:rgba(255,242,202,.78);}
.fix-call{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--q1);text-decoration:none;}
.fix-call:hover{text-decoration:underline;}
.fix-ic.num{font-weight:800;font-size:15px;}
.fix-list.fix-list--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
@media (max-width:980px){
  .fix-list.fix-list--3{grid-template-columns:1fr;}
  .contact-card{justify-self:stretch;}
}

/* ---- pricing page ---- */
.price-hero{padding:34px 0 6px;}
.price-hero h1{font-size:clamp(34px,4.6vw,56px);margin:0 0 6px;}
.price-sec{padding:34px 0 10px;}
.price-sec h2{margin:0 0 14px;}
.price-sec p{max-width:72ch;}
.price-regions{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:22px 0 26px;}
.price-regions li{background:var(--card-tint);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;}
.price-scroll{overflow-x:auto;border-radius:16px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);}
.price-table{border-collapse:collapse;width:100%;min-width:760px;font-size:14.5px;}
.price-table th,.price-table td{padding:14px 16px;text-align:center;}
.price-table th:first-child,.price-table td:first-child{text-align:left;}
.price-table thead th{background:var(--cta-bg);color:#FFF2CA;font-weight:700;font-size:13px;line-height:1.35;}
.price-table thead tr:first-child th{border-bottom:1px solid rgba(255,242,202,.2);}
.price-table tbody th{font-weight:600;color:var(--text);}
.price-table tbody tr:nth-child(even){background:var(--card-tint);}
.price-amt{font-weight:700;font-variant-numeric:tabular-nums;}
.price-notes{list-style:none;margin:18px 0 0;padding:0;font-size:13px;line-height:1.6;color:var(--muted);max-width:90ch;}
.price-notes li{margin:0 0 4px;}
.price-contact a{color:var(--q1);font-weight:700;}

/* header: keep every menu label on one line; tighten between 981px and 1180px */
.menu-link{white-space:nowrap;}
@media (min-width:981px) and (max-width:1180px){
  .menu{gap:0;}
  .menu-link{padding-left:9px;padding-right:9px;font-size:13.5px;}
  .menu > li:not(.has-mega) .menu-link{padding-right:9px;}
}
.faq-jump{margin-top:30px;}
.faq-jump a{color:inherit;text-decoration:none;display:block;margin:-7px -15px;padding:7px 15px;border-radius:999px;}
.faq-jump a:hover{background:var(--q1bg);}
.faq[id]{scroll-margin-top:90px;}
.price-hero .lead{max-width:62ch;margin:0 0 26px;}
@media (min-width:981px) and (max-width:1100px){
  .menu-link{padding-left:6px;padding-right:6px;font-size:13px;}
  .menu > li:not(.has-mega) .menu-link{padding-right:6px;}
  .nav-call{padding:10px 14px;font-size:13px;}
}

/* dropdowns: never wider than the space to the right of their menu item */
@media (min-width:981px){
  .menu > li:nth-child(1) .mega{max-width:calc(100vw - 200px);}
  .menu > li:nth-child(2) .mega{max-width:calc(100vw - 300px);}
  .menu > li:nth-child(3) .mega{max-width:calc(100vw - 400px);}
}
.legal .price-sec{padding:18px 0 4px;}
.legal .price-sec h2{font-size:clamp(20px,2.2vw,26px);}
.legal a{color:var(--q1);font-weight:600;}

/* privacy policy: contents list + cards instead of one long column */
.legal-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:36px;align-items:start;padding:18px 0 60px;}
.legal-toc{position:sticky;top:92px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 18px 14px;box-shadow:var(--shadow);}
.legal-toc-title{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--q1);}
.legal-toc ol{list-style:none;margin:0;padding:0;counter-reset:lt;}
.legal-toc li{counter-increment:lt;}
.legal-toc a{display:block;padding:6px 8px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;line-height:1.35;}
.legal-toc a::before{content:counter(lt) ". ";color:var(--q1);}
.legal-toc a:hover{background:var(--card-tint);color:var(--text);}
.legal-body{display:grid;gap:16px;}
.legal-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px 28px 14px;box-shadow:0 10px 24px rgba(15,44,34,.07);scroll-margin-top:92px;}
.legal-card h2{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:clamp(18px,2vw,22px);}
.legal-n{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--q1bg);color:var(--q1);font-size:14px;font-weight:800;}
.legal-card p{margin:0 0 14px;max-width:none;font-size:15px;line-height:1.7;}
.legal-card a{color:var(--q1);font-weight:600;}
@media (max-width:980px){
  .legal-layout{grid-template-columns:1fr;gap:20px;}
  .legal-toc{position:static;}
  .legal-card{padding:20px 20px 8px;}
}
.foot-bar{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;}
.foot-legal{font-size:13px;color:rgba(255,242,202,.6);text-decoration:none;}
.foot-legal:hover{color:var(--gold-light);text-decoration:underline;}
.foot-legal-links{display:inline-flex;gap:18px;flex-wrap:wrap;}
.legal-card h3{margin:18px 0 10px;font-size:16px;}
.legal-list{margin:0 0 14px;padding-left:20px;font-size:15px;line-height:1.7;}
.legal-list li{margin:0 0 6px;}
.cookie-table{min-width:900px;font-size:13px;}
.cookie-table td{text-align:left;vertical-align:top;line-height:1.5;padding:12px 14px;}
.cookie-table thead th{text-align:left;}
.legal-card .price-scroll{margin:6px 0 18px;box-shadow:none;}
.legal-body{min-width:0;grid-template-columns:minmax(0,1fr);}
.legal-card{min-width:0;}
.cookie-table{min-width:0;width:100%;table-layout:fixed;}
.cookie-table th:nth-child(1){width:13%;}
.cookie-table th:nth-child(2){width:20%;}
.cookie-table th:nth-child(3){width:37%;}
.cookie-table th:nth-child(4){width:22%;}
.cookie-table th:nth-child(5){width:8%;}
.cookie-table td{overflow-wrap:anywhere;}
@media (max-width:720px){.cookie-table{min-width:680px;}}
.legal-card .clause-sub{margin-left:28px;}
.legal-card h3{scroll-margin-top:92px;}

/* ---------- cookie banner ---------- */
.cookie-banner{position:fixed;left:16px;bottom:16px;z-index:1000;max-width:440px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;}
.cookie-banner[hidden]{display:none;}
.cb-title{margin:0 0 6px;font-weight:800;font-size:1.05rem;}
.cb-text{margin:0 0 14px;font-size:.92rem;line-height:1.5;color:var(--muted);}
.cb-text a{color:var(--gold-dark);font-weight:700;text-decoration:underline;}
.cb-actions{display:flex;gap:10px;flex-wrap:wrap;}
.cb-btn{flex:1 1 auto;cursor:pointer;font:inherit;font-weight:700;font-size:.92rem;padding:11px 16px;border-radius:999px;border:2px solid var(--gold);background:var(--gold);color:#0F2C22;}
.cb-btn:hover{background:var(--gold-light);}
.cb-btn--ghost{background:transparent;color:var(--text);border-color:var(--line);}
.cb-btn--ghost:hover{background:var(--card-tint);}
@media (max-width:560px){.cookie-banner{left:10px;right:10px;bottom:10px;max-width:none;}}

.cookie-fab{position:fixed;left:16px;bottom:16px;z-index:1000;width:52px;height:52px;border-radius:50%;border:2px solid var(--gold);background:var(--gold);color:#0F2C22;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow);padding:0;}
.cookie-fab[hidden]{display:none;}
.cookie-fab:hover{background:var(--gold-light);border-color:var(--gold-light);}
@media (max-width:760px){.cookie-fab{bottom:84px;left:12px;}.cookie-banner{bottom:84px;}}
@media print{.cookie-fab,.cookie-banner{display:none;}}

/* areas directory grouped by region */
.az-group h3{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;font-size:17px;letter-spacing:0;color:var(--text);}
.az-group h3 span{font-size:12px;font-weight:700;color:var(--muted);}
.az-group{padding-top:4px;}

/* hero call button - phone version: "Call Us" + number on one line, same style, same colours */
@media (max-width:760px){
  .hero .call-big > span:last-child,.svc-hero .call-big > span:last-child,.areas-hero .call-big > span:last-child{
    display:flex;align-items:center;gap:8px;white-space:nowrap;
  }
  .hero .call-big small,.svc-hero .call-big small,.areas-hero .call-big small{
    display:inline;margin:0;font-size:0;opacity:1;
  }
  .hero .call-big small::before,.svc-hero .call-big small::before,.areas-hero .call-big small::before{
    content:"Call Us";font-size:21px;font-weight:800;letter-spacing:-.01em;text-transform:none;
  }
  .hero .call-big b,.svc-hero .call-big b,.areas-hero .call-big b{display:inline;font-size:21px;}
}
/* a bit more room between the logo and the menu on wide screens */
@media (min-width:1181px){ .head-inner .site-nav{margin-left:34px;} }
@media (min-width:981px) and (max-width:1180px){ .head-inner .site-nav{margin-left:10px;} }

/* areas directory: make a trade switch obvious */
.az-svc{transition:background-color .25s ease,color .25s ease,transform .2s ease;}
.az-svc.is-on{transform:scale(1.03);}
.az-groups{transition:opacity .22s ease,transform .22s ease;}
.az.is-switching .az-groups{opacity:0;transform:translateY(10px);}
.az-count{transition:opacity .22s ease;}
.az.is-switching .az-count{opacity:.35;}
.az-tag{color:var(--svc);font-weight:700;letter-spacing:.02em;}
.az-group a{border-left:3px solid var(--svc);transition:background .2s ease,transform .2s ease,box-shadow .2s ease,border-color .35s ease;}
.az.just-switched .az-group li{animation:azIn .45s ease both;}
.az.just-switched .az-group li:nth-child(2n){animation-delay:.04s;}
.az.just-switched .az-group li:nth-child(3n){animation-delay:.08s;}
.az.just-switched .az-count b.az-now{animation:azPop .5s ease;}
@keyframes azIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes azPop{0%{transform:scale(1);}40%{transform:scale(1.18);color:var(--svc);}100%{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){
  .az-groups,.az-count,.az-svc,.az-group a{transition:none;}
  .az.just-switched .az-group li,.az.just-switched .az-count b.az-now{animation:none;}
  .az.is-switching .az-groups{transform:none;}
}

/* log in / sign up, right of the menu */
.head-auth{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none;}
.auth-login,.auth-signup{font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;border-radius:999px;padding:9px 16px;transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.auth-login{color:var(--text);border:1px solid var(--line);}
.auth-login:hover{background:var(--card-tint);}
.auth-signup{background:var(--navy);color:var(--cream);border:1px solid var(--navy);}
.auth-signup:hover{background:var(--navy-dark);}
.menu li.menu-auth-m{display:none;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .auth-signup{background:var(--gold);border-color:var(--gold);color:#0F2C22;}
  :root:not([data-theme="light"]) .auth-signup:hover{background:var(--gold-light);}
}
@media (max-width:980px){
  .head-auth{display:none;}
  .menu li.menu-auth-m{display:block;}
  .menu .menu-signup{font-weight:700;color:var(--gold-dark);}
}
@media (min-width:981px) and (max-width:1180px){
  .head-auth{gap:6px;}
  .auth-login,.auth-signup{padding:8px 12px;font-size:13px;}
}
@media (min-width:981px) and (max-width:1100px){
  .head-inner{gap:12px;padding:0 12px;}
  .head-inner .site-nav{margin-left:0;}
  .head-auth{gap:2px;}
  .auth-login{border-color:transparent;padding:8px 8px;}
  .auth-signup{padding:8px 12px;}
}