/* Navigation and conversion components shared by every skin. Loaded after base.css, before the skin. */

/* hero parts: copy block and proof strip are separate so a skin can place them differently */
.e-con.hero-top,.e-con.hero-base{position:relative;z-index:1}
.rating{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;font-size:.95rem;color:#dbe4e1}
.rating .stars svg{width:17px;height:17px}

/* services dropdown */
.has-sub{position:relative;display:flex;align-items:center}
.has-sub>a.parent{padding-right:16px}
.has-sub>a.parent::before{content:"";position:absolute;right:1px;top:50%;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg)}
.sub{position:absolute;top:100%;left:-18px;min-width:280px;background:#fff;color:var(--ink);border-radius:var(--radius);padding:10px;box-shadow:0 24px 50px -18px rgba(0,0,0,.45),0 0 0 1px var(--rule);display:grid;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .3s var(--ease),visibility .2s}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.nav .sub a{padding:11px 14px;border-radius:calc(var(--radius) / 2);font-weight:600}
.nav .sub a::after{display:none}
.nav .sub a:hover{background:var(--tint)}
@media (min-width:1081px){.sub:has(a:nth-child(10)){grid-template-columns:1fr 1fr;min-width:440px}}
.nav-cta{display:none}

/* breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.88rem;margin-bottom:18px;color:var(--on2)}
.crumbs a{text-decoration:none;color:inherit}
.crumbs a:hover{text-decoration:underline}
.crumbs i{font-style:normal;opacity:.6}
.crumbs span{color:inherit;font-weight:600}

/* mid-page call to action */
.e-con.sec.band{--padding-top:clamp(36px,4.5vw,60px);--padding-bottom:clamp(36px,4.5vw,60px)}
.e-con.band-row{--flex-direction:row;--flex-wrap:wrap;--justify-content:space-between;--align-items:center;--row-gap:20px;--column-gap:32px}
.e-con.band-row>.e-con{--width:auto;flex:1 1 380px}
.e-con.band-row>.e-con.cta{flex:0 1 auto;margin-top:0}
.band-title h2.elementor-heading-title{font-size:clamp(1.6rem,2.8vw,2.3rem)}
.band .body p{margin-top:8px;font-size:1.05rem}
.yellow .btn-o .elementor-button:hover{background:var(--ink);color:#fff}

/* trust points beside the closing form */
.ticks.trust{margin-top:28px;padding-top:22px;border-top:2px solid rgba(20,18,0,.2)}
.ticks.trust .elementor-icon-list-item{font-weight:600}
.dark .ticks.trust{border-top-color:var(--line)}

/* contact page: title and form side by side at the top */
.e-con.quote-top{--padding-top:clamp(32px,4vw,56px);--padding-bottom:clamp(40px,5vw,72px)}
.quote-top .bigtel p{margin-top:22px}
@media (max-width:1080px){.quote-top .ticks.trust{display:none}.quote-top .e-con.quote-grid{gap:24px}}

/* RoofCare jump links */
.e-con.jumpbar{border-bottom:1px solid var(--rule);background:#fff}
.jump p{display:flex;flex-wrap:wrap;gap:6px;padding-block:14px}
.jump a{text-decoration:none;font-weight:600;font-size:.95rem;padding:9px 16px;border-radius:var(--pill);box-shadow:inset 0 0 0 1.5px var(--rule);transition:background .2s,color .2s,box-shadow .2s}
.jump a:hover{background:var(--ink);color:#fff;box-shadow:none}
.jump a:last-child{background:var(--y);color:#141200;box-shadow:none}
section[id]{scroll-margin-top:calc(var(--hd-h) + 12px)}

/* other services */
.svc-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.svc-links a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;padding:13px 18px;border-radius:var(--btn-radius);box-shadow:inset 0 0 0 1.5px var(--ink);transition:background .2s,color .2s}
.svc-links a:hover{background:var(--ink);color:#fff}
.e-con.sec.others{--padding-top:clamp(44px,5vw,72px);--padding-bottom:clamp(44px,5vw,72px)}
.wide img{aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);margin-top:24px}
.pagehead .cta{margin-top:26px}
.portrait img{aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}

/* bento services (livery skin) */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(170px,19vw,270px);gap:12px;margin-top:8px}
.bento a{position:relative;display:block;overflow:hidden;background:var(--ink);text-decoration:none}
.bento img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .3s}
.bento a:hover img{transform:scale(1.06);opacity:.8}
.bento .lab{position:absolute;left:0;bottom:0;max-width:92%;background:var(--ink);color:#fff;padding:12px 16px;display:flex;align-items:center;gap:12px;font:800 clamp(1.05rem,1.6vw,1.45rem)/1.05 var(--fd);font-stretch:75%;text-transform:uppercase;transition:background .2s,color .2s}
.bento a:hover .lab{background:var(--y);color:#141200}
.bento .lab small{display:block;font:500 .92rem/1.3 var(--fb);font-stretch:100%;text-transform:none;margin-top:5px;color:#cfcdc4}
.bento a:hover .lab small{color:#141200}
.bento .b1{grid-column:span 2;grid-row:span 2}
.bento .b2{grid-column:span 2}
.bento .call{background:var(--y);display:flex;flex-direction:column;justify-content:space-between;padding:20px;color:#141200}
.bento .call b{font:800 clamp(1.6rem,2.6vw,2.4rem)/.95 var(--fd);font-stretch:62%;text-transform:uppercase}
.bento .call span{font-weight:800;font-size:1.15rem;display:flex;gap:8px;align-items:center}

/* Instagram carousel */
.ig{position:relative;margin-top:8px}
.ig-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
.ig-track::-webkit-scrollbar{display:none}
.ig-card{position:relative;flex:0 0 clamp(170px,19vw,236px);aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;background:var(--ink);scroll-snap-align:start;text-decoration:none;color:#fff}
.ig-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),opacity .3s}
.ig-card:hover img{transform:scale(1.05);opacity:.85}
.ig-play{position:absolute;left:12px;top:12px;width:34px;height:34px;border-radius:50%;background:rgba(15,16,17,.6);display:grid;place-items:center}
.ig-play svg{width:16px;height:16px}
.ig-date{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 12px;font-size:.82rem;font-weight:600;background:linear-gradient(180deg,transparent,rgba(15,16,17,.82))}
.ig-follow{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:18px;background:var(--y);color:#141200}
.ig-follow svg{width:34px;height:34px;margin-bottom:auto}
.ig-follow b{font:800 1.25rem/1.1 var(--fd)}
.ig-follow span{font-weight:600;font-size:.95rem}
.ig-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.ig-nav button{width:48px;height:48px;border-radius:var(--btn-radius);border:0;cursor:pointer;background:var(--ink);color:#fff;display:grid;place-items:center;transition:background .2s,opacity .2s}
.ig-nav button:hover{background:var(--y);color:#141200}
.ig-nav button:disabled{opacity:.3;cursor:default;background:var(--ink);color:#fff}
.ig-nav svg{width:20px;height:20px}
.ig-prev svg{transform:scaleX(-1)}

/* desktop call prompt */
.dock{position:fixed;right:20px;bottom:20px;z-index:55;display:flex;align-items:center;gap:16px;background:#fff;color:var(--ink);padding:12px 14px 12px 20px;border-radius:var(--radius);box-shadow:0 20px 50px -18px rgba(0,0,0,.45),0 0 0 1px var(--rule);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .45s var(--ease)}
.dock.on{opacity:1;transform:none;pointer-events:auto}
.dock[hidden]{display:none}
.dock b{font:700 1rem var(--fd)}
.dock-tel{display:flex;align-items:center;gap:8px;font-weight:800;text-decoration:none;white-space:nowrap}
.dock .btn{min-height:44px;padding:0 18px;font-size:.92rem}
.dock-x{position:absolute;right:-10px;top:-10px;width:26px;height:26px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:16px;line-height:1;cursor:pointer}
@media (max-width:860px){.dock{display:none}}

/* key facts under a service page heading */
.e-con.keyfacts-row{border-bottom:1px solid var(--rule);background:#fff;color:var(--ink)}
.e-con.keyfacts{--display:grid;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.keyfacts .elementor-widget-text-editor{padding:22px 22px 24px 0}
.keyfacts .elementor-widget-text-editor+.elementor-widget-text-editor{padding-left:22px;border-left:1px solid var(--rule)}
.keyfacts p{font-size:.95rem;line-height:1.4;color:var(--mute)}
.keyfacts strong{display:block;font:700 1.05rem/1.2 var(--fd);color:var(--ink);margin-bottom:3px}
@media (max-width:640px){
  .e-con.keyfacts{grid-template-columns:1fr 1fr}
  .keyfacts .elementor-widget-text-editor,.keyfacts .elementor-widget-text-editor+.elementor-widget-text-editor{padding:14px 12px 14px 0;border-left:0;border-top:1px solid var(--rule)}
  .keyfacts .elementor-widget-text-editor:nth-child(-n+2){border-top:0}
}

/* hero copy rises in on load */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-top .elementor-widget-heading,.hero-top .lede,.hero-top .cta,.hero-top .rating,.hero-top .mark,.hero-top .eyebrow,.hero .quick-wrap{animation:rise .8s var(--ease) both}
.hero-top .lede{animation-delay:.08s}
.hero-top .cta{animation-delay:.16s}
.hero-top .rating{animation-delay:.24s}
.hero .quick-wrap{animation-delay:.2s}
body.elementor-editor-active .hero *{animation:none}

/* with and without RoofCare */
.compare table{margin-top:0}
.compare tbody th{font-weight:700;padding-right:16px}
.compare td:nth-child(2){color:var(--mute)}
.compare td:nth-child(3){font-weight:700;background:color-mix(in srgb,var(--y) 22%,transparent)}
.compare thead th:nth-child(3){background:var(--y);color:#141200}
.compare th:nth-child(3),.compare td:nth-child(3){padding-left:14px;padding-right:14px}
.compare .tnote{font-size:.85rem;color:var(--mute);margin-top:14px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* footer extras and area links */
.ft .ft-ig{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-weight:600;color:#fff}
.also-head p{font:700 1rem var(--fd);margin-top:28px}
.svc-links.town-links{margin-top:12px}
.svc-links.town-links a{padding:10px 14px;font-weight:600;font-size:.95rem;box-shadow:inset 0 0 0 1.5px var(--rule)}

.ft .ft-contact{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-weight:700;color:#fff}
.ft .wrap.ft-addr{display:flex;flex-wrap:wrap;gap:20px 64px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.ft address{font-style:normal;line-height:1.55}
.ft address b{display:block;font:700 1rem var(--fd);color:#fff;margin-bottom:6px}
.ft .wrap.ft-addr+.legal{margin-top:28px}

/* town pages: photos of jobs in that town */
.e-con.sec.town-gallery:not(:has(.tg-grid)){display:none}
.tg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tg-grid figure{margin:0}
.tg-grid:has(figure:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.tg-grid img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:var(--img-radius,6px)}
.tg-grid figcaption{font-weight:600;font-size:.95rem;margin-top:8px}
.tg-empty{display:grid;place-items:center;aspect-ratio:4/3;border:2px dashed var(--rule);border-radius:var(--img-radius,6px);color:var(--mute);font-weight:600;font-size:.95rem;text-align:center;padding:16px}
.tg-note{margin-top:14px;font-size:.9rem;color:var(--mute)}
@media (max-width:640px){.tg-grid{grid-template-columns:1fr 1fr;gap:10px}.tg-empty:nth-child(3){display:none}.tg-grid figure:nth-child(3):last-child{grid-column:1/-1}.tg-grid figure:nth-child(3):last-child img{aspect-ratio:16/9}.tg-grid figcaption{font-size:.85rem}}

/* page not found */
.lost .svc-links{margin-block:20px 28px}
.lost-cta{display:flex;flex-wrap:wrap;gap:12px}

/* town pages */
.also p{margin-top:22px;font-size:.98rem;color:var(--mute)}

/* short homepage: the other services as a row of links */
.svc-more{align-items:center;margin-top:22px}
.svc-more>span{font-weight:600;margin-right:6px}

/* short homepage: the family and the reviews in one section */
.e-con.why-grid{--display:grid;display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3.6vw,56px);align-items:start}
.why-grid .portrait img{aspect-ratio:4/5;object-fit:cover}
.why-grid h2.elementor-heading-title{font-size:clamp(1.7rem,2.7vw,2.3rem)}
.why-grid .body{margin-top:16px;color:var(--mute)}
.dark .why-grid .body,.deep .why-grid .body{color:var(--on2)}
.why-grid .e-con.facts{margin-top:26px}
.why-grid .facts strong{white-space:normal;font-size:1.3rem}
.why-grid .facts p{font-size:.88rem}
.e-con.why-revs{background:#fff;color:var(--ink);border-radius:var(--radius);--padding-top:26px;--padding-bottom:24px;--padding-left:28px;--padding-right:28px}
.why-revs h3.elementor-heading-title{font-size:1.25rem;color:var(--ink)}
.e-con.wrev{--padding-top:18px;--padding-bottom:18px;border-bottom:1px solid var(--rule)}
.e-con.wrev:last-of-type{border-bottom:0;--padding-bottom:4px}
.wrev .stars svg{width:15px;height:15px}
.wrev .q p{margin-top:8px;font-size:1.02rem;line-height:1.45}
.wrev .by p{margin-top:6px;font-size:.88rem;font-weight:600;color:var(--mute)}
.why-revs .elementor-widget-button{margin-top:10px}
@media (min-width:641px){.why-grid .e-con.facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1080px){
  .e-con.why-grid{grid-template-columns:minmax(0,.55fr) minmax(0,1fr)}
  .e-con.why-revs{grid-column:1/-1}
}
@media (max-width:640px){
  .e-con.why-grid{grid-template-columns:minmax(0,1fr)}
  .why-grid .portrait img{aspect-ratio:3/2;object-position:center 22%}
  .e-con.why-revs{--padding-left:20px;--padding-right:20px}
  .svc-more>span{flex:1 1 100%}
}

/* text links keep their look but get a finger-sized hit area */
.more .elementor-button{position:relative}
.more .elementor-button::before{content:"";position:absolute;inset:-12px -8px}
.util a{display:inline-flex;align-items:center;min-height:38px}
.crumbs a{padding:8px 0;margin:-8px 0}
@media (max-width:640px){.g,.sample{font-size:.75rem}}

/* reveal on scroll: content is visible by default and only animates once the script opts in */
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.wordmark{font:800 1.4rem/1 var(--fd);letter-spacing:-.02em}

@media (max-width:1080px){
  .has-sub{display:block}
  .has-sub>a.parent{display:block}
  .has-sub>a.parent::before{display:none}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:none;color:inherit;padding:0 0 6px 14px;min-width:0;display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .nav .sub a{padding:9px 0;border:0;font-size:.98rem;font-weight:500;opacity:.85}
  .nav .sub a:hover{background:none;opacity:1}
  .nav{max-height:calc(100svh - var(--hd-h));overflow:auto}
  .nav-cta{display:grid;gap:10px;margin-top:16px}
  .hd .nav-cta .btn{display:inline-flex;width:100%;min-height:52px;font-size:1rem}
  .nav .nav-cta a{border:0;padding:0 20px}
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,34vw,240px)}
  .e-con.band-row>.e-con.cta{flex:1 1 100%}
}
@media (max-width:640px){
  .sub{grid-template-columns:1fr}
  .jump p{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scrollbar-width:none}
  .jump a{white-space:nowrap}
  .band .e-con.cta>.elementor-widget{flex:1 1 100%}
  .band .cta .elementor-button{width:100%}
  .svc-links a{flex:1 1 100%;justify-content:space-between}
  .svc-links.town-links{gap:8px}
  .svc-links.town-links a{flex:0 0 auto;justify-content:flex-start;padding:8px 12px;font-size:.9rem;min-height:38px}
}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

/* the homepage headline is a full sentence, so it runs smaller and wider than a slogan would */
.e-con.hero h1.elementor-heading-title{max-width:21ch;font-size:clamp(1.9rem,3.4vw,3.1rem);line-height:1.08}
body.skin-livery .e-con.hero h1.elementor-heading-title{max-width:24ch;font-size:clamp(2.2rem,4.3vw,4rem);line-height:1}
.one-line{display:block}
@media (min-width:1081px){.one-line{white-space:nowrap;font-size:clamp(14px,1.15vw,.94em)}}

/* phones: a shorter homepage hero on every skin. The call bar pinned to the foot of the screen already
   offers both actions, so the hero keeps its headline, one line of copy, the buttons and a compact proof row. */
@media (max-width:640px){
  body .e-con.hero h1.elementor-heading-title,body .e-con.qhero h1.elementor-heading-title{font-size:1.72rem;line-height:1.1}
  body.skin-livery .e-con.hero h1.elementor-heading-title{font-size:1.95rem;line-height:1.02}
  body .hero .lede p,body .qhero .lede p{font-size:.94rem;line-height:1.5}
  body .hero .rating,body .qhero .rating{display:none}
  body .e-con.hero .e-con.cta,body .e-con.qhero .e-con.cta{gap:10px;margin-top:4px}
  body .hero .cta .elementor-button,body .qhero .cta .elementor-button{padding-block:13px}
  body .hero .e-con.proof{gap:0}
  body .hero .proof p{font-size:0;line-height:0;margin:0}
  body .hero .proof p strong{display:block;font-size:.9rem;line-height:1.25}
  body.skin-brief .e-con.hero,body.skin-brief .e-con.hero.short{--padding-top:28px;--padding-bottom:20px}
  body.skin-livery .e-con.hero-top{margin-bottom:150px;padding-block:20px 18px}
  body.skin-livery .hero-top{--fade:120px;--rise:24px}
  body.skin-livery .proof .elementor-widget-text-editor{padding:12px 10px 12px 0}
  body.skin-hybrid .qhero .quick-wrap{display:none}
  body.skin-hybrid .e-con.hero-photo{min-height:150px}
  body.skin-trade .e-con.hero{min-height:min(50svh,420px)}
}

/* the accreditation strip already separates the hero from what follows, so the next section starts closer */
.e-con.sec.acc+.e-con.sec{--padding-top:clamp(36px,4.4vw,64px)}

/* RoofCare named in the hero tagline: a quiet underline, not a second headline */
.rc-mark{font-weight:700;text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:2px;text-underline-offset:4px}
body.skin-livery .rc-mark{text-decoration-color:rgba(18,18,18,.45)}

/* phones, town pages: with job photos in the gallery straight after, the local photo is dropped;
   without them it shrinks to a short strip, so two big pictures never stack */
@media (max-width:640px){
  .e-con.sec:has(+ .e-con.sec.town-gallery figure) .care-grid .elementor-widget-image{display:none}
  .e-con.sec:has(+ .e-con.sec.town-gallery) .care-grid .elementor-widget-image img{aspect-ratio:16/9;height:auto;object-fit:cover}
  /* site 4's ruled fields get a full outline on phones, so they read as boxes to type in */
  body.skin-hybrid .aaa-form input,body.skin-hybrid .aaa-form select{border:1.5px solid var(--ink);padding:11px 12px;background-color:#fff}
}

/* One header-to-hero fade for sites 1, 2 and 4: it starts softly, clears most of the way within the first half, then settles;, and the photo's dark shade is masked in underneath it so no line shows at the join. */
body.skin-brief,body.skin-trade,body.skin-hybrid{--fade-h:clamp(96px,8vw,120px);--hd-fade:linear-gradient(180deg,color-mix(in srgb,var(--fade-c) 100.0%,transparent) 0.0%,color-mix(in srgb,var(--fade-c) 99.0%,transparent) 4.2%,color-mix(in srgb,var(--fade-c) 96.3%,transparent) 8.3%,color-mix(in srgb,var(--fade-c) 92.1%,transparent) 12.5%,color-mix(in srgb,var(--fade-c) 86.8%,transparent) 16.7%,color-mix(in srgb,var(--fade-c) 80.6%,transparent) 20.8%,color-mix(in srgb,var(--fade-c) 73.8%,transparent) 25.0%,color-mix(in srgb,var(--fade-c) 66.6%,transparent) 29.2%,color-mix(in srgb,var(--fade-c) 59.3%,transparent) 33.3%,color-mix(in srgb,var(--fade-c) 51.9%,transparent) 37.5%,color-mix(in srgb,var(--fade-c) 44.7%,transparent) 41.7%,color-mix(in srgb,var(--fade-c) 37.7%,transparent) 45.8%,color-mix(in srgb,var(--fade-c) 31.2%,transparent) 50.0%,color-mix(in srgb,var(--fade-c) 25.3%,transparent) 54.2%,color-mix(in srgb,var(--fade-c) 19.9%,transparent) 58.3%,color-mix(in srgb,var(--fade-c) 15.2%,transparent) 62.5%,color-mix(in srgb,var(--fade-c) 11.1%,transparent) 66.7%,color-mix(in srgb,var(--fade-c) 7.8%,transparent) 70.8%,color-mix(in srgb,var(--fade-c) 5.1%,transparent) 75.0%,color-mix(in srgb,var(--fade-c) 3.1%,transparent) 79.2%,color-mix(in srgb,var(--fade-c) 1.6%,transparent) 83.3%,color-mix(in srgb,var(--fade-c) 0.7%,transparent) 87.5%,color-mix(in srgb,var(--fade-c) 0.2%,transparent) 91.7%,color-mix(in srgb,var(--fade-c) 0.0%,transparent) 95.8%,color-mix(in srgb,var(--fade-c) 0.0%,transparent) 100.0%)}
body.skin-brief,body.skin-hybrid{--fade-c:#fff}
body.skin-trade{--fade-c:var(--y)}
@media (max-width:640px){body.skin-brief,body.skin-trade,body.skin-hybrid{--fade-h:84px}}
body.skin-brief .e-con.hero::after,body.skin-trade .e-con.hero::after,body.skin-trade .e-con.hero:not(.short)::after{height:var(--fade-h);background:var(--hd-fade)}
body.skin-brief .e-con.hero::before,body.skin-trade .e-con.hero::before{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.25) 0,#000 var(--fade-h));mask-image:linear-gradient(180deg,rgba(0,0,0,.25) 0,#000 var(--fade-h))}
body.skin-hybrid{--hd-line:transparent}
body.skin-hybrid .e-con.hero-photo{position:relative}
body.skin-hybrid .e-con.hero-photo::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--fade-h);background:var(--hd-fade);pointer-events:none}
/* site 2: its headline sits lower, so the fade can run longer and softer */
body.skin-trade{--fade-h:clamp(135px,11.5vw,165px);--hd-fade:linear-gradient(180deg,color-mix(in srgb,var(--fade-c) 100.00%,transparent) 0.0%,color-mix(in srgb,var(--fade-c) 99.64%,transparent) 2.5%,color-mix(in srgb,var(--fade-c) 98.60%,transparent) 5.0%,color-mix(in srgb,var(--fade-c) 96.95%,transparent) 7.5%,color-mix(in srgb,var(--fade-c) 94.77%,transparent) 10.0%,color-mix(in srgb,var(--fade-c) 92.11%,transparent) 12.5%,color-mix(in srgb,var(--fade-c) 89.05%,transparent) 15.0%,color-mix(in srgb,var(--fade-c) 85.63%,transparent) 17.5%,color-mix(in srgb,var(--fade-c) 81.92%,transparent) 20.0%,color-mix(in srgb,var(--fade-c) 77.97%,transparent) 22.5%,color-mix(in srgb,var(--fade-c) 73.83%,transparent) 25.0%,color-mix(in srgb,var(--fade-c) 69.55%,transparent) 27.5%,color-mix(in srgb,var(--fade-c) 65.17%,transparent) 30.0%,color-mix(in srgb,var(--fade-c) 60.74%,transparent) 32.5%,color-mix(in srgb,var(--fade-c) 56.30%,transparent) 35.0%,color-mix(in srgb,var(--fade-c) 51.88%,transparent) 37.5%,color-mix(in srgb,var(--fade-c) 47.52%,transparent) 40.0%,color-mix(in srgb,var(--fade-c) 43.25%,transparent) 42.5%,color-mix(in srgb,var(--fade-c) 39.10%,transparent) 45.0%,color-mix(in srgb,var(--fade-c) 35.09%,transparent) 47.5%,color-mix(in srgb,var(--fade-c) 31.25%,transparent) 50.0%,color-mix(in srgb,var(--fade-c) 27.60%,transparent) 52.5%,color-mix(in srgb,var(--fade-c) 24.15%,transparent) 55.0%,color-mix(in srgb,var(--fade-c) 20.92%,transparent) 57.5%,color-mix(in srgb,var(--fade-c) 17.92%,transparent) 60.0%,color-mix(in srgb,var(--fade-c) 15.16%,transparent) 62.5%,color-mix(in srgb,var(--fade-c) 12.65%,transparent) 65.0%,color-mix(in srgb,var(--fade-c) 10.38%,transparent) 67.5%,color-mix(in srgb,var(--fade-c) 8.37%,transparent) 70.0%,color-mix(in srgb,var(--fade-c) 6.60%,transparent) 72.5%,color-mix(in srgb,var(--fade-c) 5.08%,transparent) 75.0%,color-mix(in srgb,var(--fade-c) 3.79%,transparent) 77.5%,color-mix(in srgb,var(--fade-c) 2.72%,transparent) 80.0%,color-mix(in srgb,var(--fade-c) 1.86%,transparent) 82.5%,color-mix(in srgb,var(--fade-c) 1.20%,transparent) 85.0%,color-mix(in srgb,var(--fade-c) 0.71%,transparent) 87.5%,color-mix(in srgb,var(--fade-c) 0.37%,transparent) 90.0%,color-mix(in srgb,var(--fade-c) 0.16%,transparent) 92.5%,color-mix(in srgb,var(--fade-c) 0.05%,transparent) 95.0%,color-mix(in srgb,var(--fade-c) 0.01%,transparent) 97.5%,color-mix(in srgb,var(--fade-c) 0.00%,transparent) 100.0%)}
@media (max-width:640px){body.skin-trade{--fade-h:100px}}

/* ---------- accreditations: one slow, continuous row (sites 1-3) ---------- */
.acc-row.acc-scroll{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,40px)}
.acc-view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.acc-track{display:flex;width:max-content;animation:acc-roll 38s linear infinite}
.acc-view:hover .acc-track,.acc-view:focus-within .acc-track{animation-play-state:paused}
.acc-set{display:flex;align-items:center;gap:clamp(36px,4.5vw,64px);padding-right:clamp(36px,4.5vw,64px)}
.acc-item{display:flex;align-items:center;flex:none;line-height:0}
.acc-row .acc-item img{height:56px;width:auto;max-width:180px;margin:0;object-fit:contain}
.acc-row .acc-item img[src*="tsa"]{height:64px}
.acc-ins{gap:10px;line-height:1.25;font-size:.85rem;max-width:200px}
.acc-ins svg{width:34px;height:34px;flex:none;color:var(--ink)}
.acc-ins b{display:block;font-size:.95rem}
@keyframes acc-roll{to{transform:translateX(-50%)}}
@media (max-width:1080px){.acc-row.acc-scroll{grid-template-columns:minmax(0,1fr)}.acc-row.acc-scroll p{max-width:none}}
@media (max-width:640px){.acc-row .acc-item img{height:42px}.acc-row .acc-item img[src*="tsa"]{height:50px}.acc-track{animation-duration:30s}}
@media (prefers-reduced-motion:reduce){.acc-track{animation:none;width:auto}.acc-set{flex-wrap:wrap;row-gap:18px}.acc-set[aria-hidden]{display:none}.acc-view{-webkit-mask-image:none;mask-image:none}}

/* ---------- review carousel ---------- */
.revc{margin-top:clamp(22px,3vw,34px)}
.rc-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.rc-score{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.rc-score b{font:800 2rem/1 var(--fd)}
.rc-score span{color:var(--mute);font-weight:600}
.dark .rc-score span,.deep .rc-score span{color:var(--on2)}
.rc-score a{color:inherit}
.rc-nav{display:flex;gap:10px}
.rc-nav button{width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:var(--btn-radius,999px);background:var(--ink);color:#fff;cursor:pointer}
.rc-nav button svg{width:20px;height:20px}
.rc-prev svg{transform:rotate(180deg)}
.rc-nav button:hover{background:#000}
.rc-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/3);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px;outline-offset:4px}
.rc-track::-webkit-scrollbar{display:none}
.rc-card{scroll-snap-align:start;margin:0;display:flex;flex-direction:column;gap:12px;background:#fff;color:var(--ink);border-radius:var(--radius);padding:24px;box-shadow:inset 0 0 0 1px var(--rule)}
.rc-card .stars svg{width:16px;height:16px}
.rc-card blockquote{margin:0;flex:1}
.rc-card blockquote b{display:block;font:700 1.08rem/1.3 var(--fd);margin-bottom:8px}
.rc-card blockquote p{font-size:.98rem;line-height:1.5;color:#3a3f45}
.rc-card figcaption{display:flex;flex-direction:column;gap:2px;font-size:.85rem;font-weight:600;color:var(--mute);padding-top:12px;border-top:1px solid var(--rule)}
@media (max-width:1080px){.rc-track{grid-auto-columns:calc((100% - 20px)/2)}}
@media (max-width:640px){.rc-track{grid-auto-columns:86%}.rc-score b{font-size:1.6rem}.rc-nav button{width:42px;height:42px}}

/* the family panel no longer carries reviews, so it is two columns */
.e-con.why-grid{grid-template-columns:minmax(0,.62fr) minmax(0,1.2fr)}
@media (min-width:1081px){.skin-hybrid .e-con.why-grid{grid-template-columns:minmax(0,.62fr) minmax(0,1.2fr)}}
@media (max-width:640px){.e-con.why-grid{grid-template-columns:minmax(0,1fr)}}

/* footer: Instagram and Facebook side by side */
.ft .ft-social{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px}
.ft .ft-social a{display:inline-flex;align-items:center;gap:8px}

/* polish pass */
.hd .tel{min-height:44px}
.g,.sample{font-size:max(12px,.75rem)}
/* site 3's contact header is yellow, so its ticks are drawn in ink, not yellow */
body.skin-livery .pagehead.quote-top .ticks svg{fill:#121212}
@media (max-width:640px){.ft .ft-social{gap:8px 18px}}
@media (prefers-reduced-motion:reduce){.acc-set{column-gap:clamp(28px,4vw,52px);padding-right:0}}

/* live Google reviews (Trustindex) sit in the same section as the old carousel and use the site's type */
.revc-google .ti-widget,.revc-google .ti-widget *{font-family:inherit!important}
.revc-google .ti-widget .ti-review-item>.ti-inner{border-radius:var(--radius)!important}