/* ============================================================================
   COMPONENTS                    client-sites/_engine/assets/css/components.css

   Byte identical on every client. One block per component, in the order the
   components render. Every value is a custom property or a measured constant
   written once; no client specific colour appears anywhere in this file.

   The rating badge block at the bottom is generated from
   .skills/client-website/components/rbadge-css.js and must not be hand edited.
   ============================================================================ */

/* ---- mobile call bar, the BOTTOM of the phone screen ---------------------- */
.band--mobile-cta-bar{
  position:fixed;left:0;right:0;bottom:0;
  display:none;
  height:var(--cta-bar-h);
  padding:0;
  z-index:var(--z-callbar);
  background:var(--brand-dark);
}
@media (max-width:767px){.band--mobile-cta-bar{display:grid;grid-template-columns:1fr 1fr}}
.callbar__book,.callbar__call{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:15px;font-weight:var(--fw-btn);
  text-transform:var(--tt-btn);line-height:1.1;text-align:center;padding:0 8px;
}
.callbar__book{background:var(--brand-action);color:var(--on-action)}
.callbar__call{background:var(--brand-dark);color:#FFFFFF;border-top:1px solid rgba(255,255,255,.18)}

/* ---- utility bar ---------------------------------------------------------- */
.band--utility-bar{padding-block:0;background:var(--brand-dark);color:#FFFFFF;font-size:var(--fs-small)}
.utility__row{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);min-height:42px}
.utility__place{display:inline-flex;align-items:center;gap:8px}
.utility__place svg{width:16px;height:16px;flex:0 0 16px;color:var(--brand-action-on-dark)}
.utility__phone{font-weight:700}
@media (max-width:767px){.band--utility-bar{display:none}}

/* ---- nav ------------------------------------------------------------------ */
.band--nav{
  position:sticky;top:0;z-index:var(--z-nav);
  padding-block:0;background:var(--brand-dark);color:#FFFFFF;
}
.nav__row{display:flex;align-items:center;gap:var(--gap);min-height:74px}
.nav__logo{display:flex;align-items:center;gap:12px;flex:0 0 auto}
/* a telephone number that wraps to two lines reads as two numbers */
.nav__actions .btn,.nav .btn--sm{white-space:nowrap}
/* A WORDMARK IS NOT A SQUARE. This forced every logo into 52 by 52, so a
   600 by 156 wordmark rendered as an illegible stamp beside the business name.
   The height is fixed and the width follows the artwork, which is right for a
   square mark and for a wide one. 2026-09-11. */
.nav__logo img{height:46px;width:auto;max-width:240px;object-fit:contain}
.nav__wordmark{font-family:var(--font-display);font-size:22px;font-weight:800;text-transform:var(--tt-heading)}
.nav__hamburger{
  margin-left:auto;display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;padding:10px;background:none;border:0;cursor:pointer;
  position:relative;z-index:var(--z-menu-toggle);
}
.nav__hamburger span{display:block;height:3px;border-radius:2px;background:#FFFFFF}
.nav__close{display:none}
.nav__scrim{display:none}
.nav__link,.nav__dropdown-toggle{
  font-family:var(--font-display);font-size:var(--fs-nav);font-weight:var(--fw-nav);
  text-transform:var(--tt-heading);color:#FFFFFF;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;padding:8px 0;
}
.nav__dropdown-toggle svg{width:14px;height:14px}
.nav__dropdown{position:relative}
.nav__dropdown-menu{display:none}
.nav__actions{display:flex;gap:12px}

/* THE NAV SWITCHES TO THE DRAWER WHEN IT STOPS FITTING, not at a number
   inherited from the grid. Seven links, two buttons and a wordmark overflowed a
   1025px window by 105 pixels; the rest of the layout still turns at 1025.
   Measured 2026-09-11 at 1025, 1280 and 1440. */
@media (min-width:1180px){
  .nav__hamburger{display:none}
  .nav__links{display:flex;align-items:center;gap:18px;margin-left:auto}
  .nav__actions{margin-left:8px}
  .nav__dropdown:hover .nav__dropdown-menu,.nav__dropdown:focus-within .nav__dropdown-menu{
    display:block;position:absolute;top:100%;left:0;min-width:264px;
    background:var(--surface);color:var(--ink);border-radius:var(--radius);
    box-shadow:0 18px 44px rgba(0,0,0,.22);padding:10px;z-index:var(--z-nav);
  }
  .nav__dropdown-item{display:block;padding:9px 12px;border-radius:6px;font-size:15px}
  .nav__dropdown-item:hover{background:var(--surface-alt);color:var(--brand-action-ink)}
}
/* THE DRAWER BLOCK HAS TO END WHERE THE HAMBURGER ENDS. When the bar moved to
   1180 this block still stopped at 1024, so between 1025 and 1179 a hamburger
   was painted with no panel behind it and tapping it did nothing. The two
   numbers are one decision and they move together. 2026-09-11. */
@media (max-width:1179px){
  /* THE DRAWER IS .nav__links ITSELF, and it opens on the class "open". The gate
     probes that element by name at 375, 414 and 768, at the top of the page and
     scrolled, and asks the browser what a thumb landing on each row is handed. */
  .nav__links{
    position:fixed;inset:0 0 0 auto;width:min(88vw,380px);
    background:var(--brand-dark);z-index:var(--z-menu-panel);
    padding:84px 24px calc(var(--cta-bar-h) + 24px);
    overflow-y:auto;transform:translateX(100%);transition:transform .28s ease;
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
  }
  .nav__links.open{transform:none}
  .nav__link,.nav__dropdown-toggle{padding:13px 0;width:100%;justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.14)}
  .nav__dropdown.is-open .nav__dropdown-menu{display:block;padding:6px 0 12px}
  .nav__dropdown-item{display:block;padding:10px 14px;font-size:15px;opacity:.92}
  .nav__actions{flex-direction:column;margin:var(--gap) 0 0}
  .nav__actions .btn{width:100%}
  /* THE CLOSE CONTROL SITS ON THE LEFT OF THE DRAWER, NOT THE RIGHT.
     The drawer is anchored to the right edge and the menu button is at the right
     edge of the nav row, so a close control at top:18 right:18 landed underneath
     the menu button, which outranks the panel on the z ladder (9998 over 9997).
     A thumb aiming at the X was handed the hamburger on every phone width. Both
     controls have to stay tappable while the drawer is open, so they cannot
     share the same corner: the X moves to the opposite one. */
  .nav__close{
    display:block;position:absolute;top:18px;left:18px;right:auto;
    width:44px;height:44px;font-size:30px;line-height:1;
    background:none;border:0;color:#FFFFFF;cursor:pointer;z-index:var(--z-menu-toggle);
  }
  .nav__scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);
    z-index:calc(var(--z-menu-panel) - 1)}
  .nav__scrim[hidden]{display:none}
}

/* ---- hero ----------------------------------------------------------------- */
.band--hero{
  padding-block:calc(var(--shell-y) * 1.5);
  min-height:var(--hero-min-h);
  display:flex;align-items:center;
  background:var(--brand-dark);color:#FFFFFF;overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media picture,.hero__media img{width:100%;height:100%;object-fit:cover}
.band--hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--overlay);opacity:var(--overlay-opacity);
}
.hero__inner{position:relative;z-index:2;width:100%}
.hero__col{max-width:none}
.hero__title{margin:0 0 .35em}
.hero__count{
  font-family:var(--font-display);font-size:var(--fs-small);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand-action-on-dark);margin:0 0 1em;
}
.hero__sub{font-size:calc(var(--fs-body) * 1.08);max-width:56ch;margin-bottom:1.4em}
@media (min-width:1025px){
  .hero--split .hero__col{width:var(--hero-text-col);min-width:560px}
  .hero--split .hero__media{left:auto;width:57%;clip-path:polygon(9% 0,100% 0,100% 100%,0 100%)}
  .hero--split.band--hero::after{background:linear-gradient(100deg,var(--overlay) 0 52%,transparent 78%);opacity:1}
}

/* ---- breadcrumbs ---------------------------------------------------------- */
.crumbs{margin:0 0 var(--gap);font-size:var(--fs-small)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs__item+.crumbs__item::before{content:"/";opacity:.55;margin-right:8px}
.crumbs a{text-decoration:underline;text-underline-offset:3px}

/* ---- trust checks --------------------------------------------------------- */
.checks{display:flex;flex-wrap:wrap;gap:12px 24px;margin:0 0 calc(var(--gap) * 1.4)}
.checks__item{display:inline-flex;align-items:flex-start;gap:10px;font-size:var(--fs-body);font-weight:400}
.checks__item svg{width:24px;height:24px;flex:0 0 24px;color:var(--brand-action-on-dark);margin-top:2px}
@media (max-width:767px){.checks__item{flex:1 1 100%}}

/* ---- cta pair ------------------------------------------------------------- */
.ctapair{display:flex;flex-wrap:wrap;gap:14px}
.band__foot{margin-top:calc(var(--gap) * 2);display:flex;justify-content:center}
.band__foot--left{justify-content:flex-start}

/* ---- trust strip ---------------------------------------------------------- */
.band--trust-strip{padding-block:18px;background:var(--surface-alt);color:var(--ink)}
.strip__row{display:grid;gap:16px var(--gap);grid-template-columns:1fr}
.strip__item{display:flex;align-items:center;gap:12px}
.strip__icon{display:flex;width:34px;height:34px;flex:0 0 34px;color:var(--brand-action-ink)}
.strip__icon svg{width:100%;height:100%}
.strip__text{display:flex;flex-direction:column;line-height:1.35}
.strip__text strong{font-family:var(--font-display);text-transform:var(--tt-heading);font-size:15px}
.strip__text span{font-size:14px;color:var(--ink-soft)}
@media (min-width:768px){.strip__row{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1025px){.strip__row{grid-template-columns:repeat(4,1fr)}}

/* ---- service cards -------------------------------------------------------- */
.svc{
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
  /* A CARD THAT PAINTS ITS OWN SURFACE SETS ITS OWN INK. Without this the card
     inherits the colour of the band it sits in, so the same card reads black on
     a light band and WHITE ON WHITE inside the dark localised-service band on
     every area page. That is a 1.00:1 title, invisible, and it shipped. */
  color:var(--ink);
}
.svc:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.13)}
/* 230px on a desktop and 200px from tablet up, both measured. On a PHONE the
   grid is one column, so a homepage with four service cards stacks four 200px
   photo bands and the services band busts the measured 2,200px ceiling for a
   single band. The ceiling wins: a visitor scrolling past a fifth screen of
   cards has already gone. 170px keeps the photograph readable and the band
   inside budget. */
.svc__photo{display:block;height:170px;overflow:hidden}
.svc__photo picture,.svc__photo img{width:100%;height:100%;object-fit:cover}
/* 20/18/22 from tablet up. On a PHONE the four cards stack, so four bottom pads
   are four times whatever this number is, and the services band was 4px over the
   measured 2,200px single band ceiling. 18px at the bottom below 768 buys back
   16px and reads no tighter. */
.svc__body{display:flex;flex-direction:column;padding:20px 18px 18px;flex:1}
@media (min-width:768px){.svc__body{padding:20px 18px 22px}}
.svc__title{
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-h3);
  text-transform:var(--tt-heading);line-height:var(--lh-heading);margin:0 0 15px;
}
.svc__text{flex:1;font-size:15.5px;color:var(--ink-soft)}
.svc__more{
  margin-top:16px;font-family:var(--font-display);font-weight:700;font-size:15px;
  text-transform:var(--tt-btn);color:var(--brand-action-ink);
}
@media (min-width:768px){.svc__photo{height:200px}}
@media (min-width:1025px){.svc__photo{height:230px}
  .svc__body{padding:24px 22px 26px}}

/* ---- form split ----------------------------------------------------------- */
.split--form .split__form{align-self:start}
@media (min-width:1025px){.split--form .split__form{position:sticky;top:96px}}
.leadform{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px 24px 28px;box-shadow:0 12px 34px rgba(0,0,0,.09);
}
.band[data-ground="dark"] .leadform{color:var(--ink)}
.leadform__title{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-h3);
  text-transform:var(--tt-heading);margin-bottom:6px}
.leadform__sub{font-size:15px;color:var(--ink-soft);margin-bottom:18px}
.leadform__grid{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1 / -1}
.field__label{font-size:14px;font-weight:600}
.field__input,.field__area{
  width:100%;padding:12px 13px;font:inherit;font-size:16px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--ink);
}
.field__area{resize:vertical;min-height:92px}
.field__radios{display:flex;gap:18px}
.radio,.consent{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.5}
.leadform__submit{
  grid-column:1 / -1;min-height:54px;border:0;border-radius:var(--radius);cursor:pointer;
  background:var(--brand-action);color:var(--on-action);
  font-family:var(--font-display);font-size:var(--fs-btn);font-weight:var(--fw-btn);
  text-transform:var(--tt-btn);
}
.leadform__submit:hover{background:var(--brand-dark);color:#FFFFFF}
.leadform__result{grid-column:1 / -1;font-size:14px;margin:0}
.leadform__result.is-ok{color:var(--brand-action-ink)}
.leadform__note{grid-column:1 / -1;font-size:12px;line-height:1.55;color:var(--ink-soft);margin:0}
.leadform__note a{text-decoration:underline}
.ghlform{display:block;width:100%;border:0;border-radius:var(--radius-lg);background:var(--surface)}
@media (max-width:767px){.leadform__grid{grid-template-columns:1fr}}

/* ---- why cards ------------------------------------------------------------ */
.split--why .split__img picture,.split--why .split__img img{
  width:100%;border-radius:var(--radius-lg);object-fit:cover}
.why{display:flex;flex-direction:column;gap:var(--gap);margin-top:var(--gap)}
.why__item{
  display:flex;flex-direction:column;gap:5px;
  padding-left:20px;border-left:4px solid var(--brand-action);
}
.why__head{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-h3);
  text-transform:var(--tt-heading);line-height:var(--lh-heading)}
.why__fact{font-size:14px;font-weight:700;color:var(--brand-action-ink);text-transform:uppercase;letter-spacing:.06em}
.band[data-ground="dark"] .why__fact{color:var(--brand-action-on-dark)}
.why__body{font-size:var(--fs-body);color:var(--ink-soft)}
.band[data-ground="dark"] .why__body{color:#FFFFFF}

/* ---- review cards --------------------------------------------------------- */
.revs{display:grid;gap:var(--gap-cards);grid-template-columns:1fr}
.review-card{
  display:flex;flex-direction:column;margin:0;
  background:var(--surface);border-radius:var(--radius-card);
  padding:28px 26px 24px;box-shadow:0 6px 20px rgba(0,0,0,.09);color:var(--ink);
}
.review-card__stars{display:flex;gap:3px;margin-bottom:14px;color:var(--review-star)}
.review-card__stars svg{width:24px;height:24px}
.review-card__text{
  margin:0 0 18px;flex:1;font-size:15.5px;font-family:var(--font-body);font-weight:400;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.review-card__meta{display:flex;flex-direction:column;gap:2px}
.review-card__author{font-family:var(--font-display);font-size:22px;font-weight:800;
  text-transform:uppercase;line-height:1.1}
.review-card__when{font-size:13px;color:var(--ink-soft)}
@media (min-width:768px){.revs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1025px){.revs.cards--3{grid-template-columns:repeat(3,1fr)}
  .revs.cards--2{grid-template-columns:repeat(2,1fr)}}

/* ---- area chips ----------------------------------------------------------- */
.chips{display:grid;gap:12px;grid-template-columns:1fr}
.chip{
  display:flex;align-items:center;gap:9px;padding:12px;
  border:1px solid var(--border);border-radius:var(--radius-chip);
  background:var(--surface);font-weight:600;color:var(--ink);
}
.chip svg{width:18px;height:18px;flex:0 0 18px;color:var(--brand-action-ink)}
.chip:hover{border-color:var(--brand-action);color:var(--brand-action-ink)}
@media (min-width:768px){.chips{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1025px){.chips{grid-template-columns:repeat(4,1fr)}}

/* ---- faq ------------------------------------------------------------------ */
.faq{display:flex;flex-direction:column;gap:10px;max-width:960px;margin-inline:auto}
.faq__row{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  color:var(--ink);padding:0;overflow:hidden}
.faq__q{
  cursor:pointer;list-style:none;padding:18px 22px;
  font-family:var(--font-display);font-size:calc(var(--fs-h3) * .78);font-weight:var(--fw-h3);
  text-transform:var(--tt-heading);line-height:1.3;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"+";float:right;margin-left:16px;font-weight:400}
/* a MINUS SIGN, U+2212, not an en dash. Nothing this site paints is a dash. */
.faq__row[open] .faq__q::after{content:"\2212"}
.faq__a{padding:0 22px 20px;font-size:var(--fs-body);color:var(--ink-soft)}

/* ---- steps ---------------------------------------------------------------- */
.steps{counter-reset:step;display:grid;gap:var(--gap-cards);grid-template-columns:1fr}
.step{position:relative;padding-top:8px}
.step__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;margin-bottom:12px;
  background:var(--brand-action);color:var(--on-action);
  font-family:var(--font-display);font-weight:800;font-size:20px;
}
.step__head{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-h3);
  text-transform:var(--tt-heading);margin:0 0 8px}
.step__body{font-size:15.5px;color:var(--ink-soft)}
.band[data-ground="dark"] .step__body{color:#FFFFFF}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,1fr)}}

/* ---- edu blocks ----------------------------------------------------------- */
.edu{display:flex;flex-direction:column;gap:calc(var(--gap) * 1.6);max-width:78ch}
.edu__head{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-h3);
  text-transform:var(--tt-heading);margin:0 0 8px}
.edu__body{margin:0;color:var(--ink-soft)}

/* ---- maps ----------------------------------------------------------------- */
.foot__maps{margin-top:calc(var(--gap) * 2)}
.map{border-radius:var(--radius);overflow:hidden;background:var(--surface-alt)}
.map iframe{display:block;width:100%;border:0}
.map__label{margin:0;padding:12px 14px;font-size:14px;background:var(--surface-alt);color:var(--ink)}
.band--directions-map .map{max-width:900px;margin-inline:auto}

/* ---- before and after ------------------------------------------------------ */
.bagrid{display:grid;gap:var(--gap-cards);grid-template-columns:1fr}
.ba__frame{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative}
.ba__side{position:relative}
.ba__tag{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:4px;
  background:var(--brand-dark);color:#FFFFFF;font-size:12px;font-weight:700;text-transform:uppercase}
.ba__range{display:none}
.ba__caption{margin-top:10px;font-size:15px;color:var(--ink-soft)}
/* with the script running the two frames stack and the range reveals one over
   the other. With it off they stay side by side, which is why the fallback is
   the DEFAULT here rather than an add on. */
.js .ba__frame{grid-template-columns:1fr}
.js .ba__side{grid-area:1 / 1}
.js .ba__side--after{clip-path:inset(0 0 0 var(--ba-split,50%))}
.js .ba__range{display:block;width:100%;margin-top:10px}
@media (min-width:1025px){.bagrid{grid-template-columns:repeat(2,1fr)}}

/* ---- footer ---------------------------------------------------------------- */
.band--footer{background:var(--brand-dark);color:#FFFFFF;padding-block:68px}
.foot__grid{display:grid;gap:calc(var(--gap) * 1.7);grid-template-columns:1fr}
.foot__logo img{width:96px;height:96px;object-fit:contain}
.foot__blurb{font-size:15px;margin:14px 0 0;color:#FFFFFF}
.foot__social{margin-top:16px;display:flex;gap:12px}
.foot__social svg{width:26px;height:26px}
.foot__head{
  font-family:var(--font-display);font-size:18px;font-weight:800;
  text-transform:var(--tt-heading);margin:0 0 12px;color:#FFFFFF;
}
.foot__links{display:flex;flex-direction:column;gap:7px;font-size:15px}
.foot__links a:hover{color:var(--brand-action-on-dark)}
.foot__item{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;font-size:15px}
.foot__item svg{width:19px;height:19px;flex:0 0 19px;margin-top:3px;color:var(--brand-action-on-dark)}
@media (min-width:1025px){.foot__grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}

/* ---- legal strip ----------------------------------------------------------- */
.band--legal{padding-block:18px;background:var(--brand-dark);color:#FFFFFF;
  border-top:1px solid rgba(255,255,255,.16)}
.legal__row{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;
  font-size:13px}
.legal__links{display:flex;flex-wrap:wrap;gap:16px}
.legal__links a:hover{color:var(--brand-action-on-dark)}

/* ---- dividers -------------------------------------------------------------- */
.divider{line-height:0;margin:0}
.divider svg{display:block;width:100%}
.band--owns-divider{padding-bottom:calc(var(--shell-y) * 2)}

/* ---- chat widget lift ------------------------------------------------------ */
/* the launcher never sits on top of the phone call bar */
@media (max-width:767px){
  chat-widget,[id*="chat-widget"]{bottom:calc(var(--cta-bar-h) + 8px)!important}
}

/* >>> rating-badge component: generated by .skills/client-website/components/rbadge-css.js. Do not edit inside the markers. <<< */
.rbadges {
  display: flex;
  flex-wrap: nowrap;              /* THE FIX. It physically cannot stack. */
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 520px;
  margin: 0 0 20px;
  padding: 0;
  background: none;               /* no panel, no pill, no card behind the row */
  border: 0;
}
.rbadges[data-count="3"] { gap: 12px; }
.rbadges[data-count="4"] { gap: 10px; }
.rbadges__item {
  flex: 1 1 0;
  min-width: 0;                   /* REQUIRED. Without it the row breaks. */
  max-width: 193px;
  display: block;
  line-height: 0;
  /* The item is an <a>, so without this it inherits the site's link colour. Nothing inside the
     badge is painted with that colour, but a contrast sweep reading currentColor would measure a
     colour the badge never paints. Pin it to the same token the artwork uses so the two agree. */
  color: var(--rbadge-ink, #fff);
}
.rbadges__item:focus-visible { outline: 3px solid var(--rbadge-focus, currentColor); outline-offset: 4px; border-radius: 2px; }
.rbadge { display: block; width: 100%; height: auto; aspect-ratio: 193 / 60; color: var(--rbadge-ink, #fff); }
.rbadge text { fill: currentColor; font-family: var(--font-body, inherit); }
.rbadge path[fill="#F6AB26"] { fill: var(--rbadge-star, #F6AB26); }
@media (max-width: 768px) { .rbadges { max-width: none; gap: 12px; } }
@media (max-width: 400px)  { .rbadges { gap: 8px; } }
/* A light section flips ONLY the ink. The Google G keeps Google's colours on any ground. */
.rbadges--dark .rbadge { color: #0E1A2B; }
/* <<< end rating-badge component >>> */

/* ---- contact panel -------------------------------------------------------
   What stands where a lead form would, for a business whose brief names no
   form endpoint. It is not a form and does not pretend to be one: it is the
   real ways to reach them. Same in a preview and a launched site. 2026-09-11 */
.contact-panel { display: grid; gap: 14px; align-content: start; }
.contact-panel__lede { margin: 0; color: var(--on-dark-muted, inherit); }
.contact-panel__call {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: clamp(24px, 4vw, 34px);
  line-height: 1.1; text-decoration: none; color: inherit;
}
.contact-panel__call svg { width: 28px; height: 28px; flex: none; }
.contact-panel__row { margin: 0; text-decoration: none; color: inherit; }
.contact-panel .btn { justify-self: start; margin-top: 6px; }

/* ---- gallery -------------------------------------------------------------
   A grid of the client's own job photographs. Two columns on a phone so a
   thumb still sees four frames without scrolling, three from a tablet up.
   The caption is visible on a phone and rides in on hover on a pointer device,
   because a phone has no hover and a caption that only exists on hover is a
   caption that a phone user never reads. */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:768px){.gal{grid-template-columns:repeat(3,1fr);gap:16px}}
.gal__item{
  position:relative;display:block;padding:0;border:0;margin:0;cursor:pointer;
  background:var(--surface-alt);border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/3;color:#FFFFFF;text-align:left;
}
.gal__img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease}
.gal__item:hover .gal__img,.gal__item:focus-visible .gal__img{transform:scale(1.05)}
.gal__zoom{
  position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.48);opacity:0;transition:opacity .2s ease;
}
.gal__zoom svg{width:18px;height:18px}
.gal__item:hover .gal__zoom,.gal__item:focus-visible .gal__zoom{opacity:1}
/* the caption sits on a gradient, never on bare photograph: white type over an
   unknown photograph is the contrast defect this engine exists to avoid. */
.gal__cap{
  position:absolute;left:0;right:0;bottom:0;padding:34px 12px 10px;
  font-size:13px;line-height:1.35;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gal__item:focus-visible{outline:3px solid var(--brand-action);outline-offset:3px}

/* the lightbox. Hidden until the script opens it. */
.gal__box{
  position:fixed;inset:0;z-index:var(--z-menu-panel);
  background:rgba(8,12,18,.94);
  display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;
}
.gal__box[hidden]{display:none}
.gal__stage{margin:0;max-width:min(1100px,92vw);text-align:center}
.gal__stage img{max-width:100%;max-height:76vh;border-radius:var(--radius);display:block;margin:0 auto}
.gal__stage figcaption{color:#FFFFFF;font-size:14px;padding:14px 8px 0;line-height:1.4}
.gal__close{
  position:absolute;top:14px;right:16px;width:46px;height:46px;font-size:32px;
  line-height:1;background:none;border:0;color:#FFFFFF;cursor:pointer;
  z-index:var(--z-menu-toggle);
}
.gal__nav{
  flex:0 0 auto;width:48px;height:48px;font-size:34px;line-height:1;
  background:rgba(255,255,255,.12);border:0;border-radius:50%;color:#FFFFFF;cursor:pointer;
}
.gal__nav:hover{background:rgba(255,255,255,.24)}
@media (max-width:600px){
  .gal__nav{position:absolute;bottom:18px}
  .gal__nav--prev{left:22px}.gal__nav--next{right:22px}
  .gal__stage figcaption{padding-bottom:76px}
}

/* Brand-led variants. Opt-in through the same brief for previews and full sites. */
.nav__wordmark{font-family:var(--font-display);font-style:var(--display-style,normal);font-size:30px;font-weight:800;letter-spacing:-.025em;line-height:1.05;white-space:nowrap}
.nav--light{background:#fff;color:var(--brand-dark);border-bottom:3px solid var(--brand-detail)}
.nav--light .nav__logo{color:var(--brand-dark)}
.nav--light .nav__hamburger span{background:var(--brand-dark)}
.hero__eyebrow{font-family:var(--font-body);font-size:13px;line-height:1.4;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--brand-detail);margin:0 0 22px}
.hero--angular .hero__title{font-style:var(--display-style,normal);font-size:clamp(60px,5.3vw,80px);line-height:.99;letter-spacing:-.025em;white-space:pre-line;margin:25px 0 20px;text-transform:uppercase}
.hero--angular .hero__count{color:var(--brand-detail);margin-bottom:15px}
.hero--angular .hero__sub{max-width:41ch;font-size:17px;line-height:1.65;margin-bottom:28px}
.hero--angular .hero__col{position:relative}
.hero--angular .ctapair{gap:12px}
.hero--angular .btn{border-radius:2px}
.hero--angular .btn--ghost{border:1px solid #fff}
.hero--angular .rbadges{margin-bottom:10px}
@media(min-width:1180px){
 .nav--light .nav__link,.nav--light .nav__dropdown-toggle{color:var(--brand-dark)}
 .nav--light .nav__link:hover,.nav--light .nav__dropdown-toggle:hover{color:var(--brand-action)}
 .nav--light .nav__actions .btn--ghost{color:var(--brand-dark);border:1px solid var(--brand-dark)}
 .nav--light .nav__links{gap:20px}
 .nav--light .nav__row{min-height:86px}
}
@media(min-width:1025px){
 .hero--angular.hero--split{padding-block:58px;min-height:660px}
 .hero--angular.hero--split .hero__col{width:49%;min-width:0}
 .hero--angular.hero--split .hero__media{left:42%;width:58%;clip-path:none}
 .hero--angular.hero--split .hero__media img{object-position:66% center}
 .hero--angular.hero--split::after{width:56%;background:var(--brand-dark);opacity:1;clip-path:polygon(0 0,100% 0,89% 100%,0 100%)}
 .hero--angular.hero--split::before{content:"";position:absolute;inset:0 auto 0 0;width:56.8%;background:var(--brand-detail);z-index:1;clip-path:polygon(0 0,100% 0,89% 100%,0 100%)}
}
@media(max-width:1024px){
 .hero--angular.hero--split{display:flex;flex-direction:column;align-items:stretch;padding:0;min-height:0}
 .hero--angular.hero--split .hero__media{position:relative;inset:auto;order:2;height:320px;flex:none;border-top:4px solid var(--brand-detail)}
 .hero--angular.hero--split .hero__inner{order:1;padding-top:40px;padding-bottom:40px}
 .hero--angular.hero--split::after{display:none}
 .hero--angular .hero__title{font-size:clamp(50px,8vw,74px);max-width:620px}
 .hero--angular .hero__sub{max-width:48ch}
}
@media(max-width:520px){
 .nav__wordmark{font-size:29px}
 .hero--angular .hero__title{font-size:51px;letter-spacing:-.035em}
 .hero--angular .hero__eyebrow{font-size:11px;margin-bottom:18px}
 .hero--angular .hero__sub{font-size:15px}
 .hero--angular.hero--split .hero__media{height:270px}
 .hero--angular .ctapair{display:grid;grid-template-columns:1fr}
 .hero--angular .ctapair .btn{width:100%;justify-content:center}
}
@media(min-width:768px){.gal{grid-template-columns:repeat(var(--gallery-cols,3),minmax(0,1fr))}}
@media(max-width:520px){
 .hero--angular.hero--split .hero__media{order:1;height:210px;border-top:0;border-bottom:3px solid var(--brand-detail)}
 .hero--angular.hero--split .hero__inner{order:2;padding-top:26px;padding-bottom:30px}
 .hero--angular .hero__title{font-size:44px;margin-top:18px;margin-bottom:16px}
 .hero--angular .hero__eyebrow{margin-bottom:15px}
 .hero--angular .hero__count{margin-bottom:12px}
 .hero--angular .hero__sub{font-size:14px;line-height:1.65;margin-bottom:20px}
 .hero--angular .ctapair{grid-template-columns:1fr 1fr;gap:10px}
 .hero--angular .ctapair .btn{min-height:46px;padding-inline:10px;font-size:14px}
}
.gal__item{font-family:var(--font-body);font-size:14px;line-height:1.45}
@media(max-width:1179px){.nav--light .nav__actions .btn--ghost{color:#fff;border-color:#fff}}
@media(max-width:1179px){
 .nav--light .nav__dropdown-item,.nav--light .nav__dropdown-toggle,.nav--light .nav__link{color:#fff}
 .nav--light .nav__hamburger[aria-expanded="true"] span{background:#fff}
}

/* Optional service carousel: native overflow remains usable without JavaScript. */
.cards--carousel{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;gap:22px;padding:8px 2px 22px;scrollbar-width:thin;overscroll-behavior-x:contain}
.cards--carousel .svc{scroll-snap-align:start;min-width:0}
.service-slider__controls{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:12px}
.service-slider__controls p{margin:0;font-size:14px}
.service-slider__controls>div{display:none;gap:10px}
.service-slider--ready .service-slider__controls>div{display:flex}
.service-slider__controls button{width:48px;height:48px;border:1px solid var(--brand-dark);border-radius:50%;background:var(--surface);color:var(--brand-dark);font-size:24px;cursor:pointer}
.service-slider__controls button:hover{background:var(--brand-dark);color:white}
.service-slider__controls button:disabled{opacity:.35;cursor:default}
@media(min-width:768px){.cards--carousel{grid-auto-columns:43%}}