/* =============================================================
   Sherlock Holmes Cleaning — 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 — the brown is taken straight from the logo badge and does not move */
  --c-primary:      #5A4334;
  --c-primary-600:  #4C382B;
  --c-primary-800:  #3A2B20;
  --c-primary-900:  #2A1F17;
  --c-primary-050:  #F7F2ED;
  --c-primary-100:  #EADFD4;

  /* Action — a brushed silver that reads cleanly on the brown */
  --c-accent:       #C9C3BB;
  --c-accent-600:   #B3ACA3;
  --c-accent-050:   #F4F2EF;

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

  /* Neutrals */
  --c-ink:          #241C16;
  --c-ink-2:        #5B5049;
  --c-ink-3:        #8B7D73;
  --c-line:         #E7DFD8;
  --c-surface:      #FFFFFF;
  --c-surface-2:    #F8F5F2;
  --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(36,28,22,.06), 0 2px 8px rgba(36,28,22,.05);
  --shadow-md: 0 6px 16px rgba(36,28,22,.08), 0 2px 4px rgba(36,28,22,.04);
  --shadow-lg: 0 24px 54px rgba(36,28,22,.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{ 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:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  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-accent); color:var(--c-primary-900); box-shadow:var(--shadow-sm) }
.ctr-btn--accent:hover{ background:var(--c-accent-600); color:var(--c-primary-900); 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:var(--c-primary-900) }

.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 ---------------------------------------- */

/* The logo is a round badge on a transparent background, so the header band
   is plain white and the badge sits on it cleanly at any size. */
.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 badge is deliberately taller than the header and hangs below it, which
   is what makes a round mark read as a seal rather than a small icon. The bar
   keeps its own height so the nav never moves; only the logo overflows, and
   only where there is room for it. */
.site-brand{
  display:flex; align-items:center; text-decoration:none; color:inherit; flex:none;
  /* Above the mega panel: the badge hangs into the space the panel opens into,
     and a seal sliced in half by a dropdown looks broken. */
  position:relative; z-index:70;
}
.site-brand img{
  width:auto; height:78px; aspect-ratio:1; object-fit:cover;
  border-radius:50%;  /* crops the badge to a circle whatever the source file is */
  filter:drop-shadow(0 6px 16px rgba(42,31,23,.22));
  /* On a phone the badge still hangs a little, so it reads at a glance
     without pushing the bar taller than a thumb. */
  margin-block:-6px -18px;
}
/* ---------- Mobile lockup ----------
   Desktop keeps the seal alone, hanging out of the bar. Below 861px the seal
   becomes a symbol at a size that still reads, with the name set beside it,
   and the whole brand sits inside the bar instead of overflowing it. */
.site-brand-lockup{ display:none }
@media (max-width:860px){
  .site-brand{ gap:.6rem; min-width:0 }
  .site-brand img{ height:46px; margin-block:0; flex:none }
  .site-brand-lockup{
    display:flex; flex-direction:column; justify-content:center;
    line-height:1.05; min-width:0;
  }
  .site-brand-lockup strong{
    font-family:var(--font-head); font-weight:800;
    font-size:clamp(.92rem,.78rem + 1.1vw,1.12rem);
    letter-spacing:-.015em; color:var(--c-primary-900);
    white-space:nowrap;
  }
  .site-brand-lockup em{
    font-style:normal; font-family:var(--font-head); font-weight:700;
    font-size:clamp(.56rem,.48rem + .62vw,.68rem);
    letter-spacing:.14em; text-transform:uppercase; color:var(--c-primary);
    white-space:nowrap; margin-top:.12rem;
  }
}
@media (max-width:400px){
  .site-brand{ gap:.45rem }
  .site-brand img{ height:40px }
}
@media (max-width:340px){
  .site-brand-lockup em{ display:none }
}

@media (min-width:861px){
  .site-header{ overflow:visible }
  .site-header-inner{ overflow:visible }
  .site-brand img{
    height:116px;
    margin-block:-24px calc(-24px - 74px); /* hang past the bar without growing it */
    transition:height .2s ease, margin-block .2s ease;
  }
  /* Scrolled: the badge comes down a size but keeps hanging past the bar,
     which is the whole point of it.
     Nothing here reacts to hover. Resizing the badge when a panel opened
     changed the bar's geometry, which moved the nav item out from under the
     cursor, which closed the panel, which grew the badge back: the menu
     flickered open and shut as long as you kept pointing at it. */
  .site-header.is-stuck .site-brand img{ height:88px; margin-block:-18px calc(-18px - 54px) }
}
@media (min-width:1200px){
  .site-brand img{ height:150px; margin-block:-32px calc(-32px - 92px) }
  .site-header.is-stuck .site-brand img{ height:108px; margin-block:-22px calc(-22px - 66px) }
}
@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.35rem; 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:.95rem;
  padding:.5rem 0; display:inline-block; position:relative;
}
.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(42,31,23,.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(42,31,23,.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; gap:0;
    padding:.5rem 16px 1.25rem; border-bottom:1px solid var(--c-line);
    box-shadow:var(--shadow-lg); max-height:calc(100vh - 64px); overflow-y:auto;
  }
  .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(36,28,22,.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-accent); color:var(--c-primary-900) }
@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(20,15,11,.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(20,15,11,.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, #A9762B) }
.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(20,15,11,.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, #A9762B);
  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(201,195,187,.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:uppercase;
  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, #4A382C, #3A2B20);
  border-color:rgba(201,195,187,.22); color:#fff;
}
.shk-dark .shk-cities-list a:hover{
  background:linear-gradient(180deg, #5A4334, #4A382C);
  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-accent); color:var(--c-primary-900);
  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:uppercase; 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{
  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) } }

/* The badge is brown art on brown, so inverting it to white would erase the
   drawing. It sits on a light disc instead, which keeps the mark intact. */
.shk-foot-brand img{
  width:auto; height:88px; margin-bottom:1rem;
  background:var(--c-primary-050); border-radius:50%; padding:6px;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.site-footer h3{
  color:#fff; font-family:var(--font-head); font-weight:800;
  font-size:1.02rem; letter-spacing:.06em; text-transform:uppercase;
  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:.78em; width:5px; height:5px;
  border-right:2px solid var(--c-accent); border-bottom:2px solid var(--c-accent);
  transform:rotate(-45deg); transition:border-color .15s ease;
}
.site-footer-inner li > a:hover{ color:#fff; padding-left:1.35rem; text-decoration:none }
.site-footer-inner li > a:hover::before{ border-color:#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 }
.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{
  margin:1rem 0 0; font-size:.86rem; line-height:1.7;
  color:rgba(255,255,255,.62); max-width:46ch;
}
.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:#1B130D; 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{ background:linear-gradient(150deg,var(--c-primary-900),var(--c-primary)); color:#fff }
.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(201,195,187,.20), transparent 62%),
    radial-gradient(620px 320px at 4% 96%, rgba(247,242,237,.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 .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(42,31,23,.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:.12em; text-transform:uppercase; 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:uppercase; 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 }
}