/* =============================================================
   Home page skin (.shk-home)

   Follows the layout the client's audience already knows from the
   current site: blue service band, full-bleed photo hero with the
   headline set large and uppercase, flat photo-topped service
   cards, and a solid blue call-to-action strip.

   Only the treatment is inherited. Type, colour and spacing come
   from the theme tokens, so this reads as the same site rather
   than a transplant.
   ============================================================= */

/* ---------- Blue service band above the hero ---------- */
.shk-band{
  background:var(--c-primary); color:#fff; text-align:center;
  padding:.9rem 16px;
}
.shk-band p{
  margin:0; font-family:var(--font-head); font-weight:700;
  font-size:clamp(.72rem,.62rem + .35vw,.92rem);
  letter-spacing:.06em; text-transform:uppercase; line-height:1.5;
}
/* The logo badge hangs down across this band, so the copy is pushed clear of
   it rather than disappearing underneath. Mobile keeps the logo inside the
   bar, so no offset is needed there. */
@media (min-width:861px){ .shk-band p{ padding-left:150px } }
@media (min-width:1200px){ .shk-band p{ padding-left:172px } }

/* ---------- Photo hero ---------- */
.shk-phero{
  position:relative; overflow:hidden; color:#fff; text-align:center;
  background-color:var(--c-primary-900); background-size:cover;
  /* Anchored to the top of the frame. These are photos of people working, and
     a centred crop on a wide hero cuts their heads off. */
  background-position:var(--hero-pos, center top);
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(420px,62vw,640px);
}
/* A hero whose background is the video still needs a still behind it: it is
   what the visitor sees on a phone, on reduced motion, and for the couple of
   seconds the file is loading. It is a frame of the same clip, so the swap is
   invisible. */
.shk-phero[data-video]{ background-position:var(--hero-pos, center center) }

/* ---------- Hero background video ---------- */
.shk-phero-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  object-position:var(--hero-pos, center center);
  /* Held back until the first frame is ready, so the carousel underneath
     is what shows while the file loads. */
  opacity:0; transition:opacity .8s ease;
  pointer-events:none; background:var(--c-primary-900);
}
.shk-phero.has-video .shk-phero-video{ opacity:1 }
/* With the video up, the carousel is only the fallback underneath, so its
   dots would be lying about what the visitor is looking at. */
.shk-phero.has-video .shk-phero-dots{ display:none }
@media (prefers-reduced-motion:reduce){ .shk-phero-video{ display:none } }

/* ---------- Hero slideshow ---------- */
.shk-phero-slides{ position:absolute; inset:0; z-index:0 }
.shk-phero-slides span{
  position:absolute; inset:0;
  background-size:cover; background-position:var(--hero-pos, center top);
  background-repeat:no-repeat;
  opacity:0; transition:opacity 1.1s ease;
}
.shk-phero-slides span.is-on{ opacity:1 }
/* With a stack on top, the section's own image is only the first paint. */
.shk-phero.has-slides{ background-image:none !important }

.shk-phero-dots{
  position:absolute; left:0; right:0; bottom:clamp(16px,3vw,28px);
  z-index:2; display:flex; justify-content:center; gap:.55rem;
}
.shk-phero-dots button{
  width:11px; height:11px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.75); background:transparent;
  transition:background-color .2s ease, transform .2s ease;
}
.shk-phero-dots button:hover{ background:rgba(255,255,255,.5) }
.shk-phero-dots button.is-on{ background:#fff; transform:scale(1.15) }
@media (prefers-reduced-motion:reduce){
  .shk-phero-slides span, .shk-phero-dots button{ transition:none }
}
.shk-phero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(42,31,23,.58),rgba(42,31,23,.70));
}
.shk-phero.has-video::before{
  background:
    linear-gradient(180deg,rgba(42,31,23,.72),rgba(42,31,23,.62) 45%,rgba(42,31,23,.78));
}
.shk-phero-in{ position:relative; z-index:2; max-width:1100px; padding:clamp(3rem,7vw,5rem) 16px }
/* The footage is a wide band, close to 3.7:1. Letting the hero run to 640px
   tall on a wide screen would blow it up and throw most of it away. */
@media (min-width:861px){
  .shk-phero.has-video{ min-height:clamp(440px,32vw,540px) }
}
.shk-phero h1{
  color:#fff; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(2rem,1.1rem + 4.4vw,4.2rem); line-height:1.06; margin:0 0 clamp(1.5rem,3vw,2.25rem);
  text-shadow:0 2px 26px rgba(4,6,40,.45);
}
.shk-phero-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem;
  list-style:none; margin:0; padding:0;
}
.shk-phero-links a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:.7rem 1.5rem; border-radius:999px;
  border:2px solid rgba(255,255,255,.75); color:#fff; text-decoration:none;
  font-family:var(--font-head); font-weight:700; font-size:.88rem;
  letter-spacing:.06em; text-transform:uppercase;
  backdrop-filter:blur(2px);
  transition:background-color .15s ease, border-color .15s ease;
}
.shk-phero-links a:hover{ background:rgba(255,255,255,.16); border-color:#fff; color:#fff }

/* ---------- Section head with the short rule under it ---------- */
.shk-rule-head h2{ text-transform:uppercase; margin-bottom:.6rem }
.shk-rule-head::after{
  content:''; display:block; width:min(360px,70%); height:3px;
  background:var(--c-primary); margin:0 0 1.5rem;
}
.shk-center.shk-rule-head::after{ margin-inline:auto }

/* A text link that behaves like the old site's "SCHEDULE NOW »" */
.shk-textcta{
  display:inline-flex; align-items:center; gap:.5rem; min-height:48px;
  font-family:var(--font-head); font-weight:800; font-size:1.05rem;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--c-primary); text-decoration:none;
}
.shk-textcta::after{ content:'\00bb'; font-size:1.3em; line-height:1; transition:transform .15s ease }
.shk-textcta:hover{ color:var(--c-primary-800) }
.shk-textcta:hover::after{ transform:translateX(4px) }
@media (prefers-reduced-motion:reduce){ .shk-textcta::after{ transition:none } }

/* ---------- Intro block ---------- */
/* The whole band sits on the faintest warm tint, just enough to lift it off
   the white above and below without becoming a coloured section. */
.shk-intro-band{
  background:
    linear-gradient(180deg, rgba(247,242,237,0) 0%, rgba(247,242,237,.55) 18%, rgba(247,242,237,.55) 82%, rgba(247,242,237,0) 100%);
}
.shk-intro-grid{ display:grid; gap:var(--sp-md); align-items:center; position:relative }
@media (min-width:980px){ .shk-intro-grid{ grid-template-columns:1fr 1fr; gap:var(--sp-lg) } }
.shk-intro-media{ position:relative }
/* A brown plate offset behind the photo, which is the old site's move without
   the slab running off the screen. */
@media (min-width:980px){
  .shk-intro-media::before{
    content:''; position:absolute; z-index:0;
    inset:-18px -18px 18px 18px;
    background:var(--c-primary);
    border-radius:var(--radius-lg);
  }
}
.shk-intro-media > *{ position:relative; z-index:1 }
.shk-intro-media img{
  width:100%; height:auto; display:block;
  aspect-ratio:4/3; object-fit:cover; object-position:center top;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
}
@media (min-width:980px){ .shk-intro-media img{ aspect-ratio:5/4 } }

/* Fewer words, more air. The copy here is an introduction, not the pitch. */
.shk-intro-grid .shk-lead{ font-size:clamp(1.02rem,.98rem + .3vw,1.14rem); color:var(--c-ink-2) }
.shk-intro-grid .shk-checks{ margin-block:1.4rem }
.shk-intro-grid .ctr-btn{ margin-top:.4rem }

/* ---------- Click-to-play video facade ---------- */
.shk-video{
  position:relative; display:block; width:80%; margin-inline:auto;
  border:0; padding:0; cursor:pointer;
  background:var(--c-primary-900); overflow:hidden; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); aspect-ratio:16/9;
}
@media (max-width:640px){ .shk-video{ width:100% } }
.shk-video img{ width:100%; height:100%; object-fit:cover; opacity:.92; transition:opacity .2s ease }
.shk-video:hover img{ opacity:1 }
.shk-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.shk-video-play{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
}
.shk-video-play span{
  width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.94); box-shadow:0 10px 30px rgba(4,6,40,.38);
  transition:transform .2s ease;
}
.shk-video:hover .shk-video-play span{ transform:scale(1.06) }
.shk-video-play svg{ width:26px; height:26px; margin-left:4px; fill:var(--c-primary) }
.shk-video-cap{
  margin:.65rem auto 0; font-size:.85rem; color:var(--c-ink-3);
  width:80%; text-align:center;
}
@media (max-width:640px){ .shk-video-cap{ width:100% } }
/* Once the blue slab is behind it, the caption needs to read on blue. */
@media (min-width:980px){
  .shk-intro-media .shk-video-cap{ color:rgba(255,255,255,.88) }
}
@media (prefers-reduced-motion:reduce){
  .shk-video img, .shk-video-play span{ transition:none }
}

/* ---------- Service cards, flat photo on top ---------- */
.shk-svc-grid{ display:grid; gap:1.5rem }
@media (min-width:640px){ .shk-svc-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:980px){ .shk-svc-grid{ grid-template-columns:repeat(3,1fr) } }
.shk-svc-card{
  position:relative;
  background:var(--c-surface-2); display:flex; flex-direction:column;
  text-align:center; overflow:hidden;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.shk-svc-card:hover,
.shk-svc-card:focus-within{ transform:translateY(-3px); box-shadow:var(--shadow-md) }
@media (prefers-reduced-motion:reduce){ .shk-svc-card{ transition:none } }
/* If the band behind them is the same tint, lift the cards with a hairline. */
.shk-tint .shk-svc-card{ border:1px solid var(--c-line); background:var(--c-surface) }
.shk-svc-card img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  /* The photo carries the wash itself. Animating a separate layer on top of a
     scaling image left the gradient painting in patches: two composited layers
     over the same box, repainting at different moments. One element, one
     repaint, no tearing. */
  transition:filter .3s ease;
}
.shk-svc-card:hover img,
.shk-svc-card:focus-within img{
  filter:sepia(.35) saturate(1.15) hue-rotate(-14deg) brightness(.78);
}

/* The gradient is a real element in the flow of the card, not an overlay
   floating over a transformed sibling, so it cannot fall out of register. */
.shk-svc-card::before{
  content:''; position:absolute; left:0; right:0; z-index:1;
  top:0; aspect-ratio:16/10; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(42,31,23,0) 38%,
    rgba(58,43,32,.42) 72%,
    rgba(74,56,44,.86) 100%);
  opacity:0; transition:opacity .3s ease;
  /* Its own compositing layer, so it is never half-painted. */
  transform:translateZ(0); will-change:opacity; backface-visibility:hidden;
}
.shk-svc-card:hover::before,
.shk-svc-card:focus-within::before{ opacity:1 }

/* The whole card is the click target, not just the button. One real link
   still does the work, so the tab order and screen readers are unchanged. */
.shk-svc-card .ctr-btn::after{
  content:''; position:absolute; inset:0; z-index:2;
}
.shk-svc-card{ cursor:pointer }
/* Text stays selectable inside the stretched link. */
.shk-svc-card h3, .shk-svc-card p{ position:relative; z-index:3; pointer-events:none }

@media (prefers-reduced-motion:reduce){
  .shk-svc-card img, .shk-svc-card::before{ transition:none }
}
.shk-svc-card-body{ padding:1.5rem 1.35rem 1.75rem; display:flex; flex-direction:column; flex:1 }
.shk-svc-card h3{
  font-size:1.3rem; color:var(--c-primary-900); margin:0 0 .6rem;
}
.shk-svc-card p{ color:var(--c-ink-2); font-size:.95rem; margin:0 0 1.25rem; flex:1 }
.shk-svc-card .ctr-btn{
  align-self:center; border-radius:999px; border-color:var(--c-primary); color:var(--c-primary);
  background:transparent; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.6rem 1.4rem; min-height:44px;
}
.shk-svc-card .ctr-btn:hover{ background:var(--c-primary); color:#fff }

/* ---------- Founder line under the about copy ---------- */
.shk-founder{ display:flex; align-items:center; gap:1rem; margin-top:var(--sp-md) }
.shk-founder img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none }
.shk-founder p{ margin:0; line-height:1.4 }
.shk-founder strong{ display:block; font-family:var(--font-head); font-size:1.02rem; color:var(--c-ink) }
.shk-founder span{ font-size:.88rem; color:var(--c-ink-3) }

/* ---------- Solid blue closing strip ---------- */
.shk-strip-cta{ background:var(--c-primary); color:#fff }
.shk-strip-cta-in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1rem 2rem; padding:1.75rem 0; text-align:center;
}
.shk-strip-cta p{
  margin:0; font-family:var(--font-head); font-weight:800;
  font-size:clamp(1.05rem,.9rem + .8vw,1.5rem);
  letter-spacing:.02em; text-transform:uppercase; color:#fff;
}
.shk-strip-cta .ctr-btn{
  border-radius:999px; border-color:#fff; color:#fff; background:transparent;
  font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
}
.shk-strip-cta .ctr-btn:hover{ background:#fff; color:var(--c-primary) }

/* ---------- Decorated figure ----------
   The decoration used to be sized in percentages of the figure and ran from
   -14% to -20% on every side, so on a wide column it spilled a long way past
   the photo and read as stray background rather than as a frame. It is now a
   fixed offset that stays close to the edges, and the photo carries the weight:
   a brass rule offset behind it, a short dotted panel in the bottom-left
   corner only, and a real shadow. */
.shk-figure-deco{ position:relative; isolation:isolate }
/* Brass rule offset behind the photo, bottom-left, like a mounted print. */
.shk-figure-deco::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:-14px; right:22px; top:22px; bottom:-14px;
  border:1.5px solid rgba(90,67,52,.28);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, rgba(201,195,187,.22), rgba(247,242,237,0) 62%);
}
/* Dotted panel, clipped to the corner it decorates instead of washing over
   the whole column. */
.shk-figure-deco::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:-14px; bottom:-14px; width:132px; height:108px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%235A4334' fill-opacity='.34'/%3E%3C/svg%3E") left bottom / 18px 18px;
  border-bottom-left-radius:var(--radius-lg);
}
.shk-figure-deco > *{ position:relative; z-index:1 }
.shk-figure-deco img{
  border-radius:var(--radius-lg);
  box-shadow:0 26px 60px rgba(36,28,22,.22), 0 3px 10px rgba(36,28,22,.10);
  /* .shk-intro-media forces 4/3, then 5/4 on desktop, because the home band
     runs beside a long column of copy. A portrait of two people cropped to a
     landscape box loses the room around them and reads as a thin strip, so
     this figure keeps the file's own proportions and shows the whole frame. */
  aspect-ratio:auto; height:auto; object-fit:contain;
}
@media (max-width:979px){
  .shk-figure-deco::before{ left:-10px; right:16px; top:16px; bottom:-10px }
  .shk-figure-deco::after{ width:96px; height:80px; left:-10px; bottom:-10px }
}

/* ---------- Numbered list with brass markers ---------- */
.shk-numlist{ list-style:none; margin:0; padding:0; counter-reset:shk-num }
.shk-numlist li{
  counter-increment:shk-num; position:relative;
  padding-left:3rem; margin-bottom:1.15rem; color:var(--c-ink-2);
}
.shk-numlist li::before{
  content:counter(shk-num); position:absolute; left:0; top:-.1em;
  width:2.1rem; height:2.1rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--c-primary-050); color:var(--c-primary);
  font-family:var(--font-head); font-weight:800; font-size:.95rem;
  border:1px solid var(--c-primary-100);
}
.shk-numlist li strong{ color:var(--c-ink) }

/* ---------- Closing CTA inside a dark band ----------
   Not to be confused with .shk-strip-cta, which is the section wrapper on the
   home and paints its own brown. This one lives inside a band that is already
   dark, so it only handles layout. */
.shk-endcta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1rem 2rem; text-align:center;
}
.shk-endcta h2{
  margin:0; color:#fff;
  font-size:clamp(1.15rem,.95rem + .9vw,1.7rem);
  letter-spacing:.01em; text-transform:uppercase;
}
.shk-endcta .ctr-btn{
  flex:none; border-radius:999px; border-color:#fff; color:#fff; background:transparent;
  font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
}
.shk-endcta .ctr-btn:hover{ background:#fff; color:var(--c-primary-900) }

/* ---------- Contact ---------- */
.shk-contact-card{
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--radius-lg); padding:clamp(1.4rem,2.6vw,1.9rem);
  box-shadow:var(--shadow-sm); text-align:center;
}
.shk-contact-ico{
  display:grid; place-items:center; width:54px; height:54px; margin:0 auto 1rem;
  border-radius:50%; background:var(--c-primary-050); color:var(--c-primary);
}
.shk-contact-ico svg{ width:24px; height:24px }
.shk-contact-card h3{ margin:0 0 .5rem; font-size:1.1rem }
.shk-contact-big{ margin:0 0 .65rem; font-family:var(--font-head); font-weight:800; line-height:1.3 }
.shk-contact-big a{ color:var(--c-primary); text-decoration:none; word-break:break-word }
.shk-contact-big a:hover{ color:var(--c-primary-900); text-decoration:underline }
.shk-contact-card p{ color:var(--c-ink-2); font-size:.93rem; margin:0 }

.shk-contact-nap{
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--radius-lg); padding:clamp(1.5rem,3vw,2.2rem);
  box-shadow:var(--shadow-sm);
}
.shk-contact-nap h3{ margin:0 0 .6rem; font-size:1.15rem }
.shk-contact-nap h4{
  margin:1.6rem 0 .6rem; font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-ink-3);
}
.shk-contact-nap address{ font-style:normal; line-height:1.9; color:var(--c-ink-2) }
.shk-contact-nap address a{ font-weight:700; color:var(--c-primary); text-decoration:none }
.shk-hours{ width:100%; border-collapse:collapse; font-size:.94rem }
.shk-hours th, .shk-hours td{
  text-align:left; padding:.5rem 0; border-bottom:1px solid var(--c-line);
  font-weight:600; color:var(--c-ink-2);
}
.shk-hours td{ text-align:right; color:var(--c-ink) }
.shk-hours tr:last-child th, .shk-hours tr:last-child td{ border-bottom:0 }
.shk-hours-note{ margin:.9rem 0 0; font-size:.86rem; color:var(--c-ink-3) }

/* ---------- Service-area map ----------
   A schematic of the Cape with a pin per town. Drawn inline so it costs no
   request, needs no API key, and carries no third-party tracking, which a
   Google Maps embed on every page does. */
.shk-map{ position:relative }
.shk-map-frame{
  position:relative; width:100%; max-width:1000px; margin-inline:auto;
  aspect-ratio:800/300;
}
.shk-map-svg{ position:absolute; inset:0; width:100%; height:100% }
.shk-map-pins{ position:absolute; inset:0 }
.shk-map-pin{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:4px;
  text-decoration:none; color:#fff; z-index:1;
}
/* The label goes above or below its dot depending on where the town sits, so
   two neighbours on a narrow stretch of the Cape do not overlap. */
.shk-map-pin--up{ flex-direction:column-reverse }
.shk-map-pin--down{ flex-direction:column }
.shk-map-dot{
  width:13px; height:13px; border-radius:50%; flex:none;
  background:var(--c-accent); border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
  transition:transform .18s ease, background-color .18s ease;
}
.shk-map-label{
  font-family:var(--font-head); font-weight:700; font-size:.66rem;
  letter-spacing:.03em; white-space:nowrap;
  background:rgba(27,19,13,.82); padding:2px 7px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  transition:background-color .18s ease, border-color .18s ease;
}
.shk-map-pin:hover, .shk-map-pin:focus-visible{ z-index:3; color:#fff }
.shk-map-pin:hover .shk-map-dot,
.shk-map-pin:focus-visible .shk-map-dot{ transform:scale(1.45); background:#fff }
.shk-map-pin:hover .shk-map-label,
.shk-map-pin:focus-visible .shk-map-label{ background:var(--c-primary); border-color:var(--c-accent) }
.shk-map-note{
  text-align:center; margin:1rem 0 0; font-size:.82rem; color:rgba(255,255,255,.55);
}
/* Under about 700px the labels collide, so the map becomes a plain list of
   towns, which is what a phone wants anyway. */
@media (max-width:720px){
  .shk-map-frame{ aspect-ratio:auto; height:auto }
  .shk-map-svg{ position:static; height:auto; opacity:.5 }
  .shk-map-pins{
    position:static; display:flex; flex-wrap:wrap; justify-content:center;
    gap:.45rem; margin-top:1.1rem;
  }
  .shk-map-pin{ position:static; transform:none; flex-direction:row }
  .shk-map-label{ font-size:.8rem; padding:.42rem .8rem }
}
@media (prefers-reduced-motion:reduce){
  .shk-map-dot, .shk-map-label{ transition:none }
}

/* ---------- Service page hero (split) ------------------------ *
 * A photo behind a centred headline gives the eye nothing to hold on a money
 * page. This splits it: the claim, the proof and the two actions sit on a dark
 * band at the left, the photograph carries the right. Everything stays on the
 * header grid, so the H1 starts exactly under the logo.
 */

.shk-shero{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, #2C2019 0%, #241A13 46%, #1B130D 100%);
  color:#fff;
}
/* Faint square rule behind the copy. Two repeating gradients, masked so it
   fades before it reaches the photo. */
.shk-shero::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:
    linear-gradient(rgba(201,195,187,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,195,187,.07) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(105deg, #000 0%, #000 44%, transparent 72%);
  mask-image:linear-gradient(105deg, #000 0%, #000 44%, transparent 72%);
}
.shk-shero-in{
  position:relative; z-index:2;
  max-width:var(--w-wide); margin-inline:auto; padding:clamp(2.6rem,5vw,4.2rem) 16px;
  display:grid; gap:clamp(1.8rem,4vw,3rem); align-items:center;
}
@media (min-width:980px){
  .shk-shero-in{ grid-template-columns:1.04fr .96fr; padding-block:clamp(3.2rem,4.6vw,4.6rem) }
}
/* The logo badge hangs out of the header and down into the top of this hero.
   With the eyebrow line gone the H1 moved up into that space, so the first
   line of the heading now needs the clearance the eyebrow used to provide.
   Fixed values rather than a viewport unit, because the badge overhang is a
   fixed number of pixels at each breakpoint and vw units drift away from it. */
@media (min-width:861px){ .shk-shero-in{ padding-top:104px } }
@media (min-width:1200px){ .shk-shero-in{ padding-top:124px } }

.shk-shero-eyebrow{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-head); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:.74rem; color:var(--c-accent);
  margin-bottom:1rem;
}
.shk-shero-eyebrow::before,
.shk-shero-eyebrow::after{
  content:''; height:1px; background:rgba(201,195,187,.45); flex:1 1 auto; max-width:34px;
}
.shk-shero-eyebrow::before{ flex:0 0 26px }

.shk-shero h1{
  margin:0; color:#fff; line-height:1.06;
  font-size:clamp(2rem,1.15rem + 2.9vw,3.4rem);
  text-transform:uppercase; letter-spacing:-.01em;
}
.shk-shero-lead{
  margin:1rem 0 0; max-width:52ch;
  font-size:clamp(1rem,.96rem + .22vw,1.12rem); line-height:1.62;
  color:rgba(255,255,255,.82);
}

.shk-shero-chips{
  list-style:none; margin:1.5rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.55rem;
}
.shk-shero-chips li{
  display:flex; align-items:center; gap:.45rem;
  padding:.44rem .8rem; border-radius:999px;
  border:1px solid rgba(201,195,187,.32); background:rgba(255,255,255,.04);
  font-family:var(--font-head); font-weight:700; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.9);
}
.shk-shero-chips svg{ width:14px; height:14px; flex:none; color:var(--c-accent) }

.shk-shero-cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.7rem }
/* Any ghost button dropped in here must not keep the light-page white fill. */
.shk-shero-cta .ctr-btn--ghost,
.shk-shero-cta .ctr-btn--ghost-light{ background:transparent; border-color:rgba(255,255,255,.45); color:#fff }
.shk-shero-cta .ctr-btn--ghost:hover,
.shk-shero-cta .ctr-btn--ghost-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff }

/* Photo, with a silver bracket set off the top-right corner and a small
   floating chip at the bottom-left. */
.shk-shero-media{ position:relative; margin:0 }
.shk-shero-media img{
  display:block; width:100%; height:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius-lg); background:none;
}
.shk-shero-media::before{
  content:''; position:absolute; top:-12px; right:-12px; width:96px; height:96px;
  border-top:2px solid var(--c-accent); border-right:2px solid var(--c-accent);
  border-top-right-radius:var(--radius-lg); pointer-events:none;
}
.shk-shero-chip{
  position:absolute; left:-10px; bottom:18px;
  display:flex; align-items:center; gap:.45rem;
  padding:.62rem 1rem; border-radius:999px;
  background:var(--c-surface); color:var(--c-primary);
  box-shadow:0 14px 30px rgba(20,13,8,.38);
  font-family:var(--font-head); font-weight:800; font-size:.76rem;
  letter-spacing:.05em; text-transform:uppercase;
}
.shk-shero-chip svg{ width:15px; height:15px; flex:none }
@media (max-width:979px){
  .shk-shero-media::before{ width:70px; height:70px; top:-8px; right:-8px }
  .shk-shero-chip{ left:12px; bottom:12px; font-size:.7rem; padding:.52rem .85rem }
  /* Photo first on a phone. Stacked in source order the visitor met an eyebrow,
     a headline, a paragraph, three badges and two buttons before seeing what
     the service even looks like, and the photo is the fastest thing on the
     page to understand. Order, not markup, so the heading stays first in the
     document for a screen reader and for the crawler. */
  .shk-shero-in{ display:flex; flex-direction:column }
  .shk-shero-media{ order:-1; width:100% }
  .shk-shero-copy{ order:1 }
}
@media (max-width:540px){
  .shk-shero-chips li{ font-size:.67rem; padding:.38rem .66rem }
  .shk-shero-cta .ctr-btn{ flex:1 1 100%; justify-content:center }
}

/* ---------- Contact page ---------- */
/* A short dark band instead of a photo hero. The page has one job, the form,
   and the hero only needs to say who to call while it loads. */
.shk-chero{
  background:var(--c-primary-900); color:#fff;
  padding:clamp(2.6rem,5vw,4.2rem) 16px clamp(2.2rem,4vw,3.4rem);
}
/* The badge hangs into the band on desktop; start the copy under it. */
@media (min-width:980px){ .shk-chero{ padding-top:5.4rem } }
.shk-chero-in{ max-width:var(--w-wide,1320px); margin:0 auto }
.shk-chero .shk-eyebrow{ color:var(--c-accent) }
.shk-chero h1{
  margin:.35rem 0 .6rem; color:#fff; text-transform:uppercase;
  font-size:clamp(2.1rem,1.6rem + 2.4vw,3.4rem); line-height:1.02;
}
.shk-chero-lead{ margin:0; max-width:56ch; color:rgba(255,255,255,.86); font-size:clamp(1rem,.96rem + .3vw,1.12rem) }
.shk-chero-links{ display:flex; flex-wrap:wrap; gap:.6rem 2.2rem; margin:1.4rem 0 0; padding:0; list-style:none }
.shk-chero-links a{
  display:inline-flex; align-items:center; gap:.55rem;
  color:#fff; text-decoration:none; font-weight:700;
  font-family:var(--font-head); font-size:clamp(1.05rem,1rem + .4vw,1.3rem);
}
.shk-chero-links a:hover{ color:var(--c-accent) }
.shk-chero-links svg{ width:22px; height:22px; color:var(--c-accent) }

.shk-contact-grid{ display:grid; gap:var(--sp-md); align-items:start }
@media (min-width:980px){ .shk-contact-grid{ grid-template-columns:1.15fr .85fr; gap:var(--sp-lg) } }
.shk-contact-side{ position:sticky; top:96px; display:grid; gap:var(--sp-sm) }
.shk-contact-checks{ margin:0; padding:0 .4rem }
/* Inline form: the plugin already carries its own head and steps. Nothing to add. */
.shk-contact-form .cqp-overlay.cqp-inline{ margin:0 }

.shk-map-grid{ display:grid; gap:var(--sp-md); align-items:center }
@media (min-width:980px){ .shk-map-grid{ grid-template-columns:.9fr 1.1fr; gap:var(--sp-lg) } }
.shk-map-copy p{ color:var(--c-ink-2); max-width:52ch }
.shk-town-list{
  columns:3; column-gap:1.2rem; margin:1.2rem 0 1.4rem; padding:0; list-style:none;
  font-size:.96rem; line-height:2;
}
@media (max-width:560px){ .shk-town-list{ columns:2 } }
.shk-town-list li::before{ content:'\2022'; color:var(--c-accent); margin-right:.5rem }
.shk-town-list a{ color:var(--c-ink); text-decoration:none; font-weight:600 }
.shk-town-list a:hover{ color:var(--c-primary); text-decoration:underline }
.shk-gmap{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);
  border:1px solid var(--c-line); background:var(--c-surface-2);
  aspect-ratio:5/4;
}
.shk-gmap iframe{ display:block; width:100%; height:100%; filter:saturate(.85) }


/* ---------- Review band ([shk_reviews]) ----------
   Full-bleed, on the faintest warm grey, so the wall of stars reads as its own
   stop between two white sections rather than as more page content. */
.shk-reviews{
  width:100vw; margin-left:calc(50% - 50vw);
  background:var(--c-surface);
  border-block:1px solid var(--c-line);
  padding:clamp(2.4rem,4.5vw,3.8rem) 16px;
}
.shk-reviews-in{ max-width:var(--w-wide,1320px); margin:0 auto }
.shk-reviews .shk-section-head{ margin-inline:auto; margin-bottom:1.6rem }
/* Trustindex ships its own widths and margins; contain them rather than fight
   each one, so a provider change does not mean rewriting this. */
.shk-reviews-widget{ max-width:100%; overflow:hidden }
.shk-reviews-widget > *{ max-width:100% }

/* ---------- Home hero: mobile first fold ----------
   The fold has one job on a phone: say what this is, prove it is safe to call,
   and give a thumb something to hit. Everything that is not those three things
   waits below the fold. */
.shk-phero-kicker{
  margin:0 0 .6rem; font-family:var(--font-head); font-weight:700;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-accent);
}
.shk-phero--home h1{
  margin:0 0 .7rem; text-transform:none;
  font-size:clamp(2rem,1.35rem + 3vw,3.5rem); line-height:1.06; letter-spacing:-.01em;
}
/* The highlighted half of the phrase, which is what makes a hero read as one
   sentence with a point rather than a banner of title case. */
/* The highlighted half of the phrase: heavier than the rest of the line, with
   a brushed-silver fill and a highlight that travels across it. The gradient
   is painted on the text itself (background-clip), so there is no plate behind
   the words and the video still shows through the counters of the letters.
   A soft glow sits under it as a separate layer, because a text-shadow cannot
   survive background-clip:text. */
.shk-phero--home h1 em{
  position:relative; display:block; font-style:normal;
  font-weight:900; letter-spacing:-.015em;
  background:linear-gradient(100deg,
    #E8E3DC 0%, #FFFFFF 18%, #C9C3BB 38%,
    #FFFFFF 52%, #D8D2CA 70%, #F2EEE8 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:shk-sheen 5.5s ease-in-out infinite;
  filter:drop-shadow(0 2px 10px rgba(255,255,255,.18));
}
@keyframes shk-sheen{
  0%, 12%   { background-position:120% 0 }
  55%, 100% { background-position:-20% 0 }
}
@media (prefers-reduced-motion:reduce){
  .shk-phero--home h1 em{ animation:none; background-position:40% 0 }
}
/* Older engines that cannot clip a gradient to text fall back to the flat
   brass, rather than to transparent letters. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .shk-phero--home h1 em{ color:var(--c-accent); -webkit-text-fill-color:currentColor; background:none }
}
.shk-phero-sub{
  margin:0 auto .95rem; max-width:34ch;
  color:rgba(255,255,255,.88); font-size:clamp(.95rem,.9rem + .35vw,1.1rem); line-height:1.5;
}
/* Three facts, not a paragraph: scanned in the time a thumb takes to stop. */
.shk-phero-facts{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.35rem .75rem; margin:0 0 1.25rem; padding:0; list-style:none;
  font-family:var(--font-head); font-weight:700;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.shk-phero-facts li{ display:flex; align-items:center; gap:.75rem }
.shk-phero-facts li + li::before{
  content:''; width:4px; height:4px; border-radius:50%; background:var(--c-accent); flex:none;
}
.shk-phero-cta{ display:flex; flex-direction:column; align-items:center; gap:.6rem; margin-bottom:1.1rem }
.shk-phero-primary, .shk-phero-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:54px; padding:0 1.6rem; border-radius:999px;
  font-family:var(--font-head); font-weight:800; font-size:.95rem;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  transition:transform .18s ease, filter .18s ease;
}
.shk-phero-primary{ background:var(--c-accent); color:var(--c-primary-900) }
.shk-phero-primary:hover{ filter:brightness(1.06); transform:translateY(-1px); color:var(--c-primary-900) }
.shk-phero-ghost{ border:2px solid rgba(255,255,255,.55); color:#fff }
.shk-phero-ghost svg{ width:19px; height:19px }
.shk-phero-ghost:hover{ background:#fff; color:var(--c-primary-900); border-color:#fff }
@media (min-width:861px){
  .shk-phero-cta{ flex-direction:row; justify-content:center }
  .shk-phero-primary, .shk-phero-ghost{ min-height:56px }
}
@media (max-width:860px){
  /* Full screen, minus the header and the sticky bar, so the fold ends where
     the fold ends and the next section peeks rather than hides. */
  .shk-phero--home{ min-height:calc(100svh - 190px); align-items:flex-end }
  .shk-phero--home .shk-phero-in{ padding:2rem 18px 2.4rem }
  .shk-phero-primary, .shk-phero-ghost{ width:100%; max-width:340px }
  /* The portrait file fills the frame instead of being letterboxed. */
  .shk-phero.is-mobile-video .shk-phero-video{ object-position:center }
}
@media (max-width:380px){
  .shk-phero-facts{ font-size:.66rem; gap:.3rem .55rem }
  .shk-phero--home .shk-phero-in{ padding-bottom:1.8rem }
}

/* ---------- Hero marquee (mobile) ----------
   The services strip used to be an opaque block above the hero. On a phone it
   wrapped to three lines and pushed the video a third of the way down the
   screen, so the first thing anyone saw was a brown box. Over the video,
   translucent and on one moving line, it says the same thing in a strip the
   height of a thumbnail and the video starts at the top of the page. */
.shk-phero-mq{
  position:absolute; top:0; left:0; right:0; z-index:1;
  overflow:hidden; display:block;
  padding:.55rem 0;
  /* No fill: the point is that the footage keeps running behind the words. A
     hairline underneath is enough to read it as a strip, and the text carries
     a shadow instead of a plate so it survives a bright frame. */
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.18);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.shk-phero-mq-track{
  display:flex; width:max-content; will-change:transform;
  animation:shk-phero-mq 26s linear infinite;
}
.shk-phero-mq-track span{
  padding-inline:1.1rem; white-space:nowrap;
  font-family:var(--font-head); font-weight:700;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 3px rgba(20,15,11,.72), 0 0 14px rgba(20,15,11,.45);
}
/* Three copies, so one third of the track is a full loop. */
@keyframes shk-phero-mq{ to{ transform:translateX(-33.333%) } }
@media (prefers-reduced-motion:reduce){
  .shk-phero-mq-track{ animation:none }
  .shk-phero-mq{ -webkit-mask-image:none; mask-image:none }
}
/* Room for the strip so the kicker never starts underneath it. */
.shk-phero--home .shk-phero-in{ padding-top:3.4rem }
@media (min-width:861px){ .shk-phero--home .shk-phero-in{ padding-top:4.4rem } }

/* ---------- Figure carousel ([shk-figslides]) ----------
   Two or more photos in the space one used to take. The first image keeps
   its place in the flow so the column still has a height before any script
   runs; the rest are stacked on top of it and cross-faded. With JS off, or
   under reduced motion, the visitor simply sees the first photo. */
.shk-figslides{ position:relative }
.shk-figslides img{ transition:opacity .9s ease }
.shk-figslides img + img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
}
.shk-figslides img.is-on{ opacity:1 }
.shk-figslides-dots{
  position:absolute; left:0; right:0; bottom:14px; z-index:2;
  display:flex; justify-content:center; gap:.5rem;
}
.shk-figslides-dots button{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.85); background:rgba(20,15,11,.28);
  transition:background-color .2s ease, transform .2s ease;
}
.shk-figslides-dots button.is-on{ background:#fff; transform:scale(1.18) }
@media (prefers-reduced-motion:reduce){
  .shk-figslides img, .shk-figslides-dots button{ transition:none }
}