/* =============================================================
   Dr. Carpet Cleaner, core stylesheet
   Mobile-first. One rule serves every section; per-section
   variation arrives as inline custom properties, never as a new
   CSS rule. That is what keeps this file flat instead of growing
   with every page the client builds.
   ============================================================= */

/* ---------- 1. Tokens ---------------------------------------- */

:root{
  /* Brand: indigo and green taken straight from the S&K Cleaning logo */
  --c-primary:      #1E1BB0;
  --c-primary-600:  #19179A;
  --c-primary-800:  #131180;
  --c-primary-900:  #0D0B5E;
  --c-primary-050:  #EFEFFC;
  --c-primary-100:  #DCDBF8;

  /* Action: logo green for highlights, a deeper green for buttons so white text passes contrast */
  --c-accent:       #00C756;
  --c-accent-600:   #018767;
  --c-accent-050:   #E4FAEE;
  --c-cta:          #018767;
  --c-cta-600:      #016F55;

  /* Confidence */
  --c-success:      #0E9F6E;

  /* Neutrals */
  --c-ink:          #0F1B2D;
  --c-ink-2:        #4A5568;
  --c-ink-3:        #6B7789;
  --c-line:         #E2E8F0;
  --c-surface:      #FFFFFF;
  --c-surface-2:    #F4F7FB;
  --c-bg:           #FFFFFF;

  /* Type */
  --font-head: 'Jakarta', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'InterVar', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Space, radius, elevation */
  --sp-xs: .5rem;  --sp-sm: 1rem;  --sp-md: 2rem;
  --sp-lg: 3.5rem; --sp-xl: 5.5rem;
  --radius: 14px;  --radius-sm: 10px;  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(15,27,45,.06), 0 2px 8px rgba(15,27,45,.05);
  --shadow-md: 0 6px 16px rgba(15,27,45,.08), 0 2px 4px rgba(15,27,45,.04);
  --shadow-lg: 0 24px 54px rgba(15,27,45,.14);

  /* Widths */
  --w-wide: 1320px;  --w-normal: 1120px;  --w-narrow: 760px;

  /* Sticky call bar height, reserved so nothing is covered */
  --callbar: 0px;
}

@media (max-width:860px){ :root{ --callbar: 62px; } }

/* ---------- 2. Reset ----------------------------------------- */

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;            /* 16px: below this iOS zooms form fields */
  line-height:1.65;
  color:var(--c-ink);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;         /* belt and braces against stray wide children */
  padding-bottom:var(--callbar);
}

img,svg,video{ max-width:100%; height:auto; display:block }
img{ background:var(--c-surface-2) }
/* The placeholder tint above reserves space while a photo loads. On artwork
   with transparent corners it shows up as a square plate behind the shape, so
   it is switched off wherever a logo renders. */
.site-brand img, .shk-foot-brand img, .cqp-logo, .lf-svc-img img, .shk-sig img{ background:transparent }

h1,h2,h3,h4,h5{
  font-family:var(--font-head);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0 0 .55em;
  text-wrap:balance;
  color:var(--c-ink);
}
h1{ font-size:clamp(2rem, 1.35rem + 2.9vw, 3.5rem) }
h2{ font-size:clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem) }
h3{ font-size:clamp(1.15rem, 1.05rem + .45vw, 1.4rem); font-weight:700 }
h4{ font-size:1.0625rem; font-weight:700 }

p{ margin:0 0 1.1em }
p:last-child{ margin-bottom:0 }

a{ color:var(--c-primary); text-underline-offset:.18em }
a:hover{ color:var(--c-primary-800) }

ul,ol{ padding-left:1.15rem }
li{ margin-bottom:.4em }

hr{ border:0; border-top:1px solid var(--c-line); margin:var(--sp-md) 0 }

:focus-visible{ outline:3px solid var(--c-accent); outline-offset:2px; border-radius:4px }

::selection{ background:var(--c-primary-100); color:var(--c-primary-900) }

.screen-reader-text{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--c-primary); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0 }

/* ---------- 3. Container & grid ------------------------------ */

.ctr-container{
  padding-block:var(--pt, var(--sp-lg)) var(--pb, var(--sp-lg));
  background:var(--bg, transparent);
  position:relative;
}
.ctr-container--bgimg{ background-image:var(--bg-img); background-size:cover; background-position:center }
.ctr-inner{ margin-inline:auto; padding-inline:16px; max-width:var(--w-normal) }
@media (min-width:600px){ .ctr-inner{ padding-inline:clamp(1.25rem,4vw,2.5rem) } }
.ctr-container--wide   > .ctr-inner{ max-width:var(--w-wide) }
.ctr-container--narrow > .ctr-inner{ max-width:var(--w-narrow) }
.ctr-container--full   > .ctr-inner{ max-width:none; padding-inline:0 }

.ctr-grid{
  display:grid;
  grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));
  gap:var(--gap, var(--sp-sm));
}
@media (max-width:980px){ .ctr-grid{ grid-template-columns:repeat(var(--cols-md,2),minmax(0,1fr)) } }
@media (max-width:640px){ .ctr-grid{ grid-template-columns:repeat(var(--cols-sm,1),minmax(0,1fr)) } }

.shk-tint      { background:var(--c-surface-2) }
.shk-tint-brand{ background:var(--c-primary-050) }
.shk-dark{ background:var(--c-primary-900); color:#fff }
.shk-dark h1,.shk-dark h2,.shk-dark h3,.shk-dark h4{ color:#fff }
.shk-dark a{ color:#fff }
.shk-dark p{ color:rgba(255,255,255,.86) }

/* ---------- 4. Typographic helpers --------------------------- */

.shk-eyebrow{
  display:inline-block; font-family:var(--font-head);
  font-size:1rem; font-weight:700; letter-spacing:.02em; text-transform:none;
  color:var(--c-primary); margin:0 0 .75rem;
}
.shk-dark .shk-eyebrow{ color:var(--c-accent) }
.shk-lead{ font-size:clamp(1.05rem,1rem + .35vw,1.2rem); color:var(--c-ink-2); max-width:62ch }
.shk-dark .shk-lead{ color:rgba(255,255,255,.88) }
.shk-center{ text-align:center }
.shk-center .shk-lead{ margin-inline:auto }
.shk-section-head{ max-width:70ch; margin-bottom:var(--sp-md) }
.shk-section-head.shk-center{ margin-inline:auto }

/* ---------- 5. Buttons --------------------------------------- */

.ctr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px;                    /* comfortable touch target */
  padding:.8rem 1.5rem;
  border-radius:999px;
  font-family:var(--font-head); font-weight:700; font-size:1rem; line-height:1.2;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ctr-btn:active{ transform:translateY(1px) }
.ctr-btn svg{ width:20px; height:20px; flex:none }

.ctr-btn--primary{ background:var(--c-primary); color:#fff; box-shadow:var(--shadow-sm) }
.ctr-btn--primary:hover{ background:var(--c-primary-800); color:#fff; box-shadow:var(--shadow-md) }

.ctr-btn--accent{ background:var(--c-cta); color:#fff; box-shadow:var(--shadow-sm) }
.ctr-btn--accent:hover{ background:var(--c-cta-600); color:#fff; box-shadow:var(--shadow-md) }
/* Inside a dark band every link is turned white, and that rule was winning
   over the button own colour: white on the silver fill measured 1.75:1, a
   button you can see but not read. The fill already carries the contrast
   against the band, so the label goes back to the dark ink. */
.shk-dark .ctr-btn--accent,
.shk-dark .ctr-btn--accent:hover,
.shk-dark .ctr-btn--accent:focus{ color:#fff }

.ctr-btn--ghost{ border-color:var(--c-line); color:var(--c-ink); background:var(--c-surface) }
.ctr-btn--ghost:hover{ border-color:var(--c-primary); color:var(--c-primary) }

.ctr-btn--ghost-light{ border-color:rgba(255,255,255,.55); color:#fff; background:transparent }
.ctr-btn--ghost-light:hover{ background:rgba(255,255,255,.12); color:#fff }

.shk-btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:var(--sp-sm) }
@media (max-width:420px){ .shk-btn-row .ctr-btn{ width:100% } }

/* ---------- 6. Header ---------------------------------------- */

/* White header band so the navy and teal wordmark reads cleanly. */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--c-surface);
  border-bottom:1px solid var(--c-line);
}
.shk-topbar{
  background:var(--c-primary-900); color:#fff;
  font-size:.82rem; letter-spacing:.01em;
}
.shk-topbar-inner{
  max-width:var(--w-wide); margin-inline:auto;
  padding:.45rem clamp(1rem,4vw,2.5rem);
  display:flex; gap:1.25rem; align-items:center; justify-content:space-between;
}
.shk-topbar a{ color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:.35rem }
.shk-topbar a:hover{ text-decoration:underline }
.shk-topbar svg{ width:15px; height:15px; opacity:.85 }
@media (max-width:860px){ .shk-topbar{ display:none } }

.site-header-inner{
  max-width:var(--w-wide); margin-inline:auto;
  display:flex; align-items:center; gap:1rem;
  padding:.6rem 16px;
  min-height:64px;
}
@media (min-width:600px){ .site-header-inner{ padding-inline:clamp(1.25rem,4vw,2.5rem) } }

/* The Dr. Carpet mark is a horizontal wordmark, so it sits inside the bar
   at a fixed height and shrinks a step when the header sticks. */
.site-brand{
  display:flex; align-items:center; text-decoration:none; color:inherit; flex:none;
  position:relative; z-index:70;
}
.site-brand img{
  width:auto; height:80px; object-fit:contain;
  transition:height .2s ease;
}
@media (min-width:861px){
  .site-brand img{ height:92px }
  .site-header.is-stuck .site-brand img{ height:70px }
}
@media (min-width:1200px){
  .site-brand img{ height:106px }
}
@media (max-width:374px){ .site-brand img{ height:64px } }
@media (prefers-reduced-motion:reduce){ .site-brand img{ transition:none } }
.site-brand-text{ font-family:var(--font-head); font-weight:800; font-size:1.15rem; letter-spacing:-.02em }

/* Brand and CTA hold the flanks; the menu takes the space between them and
   centres inside it, so the bar reads as balanced rather than right-loaded. */
.site-nav{ flex:1 1 auto; min-width:0; display:flex; justify-content:center }
.site-nav .menu{ display:flex; gap:1.4rem; list-style:none; margin:0; padding:0; align-items:center; justify-content:center }
.site-nav .menu li{ margin:0; position:relative }
.site-nav .menu a{
  text-decoration:none; color:var(--c-ink); font-weight:600; font-size:1.06rem;
  padding:.5rem 0; display:inline-block; position:relative; white-space:nowrap;
}
.site-nav .menu a::after{
  content:''; position:absolute; left:0; right:100%; bottom:.15rem; height:2px;
  background:var(--c-accent); transition:right .2s ease;
}
.site-nav .menu a:hover::after,
.site-nav .menu .current-menu-item > a::after{ right:0 }

/* Dropdowns */
.site-nav .sub-menu{
  position:absolute; left:0; top:100%; min-width:250px;
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg); padding:.5rem; list-style:none; margin:.5rem 0 0;
  display:none; flex-direction:column; gap:0; z-index:70;
}
.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu{ display:flex }
.site-nav .sub-menu a{ padding:.55rem .75rem; border-radius:8px; width:100%; font-weight:500 }
.site-nav .sub-menu a::after{ display:none }
.site-nav .sub-menu a:hover{ background:var(--c-primary-050); color:var(--c-primary) }

.shk-header-cta{
  display:none; margin-left:1rem; flex:none; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-800) 52%, var(--c-primary-900) 100%);
  color:#fff; border-color:transparent;
  box-shadow:0 6px 18px rgba(12,29,57,.28);
}
.shk-header-cta:hover,
.shk-header-cta:focus-visible{
  background:linear-gradient(135deg, var(--c-primary-600) 0%, var(--c-primary-900) 100%);
  color:#fff; box-shadow:0 10px 26px rgba(12,29,57,.36);
}
/* A highlight that crosses the face every few seconds, the way a polished
   surface catches a light as you walk past it. */
.shk-header-cta::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-18deg); pointer-events:none;
  animation:shk-sheen 5.5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes shk-sheen{
  0%, 62%{ left:-60% }
  86%, 100%{ left:125% }
}
@media (min-width:1080px){ .shk-header-cta{ display:inline-flex } }
@media (prefers-reduced-motion:reduce){ .shk-header-cta::after{ animation:none; opacity:0 } }

.nav-toggle{
  display:none; background:none; border:0; margin-left:auto;
  width:48px; height:48px; padding:12px; cursor:pointer; color:var(--c-ink);
}
.nav-toggle span{ display:block; width:24px; height:2px; background:currentColor; border-radius:2px; transition:transform .22s ease, opacity .15s ease }
.nav-toggle span + span{ margin-top:6px }

@media (max-width:1079px){
  .nav-toggle{ display:block }
  .site-nav{ flex:0 0 auto; margin-left:auto; justify-content:flex-end }
  .site-nav .menu{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--c-surface-2); flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    padding:.5rem 16px 1.25rem; border-bottom:1px solid var(--c-line);
    box-shadow:var(--shadow-lg); overflow-y:auto; overscroll-behavior:contain;
    height:calc(100dvh - var(--shk-hdr-b, 104px)); padding-bottom:calc(1.25rem + 72px);
  }
  .site-nav.is-open .menu{ display:flex }
  .site-nav .menu > li{ border-bottom:1px solid var(--c-line) }
  .site-nav .menu > li:last-child{ border-bottom:0 }
  .site-nav .menu a{ padding:.9rem .25rem; font-size:1.05rem; min-height:48px }
  .site-nav .menu a::after{ display:none }
  .site-nav .sub-menu{
    position:static; display:flex; box-shadow:none; border:0; border-radius:0;
    margin:0 0 .5rem .75rem; padding:0; background:transparent;
  }
  .site-nav .sub-menu a{ font-size:.95rem; color:var(--c-ink-2); padding:.6rem .25rem }
  .site-nav.is-open .nav-toggle span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
  .site-nav.is-open .nav-toggle span:nth-child(2){ opacity:0 }
  .site-nav.is-open .nav-toggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }
}

/* Header phone shortcut, visible on small screens next to the burger */
.shk-header-tel{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:var(--c-primary-050); color:var(--c-primary); margin-left:auto; flex:none;
}
@media (min-width:1080px){ .shk-header-tel{ display:none } }

/* ---------- 7. Mobile sticky call bar ------------------------ */

.shk-callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  /* No gap and no backing colour: the 1px of --c-line between the buttons was
     showing as a white seam, which on a dark bar reads as a crack rather than
     a divider. The buttons carry their own edges instead. */
  display:none; gap:0; background:transparent;
  box-shadow:0 -4px 20px rgba(15,27,45,.14);
  padding-bottom:env(safe-area-inset-bottom);
}
/* Compact: 52px of bar instead of 62, and three targets across it. The label
   sits under the icon so each one stays a wide tap area without the row
   needing height. */
/* One line: icon and label side by side. Stacked they cost 52px of screen to
   say what fits on one, and the bottom of a phone viewport is the most
   expensive space on the page. */
.shk-callbar a{
  flex:1; display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:.45rem; min-height:46px; padding:.3rem .35rem;
  font-family:var(--font-head); font-weight:700; font-size:.78rem;
  letter-spacing:.01em; text-decoration:none; text-align:center;
}
.shk-callbar a svg{ width:19px; height:19px; flex:none }
.shk-callbar a span{ line-height:1.1; white-space:nowrap }
/* The number itself, not the word "call": seeing a local number is what tells
   a visitor this is a company down the road. */
/* The number gets a gradient rather than a flat block, so the three buttons
   read as one bar with a lead action instead of three tiles butted together. */
.shk-callbar .shk-cb-call{
  background:linear-gradient(100deg, var(--c-primary-900) 0%, var(--c-primary-800) 58%, var(--c-primary) 100%);
  color:#fff; flex:1.6;
}
.shk-callbar .shk-cb-call span{ font-size:.86rem; letter-spacing:0 }
.shk-callbar .shk-cb-sms{ background:var(--c-primary); color:#fff; box-shadow:inset 1px 0 0 rgba(255,255,255,.14) }
.shk-callbar .shk-cb-quote{ background:var(--c-cta); color:#fff }
@media (max-width:360px){
  .shk-callbar a{ font-size:.7rem; gap:.3rem }
  .shk-callbar .shk-cb-call span{ font-size:.78rem }
  .shk-callbar a svg{ width:17px; height:17px }
}
@media (max-width:860px){ .shk-callbar{ display:flex } }

/* ---------- 7b. Desktop quick-contact rail ------------------
   The call bar above is a phone pattern and stops at 860px, so on desktop the
   only persistent way to act was the header button, which scrolls with a mega
   menu over it. Three circles on the right edge instead, same order of intent
   as the bar: quote, text, call. Hidden on phones, where the bar already does
   this job. */
.shk-rail{
  position:fixed; right:24px; top:50%; transform:translateY(-50%);
  z-index:70; display:none; flex-direction:column; gap:14px;
}
@media (min-width:861px){ .shk-rail{ display:flex } }
.shk-rail-btn{
  position:relative; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; color:#fff; text-decoration:none;
  box-shadow:0 6px 18px rgba(6,14,28,.28);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.shk-rail-btn svg{ width:25px; height:25px }
.shk-rail-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(6,14,28,.34); color:#fff }
/* Brand order: brass for the money action, mid brown for text, darkest for the
   call, so the three read as one family rather than three loose buttons. */
.shk-rail-quote{ background:var(--c-accent-700, #00876B) }
.shk-rail-sms{ background:var(--c-primary) }
.shk-rail-call{ background:var(--c-primary-900) }
/* Label on hover, so the icons do not have to carry the meaning alone. */
.shk-rail-btn::after{
  content:attr(data-tip); position:absolute; right:calc(100% + 12px); top:50%;
  transform:translateY(-50%) translateX(6px);
  background:var(--c-primary-900); color:#fff;
  font-family:var(--font-head); font-size:.8rem; font-weight:700;
  white-space:nowrap; padding:.42rem .7rem; border-radius:8px;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  box-shadow:0 6px 16px rgba(6,14,28,.24);
}
.shk-rail-btn:hover::after, .shk-rail-btn:focus-visible::after{ opacity:1; transform:translateY(-50%) translateX(0) }
/* A quiet ring on the quote button every few seconds: present, not a banner. */
.shk-rail-quote::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--c-accent-700, #00876B);
  animation:shk-rail-ping 3.6s ease-out infinite;
}
@keyframes shk-rail-ping{
  0%,70%{ transform:scale(1); opacity:.55 }
  100%{ transform:scale(1.5); opacity:0 }
}
@media (prefers-reduced-motion:reduce){
  .shk-rail-btn, .shk-rail-btn::after{ transition:none }
  .shk-rail-quote::before{ animation:none; opacity:0 }
}
@media print{ .shk-rail{ display:none!important } }

/* ---------- 8. Hero ------------------------------------------ */

.shk-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--c-primary-900) 0%,var(--c-primary) 78%);
  color:#fff;
}
.shk-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(1200px 500px at 82% 12%, rgba(0,172,138,.22), transparent 62%);
}
.shk-hero > .ctr-inner{ position:relative; z-index:1 }
.shk-hero h1{ color:#fff }
.shk-hero-grid{ display:grid; gap:var(--sp-md); align-items:center }
@media (min-width:980px){ .shk-hero-grid{ grid-template-columns:1.05fr .95fr; gap:var(--sp-lg) } }

/* Hero eyebrow that carries the whole service list, as the old site's top band did. */
.shk-eyebrow--wrap{
  display:block; letter-spacing:.1em; line-height:1.75;
  max-width:60ch; font-size:.7rem; opacity:.9;
}
.shk-hero .shk-eyebrow{ color:var(--c-accent) }
.shk-hero .shk-lead{ color:rgba(255,255,255,.88) }

/* Signed paragraph under the founder story. */
.shk-byline{ margin:var(--sp-sm) 0 0; line-height:1.5 }
.shk-byline strong{ font-family:var(--font-head); font-size:1.05rem }
.shk-byline span{ color:var(--c-ink-2); font-size:.9rem }

.shk-hero-badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--sp-sm); padding:0; list-style:none }
.shk-hero-badges li{
  margin:0; display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  padding:.35rem .8rem; border-radius:999px; font-size:.85rem; font-weight:600;
}
.shk-hero-badges svg{ width:16px; height:16px; color:var(--c-accent) }

.shk-hero-media{ position:relative }
.shk-hero-media img{
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  aspect-ratio:4/3; object-fit:cover; object-position:center top; width:100%;
}
.shk-hero-stat{
  position:absolute; left:-8px; bottom:-18px;
  background:var(--c-surface); color:var(--c-ink);
  border-radius:var(--radius); padding:.85rem 1.1rem; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:.7rem; max-width:85%;
}
.shk-hero-stat strong{ font-family:var(--font-head); font-size:1.5rem; line-height:1; color:var(--c-primary) }
.shk-hero-stat span{ font-size:.82rem; color:var(--c-ink-2); line-height:1.3 }
@media (max-width:979px){ .shk-hero-media{ margin-top:var(--sp-sm) } .shk-hero-stat{ left:8px } }

/* ---------- 9. Trust bar ------------------------------------- */

.shk-trust{
  display:flex; flex-wrap:wrap; gap:.6rem 1.75rem; justify-content:center;
  list-style:none; margin:0; padding:0;
}
.shk-trust li{
  margin:0; display:inline-flex; align-items:center; gap:.45rem;
  font-size:.92rem; font-weight:600; color:var(--c-ink-2);
}
.shk-trust svg{ width:19px; height:19px; color:var(--c-primary); flex:none }
.shk-dark .shk-trust li{ color:rgba(255,255,255,.9) }
.shk-dark .shk-trust svg{ color:var(--c-accent) }
@media (max-width:640px){
  .shk-trust{ justify-content:flex-start; gap:.55rem 1.1rem }
  .shk-trust li{ font-size:.85rem }
}

/* ---------- 10. Service cards -------------------------------- */

.shk-service-card{
  display:flex; flex-direction:column; gap:.5rem;
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius);
  padding:1.5rem 1.35rem; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.shk-service-card:hover{
  transform:translateY(-3px); box-shadow:var(--shadow-md);
  border-color:var(--c-primary-100); color:inherit;
}
/* No plate behind the mark: at this size the line art is the graphic, and a
   tinted box just boxes it in. */
.shk-service-icon{
  display:block; color:var(--c-primary); margin-bottom:.15rem;
}
.shk-service-icon svg{ width:40px; height:40px; display:block }
.shk-service-name{ margin:0; font-size:1.12rem }
.shk-service-text{ margin:0; font-size:.94rem; color:var(--c-ink-2); flex:1 }
.shk-service-more{ font-family:var(--font-head); font-weight:700; font-size:.9rem; color:var(--c-primary); margin-top:.35rem }
.shk-service-card:hover .shk-service-more span{ margin-left:.2rem }

/* Compact: the "everything else we clean" row at the foot of a service page.
   Four across, no blurb, just the mark and the name. */
.shk-service-card--compact{ gap:.55rem; padding:1.15rem 1rem 1rem; text-align:center; align-items:center }
.shk-service-card--compact .shk-service-icon svg{ width:44px; height:44px }
.shk-service-card--compact .shk-service-name{ font-size:1rem; line-height:1.25 }
.shk-service-card--compact .shk-service-more{ font-size:.82rem; margin-top:0 }
@media (max-width:860px){
  .shk-services--compact{ --cols-md:3 }
  .shk-service-card--compact{ padding:1rem .7rem .9rem }
  .shk-service-card--compact .shk-service-icon svg{ width:36px; height:36px }
  .shk-service-card--compact .shk-service-name{ font-size:.92rem }
}
@media (max-width:520px){ .shk-services--compact{ --cols-sm:2 } }

/* ---------- 11. City list ------------------------------------ */

.shk-cities-title{
  margin:0 0 var(--sp-sm); text-transform:none;
  font-size:clamp(1.4rem,1.1rem + 1.1vw,2.1rem);
}
.shk-cities-list{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:.55rem; list-style:none; margin:0; padding:0;
}
.shk-cities-list li{ margin:0 }
.shk-cities-list a{
  display:flex; align-items:center; gap:.6rem; min-height:52px;
  padding:.6rem .85rem; border-radius:var(--radius-sm);
  background:var(--c-surface); border:1px solid var(--c-line);
  text-decoration:none; color:var(--c-ink); font-weight:600; font-size:.94rem;
  transition:border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.shk-cities-list a:hover{ transform:translateY(-1px) }
/* Town on top, service underneath and quiet. The link text still carries both
   for search; the layout stops the service repeating down the column. */
.shk-city-txt{ display:block; min-width:0; line-height:1.25 }
.shk-city-txt b{ display:block; font-weight:700; font-size:.95rem }
.shk-city-txt em{
  display:block; font-style:normal; font-weight:500; font-size:.76rem;
  color:var(--c-ink-3); margin-top:.12rem;
}
.shk-dark .shk-city-txt em{ color:rgba(255,255,255,.6) }
@media (prefers-reduced-motion:reduce){ .shk-cities-list a{ transition:none } }
.shk-cities-list a:hover{ border-color:var(--c-primary); background:var(--c-primary-050); color:var(--c-primary) }
.shk-city-pin svg{ width:17px; height:17px; color:var(--c-accent) }
/* On the dark band the pills are a lighter brown, not a grey film: the brown
   keeps them part of the brand instead of looking like disabled chips. */
.shk-dark .shk-cities-list a{
  background:linear-gradient(180deg, #19386A, #132B52);
  border-color:rgba(0,172,138,.22); color:#fff;
}
.shk-dark .shk-cities-list a:hover{
  background:linear-gradient(180deg, #1E427B, #19386A);
  border-color:var(--c-accent); color:#fff;
}
.shk-dark .shk-cities-list a:hover .shk-city-pin svg{ color:#fff }

/* Bullet style: no pill, no box. A plain two-column list of links with a small
   brown dot, for pages that already carry a lot of boxed UI. */
.shk-cities-list--bullets{
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:.18rem .9rem;
}
.shk-cities-list--bullets a{
  display:flex; align-items:baseline; gap:.5rem; min-height:0;
  padding:.24rem 0; border:0; background:none; border-radius:0;
  font-weight:600; font-size:.92rem; color:var(--c-ink);
}
.shk-cities-list--bullets a::before{
  content:''; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--c-primary); transform:translateY(-2px);
}
.shk-cities-list--bullets a:hover{
  transform:none; background:none; border:0; color:var(--c-primary);
  text-decoration:underline; text-underline-offset:3px;
}
.shk-cities-list--bullets .shk-city-pin{ display:none }
.shk-cities-list--bullets .shk-city-txt b{ display:inline; font-weight:600; font-size:inherit }
.shk-cities-list--bullets .shk-city-txt em{ display:none }
.shk-dark .shk-cities-list--bullets a{ color:rgba(255,255,255,.88); background:none; border:0 }
.shk-dark .shk-cities-list--bullets a::before{ background:var(--c-accent) }
.shk-dark .shk-cities-list--bullets a:hover{ color:#fff; background:none }

/* On a phone the pill version is the wrong shape for this list: seventeen
   boxes of 52px each, one per row at that width, is most of a screen spent on
   chrome around seventeen short words. Below 640px the pills drop their box
   and become the same plain two-column list the bullet variant already uses,
   which fits the whole Cape in the space four pills used to take. */
@media (max-width:640px){
  .shk-cities-list--pills{
    grid-template-columns:1fr 1fr; gap:.1rem .8rem;
  }
  .shk-cities-list--pills a{
    display:flex; align-items:baseline; gap:.45rem; min-height:0;
    padding:.28rem 0; border:0; background:none; border-radius:0;
    font-weight:600; font-size:.88rem;
  }
  .shk-cities-list--pills a::before{
    content:''; flex:none; width:4px; height:4px; border-radius:50%;
    background:var(--c-primary); transform:translateY(-2px);
  }
  .shk-cities-list--pills a:hover{ transform:none; background:none; border:0 }
  .shk-cities-list--pills .shk-city-pin{ display:none }
  .shk-cities-list--pills .shk-city-txt b{ display:inline; font-weight:600; font-size:inherit }
  .shk-cities-list--pills .shk-city-txt em{ display:none }
  .shk-dark .shk-cities-list--pills a{ color:rgba(255,255,255,.9); background:none; border:0 }
  .shk-dark .shk-cities-list--pills a::before{ background:var(--c-accent) }
}

/* The button that closes the list out */
.shk-cities-more{ display:flex; justify-content:center; margin-top:var(--sp-md) }

/* ---------- 12. Steps ---------------------------------------- */

.shk-steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--sp-sm); list-style:none; margin:0; padding:0; counter-reset:step;
}
.shk-steps li{ margin:0; position:relative; padding-top:.5rem }
.shk-step-n{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--c-cta); color:#fff;
  font-family:var(--font-head); font-weight:800; font-size:1.1rem; margin-bottom:.75rem;
}
.shk-steps h3{ font-size:1.05rem; margin-bottom:.35rem }
.shk-steps p{ font-size:.94rem; color:var(--c-ink-2); margin:0 }
.shk-dark .shk-steps p{ color:rgba(255,255,255,.82) }

/* ---------- 13. CTA band ------------------------------------- */

.shk-cta{
  display:grid; gap:var(--sp-sm); align-items:center;
  background:linear-gradient(135deg,var(--c-primary-900),var(--c-primary));
  color:#fff; border-radius:var(--radius-lg); padding:clamp(1.5rem,4vw,3rem);
}
@media (min-width:900px){ .shk-cta{ grid-template-columns:1.4fr auto; gap:var(--sp-md) } }
.shk-cta h2{ color:#fff; margin-bottom:.4rem; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem) }
.shk-cta p{ color:rgba(255,255,255,.88); margin:0; max-width:58ch }
.shk-cta-actions{ display:flex; flex-wrap:wrap; gap:.75rem }
@media (max-width:520px){ .shk-cta-actions{ flex-direction:column } .shk-cta-actions .ctr-btn{ width:100% } }

/* ---------- 14. Breadcrumbs ---------------------------------- */

.shk-crumbs{ font-size:.85rem; color:var(--c-ink-3) }
.shk-crumbs ol{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0; padding:0 }
.shk-crumbs li{ margin:0; display:flex; align-items:center; gap:.4rem }
.shk-crumbs li + li::before{ content:'/'; color:var(--c-line) }
.shk-crumbs a{ color:var(--c-ink-2); text-decoration:none }
.shk-crumbs a:hover{ color:var(--c-primary); text-decoration:underline }
.shk-dark .shk-crumbs, .shk-hero .shk-crumbs, .shk-blog-hero .shk-crumbs{ color:rgba(255,255,255,.7) }
.shk-dark .shk-crumbs a, .shk-hero .shk-crumbs a, .shk-blog-hero .shk-crumbs a{ color:rgba(255,255,255,.88) }
.shk-dark .shk-crumbs li + li::before, .shk-hero .shk-crumbs li + li::before, .shk-blog-hero .shk-crumbs li + li::before{ color:rgba(255,255,255,.35) }

/* ---------- 15. Prose (blog and long-form pages) ------------- */

.shk-prose{ max-width:72ch }
.shk-prose h2{ margin-top:2em }
.shk-prose h3{ margin-top:1.6em }
.shk-prose > :first-child{ margin-top:0 }
.shk-prose img{ border-radius:var(--radius); margin:1.6em 0 }
.shk-prose ul,.shk-prose ol{ margin:0 0 1.2em; padding-left:1.3rem }
.shk-prose li::marker{ color:var(--c-primary) }
.shk-prose blockquote{
  margin:1.6em 0; padding:1rem 1.25rem; border-left:4px solid var(--c-accent);
  background:var(--c-surface-2); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:1.05rem; color:var(--c-ink-2);
}
.shk-prose table{ width:100%; border-collapse:collapse; margin:1.5em 0; font-size:.95rem }
.shk-prose th,.shk-prose td{ padding:.7rem .85rem; border-bottom:1px solid var(--c-line); text-align:left }
.shk-prose th{ font-family:var(--font-head); font-weight:700; background:var(--c-surface-2) }

/* Tables become stacked cards rather than a horizontal scrollbar */
@media (max-width:640px){
  .shk-prose table,
  .shk-prose thead,
  .shk-prose tbody,
  .shk-prose tr,
  .shk-prose th,
  .shk-prose td{ display:block; width:100% }
  .shk-prose thead{ display:none }
  .shk-prose tr{
    border:1px solid var(--c-line); border-radius:var(--radius-sm);
    margin-bottom:.75rem; padding:.35rem .6rem;
  }
  .shk-prose td{ border-bottom:1px dashed var(--c-line); padding:.55rem 0 }
  .shk-prose tr td:last-child{ border-bottom:0 }
  .shk-prose td[data-label]::before{
    content:attr(data-label); display:block;
    font-family:var(--font-head); font-size:.74rem; font-weight:700;
    letter-spacing:.08em; text-transform:none; color:var(--c-ink-3);
  }
}

/* ---------- 16. Feature list --------------------------------- */

.shk-checks{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem }
@media (min-width:760px){ .shk-checks{ grid-template-columns:1fr 1fr; gap:.6rem 1.75rem } }
.shk-checks li{ margin:0; position:relative; padding-left:1.75rem; color:var(--c-ink-2) }
/* A bare brown tick, no disc behind it. The filled circle read as a badge and
   pulled more attention than the words next to it. */
.shk-checks li::before{
  content:''; position:absolute; left:0; top:.34em; width:1.15rem; height:1.15rem;
  background:var(--c-primary);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/100% no-repeat;
}
.shk-dark .shk-checks li::before{ background:var(--c-accent) }
.shk-dark .shk-checks li{ color:rgba(255,255,255,.86) }

/* ---------- 17. Footer --------------------------------------- */

/* No margin above it. The footer is dark and full-bleed, so it separates
   itself from the page; a gap just left a white band under the closing CTA. */
.site-footer{ background:var(--c-primary-900); color:rgba(255,255,255,.78); margin-top:0 }
.site-footer-inner{ align-items:start;
  max-width:var(--w-wide); margin-inline:auto;
  padding:var(--sp-lg) 16px var(--sp-md);
  display:grid; gap:var(--sp-md);
}
@media (min-width:600px){ .site-footer-inner{ padding-inline:clamp(1.25rem,4vw,2.5rem) } }
@media (min-width:700px){ .site-footer-inner{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1080px){ .site-footer-inner{ grid-template-columns:1.45fr 1fr 1fr .95fr; gap:var(--sp-md) var(--sp-lg) } }

/* White version of the wordmark on the navy footer. */
.shk-foot-brand img{
  width:min(240px,100%); height:auto; margin-bottom:1.1rem;
  background:#fff; padding:12px 16px; border-radius:16px; box-sizing:border-box;
}
.shk-foot-nap{ margin-bottom:.9rem }
.site-footer h3{ margin-top:.35rem }
.site-footer h3{
  color:#fff; font-family:var(--font-head); font-weight:800;
  font-size:1.02rem; letter-spacing:.06em; text-transform:none;
  margin:0 0 1.1rem; padding-bottom:.65rem; position:relative;
}
/* A short brass rule under each heading, the same device the page headings use */
.site-footer h3::after{
  content:''; position:absolute; left:0; bottom:0; width:34px; height:2px;
  background:var(--c-accent);
}
.site-footer ul{ list-style:none; margin:0; padding:0 }
.site-footer li{ margin-bottom:.15rem }
.site-footer-inner li > a{
  display:block; position:relative; padding:.3rem 0 .3rem 1.1rem;
  color:rgba(255,255,255,.78); text-decoration:none; font-size:.94rem;
  transition:color .15s ease, padding-left .15s ease;
}
/* A small brass chevron instead of a bare list. It also gives the row a
   left edge to align against. */
.site-footer-inner li > a::before{
  content:''; position:absolute; left:0; top:.72em; width:6px; height:6px;
  border-radius:50%; background:var(--c-accent); transition:background .15s ease;
}
.site-footer-inner li > a:hover{ color:#fff; padding-left:1.35rem; text-decoration:none }
.site-footer-inner li > a:hover::before{ background:#fff }
.site-footer a{ color:rgba(255,255,255,.78); text-decoration:none; font-size:.94rem }
.site-footer a:hover{ color:#fff }
/* The address block and the legal row are not link lists; no chevrons there. */
.shk-foot-nap a::before, .shk-foot-legal a::before, .shk-foot-social a::before{ display:none }
.site-footer-inner li > span{ display:block; position:relative; padding:.3rem 0 .3rem 1.1rem }
.site-footer-inner li > span::before{ content:''; position:absolute; left:0; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--c-accent); opacity:.55 }
.shk-sig img{ height:24px; width:auto; display:inline-block; vertical-align:middle; opacity:.85 }
.shk-sig:hover img{ opacity:1 }
.shk-foot-nap a, .shk-foot-legal a, .shk-foot-social a{ padding-left:0 }

/* One sentence of plain language under the mark: what they do and where. */
.shk-foot-seo{ font-size:.94rem; line-height:1.7; color:rgba(255,255,255,.78); max-width:30ch }
.shk-foot-nap{ font-size:.94rem; line-height:1.8; font-style:normal }
.shk-foot-nap a{ font-weight:600; color:#fff }
.shk-foot-social{ display:flex; gap:.7rem; margin-top:1.1rem }
.shk-foot-social a{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.18);
  transition:background-color .18s ease, color .18s ease, transform .18s ease;
}
.shk-foot-social svg{ width:26px; height:26px; display:block }
.shk-foot-social a:hover{
  background:#fff; color:var(--c-primary-900); transform:translateY(-2px);
  border-color:#fff;
}
@media (prefers-reduced-motion:reduce){ .shk-foot-social a{ transition:none } }

/* ---------- Trust marks ----------
   A row of their own, across the footer, directly above the small print.
   Badges arrive as artwork of wildly different proportions, so each one sits
   on its own plate at a shared height and nothing gets distorted. */
.shk-foot-badges{
  position:relative; z-index:1;
  max-width:var(--w-wide); margin-inline:auto;
  padding:1.75rem 16px 2.5rem;  /* room to breathe before the dark bar below */
}
@media (min-width:600px){ .shk-foot-badges{ padding-inline:clamp(1.25rem,4vw,2.5rem) } }
.shk-foot-badges ul{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:1.1rem; list-style:none; margin:0; padding:0;
}
.shk-foot-badges li{ margin:0; display:flex }
.shk-foot-badges img{
  display:block; width:auto; height:58px; background:#fff;
  border-radius:10px; padding:9px 14px;
  /* Most of these are dark marks made for a white page. The plate keeps them
     legible; the slight desaturation stops six different brand palettes from
     shouting over the footer. */
  filter:saturate(.9);
}
/* On a phone a wrapping flex row leaves a stranded badge on the last line.
   A two-column grid with stretched cells lines them up exactly. */
@media (max-width:760px){
  .shk-foot-badges ul{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.7rem; justify-items:stretch;
  }
  .shk-foot-badges li{ display:block }
  .shk-foot-badges img{
    width:100%; height:52px; object-fit:contain; padding:8px 10px;
  }
}
@media (max-width:360px){ .shk-foot-badges img{ height:46px } }
.shk-foot-seals{
  position:relative; z-index:1;
  max-width:var(--w-wide); margin-inline:auto; padding:1.6rem 16px .4rem;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem;
}

/* The small print reads as a separate strip rather than a line tacked on the
   end of the footer, so the badges above it stop feeling crowded. */
.shk-foot-bottom{
  position:relative; z-index:1;
  background:#081426; border-top:1px solid rgba(255,255,255,.07);
  padding:1.25rem 16px;
  font-size:.85rem;
}
.shk-foot-bottom-in{
  max-width:var(--w-wide); margin-inline:auto;
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
}
.shk-foot-legal{ display:flex; gap:1.25rem; flex-wrap:wrap; list-style:none; margin:0; padding:0 }
.shk-foot-legal li{ margin:0 }

.shk-sig{ font-size:.78rem; letter-spacing:.04em; color:rgba(255,255,255,.45) }

/* ---------- 18. Blog ----------------------------------------- */

.shk-blog-hero{ position:relative; overflow:hidden; background:linear-gradient(150deg,var(--c-primary-900),var(--c-primary)); color:#fff }
/* Wide photo behind the blog hero, shaded from the left so the copy stays
   readable on any crop. */
.shk-blog-hero-bg{ position:absolute; inset:0; z-index:0 }
.shk-blog-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:70% center; background:transparent }
.shk-blog-hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(12,29,57,.92) 0%, rgba(12,29,57,.78) 45%, rgba(12,29,57,.35) 100%);
}
@media (max-width:767px){ .shk-blog-hero-bg::after{ background:rgba(12,29,57,.78) } }
.shk-blog-hero > .ctr-inner{ position:relative; z-index:1 }
.shk-blog-hero .shk-lead{ max-width:620px }
.shk-blog-hero h1{ color:#fff; margin:0 }
.shk-blog-hero .shk-eyebrow{ color:var(--c-accent) }
.shk-blog-hero .shk-lead{ color:rgba(255,255,255,.88) }
.ctr-card-date{ font-size:.78rem; color:var(--c-ink-3); margin:0 0 .3rem; font-weight:600; letter-spacing:.03em }
.ctr-card-more{ font-family:var(--font-head); font-weight:700; text-decoration:none; font-size:.9rem }
.shk-loadmore{ text-align:center; margin-top:var(--sp-md) }

/* ---------- 19. Utilities ------------------------------------ */

@media (max-width:640px){ .hide-mobile{ display:none!important } }
@media (min-width:641px) and (max-width:980px){ .hide-tablet{ display:none!important } }
@media (min-width:981px){ .hide-desktop{ display:none!important } }

.shk-anim{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease }
.shk-anim.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .shk-anim{ opacity:1; transform:none; transition:none }
  .ctr-btn,.shk-service-card{ transition:none }
}

/* ---------- 20. Print ---------------------------------------- */

@media print{
  .site-header,.shk-callbar,.site-footer,.shk-cta,.nav-toggle{ display:none!important }
  body{ padding-bottom:0; color:#000 }
  a[href^="http"]::after{ content:' (' attr(href) ')'; font-size:.8em }
}

/* ---------- 20. Surface texture -------------------------------
   A soap-bubble field, drawn once as an SVG data URI and reused.
   It sits at a few percent opacity: enough to stop a large flat
   band looking like a slab, faint enough that nobody reads it as
   a pattern. Photos and cards always sit above it.
   ------------------------------------------------------------- */

.shk-tint,
.shk-dark,
.site-footer{ position:relative; isolation:isolate }

.shk-tint::before,
.shk-dark::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-repeat:repeat; background-position:center;
}
.shk-tint::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%235A4334' stroke-opacity='0.035' stroke-width='1'%3E%3Ccircle cx='28' cy='36' r='17'/%3E%3Ccircle cx='124' cy='104' r='26'/%3E%3Ccircle cx='158' cy='30' r='11'/%3E%3Ccircle cx='64' cy='146' r='14'/%3E%3Ccircle cx='96' cy='42' r='6'/%3E%3C/g%3E%3C/svg%3E");
}
.shk-dark::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.025' stroke-width='1'%3E%3Ccircle cx='28' cy='36' r='17'/%3E%3Ccircle cx='124' cy='104' r='26'/%3E%3Ccircle cx='158' cy='30' r='11'/%3E%3Ccircle cx='64' cy='146' r='14'/%3E%3Ccircle cx='96' cy='42' r='6'/%3E%3C/g%3E%3C/svg%3E");
}

/* A warm glow in one corner, so the white sections are not dead flat either. */
.shk-phero::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(760px 380px at 88% 8%, rgba(0,172,138,.20), transparent 62%),
    radial-gradient(620px 320px at 4% 96%, rgba(238,243,250,.14), transparent 60%);
}
.shk-phero-in{ z-index:2 }

/* ---------- 21. Footer texture and bubbles -------------------- */

.site-footer::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.022' stroke-width='1'%3E%3Ccircle cx='30' cy='40' r='19'/%3E%3Ccircle cx='140' cy='118' r='30'/%3E%3Ccircle cx='176' cy='34' r='12'/%3E%3Ccircle cx='72' cy='164' r='16'/%3E%3Ccircle cx='108' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size:280px 280px;
}

.shk-foot-bubbles{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1;
}
.shk-foot-bubbles span{
  position:absolute; bottom:-160px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.09), rgba(255,255,255,.01) 40%, rgba(255,255,255,0) 62%);
  border:1px solid rgba(255,255,255,.035);
  animation:shk-rise linear infinite;
  will-change:transform, opacity;
}
@keyframes shk-rise{
  from{ transform:translate3d(0,0,0) scale(.8); opacity:0 }
  12%{ opacity:.14 }
  45%{ transform:translate3d(18px,-300px,0) scale(.98) }
  82%{ opacity:.1 }
  to{ transform:translate3d(-14px,-660px,0) scale(1.12); opacity:0 }
}
/* Each bubble gets its own size, lane and pace, so the field never pulses. */
.shk-foot-bubbles span:nth-child(1){ left:3%;  width:34px; height:34px; animation-duration:24s; animation-delay:0s }
.shk-foot-bubbles span:nth-child(2){ left:14%; width:52px; height:52px; animation-duration:31s; animation-delay:7s }
.shk-foot-bubbles span:nth-child(3){ left:49%; width:40px; height:40px; animation-duration:27s; animation-delay:13s }
.shk-foot-bubbles span:nth-child(4){ left:83%; width:58px; height:58px; animation-duration:34s; animation-delay:4s }
.shk-foot-bubbles span:nth-child(5){ left:94%; width:44px; height:44px; animation-duration:29s; animation-delay:18s }

@media (prefers-reduced-motion:reduce){
  .shk-foot-bubbles{ display:none }
}

/* ---------- 22. Mega menus ------------------------------------ */

/* The panels span the bar, so the items that own them stop being the
   positioning context and the header takes over. */
.site-nav .menu li.shk-has-mega{ position:static }
.site-nav .menu li.shk-has-mega--anchored{ position:relative }
.site-nav .menu .shk-has-mega > a{ display:inline-flex; align-items:center; gap:.3rem }
@media (min-width:1080px){
  /* Reaches to the edges of the bar so there is no dead strip under the label */
  .site-nav .menu .shk-has-mega > a::before{
    content:''; position:absolute; left:-.7rem; right:-.7rem; top:-1.1rem; bottom:-1.5rem;
  }
}
.shk-caret{ transition:transform .2s ease; opacity:.7 }
.shk-mega-toggle{ display:none }

/* A card that hangs under the bar, not a full-width band. Width is 80% of the
   header's own grid, so it lines up with the logo and the nav instead of
   running to the edges of the screen. */
.shk-mega{
  position:absolute; top:100%; left:0; right:0; margin-inline:auto;
  width:min(calc(var(--w-wide) * .8), calc(100vw - 48px));
  /* Transparent, and hoverable. This is the bridge: without it the cursor
     crosses a dead 10px band on its way down to the panel, loses the hover,
     and the menu snaps shut and open again as you move toward it. */
  padding-top:10px; background:transparent; border:0; box-shadow:none;
  z-index:64;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.shk-mega-in{
  position:relative;
  background:var(--c-surface);
  border:1px solid var(--c-line); border-radius:var(--radius-lg);
  box-shadow:0 22px 44px rgba(12,29,57,.18);
  overflow:hidden;
}
.shk-mega-in::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(520px 180px at 80% 0%, var(--c-primary-050), transparent 72%);
}
.site-nav .shk-has-mega:hover > .shk-mega,
.site-nav .shk-has-mega:focus-within > .shk-mega,
.site-nav .shk-has-mega.is-open > .shk-mega{ opacity:1; visibility:visible; transform:none }
.site-nav .shk-has-mega:hover > a .shk-caret,
.site-nav .shk-has-mega.is-open > a .shk-caret{ transform:rotate(180deg) }

.shk-mega-in{
  padding:1.25rem 1.4rem 1.4rem;
  display:grid; gap:1.25rem; grid-template-columns:1fr;
}
.shk-mega-in > *{ position:relative; z-index:1 }
@media (min-width:1080px){ .shk-mega-in{ grid-template-columns:minmax(0,1fr) 232px } }
/* The badge hangs into the top-left of the space the panel opens into, so on
   every desktop width the panel pins to the right of the header grid instead
   of centring on the page. It lines up with the nav and the CTA, and the badge
   keeps its corner. */
@media (min-width:861px){
  .shk-mega{
    left:auto; margin-inline:0;
    right:max(calc(50% - var(--w-wide) / 2), 24px);
    width:min(calc(var(--w-wide) * .8), calc(100vw - 230px));
  }
}

.shk-mega-eyebrow{
  margin:0 0 .7rem; font-size:.67rem; font-weight:800;
  letter-spacing:.03em; text-transform:none; color:var(--c-ink-3);
}

.shk-mega-grid{
  display:grid; gap:.15rem .5rem; list-style:none; margin:0; padding:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:1080px){ .shk-mega-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.shk-mega-grid li{ margin:0 }
.site-nav .shk-mega-grid a{
  display:flex; gap:.55rem; align-items:center;
  padding:.45rem .55rem; border-radius:10px; font-weight:600; width:100%;
  transition:background-color .15s ease;
}
.site-nav .shk-mega-grid a::after{ display:none }
.site-nav .shk-mega-grid a:hover{ background:var(--c-primary-050) }
.shk-mega-ico{
  flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--c-primary-050); color:var(--c-primary);
}
.shk-mega-ico svg{ width:16px; height:16px }
.site-nav .shk-mega-grid a:hover .shk-mega-ico{ background:var(--c-primary); color:#fff }
.shk-mega-txt{ display:block; min-width:0 }
.shk-mega-txt b{ display:block; font-size:.85rem; color:var(--c-ink); line-height:1.3 }
/* The one-line blurb is a desktop nicety. Below that it is noise that doubles
   the height of the panel, so it goes. */
.shk-mega-txt em{ display:none }
@media (min-width:1180px){
  .site-nav .shk-mega-grid a{ align-items:flex-start }
  .shk-mega-txt em{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden;
    font-style:normal; font-size:.72rem; font-weight:500;
    color:var(--c-ink-3); line-height:1.4; margin-top:.1rem;
  }
}

.shk-mega-towns{
  display:grid; gap:.1rem .75rem; list-style:none; margin:0; padding:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:700px){ .shk-mega-towns{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (min-width:1080px){ .shk-mega-towns{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.shk-mega-towns li{ margin:0 }
.site-nav .shk-mega-towns a{
  display:block; width:100%; padding:.38rem .5rem; border-radius:8px;
  font-weight:600; font-size:.84rem; transition:background-color .15s ease;
}
.site-nav .shk-mega-towns a::after{ display:none }
.site-nav .shk-mega-towns a:hover{ background:var(--c-primary-050); color:var(--c-primary) }
.shk-mega-towns span{ color:var(--c-ink-3); font-weight:500 }

.site-nav .menu a.shk-mega-all{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.8rem; padding:.35rem 0;
  font-family:var(--font-head); font-weight:700; font-size:.78rem;
  letter-spacing:.06em; text-transform:none; color:var(--c-primary);
}
.site-nav .shk-mega-all::after{ display:none }
.site-nav .shk-mega-all:hover{ color:var(--c-primary-900) }

.shk-mega-aside{
  align-self:start;
  background:var(--c-primary-900); color:#fff;
  border-radius:var(--radius); padding:1.1rem;
  display:flex; flex-direction:column; align-items:flex-start; gap:.35rem;
}
.shk-mega-aside .shk-mega-eyebrow{ color:var(--c-accent); margin-bottom:.3rem }
.shk-mega-pitch{ margin:0 0 .45rem; font-size:.8rem; line-height:1.5; color:rgba(255,255,255,.82) }
.site-nav .menu a.shk-mega-cta{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; padding:.6rem 1rem; min-height:44px; font-size:.88rem;
}
.site-nav .shk-mega-cta::after{ display:none }
.site-nav a.shk-mega-tel{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.25rem;
  color:#fff; font-weight:700; font-size:.92rem; padding:0;
}
.site-nav a.shk-mega-tel::after{ display:none }
.shk-mega-tel svg{ width:16px; height:16px; color:var(--c-accent) }

@media (prefers-reduced-motion:reduce){
  .shk-mega, .shk-caret, .site-nav .shk-mega-grid a, .site-nav .shk-mega-towns a{ transition:none }
}

/* Stacked inside the burger menu: the panel becomes a plain expandable list
   and the caret button is what opens it, so the parent link stays tappable. */
@media (max-width:1079px){
  .site-nav .menu li.shk-has-mega{ position:relative; display:flex; flex-wrap:wrap; align-items:center }
  .site-nav .menu .shk-has-mega > a{ flex:1 1 auto }
  .site-nav .menu .shk-has-mega > a .shk-caret{ display:none }
  .shk-mega-toggle{
    display:grid; place-items:center; flex:none;
    width:44px; height:44px; border:0; background:none; color:var(--c-ink-2); cursor:pointer;
  }
  .shk-mega-toggle .shk-caret{ width:18px; height:18px; opacity:1 }
  .shk-has-mega.is-open .shk-mega-toggle .shk-caret{ transform:rotate(180deg) }
  .shk-mega{
    position:static; flex:1 0 100%; width:auto; box-shadow:none; border:0;
    border-radius:0; background:transparent; padding-top:0;
    opacity:1; visibility:visible; transform:none;
    display:none;
  }
  .shk-mega-in{ background:transparent; border:0; border-radius:0; box-shadow:none }
  .shk-mega-in::before{ display:none }
  .site-nav .shk-has-mega.is-open > .shk-mega{ transform:none }
  .shk-mega-in::before{ display:none }
  .site-nav .shk-has-mega:hover > .shk-mega,
  .site-nav .shk-has-mega:focus-within > .shk-mega{ display:none }
  .site-nav .shk-has-mega.is-open > .shk-mega{ display:block }
  .shk-mega-in{ padding:.25rem 0 1rem; gap:1rem; grid-template-columns:1fr }
  .shk-mega-txt em{ display:none }
  .shk-mega-eyebrow{ margin-bottom:.5rem }
  .shk-mega-grid{ grid-template-columns:1fr; gap:0 }
  .site-nav .shk-mega-grid a{ padding:.55rem .25rem; min-height:44px }
  .shk-mega-txt em{ display:none }
  .shk-mega-towns{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .shk-mega-aside{ display:none }
}

/* ---------- 23. Content card ---------------------------------
   The plain box the prose pages lean on: a heading, a paragraph, nothing
   clever. It reads on white and on the tint band without a second rule. */
.shk-card{
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--radius-lg); padding:clamp(1.25rem,2.4vw,1.75rem);
  box-shadow:var(--shadow-sm);
}
.shk-card h3{ margin:0 0 .5rem; font-size:1.08rem }
.shk-card p{ margin:0; color:var(--c-ink-2); font-size:.95rem; line-height:1.68 }
.shk-card p + p{ margin-top:.8rem }
.shk-tint .shk-card{ background:var(--c-surface) }
.shk-dark .shk-card{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14);
  box-shadow:none;
}
.shk-dark .shk-card p{ color:rgba(255,255,255,.82) }

/* Long-form prose blocks on the plain pages */
.shk-prose{ max-width:72ch }
.shk-prose .shk-lead{ margin-bottom:1.1rem }
.shk-prose ol, .shk-prose ul{ color:var(--c-ink-2) }


/* ---------- 13. Reveal on scroll ----------------------------
   One motion for the whole site: a short fade with the block arriving from
   the left. Applied by script, never in the markup, and only to blocks that
   start below the fold, so nothing above it is hidden and then shown. With
   JavaScript off the page is simply static, which is the right fallback
   rather than a page of invisible sections. */
/* The transition lives on the revealed state, not on the hidden one. The
   class is added by script after first paint, and with the transition on the
   base rule the block would visibly fade OUT before it ever faded in. This
   way hiding is instant and only the arrival is animated. */
.shk-reveal{
  opacity:0; transform:translateX(-42px);
  will-change:opacity, transform;
}
.shk-reveal.is-in{
  opacity:1; transform:none; will-change:auto;
  transition:opacity .72s cubic-bezier(.22,1,.36,1), transform .72s cubic-bezier(.22,1,.36,1);
}
/* Items inside a grid arrive one after another rather than as one slab. The
   stagger is what makes the motion readable: a single block sliding in is
   either invisible or heavy, while four cards landing in sequence is noticed
   without any one of them moving far. */
/* The class is doubled on purpose. Cards carry their own transform for the
   hover lift, declared in a later stylesheet, and at equal specificity that
   one wins: the items faded but never moved. Two classes outrank one. */
.shk-reveal-item.shk-reveal-item{
  opacity:0; transform:translateX(-30px); will-change:opacity, transform;
  /* Cards already transition transform for their hover lift. Without this the
     browser animates them INTO the hidden position on load, which is a slide
     out before the slide in. Hiding must be instant; only arriving animates. */
  transition:none;
}
.shk-reveal-item.shk-reveal-item.is-in{
  opacity:1; transform:none; will-change:auto;
  transition:opacity .66s cubic-bezier(.22,1,.36,1), transform .66s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion:reduce){
  .shk-reveal-item{ opacity:1; transform:none; transition:none }
}
@media (prefers-reduced-motion:reduce){
  .shk-reveal{ opacity:1; transform:none; transition:none }
}
/* =============================================================
   Dr. Carpet additions
   ============================================================= */

/* Services mega panel: one column per category */
@media (min-width:861px){
  .shk-mega--svc{ width:min(calc(var(--w-wide) - 48px), calc(100vw - 48px)); right:max(calc(50% - var(--w-wide) / 2 + 24px), 24px) }
}
@media (min-width:1080px){ .shk-mega--svc .shk-mega-in{ grid-template-columns:minmax(0,1fr) 220px } }
.shk-mega-cols{ display:grid; gap:1rem 1.25rem; grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:1080px){ .shk-mega-cols{ grid-template-columns:repeat(5,minmax(0,1fr)) } }
.shk-mega-col{ min-width:0 }
.site-nav a.shk-mega-cat{
  display:flex; align-items:center; gap:.5rem; padding:.2rem 0 .55rem; margin-bottom:.35rem;
  border-bottom:1px solid var(--c-line); font-weight:800; color:var(--c-primary-900); font-size:.86rem; line-height:1.25;
}
.site-nav a.shk-mega-cat::after{ display:none }
.site-nav a.shk-mega-cat:hover{ color:var(--c-primary) }
.shk-mega-cat .shk-mega-ico{ flex:none }
.shk-mega-list{ list-style:none; margin:0; padding:0 }
.shk-mega-list li{ margin:0 }
.site-nav .shk-mega-list a{
  display:block; padding:.28rem 0; font-size:.82rem; font-weight:500; color:var(--c-ink-2); line-height:1.35;
}
.site-nav .shk-mega-list a::after{ display:none }
.site-nav .shk-mega-list a:hover{ color:var(--c-primary) }
.shk-mega-note{ font-size:.8rem; line-height:1.5; color:var(--c-ink-2); margin:0 }
.shk-mega-town{ display:block; padding:.4rem .55rem; font-size:.85rem; font-weight:600; color:var(--c-ink) }
@media (max-width:860px){
  .shk-mega-cols{ grid-template-columns:1fr }
  .site-nav .shk-mega-list a{ padding:.45rem 0 }
}

/* Footer */
.shk-foot-logo{ display:block; width:auto; height:78px; margin-bottom:1rem; background:transparent }
.shk-foot-towns span{ display:block; padding:.3rem 0 .3rem 1.1rem; font-size:.94rem; color:rgba(255,255,255,.7); position:relative }
.shk-foot-towns span::before{
  content:''; position:absolute; left:0; top:.78em; width:5px; height:5px;
  border-right:2px solid var(--c-accent); border-bottom:2px solid var(--c-accent); transform:rotate(-45deg);
}
.shk-foot-badges a{ display:block }

/* 11-step process */
.drc-process-list{ list-style:none; margin:var(--sp-md) 0 0; padding:0; display:grid; gap:.9rem; grid-template-columns:1fr }
@media (min-width:700px){ .drc-process-list{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1080px){ .drc-process-list{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.drc-process-list li{
  margin:0; display:flex; gap:.9rem; align-items:flex-start;
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius);
  padding:1.1rem 1.15rem; box-shadow:var(--shadow-sm);
}
.drc-process-list li.is-key{ border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-050), var(--shadow-sm) }
.drc-process-n{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--c-primary); color:#fff; font-family:var(--font-head); font-weight:800; font-size:.95rem;
}
.drc-process-list li.is-key .drc-process-n{ background:var(--c-cta) }
.drc-process-list h3{ font-size:1.02rem; margin:.35rem 0 .3rem }
.drc-process-list p{ font-size:.92rem; color:var(--c-ink-2); margin:0; line-height:1.55 }
.shk-dark .drc-process-list li{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); box-shadow:none }
.shk-dark .drc-process-list h3{ color:#fff }
.shk-dark .drc-process-list p{ color:rgba(255,255,255,.8) }

/* Pure water block */
.drc-purewater{ display:grid; gap:var(--sp-md); align-items:center; grid-template-columns:1fr }
@media (min-width:760px){ .drc-purewater{ grid-template-columns:200px minmax(0,1fr) } }
.drc-purewater-badge{
  width:180px; height:180px; border-radius:50%; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 30%, #2FD3B0, var(--c-accent) 55%, var(--c-cta));
  color:#fff; box-shadow:0 18px 40px rgba(0,135,107,.32);
}
.drc-purewater-badge b{ font-family:var(--font-head); font-size:4.2rem; line-height:1 }
.drc-purewater-badge span{ font-weight:800; letter-spacing:.2em; font-size:.95rem }

/* Square before and after photos */
.shk-gallery--square img{ aspect-ratio:1/1 }
@media (min-width:900px){ .shk-gallery--4{ grid-template-columns:repeat(4,1fr) } }

/* Static (not yet linked) towns */
.shk-city-static{ display:flex; align-items:center; gap:.5rem }

/* Home hero with a real <img> (responsive srcset, high fetch priority) */
.shk-phero > img.drc-hero-img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--hero-pos, center 60%); background:var(--c-primary-900);
}
.shk-gallery.shk-gallery--4{ grid-template-columns:repeat(2,1fr) }
@media (min-width:900px){ .shk-gallery.shk-gallery--4{ grid-template-columns:repeat(4,1fr) } }
.shk-intro-media img.drc-contain{ object-fit:contain; background:#fff; padding:14px }
.drc-map{ width:100%; aspect-ratio:4/3; border:0; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:block }
/* Breadcrumbs inside the dark page heroes */
.shk-shero .shk-crumbs, .shk-chero .shk-crumbs{ margin-bottom:.9rem }
.shk-shero .shk-crumbs a, .shk-chero .shk-crumbs a{ color:rgba(255,255,255,.78) }
.shk-shero .shk-crumbs a:hover, .shk-chero .shk-crumbs a:hover{ color:#fff }
.shk-shero .shk-crumbs li, .shk-chero .shk-crumbs li{ color:rgba(255,255,255,.62) }
.shk-shero .shk-crumbs li[aria-current], .shk-chero .shk-crumbs li[aria-current]{ color:#fff }

/* Blog signature on standard posts (long-form posts carry their own). */
.drc-sig{ display:flex; align-items:center; gap:clamp(1rem,3vw,1.75rem); padding:clamp(1.25rem,3vw,1.75rem);
  border:1px solid var(--c-line); border-radius:var(--radius-lg); background:var(--c-surface) }
.drc-sig .drc-sig-logo{ flex:none; background:transparent; width:clamp(88px,18vw,120px); height:auto; aspect-ratio:1/1; object-fit:contain }
.drc-sig p{ margin:0; line-height:1.5 }
.drc-sig strong{ display:block; font-family:var(--font-head); font-size:1.05rem; color:var(--c-ink) }
.drc-sig span{ color:var(--c-ink-2); font-size:.9rem }


/* ---------- S&K: compact flat services mega ---------- */
@media (min-width:1080px){
  /* Both panels centre under the header itself, so they sit in the same
     place and can never run off the left edge on narrower laptops. */
  .site-nav .menu li.shk-has-mega--anchored{ position:static }
  .shk-mega--compact, .shk-mega--areas{ width:880px; left:50%; right:auto; margin-inline:0; margin-left:-440px }
  .shk-mega--compact .shk-mega-in, .shk-mega--areas .shk-mega-in{ grid-template-columns:minmax(0,1fr) 210px }
  .shk-mega--areas .shk-mega-towns{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.1rem .6rem }
}
.shk-mega--compact .shk-mega-cols{ grid-template-columns:1fr; gap:0 }
.shk-mega--compact .shk-mega-col{ display:grid; grid-template-columns:1fr 1fr; gap:.45rem .7rem }
@media (max-width:1079px){ .shk-mega--compact .shk-mega-col{ grid-template-columns:1fr; gap:.15rem } }
.site-nav .shk-mega--compact a.shk-mega-cat{
  padding:.6rem .7rem; margin:0; border:1px solid transparent; border-radius:12px; font-size:.92rem;
}
.site-nav .shk-mega--compact a.shk-mega-cat:hover{ background:var(--c-surface-2); border-color:var(--c-line) }
.shk-mega--compact .shk-mega-ico{ width:34px; height:34px; border-radius:10px }
.shk-mega--compact .shk-mega-ico svg{ width:18px; height:18px }

/* ---------- S&K: recurring plans ---------- */
.shk-plans{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-md); align-items:stretch; margin-top:var(--sp-md) }
@media (max-width:900px){ .shk-plans{ grid-template-columns:1fr; max-width:480px; margin-inline:auto } }
.shk-plan{
  position:relative; display:flex; flex-direction:column;
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius-lg);
  padding:1.9rem 1.5rem 1.5rem; box-shadow:var(--shadow-sm);
}
.shk-plan--pop{ border:2px solid var(--c-cta); box-shadow:var(--shadow-md) }
.shk-plan-badge{
  position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  background:linear-gradient(120deg,var(--c-cta),var(--c-accent)); color:#fff;
  font-family:var(--font-head); font-weight:700; font-size:.72rem; letter-spacing:.09em;
  padding:.4rem 1rem; border-radius:30px; white-space:nowrap;
}
.shk-plan h3{ text-align:center; margin:0 0 .9rem; font-size:1.25rem }
.shk-plan ul{ list-style:none; margin:0 0 1.3rem; padding:0; flex:1 }
.shk-plan li{ position:relative; padding:.6rem 0 .6rem 1.9rem; border-bottom:1px solid var(--c-line); font-size:.95rem }
.shk-plan li:last-child{ border-bottom:0 }
.shk-plan li::before{
  content:'\2713'; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:19px; height:19px; border-radius:50%;
  background:var(--c-accent-050); color:var(--c-cta);
  font-size:.68rem; font-weight:800; line-height:19px; text-align:center;
}
.shk-plan .ctr-btn{ width:100%; justify-content:center; text-align:center }
.shk-plans-more{ text-align:center; margin-top:var(--sp-md) }
.shk-plans-more a{ font-weight:700; color:var(--c-primary); text-decoration:underline; text-underline-offset:4px }

/* ---------- S&K: service area band with photo ---------- */
.shk-areas-photo{ position:relative; overflow:hidden }
.shk-areas-photo .shk-areas-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; background:transparent;
}
.shk-areas-photo::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(135deg, rgba(13,11,94,.92) 0%, rgba(19,23,154,.84) 55%, rgba(1,111,85,.78) 100%);
}
.shk-areas-photo .shk-areas-in{ position:relative; z-index:2 }
.shk-areas-photo{ padding-block:var(--sp-xl) }
.shk-areas-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--sp-lg); align-items:center }
@media (max-width:900px){ .shk-areas-grid{ grid-template-columns:1fr } }
.shk-areas-grid .shk-cities-list{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:560px){ .shk-areas-grid .shk-cities-list{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.shk-areas-map{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.35); min-height:360px }
.shk-areas-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block }
@media (max-width:900px){ .shk-areas-map{ min-height:300px } }


/* ---------- S&K: quote popup logo (horizontal, white plate, no crop) ---------- */
.cqp-overlay .cqp-logo{
  width:auto; height:auto; max-width:230px; max-height:96px;
  border-radius:14px; background:#fff; padding:10px 14px;
  object-fit:contain;
}
@media (max-width:420px){ .cqp-overlay .cqp-logo{ max-width:180px; max-height:80px; width:auto; height:auto } }
.cqp-overlay.cqp-inline .cqp-logo{ width:auto; height:auto; max-height:72px; margin-bottom:12px }


/* ---------- S&K: locations hero ---------- */
.shk-lhero{
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  text-align:center; min-height:clamp(440px, 56vh, 620px); padding:6rem 16px 8rem;
}
.shk-lhero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; background:transparent }
.shk-lhero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(13,11,94,.62) 0%, rgba(13,11,94,.38) 55%, rgba(13,11,94,.58) 100%);
}
.shk-lhero-in{ position:relative; z-index:2; max-width:880px }
.shk-lhero-kicker{
  font-family:var(--font-head); font-weight:700; font-size:.82rem; letter-spacing:.06em;
  text-transform:none; color:var(--c-accent); margin:0 0 .9rem;
}
.shk-lhero h1{
  color:#fff; font-size:clamp(1.9rem, 4.4vw, 3.4rem); line-height:1.12; margin:0 0 1.6rem;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.shk-lhero h1 em{ font-style:normal; color:var(--c-accent) }
.shk-lhero-wave{
  position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(48px, 7vw, 110px);
  z-index:2; color:var(--c-bg); display:block;
}


/* ---------- S&K: quote popup buttons ---------- */
.cqp-overlay .cqp-next, .cqp-overlay .cqp-send{
  background:linear-gradient(120deg, #016F55 0%, #018767 55%, #00A455 100%);
  color:#fff;
}
.cqp-overlay .cqp-next:hover, .cqp-overlay .cqp-send:hover{ filter:brightness(1.06) }


/* ============ S&K v0.2: creative home ============ */

/* ---- hero split ---- */
.shk-hero2{ position:relative; overflow:hidden; padding:clamp(1.8rem,4vw,3rem) 0 clamp(2rem,4vw,3.4rem);
  background:
    radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.4px),
    radial-gradient(1000px 600px at 85% -15%, rgba(0,199,86,.13), transparent 58%),
    radial-gradient(900px 560px at -10% 115%, rgba(84,80,255,.24), transparent 60%),
    linear-gradient(150deg, #2520C9 0%, var(--c-primary) 38%, var(--c-primary-900) 100%);
  background-size:26px 26px, auto, auto, auto;
}
.shk-hero2-in{ max-width:var(--w-wide); margin-inline:auto; display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(1.6rem,4vw,3.4rem); align-items:center }
@media (max-width:920px){ .shk-hero2-in{ grid-template-columns:1fr } }
.shk-hero2-kick{ display:inline-flex; align-items:center; gap:.5rem; margin:0 0 1rem;
  background:none; color:#8DF2B5; font-weight:700; font-size:.98rem; letter-spacing:.05em;
  padding:0; border:0 }
.shk-hero2-kick::before{ content:'\2726'; font-size:.85em }
.shk-hero2 h1{ font-size:clamp(2.15rem,4.8vw,3.7rem); line-height:1.07; margin:0 0 1.1rem; color:#fff; letter-spacing:-.02em }
.shk-hero2-sub{ font-size:1.12rem; color:rgba(255,255,255,.88); max-width:34rem; margin:0 0 1.5rem }
.shk-mark{ position:relative; white-space:nowrap; z-index:0 }
.shk-mark::after{ content:''; position:absolute; left:-2%; right:-2%; bottom:.05em; height:.34em; z-index:-1;
  background:linear-gradient(120deg, var(--c-accent), #8CE8B4); border-radius:5px;
  transform:scaleX(0); transform-origin:left; animation:shk-sweep .9s .4s cubic-bezier(.2,.7,.2,1) forwards }
@keyframes shk-sweep{ to{ transform:scaleX(1) } }
.shk-hero2-chips{ display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; margin:1.5rem 0 0; padding:0 }
.shk-hero2-chips li{ display:inline-flex; align-items:center; gap:.45rem; color:#fff;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.22);
  padding:.48rem .9rem; border-radius:999px; font-size:.88rem; font-weight:600;
  backdrop-filter:blur(4px) }
.shk-hero2-chips li::before{ content:'\2713'; color:var(--c-accent); font-weight:800 }
.shk-hero2-media{ position:relative; padding:1rem 1.4rem 1.6rem }
.shk-hero2-media::before{ content:''; position:absolute; inset:-8% -4%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,199,86,.16), transparent 72%) }
.shk-hero2-photo{ position:relative; z-index:1; border-radius:999px 999px 30px 30px; overflow:hidden;
  border:7px solid rgba(255,255,255,.92); box-shadow:0 30px 70px rgba(5,4,40,.55); aspect-ratio:1/0.94 }
.shk-hero2-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:transparent }
.shk-float{ position:absolute; z-index:3; background:var(--c-surface); border-radius:14px; box-shadow:var(--shadow-md);
  padding:.65rem .95rem; display:flex; gap:.6rem; align-items:center; animation:shk-float 5.5s ease-in-out infinite }
.shk-float b{ display:block; font-size:.95rem; line-height:1.2 }
.shk-float small{ display:block; font-weight:500; color:var(--c-ink-3); font-size:.76rem }
.shk-float .st{ color:#F5B301; font-size:1.15rem }
.shk-float .ck{ width:34px; height:34px; border-radius:10px; background:var(--c-accent-050); color:var(--c-cta);
  display:flex; align-items:center; justify-content:center; font-weight:800 }
.shk-float--a{ top:6%; left:-2% }
.shk-float--b{ bottom:7%; right:-2%; animation-delay:1.7s }
.shk-spark{ position:absolute; color:var(--c-accent); z-index:2; animation:shk-twinkle 2.8s ease-in-out infinite; pointer-events:none }
.shk-spark::before{ content:'\2726'; display:block }
.shk-spark--1{ top:2%; right:8%; font-size:1.5rem }
.shk-spark--2{ top:30%; left:-1%; font-size:1rem; animation-delay:.9s; color:#fff }
.shk-spark--3{ bottom:-2%; left:18%; font-size:1.2rem; animation-delay:1.8s }
@keyframes shk-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@keyframes shk-twinkle{ 0%,100%{ opacity:.25; transform:scale(.8) rotate(0deg) } 50%{ opacity:1; transform:scale(1.15) rotate(18deg) } }
@media (prefers-reduced-motion:reduce){ .shk-mark::after{ animation:none; transform:scaleX(1) } .shk-float,.shk-spark{ animation:none } }

/* ---- about collage ---- */
.shk-about2{ display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:clamp(1.8rem,4vw,3.6rem); align-items:center }
@media (max-width:920px){ .shk-about2{ grid-template-columns:1fr } }
.shk-about2-media{ position:relative; padding:0 2.2rem 3rem 0 }
.shk-about2-media .ph-a{ width:100%; border-radius:26px; box-shadow:var(--shadow-md); display:block; background:transparent }
.shk-about2-media .ph-b{ position:absolute; right:0; bottom:0; width:54%; border-radius:18px;
  border:8px solid var(--c-surface); box-shadow:var(--shadow-lg); display:block; background:transparent }
.shk-about2-media .shk-float--c{ top:-4%; left:-3%; animation-delay:.8s }
.shk-about2-feats{ list-style:none; margin:1.4rem 0 1.6rem; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.3rem }
@media (max-width:560px){ .shk-about2-feats{ grid-template-columns:1fr } }
.shk-about2-feats li{ display:flex; gap:.75rem; align-items:flex-start }
.shk-about2-feats .ic{ flex:0 0 40px; height:40px; border-radius:13px; background:var(--c-accent-050); color:var(--c-cta);
  display:flex; align-items:center; justify-content:center }
.shk-about2-feats .ic svg{ width:20px; height:20px }
.shk-about2-feats b{ display:block; font-size:.98rem }
.shk-about2-feats span{ font-size:.86rem; color:var(--c-ink-3) }

/* ---- services mosaic ---- */
.shk-mosaic{ display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:225px; margin-top:var(--sp-md) }
@media (max-width:980px){ .shk-mosaic{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:200px } .shk-mosaic .shk-mo:last-child{ grid-column:span 2 } }
@media (max-width:560px){ .shk-mosaic{ grid-template-columns:1fr; grid-auto-rows:190px } .shk-mosaic .shk-mo:last-child{ grid-column:auto } }
.shk-mo{ position:relative; display:block; border-radius:20px; overflow:hidden; color:#fff; text-decoration:none; isolation:isolate }
.shk-mo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:transparent;
  transition:transform .55s cubic-bezier(.2,.7,.2,1); z-index:0 }
.shk-mo::after{ content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(185deg, rgba(13,11,94,.05) 34%, rgba(13,11,94,.88) 100%) }
.shk-mo:hover img{ transform:scale(1.06) }
.shk-mo-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.1rem 1.25rem }
.shk-mo-body h3{ color:#fff; margin:0 0 .25rem; font-size:1.2rem }
.shk-mo--xl .shk-mo-body h3{ font-size:1.65rem }
.shk-mo-body p{ margin:0 0 .4rem; font-size:.88rem; color:rgba(255,255,255,.85);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.shk-mo-more{ font-weight:700; font-size:.88rem; color:var(--c-accent) }
.shk-mo-more::after{ content:' \2192'; transition:margin .2s ease }
.shk-mo:hover .shk-mo-more::after{ margin-left:.3rem }
.shk-mo--xl{ grid-column:span 2; grid-row:span 2 }
@media (max-width:560px){ .shk-mo--xl{ grid-column:span 1; grid-row:span 1 } }

/* ---- how band ---- */
.shk-howband .shk-steps--line .shk-step-n{ box-shadow:0 0 0 6px var(--c-primary-900) }
.shk-howband .shk-how-cta{ text-align:center; margin-top:var(--sp-md) }
.shk-howband .shk-how-fine{ text-align:center; font-size:.85rem; color:rgba(255,255,255,.55); margin-top:.9rem }

/* ---- FAQ two columns ---- */
.shk-faq2 .shk-faq{ max-width:none }
.shk-faq2 .shk-faq-list{ grid-auto-flow:column; grid-template-rows:repeat(5,min-content); grid-template-columns:1fr 1fr; gap:.85rem 1.1rem; align-items:start }
@media (max-width:860px){ .shk-faq2 .shk-faq-list{ grid-auto-flow:row; grid-template-rows:none; grid-template-columns:1fr } }
.shk-faq2 .shk-faq-item{ border-radius:15px; background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm) }
.shk-faq2 .shk-faq-item[open]{ border-color:var(--c-accent); box-shadow:var(--shadow-md) }
.shk-faq2 .shk-faq-title{ display:none }

/* Menu fit: keep items on one line across desktop widths */
@media (min-width: 821px) and (max-width: 1360px){
  .site-nav .menu{ gap:1.25rem }
  .site-nav .menu a{ font-size:1rem }
}

/* Section heads: wrap only when the line truly does not fit */
.shk-section-head h2, .shk-rule-head h2{ text-wrap:pretty }

/* ---- how band v2: soft gradient + texture, bigger steps, burst rail ---- */
.shk-howband{
  background:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px),
    radial-gradient(900px 520px at 12% -10%, rgba(0,199,86,.17), transparent 62%),
    radial-gradient(860px 500px at 96% 112%, rgba(84,80,255,.30), transparent 62%),
    linear-gradient(160deg, #17147A 0%, var(--c-primary-900) 55%, #080645 100%);
  background-size:26px 26px, auto, auto, auto;
}
.shk-howband .shk-rule-head::after{ display:none }
.shk-howband .shk-step-n{ width:58px; height:58px; font-size:1.45rem; margin-bottom:1.35rem }
.shk-howband .shk-steps h3{ font-size:1.3rem; margin-bottom:.55rem }
.shk-howband .shk-steps p{ font-size:1rem }
@media (min-width:900px){
  /* The rail stays invisible; only the travelling fill paints it, and each
     marker bursts as the fill reaches it. */
  .shk-dark.shk-howband .shk-steps--line .shk-steps-rail{ top:calc(.5rem + 29px); height:3px; background:none }
  .shk-howband .shk-steps--line .shk-steps-fill{ border-radius:3px; box-shadow:0 0 14px rgba(0,199,86,.55) }
  .shk-howband .shk-steps--line .shk-steps-dot{ width:15px; height:15px; margin:-7.5px 0 0 -7.5px }
  .shk-howband .shk-steps--line .shk-step-n{ box-shadow:0 0 0 6px rgba(13,11,94,.001) }
  .shk-howband .shk-steps--line.is-live li .shk-step-n{ animation-name:shk-step-burst }
}
@keyframes shk-step-burst{
  0%   { transform:scale(1);    box-shadow:0 0 0 0 rgba(0,199,86,.75), 0 0 0 0 rgba(0,199,86,.35) }
  3.2% { transform:scale(1.24); box-shadow:0 0 0 14px rgba(0,199,86,0), 0 0 0 26px rgba(0,199,86,0) }
  9%,100%{ transform:scale(1);  box-shadow:0 0 0 0 rgba(0,199,86,0), 0 0 0 0 rgba(0,199,86,0) }
}
@media (prefers-reduced-motion:reduce){
  .shk-howband .shk-steps--line .shk-steps-fill{ animation:none; transform:scaleX(1); opacity:.55 }
}

/* ---- pricing table ---- */
.shk-ptable-wrap{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; margin-top:var(--sp-md) }
.shk-ptable{ width:100%; border-collapse:collapse; font-size:.98rem }
.shk-ptable th{ text-align:left; font-family:var(--font-head); font-weight:800; font-size:.92rem; color:#fff; background:var(--c-primary-900); padding:1rem 1.4rem }
.shk-ptable td{ padding:1.15rem 1.4rem; border-top:1px solid var(--c-line); vertical-align:middle }
.shk-ptable tbody tr:nth-child(even){ background:var(--c-surface-2) }
.shk-ptable tbody tr:hover{ background:var(--c-accent-050) }
.shk-ptable .pt-name{ font-family:var(--font-head); font-weight:800; white-space:nowrap }
.shk-ptable .pt-name a{ color:var(--c-ink); text-decoration:none }
.shk-ptable .pt-name a:hover{ color:var(--c-primary) }
.shk-ptable .pt-desc{ color:var(--c-ink-2); max-width:42ch }
.shk-ptable .pt-price{ font-family:var(--font-head); font-weight:800; font-size:1.25rem; color:var(--c-primary); white-space:nowrap }
.shk-ptable .pt-price span{ display:block; font-family:var(--font-body); font-weight:400; font-size:.8rem; color:var(--c-ink-3); margin-top:.15rem; white-space:normal }
.shk-ptable .pt-cta{ text-align:right; white-space:nowrap }
@media (max-width:860px){
  .shk-ptable thead{ display:none }
  .shk-ptable, .shk-ptable tbody, .shk-ptable tr, .shk-ptable td{ display:block }
  .shk-ptable td{ border:0; padding:.3rem 1.2rem }
  .shk-ptable tr{ padding:1rem 0; border-top:1px solid var(--c-line) }
  .shk-ptable tr:first-child{ border-top:0 }
  .shk-ptable .pt-name{ font-size:1.1rem; padding-top:.8rem }
  .shk-ptable .pt-cta{ text-align:left; padding-bottom:1rem }
  .shk-ptable .pt-price{ white-space:normal }
}

/* ---- hero entrance animations ---- */
@keyframes shk-up{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:none } }
@keyframes shk-photo-in{ from{ opacity:0; transform:translateY(30px) scale(.96) } to{ opacity:1; transform:none } }
@keyframes shk-pop-in{ from{ opacity:0; transform:scale(.55) } to{ opacity:1; transform:scale(1) } }
.shk-hero2-copy > *{ animation:shk-up .65s cubic-bezier(.2,.7,.2,1) both }
.shk-hero2-copy > :nth-child(1){ animation-delay:.05s }
.shk-hero2-copy > :nth-child(2){ animation-delay:.15s }
.shk-hero2-copy > :nth-child(3){ animation-delay:.28s }
.shk-hero2-copy > :nth-child(4){ animation-delay:.4s }
.shk-hero2-media{ animation:shk-photo-in .85s .2s cubic-bezier(.2,.7,.2,1) both }
.shk-hero2 .shk-float--a{ animation:shk-pop-in .5s .85s cubic-bezier(.34,1.56,.64,1) both, shk-float 5.5s 1.6s ease-in-out infinite }
.shk-hero2 .shk-float--b{ animation:shk-pop-in .5s 1.1s cubic-bezier(.34,1.56,.64,1) both, shk-float 5.5s 2.3s ease-in-out infinite }
@media (prefers-reduced-motion:reduce){
  .shk-hero2-copy > *, .shk-hero2-media, .shk-hero2 .shk-float--a, .shk-hero2 .shk-float--b{ animation:none }
}

/* ---- why section alignment ---- */
.shk-about2 .shk-eyebrow{ margin-bottom:.45rem }
.shk-about2 h2{ margin-bottom:.7rem }
.shk-about2 .shk-lead{ margin:0 0 .4rem }
.shk-about2-feats b{ margin-bottom:.15rem }

/* ---- hero photo fade carousel ---- */
.shk-hero2-photo .shk-hcar{ opacity:0; transition:opacity 1.1s ease }
.shk-hero2-photo .shk-hcar.is-on{ opacity:1 }

/* ---- hero CTA row: aligned left, strong primary ---- */
.shk-hero2 .shk-phero-cta{ flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:.8rem; margin-bottom:0 }
.shk-hero2 .shk-phero-primary{
  background:linear-gradient(120deg,#00E06B 0%, var(--c-accent) 45%, #018767 100%);
  box-shadow:0 12px 30px rgba(0,199,86,.42), inset 0 1px 0 rgba(255,255,255,.35);
  font-size:1rem; padding:0 1.9rem;
}
.shk-hero2 .shk-phero-primary:hover{ filter:brightness(1.08); transform:translateY(-2px) }
.shk-hero2 .shk-phero-primary svg{ width:20px; height:20px }
@media (max-width:560px){ .shk-hero2 .shk-phero-cta{ flex-direction:column; align-items:stretch } .shk-hero2 .shk-phero-primary, .shk-hero2 .shk-phero-ghost{ width:100% } }

/* ---- service areas mega: same shell as services ---- */
.site-nav .shk-mega--areas .shk-mega-towns a{ padding:.34rem .55rem; border-radius:9px }

/* ---- floating quote button: site green gradient, more presence ---- */
.shk-rail-quote{
  width:62px; height:62px;
  background:linear-gradient(135deg,#00E06B 0%, var(--c-accent) 45%, #018767 100%);
  box-shadow:0 10px 26px rgba(0,199,86,.5);
}
.shk-rail-quote svg{ width:27px; height:27px }
.shk-rail-quote:hover{ box-shadow:0 14px 32px rgba(0,199,86,.6) }
.shk-rail-quote::before{ border-color:var(--c-accent) }

/* ---- inline result video ---- */
.shk-video{ max-width:920px; margin:var(--sp-md) auto 0 }
.shk-video video{ width:100%; display:block; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); background:#000 }

/* Header, hero and every section share one left edge. */
.shk-hero2-in{ padding-inline:16px }
@media (min-width:600px){ .shk-hero2-in{ padding-inline:clamp(1.25rem,4vw,2.5rem) } }

/* ---- footer contact with icons ---- */
.shk-foot-contact{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem }
.shk-foot-contact li{ display:flex; align-items:flex-start; gap:.65rem; margin:0; padding:0; line-height:1.45 }
.shk-foot-contact li::before{ display:none }
.shk-foot-contact .ic{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:var(--c-accent) }
.shk-foot-contact .ic svg{ width:16px; height:16px }
.shk-foot-contact li > span:last-child, .shk-foot-contact li > a{ padding-top:.28rem }

/* ---- contact page ---- */
.shk-contact-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(1.2rem,3vw,2.2rem); align-items:start }
@media (max-width:900px){ .shk-contact-grid{ grid-template-columns:1fr } }
.shk-contact-form{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:clamp(1.1rem,3vw,2rem) }
.shk-contact-side{ display:grid; gap:.8rem }
.shk-contact-item{ display:flex; gap:.9rem; align-items:center; background:var(--c-surface-2); border:1px solid var(--c-line); border-radius:16px; padding:1rem 1.1rem; text-decoration:none; color:var(--c-ink) }
a.shk-contact-item:hover{ border-color:var(--c-primary); color:var(--c-ink) }
.shk-contact-item .ic{ flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--c-primary); color:#fff }
.shk-contact-item .ic svg{ width:20px; height:20px }
.shk-contact-item b{ display:block; font-family:var(--font-head); font-size:1rem }
.shk-contact-item small{ display:block; color:var(--c-ink-3); font-size:.88rem }

/* ---- services hub cards ---- */
.shk-svc-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem); margin-top:var(--sp-md) }
@media (max-width:980px){ .shk-svc-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:620px){ .shk-svc-cards{ grid-template-columns:1fr } }
.shk-svc-card{ display:flex; flex-direction:column; background:var(--c-surface); border:1px solid var(--c-line); border-radius:18px; overflow:hidden; transition:box-shadow .2s ease, transform .2s ease }
.shk-svc-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px) }
.shk-svc-card-img{ display:block; aspect-ratio:16/10; overflow:hidden }
.shk-svc-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease }
.shk-svc-card:hover .shk-svc-card-img img{ transform:scale(1.05) }
.shk-svc-card-body{ position:relative; padding:2.1rem 1.4rem 1.4rem; display:flex; flex-direction:column; flex:1 }
.shk-svc-card-ic{ position:absolute; top:-26px; left:1.4rem; width:52px; height:52px; border-radius:14px; background:var(--c-surface);
  box-shadow:0 6px 18px rgba(13,11,94,.16); display:grid; place-items:center; color:var(--c-primary) }
.shk-svc-card-ic svg{ width:24px; height:24px }
.shk-svc-card h2{ font-size:1.2rem; margin:0 0 .5rem; line-height:1.25 }
.shk-svc-card h2 a{ color:var(--c-ink); text-decoration:none }
.shk-svc-card h2 a:hover{ color:var(--c-primary) }
.shk-svc-card p{ color:var(--c-ink-2); font-size:.96rem; margin:0 0 1.1rem; flex:1 }
.shk-svc-card-more{ font-family:var(--font-head); font-weight:800; font-size:.95rem; color:var(--c-cta); text-decoration:none; align-self:flex-start }
.shk-svc-card-more::after{ content:' \2192'; transition:margin .2s ease }
.shk-svc-card:hover .shk-svc-card-more::after{ margin-left:.3rem }

/* ---- blog: magazine post ---- */
.shk-mag-hero{ position:relative; color:#fff; text-align:center; overflow:hidden;
  background:linear-gradient(180deg, rgba(13,11,94,.55), rgba(13,11,94,.82)), var(--mag-bg, linear-gradient(150deg,var(--c-primary),var(--c-primary-900)));
  background-size:cover; background-position:center; padding:clamp(3rem,8vw,6rem) 16px clamp(3rem,7vw,5rem) }
.shk-mag-hero-in{ max-width:900px; margin:0 auto }
.shk-mag-hero .shk-crumbs{ justify-content:center; display:flex; margin-bottom:1rem; color:rgba(255,255,255,.75) }
.shk-mag-hero .shk-crumbs ol{ justify-content:center }
.shk-mag-cat{ display:inline-block; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; text-decoration:none;
  font-family:var(--font-head); font-weight:700; font-size:.85rem; padding:.35rem .9rem; border-radius:999px; margin-bottom:1rem; backdrop-filter:blur(4px) }
.shk-mag-cat:hover{ background:var(--c-accent); border-color:var(--c-accent); color:#fff }
.shk-mag-hero h1{ color:#fff; font-size:clamp(1.9rem,1.3rem + 2.6vw,3.2rem); margin:0 auto .9rem; max-width:22ch; text-wrap:balance }
.shk-mag-meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.1rem; margin:0; font-size:.92rem; color:rgba(255,255,255,.85) }
.shk-mag-meta span + span::before{ content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--c-accent); margin-right:1.1rem; vertical-align:middle }
.shk-mag-body{ max-width:980px; margin:0 auto; padding:clamp(2rem,5vw,3.5rem) 16px clamp(2rem,5vw,3rem) }
.shk-mag-prose{ max-width:none; font-size:1.06rem; line-height:1.75 }
.shk-mag-prose > p, .shk-mag-prose li{ color:var(--c-ink-2) }
.shk-mag-intro{ display:grid; grid-template-columns:1fr 1fr; gap:0 2.6rem; margin-bottom:2.2rem; align-items:start }
.shk-mag-intro-r{ border-left:2px solid var(--c-accent); padding-left:2.2rem }
@media (max-width:760px){ .shk-mag-intro{ grid-template-columns:1fr } .shk-mag-intro-r{ border-left:0; padding-left:0 } }
.shk-mag-kicker{ font-family:var(--font-head); font-weight:800; font-size:.82rem; color:var(--c-cta); letter-spacing:.06em; margin:0 0 .8rem; display:flex; align-items:center; gap:.6rem }
.shk-mag-kicker::before{ content:''; width:28px; height:2px; background:var(--c-cta) }
.shk-drop{ font-size:1.12rem; color:var(--c-ink) !important }
.shk-drop::first-letter{ float:left; font-family:var(--font-head); font-weight:800; font-size:4.1em; line-height:.8; margin:.08em .12em 0 0; color:var(--c-primary) }
.shk-mag-prose h2{ font-size:clamp(1.45rem,1.1rem + 1.2vw,2rem); margin:2.4rem 0 1rem; line-height:1.2 }
.shk-mag-prose h3{ font-size:1.25rem; margin:1.8rem 0 .7rem }
.shk-acc{ color:var(--c-cta) }
.shk-mag-prose ul{ list-style:none; padding:0; margin:1rem 0 1.6rem; display:grid; gap:0 }
.shk-mag-prose ul li{ position:relative; padding:.55rem 0 .55rem 2rem; border-bottom:1px solid var(--c-line) }
.shk-mag-prose ul li:last-child{ border-bottom:0 }
.shk-mag-prose ul li::before{ content:'\2713'; position:absolute; left:0; top:.6rem; width:22px; height:22px; border-radius:50%;
  background:var(--c-accent-050); color:var(--c-cta); font-size:.75rem; font-weight:800; display:grid; place-items:center; line-height:22px; text-align:center }
.shk-mag-prose ul li::marker{ content:none }
@media (min-width:760px){ .shk-mag-prose ul:has(> li:nth-child(5)){ grid-template-columns:1fr 1fr; column-gap:2rem } }
.shk-mag-prose img{ border-radius:16px; width:100%; height:auto }
.shk-mag-fig{ margin:2.2rem 0 }
.shk-mag-fig img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:18px; margin:0 }
.shk-mag-fig figcaption{ font-size:.86rem; color:var(--c-ink-3); font-style:italic; margin-top:.55rem }
.shk-mag-cta{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem 2rem; flex-wrap:wrap; margin:2.4rem 0;
  padding:1.6rem 1.8rem; border-radius:20px; color:#fff; background:linear-gradient(130deg,var(--c-primary-900),var(--c-primary)) }
.shk-mag-cta p{ color:rgba(255,255,255,.86) !important; margin:0 }
.shk-mag-cta .shk-mag-cta-t{ font-family:var(--font-head); font-weight:800; font-size:1.25rem; color:#fff !important; margin-bottom:.25rem }
.shk-mag-cta-btn{ display:inline-flex; align-items:center; min-height:52px; padding:0 1.6rem; border-radius:999px; font-family:var(--font-head); font-weight:800;
  text-decoration:none; color:#fff !important; background:linear-gradient(120deg,#00E06B 0%, var(--c-accent) 45%, #018767 100%); box-shadow:0 10px 24px rgba(0,199,86,.35) }
.shk-mag-author{ display:flex; gap:1.3rem; align-items:center; margin-top:3rem; padding:1.5rem 1.6rem; border:1px solid var(--c-line); border-radius:20px; background:var(--c-surface-2) }
.shk-mag-author-logo{ flex:none; width:88px; height:88px; border-radius:18px; background:#fff; display:grid; place-items:center; padding:.6rem; box-shadow:var(--shadow-sm) }
.shk-mag-author-logo img{ max-width:100%; height:auto }
.shk-mag-author p{ margin:0 0 .4rem; color:var(--c-ink-2); font-size:.95rem }
.shk-mag-author .shk-mag-author-n{ font-family:var(--font-head); font-weight:800; color:var(--c-ink); font-size:1.05rem }
.shk-mag-author-link{ font-family:var(--font-head); font-weight:800; color:var(--c-cta); text-decoration:none; font-size:.92rem }
.shk-mag-author-link::after{ content:' \2192' }
@media (max-width:560px){ .shk-mag-author{ flex-direction:column; align-items:flex-start } }
/* Old-site blocks inside migrated posts, restyled to the brand */
.shk-mag-prose .sk-blog-index{ background:var(--c-surface-2) !important; border:1px solid var(--c-line); border-radius:16px !important; padding:1.2rem 1.4rem !important }
.shk-mag-prose .sk-blog-index a{ color:var(--c-primary) !important }
.shk-mag-prose .sk-cta{ background:linear-gradient(130deg,var(--c-primary-900),var(--c-primary)) !important; border-radius:20px !important }
.shk-mag-prose .sk-cta a{ color:#fff }

/* footer contact rows: icon tiles replace the dot bullets */
.site-footer-inner .shk-foot-contact li > span, .site-footer-inner .shk-foot-contact li > a{ padding:.28rem 0 0; display:block; color:rgba(255,255,255,.86) }
.site-footer-inner .shk-foot-contact li > a{ color:#fff; font-weight:600 }
.site-footer-inner .shk-foot-contact li > a:hover{ padding-left:0; color:var(--c-accent) }
.site-footer-inner .shk-foot-contact li > span::before, .site-footer-inner .shk-foot-contact li > a::before{ display:none }
.site-footer-inner .shk-foot-contact li > span.ic{ padding:0; display:grid; color:var(--c-accent) }
/* service cards read left to right */
.shk-svc-card-body{ text-align:left }
/* magazine hero stays clean: the category pill gives the context */
.shk-mag-hero .shk-crumbs{ display:none }
.shk-mag-prose p > img, .shk-mag-prose p > a > img, .shk-mag-prose > img{ aspect-ratio:16/10; object-fit:cover; max-height:560px }
.shk-video--tall{ max-width:400px }