/* ============================================================
   TOKENS
   Palette derived from the logo: signal red, steel grey, near black.
   Light theme from the trust bar down.
   The --gold-* token names are kept from the shared kit so the rest of the
   stylesheet is unchanged; the VALUES are the E Stewart red.
   ============================================================ */
:root{
  --black:#000000;
  --ink:#101215;
  --ink-2:#191C21;
  --ink-3:#262A30;
  --gold:#CC2A2B;        /* brand red, 5.3:1 on white */
  --gold-lt:#E8494A;     /* lighter red, for dark backgrounds */
  --gold-dp:#A81F20;     /* deep red, 7.2:1 on white for body-size text */
  --steel:#4A525C;
  --muted:#666F7B;
  --line:#E4E7EB;
  --bg:#FFFFFF;
  --bg-2:#F5F6F8;
  --bg-3:#EDEFF2;
  --white:#FFFFFF;
  --radius:14px;
  --radius-sm:10px;
  --sp:clamp(38px,6.4vw,86px);
  --gut:clamp(16px,4vw,28px);
  --shadow:0 1px 2px rgba(16,18,21,.05),0 8px 24px rgba(16,18,21,.07);
  --shadow-lg:0 2px 4px rgba(16,18,21,.06),0 18px 48px rgba(16,18,21,.12);
  --nav-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Barlow',system-ui,Arial,sans-serif;font-weight:800;line-height:1.08;margin:0;letter-spacing:-.015em}
p,figure{margin:0}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

.wrap{width:min(1180px,100% - (var(--gut)*2));margin-inline:auto}
.sec{padding-block:var(--sp)}
.sec--tint{background:var(--bg-2)}
/* Dark band. Flips the palette tokens for its whole subtree rather than
   restyling each component, so cards, borders, muted text and icons all
   follow. The background must be a literal: --ink is redefined on this same
   element, so var(--ink) here would resolve to the NEW (light) value. */
.sec--dark{
  background:#101215;
  color:#F2F4F7;
  --ink:#F2F4F7;
  --muted:#A6ADB8;            /* 8.3:1 on the band */
  --line:rgba(255,255,255,.13);
  --bg:#101215;
  --bg-2:#181B20;
  --bg-3:#22262C;
  --gold-dp:#F16364;          /* the on-white deep red is unreadable here: 6.0:1 */
  --shadow:none;
  --shadow-lg:0 18px 48px rgba(0,0,0,.45);
}
.sec--dark .btn--dark{background:var(--gold);color:#fff}
.sec--dark .btn--dark:hover{background:var(--gold-lt)}
.eyebrow{
  font-family:'Barlow';font-weight:700;font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-dp);margin-bottom:10px;
  display:flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--gold);border-radius:2px;flex:none}
.sec-head{max-width:660px;margin-bottom:clamp(20px,3.4vw,44px)}
.sec-head h2{font-size:clamp(1.7rem,4.6vw,2.6rem)}
.sec-head p{margin-top:12px;color:var(--muted);font-size:clamp(.95rem,2.4vw,1.05rem)}
.sec-head--mid{margin-inline:auto;text-align:center}
.sec-head--mid .eyebrow{justify-content:center}

/* icons */
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic--fill{fill:currentColor;stroke:none}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Barlow';font-weight:700;font-size:.98rem;letter-spacing:.01em;
  padding:13px 22px;border-radius:100px;transition:transform .18s,box-shadow .18s,background .18s,color .18s;
  white-space:nowrap;
}
.btn .ic{width:18px;height:18px}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-lt);transform:translateY(-2px);box-shadow:0 10px 26px rgba(200,160,44,.34)}
.btn--dark{background:var(--ink);color:var(--white)}
.btn--dark:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn--ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.btn--wide{width:100%}

/* ============================================================
   NAVBAR  (black, so the logo's black plate blends seamlessly)
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:80;background:var(--black);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.nav__in{display:flex;align-items:center;gap:14px;height:var(--nav-h)}
.nav__logo{display:flex;align-items:center;flex:none}
.nav__logo img{height:44px;width:auto}
.nav__links{display:none}
.nav__spacer{flex:1}
.nav__call{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--gold);color:var(--ink);min-width:46px;min-height:44px;
  font-family:'Barlow';font-weight:800;font-size:.9rem;padding:9px 14px;border-radius:100px;
  transition:background .18s,transform .18s;
}
.nav__call:hover{background:var(--gold-lt);transform:translateY(-1px)}
.nav__call .ic{width:16px;height:16px}
.nav__call span{display:none}
/* 44px, not 40: this is the only way into the menu on a phone, and the
   most-pressed control on the site. */
.nav__burger{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;color:#fff;background:rgba(255,255,255,.08)}
.nav__burger .ic{width:22px;height:22px}
.nav__panel{
  display:none;background:var(--ink);border-top:1px solid rgba(255,255,255,.09);
  padding:10px var(--gut) 18px;
}
.nav__panel.open{display:block}
.nav__panel a{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 2px;color:#E7E9EC;font-family:'Barlow';font-weight:700;font-size:1.02rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav__panel a .ic{width:16px;height:16px;color:var(--gold)}
@media(min-width:900px){
  :root{--nav-h:86px}
  .nav__logo img{height:62px}
  .nav__burger{display:none}
  .nav__links{display:flex;align-items:center;gap:26px;margin-left:34px}
  .nav__links a{
    font-family:'Barlow';font-weight:600;font-size:.94rem;color:#D5D8DC;
    padding:6px 0;border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
  }
  .nav__links a:hover{color:var(--gold-lt);border-color:var(--gold)}
  .nav__call{font-size:1rem;padding:11px 20px}
  .nav__call span{display:inline}
}

/* ============================================================
   HERO
   .hero-media is the swap container. To drop a hero video in,
   replace the .hero-slides block with a <video> carrying the
   same class contract (see comment in the markup).
   ============================================================ */
.hero{position:relative;background:var(--black);isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
/* applies to a swapped-in <video> and to each slider image alike */
.hero-media>*,.hero-slides>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-slide{opacity:0;transition:opacity 1.2s ease;animation:kb 15s ease-in-out infinite alternate}
.hero-slide.is-on{opacity:1}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.11)}}
/* Paint order comes from DOM order: media (z-index:0) -> scrim -> content.
   The scrim can be lighter than it once was: the logo now carries its own
   alpha, so the dark pool only has to keep the silver wordmark legible
   against bright sky rather than hold up a screen blend. */
.hero__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(48% 36% at 50% 35%,rgba(0,0,0,.74) 0%,rgba(0,0,0,.56) 50%,rgba(0,0,0,.26) 78%,transparent 100%),
    linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.3) 24%,rgba(0,0,0,.46) 60%,rgba(0,0,0,.9) 92%,#000 100%);
}
.hero__in{
  position:relative;text-align:center;color:#fff;
  padding-block:clamp(40px,9vw,84px) clamp(44px,8vw,80px);
  min-height:clamp(500px,78svh,760px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
/* logo-hero.webp carries a real alpha channel (see site/make-logo-alpha.sh).
   This used to be the black-plate JPEG with mix-blend-mode:screen, which looked
   identical on desktop but rendered as a hard black rectangle inside in-app
   webviews such as Facebook Messenger, where the video's compositing layer
   prevents the blend resolving. Do not reintroduce the blend. */
.hero__logo{
  width:min(560px,86%);height:auto;
  margin-bottom:clamp(14px,2.4vw,20px);
}
.hero__tag{
  font-family:'Barlow';font-weight:700;font-size:clamp(1.05rem,4.2vw,1.85rem);
  line-height:1.2;text-wrap:balance;max-width:19ch;
}
.hero__tag em{font-style:normal;color:var(--gold-lt)}
.hero__sub{
  margin-top:12px;color:#C9CDD3;font-size:clamp(.9rem,2.6vw,1.05rem);
  max-width:44ch;text-wrap:balance;
}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:clamp(20px,3.4vw,28px);width:100%}
.hero__cta .btn{flex:1 1 auto;min-width:150px;max-width:260px}
.hero__strip{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;
  margin-top:clamp(20px,3.4vw,30px);font-size:.78rem;color:#9EA5AE;
}
.hero__strip span{display:inline-flex;align-items:center;gap:6px}
.hero__strip .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}
@media(min-width:900px){
  .hero__cta .btn{flex:0 0 auto}
}

/* ============================================================
   TRUST BAR
   ============================================================ */
/* ============================================================
   CREDENTIALS  (review platforms, directly under the hero)
   Sits on the light ground between the black hero and the dark trust band,
   so the brand marks keep their own colours against white rather than being
   knocked back on a dark field.
   ============================================================ */
.creds{background:var(--white);border-bottom:1px solid var(--line);
  padding-block:clamp(14px,2.2vw,20px)}
.creds__row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px}
.cred{display:inline-flex;align-items:center;gap:11px;
  padding:10px 16px;min-height:44px;border:1px solid var(--line);border-radius:999px;
  background:var(--bg-2);color:var(--ink);text-decoration:none;
  transition:border-color .18s,background .18s,transform .15s}
.cred:hover{border-color:var(--gold);background:var(--white);transform:translateY(-1px)}
.cred__m{display:flex;flex:none;width:22px;height:22px;align-items:center;justify-content:center}
.cred__m svg{width:22px;height:22px;display:block}
/* COLOR, not fill: the Facebook path is fill="currentColor". A fill rule on
   the svg never reaches it and the mark renders ink black. */
.cred--facebook .cred__m{color:#1877F2}
/* MyBuilder has no clean library logo, so it carries a Lucide glyph and its
   name in text rather than a traced approximation. Deep brand red keeps it
   deliberate next to the two real brand marks. */
.cred--mybuilder .cred__m{color:var(--gold-dp)}
.cred--mybuilder .cred__m svg{width:20px;height:20px}
.cred__t b{display:block;font-family:'Barlow';font-weight:800;font-size:.86rem;line-height:1.15}
.cred__t small{display:block;color:var(--muted);font-size:.74rem;line-height:1.3;margin-top:1px}
@media(min-width:560px){
  .cred{padding:10px 20px}
  .cred__t b{font-size:.92rem}
  .cred__t small{font-size:.78rem}
}

.trust{background:var(--ink);color:#fff;padding-block:clamp(18px,2.6vw,26px)}
.trust__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 12px}
.trust__i{display:flex;align-items:center;gap:10px;min-width:0}
.trust__i .ic{width:22px;height:22px;color:var(--gold)}
.trust__i b{display:block;font-family:'Barlow';font-weight:700;font-size:.9rem;line-height:1.2}
.trust__i small{display:block;color:#98A0AA;font-size:.75rem;line-height:1.35;margin-top:2px}
@media(min-width:820px){.trust__grid{grid-template-columns:repeat(4,1fr);gap:22px}}

/* ============================================================
   SERVICES  (two-up on every width, compact for fast scrolling)
   ============================================================ */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.svc__c{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 13px 15px;transition:transform .2s,box-shadow .2s,border-color .2s;
  display:flex;flex-direction:column;gap:7px;
}
.svc__c:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#D3D8DE}
.svc__ico{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--ink);color:var(--gold);flex:none;
}
.svc__ico .ic{width:18px;height:18px}
.svc__c h3{font-size:clamp(.95rem,2.9vw,1.16rem);line-height:1.2}
.svc__c p{color:var(--muted);font-size:clamp(.78rem,2.2vw,.92rem);line-height:1.45}
@media(min-width:900px){
  .svc{grid-template-columns:repeat(3,1fr);gap:16px}
  .svc__c{padding:22px;gap:9px}
  .svc__ico{width:46px;height:46px}
  .svc__ico .ic{width:20px;height:20px}
}

/* ============================================================
   TRANSFORMATIONS  (zig-zag, alternating; stacked on mobile)
   ============================================================ */
.tf{display:flex;flex-direction:column;gap:clamp(20px,4.4vw,54px)}
.tf__row{display:grid;gap:12px;align-items:center}
.tf__media{
  position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ink);
  aspect-ratio:16/9;box-shadow:var(--shadow);
}
.tf__media>img,.tf__media>video{width:100%;height:100%;object-fit:cover}
/* Client clips are shot portrait on a phone. In the default 16:9 box, cover
   crops a 9:16 source to a narrow horizontal band and the roof disappears.
   The supplied clip is re-encoded to a 4:5 crop and the box matches it. */
.tf__media--tall{aspect-ratio:4/5}
/* On desktop the clip keeps its true 4:5 rather than being squared off, but
   is height-capped and centred in its column. Left to fill a half-width
   column it stood ~560px tall against three lines of text, and the row read
   as mostly empty space. justify-self:center stops the grid stretching it. */
@media(min-width:760px){
  .tf__media--tall{aspect-ratio:4/5;height:clamp(380px,42vw,470px);width:auto;justify-self:center}
}
.tf__badge{
  position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  background:rgba(0,0,0,.72);color:#fff;backdrop-filter:blur(6px);
  font-family:'Barlow';font-weight:700;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;border-radius:100px;border:1px solid rgba(255,255,255,.2);
}
.tf__badge .ic{width:13px;height:13px;color:var(--gold-lt)}
/* placeholder veil, deleted when the real video is dropped in */
.tf__veil{
  position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:8px;
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.74));color:#fff;text-align:center;padding:16px;
}
.tf__veil .ic{width:34px;height:34px;color:var(--gold)}
.tf__veil b{font-family:'Barlow';font-weight:700;font-size:.9rem}
.tf__veil small{color:#B9BFC7;font-size:.75rem;letter-spacing:.04em}
.tf__num{
  font-family:'Barlow';font-weight:800;font-size:.75rem;letter-spacing:.16em;
  color:var(--gold-dp);text-transform:uppercase;
}
.tf__body h3{font-size:clamp(1.1rem,3.6vw,1.6rem);margin:4px 0 8px}
.tf__body p{color:var(--muted);font-size:clamp(.85rem,2.3vw,1rem);line-height:1.5}
.tf__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.tf__pill{
  display:inline-flex;align-items:center;gap:6px;background:var(--bg-3);color:var(--steel);
  font-size:.76rem;font-weight:600;padding:6px 11px;border-radius:100px;
}
.tf__pill .ic{width:13px;height:13px;color:var(--gold-dp)}
@media(min-width:880px){
  .tf__row{grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)}
  .tf__row:nth-child(even) .tf__media{order:2}
  .tf__row:nth-child(even) .tf__body{order:1}
}

/* ============================================================
   GALLERY  (swipe row on mobile, grid on desktop)
   ============================================================ */
.gal{
  display:grid;grid-auto-flow:column;grid-auto-columns:70%;gap:10px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:12px;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);
  scrollbar-width:none;
}
.gal::-webkit-scrollbar{display:none}
.gal__i{
  scroll-snap-align:center;border-radius:var(--radius-sm);overflow:hidden;
  aspect-ratio:3/4;background:var(--bg-3);cursor:zoom-in;position:relative;
}
.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gal__i:hover img{transform:scale(1.05)}
.gal__hint{
  display:flex;align-items:center;gap:7px;justify-content:center;margin-top:6px;
  color:var(--muted);font-size:.76rem;
}
.gal__hint .ic{width:14px;height:14px}
@media(min-width:700px){
  .gal{
    grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;
    margin-inline:0;padding-inline:0;gap:12px;
  }
  /* Homepage teaser is exactly six, so it runs 3x2 and fills both rows. Must
     stay after the .gal rule above: same specificity, source order decides. */
  .gal--home{grid-template-columns:repeat(3,1fr)}
  .gal__hint{display:none}
}
@media(min-width:1040px){
  .gal{grid-template-columns:repeat(5,1fr)}
  .gal--home{grid-template-columns:repeat(3,1fr)}
}

/* lightbox */
.lb{
  position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.93);
  display:none;place-items:center;padding:16px;
}
.lb.open{display:grid}
.lb img{max-width:100%;max-height:88svh;object-fit:contain;border-radius:8px}
.lb__x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.13);color:#fff;display:grid;place-items:center}
.lb__x .ic{width:22px;height:22px}

/* ============================================================
   WHY
   ============================================================ */
.why{display:grid;gap:9px}
.why__c{
  display:flex;gap:12px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;
}
.why__c .ic{width:20px;height:20px;color:var(--gold-dp);margin-top:2px}
.why__c h3{font-size:.98rem;margin-bottom:4px}
.why__c p{color:var(--muted);font-size:.84rem;line-height:1.5}
@media(min-width:760px){
  .why{grid-template-columns:repeat(2,1fr);gap:16px}
  .why__c{padding:22px;gap:13px}
  .why__c .ic{width:22px;height:22px}
  .why__c h3{font-size:1.02rem}
  .why__c p{font-size:.88rem}
}

/* ============================================================
   REVIEWS carousel
   ============================================================ */
.rv{position:relative}
.rv__view{overflow:hidden}
.rv__track{display:flex;transition:transform .5s cubic-bezier(.4,.02,.2,1)}
.rv__card{
  flex:0 0 100%;padding-inline:5px;box-sizing:border-box;
}
.rv__inner{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(18px,3.4vw,24px);height:100%;display:flex;flex-direction:column;gap:12px;
  box-shadow:var(--shadow);
}
.rv__stars{display:flex;gap:3px;color:#F5A623}
.rv__stars .ic{width:16px;height:16px}
.rv__txt{color:var(--steel);font-size:.92rem;line-height:1.6;flex:1}
.rv__who{display:flex;align-items:center;gap:11px;padding-top:12px;border-top:1px solid var(--line)}
/* brand red on near-black is 3.5:1; the lighter red clears AA at 4.9:1 */
.rv__av{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--ink);color:var(--gold-lt);font-family:'Barlow';font-weight:800;font-size:.92rem;
}
.rv__who b{display:block;font-family:'Barlow';font-weight:700;font-size:.92rem}
.rv__who small{display:block;color:var(--muted);font-size:.75rem}
.rv__nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px}
.rv__btn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--white);
  display:grid;place-items:center;color:var(--ink);transition:background .18s,border-color .18s;flex:none;
}
.rv__btn:hover{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.rv__dots{display:flex;gap:3px}
/* 8px pill in a 24x44 hit box. The visible dot stays small; the button around
   it is what a thumb has to find, and 14px wide was under the 24px minimum. */
.rv__dot{
  width:24px;height:44px;padding:0;display:grid;place-items:center;
  transition:width .25s;background:none;
}
.rv__dot::before{
  content:"";display:block;width:8px;height:8px;border-radius:50%;
  background:#CFD4DA;transition:width .25s,background .25s;
}
.rv__dot.on{width:38px}
.rv__dot.on::before{width:24px;border-radius:100px;background:var(--gold)}
@media(min-width:860px){.rv__card{flex-basis:33.3333%}}

/* ============================================================
   ABOUT
   ============================================================ */
.ab{display:grid;gap:22px;align-items:center}
/* 16/9 matches the van photo exactly, so object-fit:cover crops nothing. At
   4/3 it trimmed the back doors and the rear logo off the frame. */
.ab__img{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow-lg)}
.ab__img img{width:100%;height:100%;object-fit:cover}
.ab__body h2{font-size:clamp(1.6rem,4.4vw,2.4rem)}
.ab__body p{color:var(--muted);margin-top:12px;font-size:clamp(.9rem,2.4vw,1.02rem)}
.ab__sign{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
}
.ab__sign .rv__av{width:44px;height:44px}
.ab__sign b{font-family:'Barlow';font-weight:800;font-size:1rem;display:block}
.ab__sign small{color:var(--muted);font-size:.8rem}
/* The about photo is the branded van, which is landscape. The box used to flip
   to 3/4 portrait here, which cropped the front and back off it. Stays 4/3 at
   every width, and the image column gets equal weight so it is not squeezed. */
@media(min-width:860px){.ab{grid-template-columns:1fr 1fr;gap:clamp(30px,4.4vw,60px)}}

/* ============================================================
   AREAS
   ============================================================ */
.areas{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.areas li{
  display:flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--line);
  border-radius:100px;padding:8px 12px;font-weight:600;font-size:.82rem;
}
.areas .ic{width:14px;height:14px;color:var(--gold-dp);flex:none}
.areas__note{margin-top:13px;color:var(--muted);font-size:.84rem;text-align:center}
@media(min-width:700px){
  .areas{grid-template-columns:repeat(5,1fr);gap:8px}
  .areas li{padding:10px 15px;font-size:.86rem;gap:9px}
  .areas .ic{width:15px;height:15px}
}

/* ============================================================
   CONTACT
   ============================================================ */
.ct{display:grid;gap:16px}
.ct__side{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ct__row{
  display:flex;align-items:center;gap:11px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:12px 13px;min-width:0;
}
.ct__row .ic{width:19px;height:19px;color:var(--gold-dp);flex:none}
.ct__row>div{min-width:0}
.ct__row small{display:block;color:var(--muted);font-size:.75rem;letter-spacing:.04em;text-transform:uppercase}
.ct__row b{display:block;font-family:'Barlow';font-weight:700;font-size:.92rem;word-break:break-word;line-height:1.25}
.form{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(16px,3.6vw,28px);box-shadow:var(--shadow);
}
.form h3{font-size:1.18rem}
.form>p{color:var(--muted);font-size:.83rem;margin-top:5px;margin-bottom:13px}
.field{margin-bottom:10px}
.field label{display:block;font-size:.75rem;font-weight:600;color:var(--steel);margin-bottom:4px}
.field input,.field select,.field textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;font-size:.92rem;background:var(--bg-2);color:var(--ink);transition:border-color .18s,background .18s;
}
.field textarea{min-height:76px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:var(--white);box-shadow:0 0 0 3px rgba(200,160,44,.15)
}
.form__2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form__note{margin-top:10px;font-size:.75rem;color:var(--muted);text-align:center;line-height:1.5}
@media(max-width:359px){.form__2,.ct__side{grid-template-columns:1fr}}
@media(min-width:900px){
  .ct{grid-template-columns:.8fr 1.2fr;gap:clamp(24px,3.4vw,44px);align-items:start}
  .ct__side{grid-template-columns:1fr;gap:10px}
  .ct__row{padding:14px 16px;gap:13px}
  .ct__row b{font-size:1rem}
  .ct__row small{font-size:.75rem}
  .field textarea{min-height:92px}
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.fcta{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);text-align:center;color:#fff}
.fcta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.fcta::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,18,21,.8),rgba(16,18,21,.7)),
             radial-gradient(90% 70% at 50% 50%,rgba(200,160,44,.24),transparent 72%);
}
.fcta__in{position:relative;z-index:2;padding-block:clamp(48px,7.4vw,88px)}
.fcta h2{font-size:clamp(1.6rem,5vw,2.6rem);text-wrap:balance}
.fcta p{color:#BFC5CD;margin:12px auto 0;max-width:52ch;font-size:clamp(.9rem,2.4vw,1.05rem)}
.fcta__btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.fcta__btns .btn{flex:1 1 auto;min-width:160px;max-width:280px}
@media(min-width:900px){.fcta__btns .btn{flex:0 0 auto}}

/* ============================================================
   FOOTER
   ============================================================ */
.ft{background:var(--black);color:#A8AEB6;padding-block:clamp(30px,5vw,56px) 0;font-size:.84rem}
.ft__grid{display:grid;gap:22px}
.ft__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.ft__logo img{height:44px;width:auto;margin-bottom:10px}
.ft h4{color:#fff;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;font-weight:700}
.ft a:hover{color:var(--gold-lt)}
.ft__li{display:flex;flex-direction:column}
.ft__li a{display:flex;align-items:center;min-height:44px}
/* Footer numbers. Mobile first, landline second, matching every other
   call-to-action on the site. 44px min target so both are tappable. */
.ft__tel{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px}
.ft__tel a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  color:#fff;font-weight:700;font-size:.92rem}
.ft__tel .ic{width:16px;height:16px;color:var(--gold-lt);flex:none}
.ft__soc{display:flex;gap:9px;margin-top:14px}
.ft__soc a{
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#fff;transition:background .18s,color .18s;
}
.ft__soc a:hover{background:var(--gold);color:var(--ink)}
.ft__accred{
  margin-top:14px;padding:10px 12px;border:1px dashed rgba(255,255,255,.22);border-radius:10px;
  font-size:.75rem;color:#8C939C;
}
/* bottom padding keeps the last line clear of the fixed WhatsApp button */
.ft__bar{
  margin-top:24px;padding:16px 0 82px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center;font-size:.75rem;color:#7F868F;
}
.ft__bar a{color:var(--gold-lt);display:inline-flex;align-items:center;min-height:44px;padding-inline:6px}
@media(min-width:760px){
  .ft{font-size:.86rem}
  .ft__grid{grid-template-columns:1.5fr 2fr;gap:40px}
  .ft__cols{gap:40px}
  .ft__logo img{height:52px}
  .ft__bar{flex-direction:row;justify-content:space-between;text-align:left;padding:18px 96px 24px 0}
}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wa{
  position:fixed;right:14px;bottom:14px;z-index:100;
  width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;
  display:grid;place-items:center;box-shadow:0 8px 26px rgba(37,211,102,.45);
  transition:transform .2s;
}
.wa:hover{transform:scale(1.07)}
.wa svg{width:30px;height:30px;fill:currentColor}
.wa__pulse{position:absolute;inset:0;border-radius:50%;background:#25D366;opacity:.5;animation:pulse 2.4s ease-out infinite;z-index:-1}
@keyframes pulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@media(min-width:900px){.wa{right:22px;bottom:22px;width:60px;height:60px}}

/* placeholder marker, strip these once real content lands */
.ph{
  display:inline-block;background:#FFF4D6;color:#7A5B00;border:1px dashed #D8B84A;
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;vertical-align:middle;
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  /* NOTE: hero media is never hidden here, only its motion is stilled */
}

/* ============================================================
   INNER PAGES
   Concatenated onto site.css at build time. Everything here is used
   by the service, location and information pages; the homepage
   styles in site.css are untouched.
   ============================================================ */

/* page header band, sits under the navbar in place of the hero */
.phead{position:relative;background:var(--ink);color:#fff;isolation:isolate;overflow:hidden}
.phead__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;z-index:0}
.phead::after{
  content:"";position:absolute;inset:0;z-index:1;
  /* Scrim cut 35% and the image lifted from .34, because the header photo was
     effectively invisible: 34% over near-black under an 86% overlay. */
  background:linear-gradient(180deg,rgba(16,18,21,.56),rgba(16,18,21,.46) 45%,rgba(16,18,21,.61));
}
.phead__in{position:relative;z-index:2;padding-block:clamp(26px,4.6vw,54px) clamp(30px,4.6vw,58px)}
.phead h1{font-size:clamp(1.75rem,5.6vw,3rem);text-wrap:balance;max-width:20ch}
/* Lifted from #C3C9D1 when the header scrim was cut 35%: against the brightest
   header photo (g6) the old grey fell to 4.2:1. This holds 5.1:1 there and still
   sits clearly below the h1. */
.phead__sub{margin-top:12px;color:#D6DCE4;font-size:clamp(.95rem,2.5vw,1.12rem);max-width:60ch;text-wrap:balance}
.phead__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.phead__cta .btn{flex:1 1 auto;min-width:150px;max-width:250px}
@media(min-width:760px){.phead__cta .btn{flex:0 0 auto}}

/* breadcrumbs */
/* padding-block drops to 2px because the links inside now carry their own
   44px height - without that the bar would grow by the full 24px. */
.crumb{padding-block:2px;font-size:.8rem;color:var(--muted);background:var(--bg-2);border-bottom:1px solid var(--line)}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.crumb li{display:flex;align-items:center;gap:6px}
.crumb a{color:var(--steel);text-decoration:underline;text-underline-offset:2px;
  display:inline-flex;align-items:center;min-height:44px}
.crumb a:hover{color:var(--gold-dp)}
.crumb svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;opacity:.55}
.crumb [aria-current]{color:var(--ink);font-weight:600}

/* the answer-first block: the short, self-contained summary that an answer
   engine can lift straight out of the page and still have it make sense */
.keyfact{
  background:var(--bg-2);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:var(--radius);padding:clamp(16px,3.2vw,24px);margin-bottom:clamp(22px,3.4vw,32px);
}
.keyfact h2{font-size:1rem;letter-spacing:.02em;margin-bottom:8px}
.keyfact p{color:var(--steel);font-size:clamp(.94rem,2.5vw,1.06rem);line-height:1.62}

/* long-form body copy */
.prose{max-width:72ch}
.prose h2{font-size:clamp(1.35rem,3.9vw,1.85rem);margin-top:clamp(30px,4vw,44px);margin-bottom:12px;scroll-margin-top:90px}
.prose h3{font-size:clamp(1.05rem,3vw,1.24rem);margin-top:26px;margin-bottom:8px}
.prose p{color:var(--steel);margin-bottom:14px;font-size:clamp(.92rem,2.4vw,1.02rem);line-height:1.68}
.prose>p:first-child{margin-top:0}
.prose a{color:var(--gold-dp);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.prose a:hover{color:var(--ink)}

/* in-content service photo.
   The source shots are portrait 700x933 - dropped in at natural height they
   would fill most of a screen on their own, so they are cropped to 4:3 with
   object-fit rather than letting the column set the height. The width and
   height attributes stay on the <img> so the box is reserved before it loads. */
.sfig{max-width:72ch;margin:clamp(22px,3vw,30px) 0;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--bg-3)}
.sfig img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.sfig figcaption{padding:11px 15px;background:var(--bg-2);border-top:1px solid var(--line);
  color:var(--muted);font-size:clamp(.83rem,2.2vw,.9rem);line-height:1.5}

/* tick list */
.ticks{display:grid;gap:9px;margin:16px 0 4px}
.ticks li{display:flex;gap:11px;align-items:flex-start;color:var(--steel);font-size:clamp(.9rem,2.4vw,1rem);line-height:1.55}
.ticks svg{width:19px;height:19px;flex:none;margin-top:2px;stroke:var(--gold-dp);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* numbered process steps */
.steps{counter-reset:s;display:grid;gap:12px;margin-top:18px}
.step{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 16px 16px 58px;
}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;left:16px;top:15px;font-family:'Barlow';font-weight:800;font-size:.9rem;
  color:var(--gold-dp);background:var(--bg-3);width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;
}
.step h3{font-size:1rem;margin:0 0 4px}
.step p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}

/* FAQ accordion */
.faq{display:grid;gap:8px;margin-top:18px}
.faq__i{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq__i[open]{border-color:#D3D8DE;box-shadow:var(--shadow)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;
  padding:15px 16px;font-family:'Barlow';font-weight:700;font-size:clamp(.95rem,2.6vw,1.06rem);
  line-height:1.35;list-style:none;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
  content:"";flex:none;width:11px;height:11px;border-right:2.5px solid var(--gold-dp);
  border-bottom:2.5px solid var(--gold-dp);transform:rotate(45deg);margin-top:-4px;transition:transform .22s;
}
.faq__i[open] .faq__q::after{transform:rotate(-135deg);margin-top:2px}
.faq__a{padding:0 16px 16px;color:var(--steel);font-size:clamp(.89rem,2.4vw,.98rem);line-height:1.65}
.faq__a p{margin:0}

/* card grids used for the service and location indexes */
.cards{display:grid;gap:12px}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{
  display:flex;flex-direction:column;gap:8px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(16px,3vw,22px);transition:transform .2s,box-shadow .2s,border-color .2s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#D3D8DE}
.card__ico{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--ink);color:var(--gold);flex:none;
}
.card__ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:clamp(1rem,2.8vw,1.14rem);line-height:1.25}
.card p{color:var(--muted);font-size:.88rem;line-height:1.5;flex:1}
.card__go{
  display:inline-flex;align-items:center;gap:7px;font-family:'Barlow';font-weight:700;
  font-size:.85rem;color:var(--gold-dp);margin-top:2px;
}
.card__go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.card:hover .card__go svg{transform:translateX(3px)}

/* compact link chips, used for service and location interlinking */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{
  display:inline-flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--line);
  border-radius:100px;padding:10px 14px;min-height:44px;font-size:.84rem;font-weight:600;color:var(--steel);
  transition:border-color .18s,color .18s,background .18s;
}
.chip:hover{border-color:var(--gold);color:var(--ink);background:var(--bg-2)}
.chip svg{width:14px;height:14px;flex:none;stroke:var(--gold-dp);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* two column layout with a sticky aside */
.layout{display:grid;gap:clamp(26px,4vw,48px)}
@media(min-width:980px){
  .layout{grid-template-columns:minmax(0,1fr) 330px;align-items:start}
  .aside{position:sticky;top:104px}
}
.aside{display:grid;gap:12px}
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.panel--dark{background:var(--ink);border-color:var(--ink);color:#fff}
.panel--dark p{color:#B7BEC7}
.panel h3{font-size:1.06rem;margin-bottom:8px}
.panel p{color:var(--muted);font-size:.88rem;line-height:1.55;margin-bottom:12px}
.panel .btn{width:100%}
.panel__list{display:grid;gap:2px}
.panel__list a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:.88rem;font-weight:500;color:var(--steel);
}
.panel__list a:last-child{border-bottom:0}
.panel__list a:hover{color:var(--gold-dp)}
.panel__list svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.panel--dark .panel__list a{border-color:rgba(255,255,255,.12);color:#D5D9DE}
.panel--dark .panel__list a:hover{color:var(--gold-lt)}

/* comparison and spec tables */
.tblwrap{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
table.tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:440px}
table.tbl th,table.tbl td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.tbl thead th{background:var(--bg-2);font-family:'Barlow';font-weight:700;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;color:var(--steel)}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl td:first-child{font-weight:600;color:var(--ink)}

/* mid page call to action band */
.band{background:var(--ink);color:#fff;border-radius:var(--radius);padding:clamp(20px,3.6vw,32px);text-align:center;margin-block:clamp(26px,4vw,40px)}
.band h2{font-size:clamp(1.2rem,3.4vw,1.6rem);margin-bottom:8px;text-wrap:balance}
.band p{color:#B7BEC7;font-size:.94rem;max-width:52ch;margin:0 auto 18px;text-wrap:balance}
.band__btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.band__btns .btn{flex:1 1 auto;min-width:150px;max-width:250px}
@media(min-width:700px){.band__btns .btn{flex:0 0 auto}}

/* related links strip at the foot of inner pages */
.related{border-top:1px solid var(--line);padding-top:clamp(24px,3.6vw,36px);margin-top:clamp(28px,4vw,44px)}
.related h2{font-size:1.15rem;margin-bottom:14px}

/* legal and plain text pages */
.legal{max-width:70ch}
.legal h2{font-size:1.2rem;margin-top:30px;margin-bottom:10px}
.legal p,.legal li{color:var(--steel);font-size:.95rem;line-height:1.68;margin-bottom:12px}
.legal ul{list-style:disc;padding-left:22px;margin-bottom:14px}
.legal a{color:var(--gold-dp);text-decoration:underline;text-underline-offset:2px}

/* skip link: off screen until it takes keyboard focus */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--ink);font-family:'Barlow';font-weight:700;
  padding:12px 18px;border-radius:0 0 10px 0;
}
.skip:focus{left:0}

/* footer insurance line */
.ft__ins{
  display:flex;align-items:flex-start;gap:9px;margin-top:14px;
  color:#C7CDD4;font-size:.8rem;line-height:1.45;
}
.ft__ins svg{width:17px;height:17px;flex:none;margin-top:1px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   ABOUT: owner quote and team grid
   ============================================================ */
.quote{
  margin:24px 0;padding:22px 24px;background:var(--bg-2);
  border-left:4px solid var(--gold);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.quote p{font-size:1.05rem;line-height:1.65;color:var(--ink);margin:0 0 12px}
.quote cite{
  font-style:normal;font-family:'Barlow',sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--gold-dp);
}
.team{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0 22px;
}
@media(min-width:700px){.team{grid-template-columns:repeat(3,1fr)}}
.team__m{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 16px;
}
.team__m b{
  display:block;font-family:'Barlow',sans-serif;font-weight:800;font-size:1rem;
  color:var(--ink);line-height:1.2;
}
.team__m small{display:block;margin-top:3px;font-size:.8rem;color:var(--muted)}

/* ============================================================
   CONTRAST FIXES
   ============================================================ */

/* Red is not dark enough to carry near-black text: #101215 on #CC2A2B is
   3.5:1, under the 4.5:1 these need at 15-16px. White gives 5.3:1. */
.btn--gold,.nav__call,.skip{color:#fff}
.btn--gold .ic,.nav__call .ic{color:#fff}

/* The dark sidebar panel inherited the light theme's muted grey: 3.7:1 on
   the panel. */
.panel--dark p{color:#B9C0CA}

/* Components that carry their own literal white background sit inside the
   dark bands too, so the band remaps --white as well. Without this,
   .why__c and .areas li stay white while their text turns near-white. */
.sec--dark{--white:#181B20}
/* .tf__pill hardcodes --steel, which is a light-theme value. */
.sec--dark .tf__pill{color:var(--muted)}


/* ============================================================
   SECTION PHOTO BACKGROUND
   Pairs with .sec--dark: the image sits under a scrim heavy enough that the
   white text clears AA even over the brightest part of the photo.
   ============================================================ */
.sec--bg{position:relative;isolation:isolate;overflow:hidden}
.sec--bg > .sec__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.66;z-index:0;
}
.sec--bg::after{
  content:"";position:absolute;inset:0;z-index:1;
  /* Sized from g4's own histogram (p90 = 227, max 255): even a pure white
     source pixel composites to about 39/255 on the eyebrow row and 40/255 on
     the note, which is what the red accent needs to clear 4.5:1. Measured off
     the rendered pixels, not calculated: see the scrim comment in the README. */
  background:linear-gradient(180deg,rgba(16,18,21,.95) 0%,rgba(16,18,21,.72) 55%,rgba(16,18,21,.93) 100%);
}
.sec--bg > .wrap{position:relative;z-index:2}

/* ============================================================
   REVIEWS PAGE: the plain-text list under the carousel.
   The carousel is the nice version; this is the one that is
   always in the HTML whether or not the script runs, which is
   what the page is actually indexed on.
   ============================================================ */
.rvlist{display:grid;gap:14px;margin-top:8px}
@media(min-width:860px){.rvlist{grid-template-columns:repeat(2,1fr)}}
.rvlist__i{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(16px,3vw,22px);
}
.rvlist__i p{color:var(--steel);font-size:.92rem;line-height:1.6;margin:10px 0 14px}
.rvlist__by{border-top:1px solid var(--line);padding-top:11px}
.rvlist__by b{display:block;font-family:'Barlow';font-weight:700;font-size:.92rem}
.rvlist__by small{display:block;color:var(--muted);font-size:.75rem}

/* the carousel's previous button reuses the chevron icon, mirrored */
.ic--flip{transform:scaleX(-1)}

/* ============================================================
   GOOGLE-BRANDED REVIEWS
   The four-colour G is Google's mark, used here only to attribute
   reviews that genuinely come from Google.
   ============================================================ */
.g-mark{width:20px;height:20px;flex:none;display:block}
.btn .g-mark{width:18px;height:18px}

/* "Rated 4.9 ***** on Google" pill */
.gpill{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  background:var(--white);border:1px solid var(--line);border-radius:100px;
  padding:9px 18px;margin-top:16px;box-shadow:var(--shadow);
  font-size:.94rem;color:var(--ink);
}
.gpill .g-mark{width:19px;height:19px}
.gpill b{font-family:'Barlow';font-weight:800;font-size:1.02rem}
.gpill .rv__stars{gap:1px}
.gpill .rv__stars .ic{width:15px;height:15px}

/* card header: Google mark left, stars right */
.rv__top{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* platform links under the carousel */
.rvlinks{
  display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:wrap;margin-top:26px;
}
.rvlinks .btn{gap:9px}
.rvlink{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--white);border:1px solid var(--line);border-radius:100px;
  padding:13px 20px;font-family:'Barlow';font-weight:700;font-size:.92rem;
  color:var(--ink);min-height:48px;transition:border-color .18s,background .18s;
}
.rvlink:hover{border-color:var(--ink);background:var(--bg-2)}
/* Size on the ELEMENT, not on .ic. The official Facebook mark is <svg class="fmark">
   and carries no .ic class, so an .ic-scoped rule missed it entirely and the link
   rendered at 99px tall with an ink-black logo. */
.rvlink svg{width:17px;height:17px;flex:none}
/* per-platform, so the Facebook blue does not leak onto every other mark */
.rvlink--facebook svg{color:#1877F2}
.rvlink--mybuilder .ic{color:var(--gold-dp)}

.rvmore{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Barlow';font-weight:700;font-size:.9rem;color:var(--gold-dp);
  min-height:44px;
}
.rvmore .ic{width:15px;height:15px}
.rvmore:hover{text-decoration:underline}