/* ============================================================
   HK Environmental Consultants LLC
   Shared stylesheet — mobile first, scales up to desktop.
   Edit colors in :root. Every page uses this one file.
   ============================================================ */

/* Fonts are served from this site, not from Google, so a visit sends nothing
   to a third party. Latin subset only. Licenses sit next to the files. */
@font-face{font-family:'Oswald';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/oswald-latin.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400-latin.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-500-latin.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2')}

:root{
  --ink:#0C0D0B;
  --ink-2:#131511;
  --panel:#191C16;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.17);
  --white:#fff;
  --muted:#A9B0A2;

  --lime:#76F909;
  --lime-2:#5FD406;
  --blue:#0668FE;
  --blue-2:#3E8BFF;
  --blue-hover:#1A6CFF;   /* lightest blue that keeps white text at 4.5:1 */
  --blue-glow:rgba(6,104,254,.30);

  --display:'Oswald','Roboto Condensed','Arial Narrow',Impact,sans-serif;
  --body:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1200px;
  --gut:clamp(18px,5.2vw,52px);
  --head-h:60px;
  --r:14px;
  --pattern:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22360%22%20height%3D%22360%22%20viewBox%3D%220%200%20360%20360%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate(30%2C40)%20rotate(-18)%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2262%22%20height%3D%2224%22%20rx%3D%2212%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2210%22%20r%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M62%2012c8%20-6%2014%206%2022%200%22%2F%3E%3Cpath%20d%3D%22M0%2012c-8%206%20-14%20-6%20-22%200%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(215%2C52)%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2213%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%229%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2224%22%20r%3D%227%22%2F%3E%3Ccircle%20cx%3D%22-15%22%20cy%3D%2216%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M0%200l22%209M0%200l9%2024%22%2F%3E%3C%2Fg%3E%3Cpath%20transform%3D%22translate(295%2C150)%22%20d%3D%22M0%200c10%20-14%2026%2014%2036%200s26%2014%2036%200%22%2F%3E%3Cg%20transform%3D%22translate(120%2C175)%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2218%22%2F%3E%3Cpath%20d%3D%22M0%20-18v-9M0%2018v9M-18%200h-9M18%200h9M-12.7%20-12.7l-6.4%20-6.4M12.7%2012.7l6.4%206.4M12.7%20-12.7l6.4%20-6.4M-12.7%2012.7l-6.4%206.4%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%226%22%2F%3E%3C%2Fg%3E%3Cpath%20transform%3D%22translate(250%2C255)%22%20d%3D%22M0%200c16%20-12%2044%20-6%2046%2012s-16%2030%20-34%2026%20-32%20-18%20-12%20-38z%22%2F%3E%3Cg%20transform%3D%22translate(48%2C270)%20rotate(24)%22%3E%3Cellipse%20cx%3D%220%22%20cy%3D%220%22%20rx%3D%2230%22%20ry%3D%2216%22%2F%3E%3Ccircle%20cx%3D%22-6%22%20cy%3D%220%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M8%20-6c8%204%208%208%2012%2010%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(320%2C330)%20rotate(40)%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2234%22%20height%3D%2215%22%20rx%3D%227.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(150%2C330)%20rotate(-12)%22%3E%3Cpath%20d%3D%22M0%200h56M2%206h52M6%2012h46%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:clip;            /* the off-canvas menu must not widen the page */
}
@supports not (overflow:clip){html{overflow-x:hidden}}

body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--body);
  font-size:100%;   /* follows the visitor's own default text size */
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
  overflow-x:clip;
  /* room for the sticky call bar on phones */
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
}

img{max-width:100%;display:block;height:auto}
a{color:inherit}
::selection{background:var(--lime);color:#0B0C0A}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  line-height:1.06;
  letter-spacing:.005em;
  margin:0;
}
/* one line-height per level, so every headline on the site breaks the same
   way: big titles a touch tighter, small card titles a touch looser. Each
   leaves a clear gap between lines without drifting apart. */
h1{line-height:1}
h3,h4{line-height:1.12}
h1 em,h2 em,h3 em{font-style:normal;color:var(--lime)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
h1 + .lede,h2 + .lede{margin-top:16px}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* anchors clear the sticky header */
[id]{scroll-margin-top:calc(var(--head-h) + 18px)}

.lede{
  color:var(--muted);
  font-size:clamp(1rem,.96rem + .3vw,1.15rem);
  line-height:1.7;
}

.eyebrow{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--lime);
  margin:0 0 16px;
  display:flex;
  align-items:center;
  gap:11px;
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--lime);flex:none}
.eyebrow--blue{color:var(--blue-2)}
.eyebrow--blue::before{background:var(--blue)}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--lime);
  outline-offset:3px;
  border-radius:3px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--lime);color:#0B0C0A;padding:12px 18px;font-weight:600;
}
.skip:focus{left:12px;top:12px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* site.js marks any section with ambient animation (drifting spores, the
   moving pattern, the hero) idle while it is off screen, so nothing keeps
   animating where nobody can see it. Transitions are unaffected. */
.is-idle,.is-idle *,.is-idle *::before,.is-idle *::after{animation-play-state:paused!important}

/* ---------- ambient microbe pattern ---------- */
/* Animating background-position repainted the whole hero every frame; the
   pattern now sits on an oversized layer that slides with transform, which
   the GPU moves without repainting anything. */
.field{
  position:absolute;inset:0;overflow:hidden;
  opacity:.06;
  pointer-events:none;
  z-index:0;
}
.field::before{
  content:"";position:absolute;inset:0;
  background-image:var(--pattern);
  background-size:300px 300px;
}
@media (min-width:760px){
  .field::before{
    right:-360px;bottom:-360px;background-size:360px 360px;
    will-change:transform;animation:pan 140s linear infinite;
  }
}
@keyframes pan{to{transform:translate3d(-360px,-360px,0)}}

/* ---------- drifting specimens (hero only) ---------- */
.clearing{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.drift{position:absolute;display:block;will-change:transform;animation:bob 14s ease-in-out infinite}
.drift svg{display:block;width:100%;height:auto}
.drift .sp{fill:none;stroke:var(--lime);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.drift--blue .sp{stroke:var(--blue-2)}
.drift:nth-child(2n){animation-duration:18s;animation-delay:-4s}
.drift:nth-child(3n){animation-duration:22s;animation-delay:-9s}
@keyframes bob{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(6px,-14px,0) rotate(4deg)}
}
/* keep phones light: only a few specimens, no JS field */
.drift:nth-child(n+5){display:none}
@media (min-width:760px){.drift:nth-child(n+5){display:block}}

/* ---------- floating logo spores ----------
   Copies of the spore from the logo, given the same treatment as the one on
   the hero mark: blue glow behind it, lime bloom around it, slow spin.
   Position is set per instance with inline top/left/right values. */
.spore{
  position:absolute;z-index:0;
  top:var(--t,auto);right:var(--r,auto);bottom:var(--b,auto);left:var(--l,auto);
  /* font-size drives the whole cluster, so the orbiting dots scale with the spore */
  font-size:clamp(76px,9.5vw,128px);
  width:1em;
  aspect-ratio:167/164;
  pointer-events:none;
  animation:sporeDrift 19s ease-in-out infinite;
  will-change:transform;
}
.spore .orbit{position:absolute;left:50%;top:47%;width:0;height:0}
.spore .orbit i{
  position:absolute;display:block;border-radius:50%;
  margin:-.03em 0 0 -.03em;
  animation:orbit linear infinite;
}
.spore .glow{
  position:absolute;left:50%;top:50%;width:250%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,var(--blue-glow) 0%,rgba(6,104,254,.10) 42%,transparent 68%);
  animation:breathe 6s ease-in-out infinite;
}
.spore img{
  position:relative;display:block;width:100%;height:auto;
  filter:drop-shadow(0 0 9px rgba(118,249,9,.5));
  animation:spin 26s linear infinite;
}
.spore--slow{animation-duration:26s;animation-delay:-7s}
.spore--slow img{animation-duration:34s;animation-direction:reverse}
.spore--slow .glow{animation-delay:-2s}
@keyframes sporeDrift{
  0%,100%{transform:translate3d(0,0,0)}
  33%{transform:translate3d(14px,-22px,0)}
  66%{transform:translate3d(-10px,-9px,0)}
}
/* ---------- where the spores sit ----------
   In the open space beside a section's heading (spore--l: under the
   heading in a left-hand column), never in the heading's way and never
   pushing anything down. Each one sets its own spot and size inline:
   --t top, --x offset from the content edge, --s size. They keep their
   glow and orbiting dots and only bob a few pixels, so they stay put.
   Below 1200px there is no spare column beside the headings, so each sits
   small at the end of the section label's row. */
.spore .orbit{transform:scale(.6)}
.spore .glow{width:190%}
.sec>.wrap>.spore{
  font-size:var(--s,120px);
  top:var(--t,0);right:calc(var(--gut) + var(--x,0%));bottom:auto;left:auto;
  animation:sporeBob 7s ease-in-out infinite;
}
.sec>.wrap>.spore--l{right:auto;left:calc(var(--gut) + var(--x,0%))}
@media (max-width:1199px){
  .sec>.wrap>.spore,.sec>.wrap>.spore--l{font-size:46px;top:-34px;right:var(--gut);left:auto}
}
/* About, "Straight from me": from 960px the card fills the right-hand
   column, so the spore stays at the end of the label in the left one */
@media (min-width:960px) and (max-width:1199px){
  .advice>.spore{right:auto;left:calc(var(--gut) + 30%)}
}
@keyframes sporeBob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-4px,0)}}
/* section content always sits above the drifting spores */
.sec>.wrap{position:relative;z-index:2}

.air-hint{
  display:none;
  position:absolute;left:var(--gut);bottom:20px;z-index:3;
  align-items:center;gap:12px;margin:0;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
  transition:opacity .6s ease;
}
.air-hint::before{
  content:"";width:9px;height:9px;border-radius:50%;
  border:1px solid var(--lime);
}
.air-hint.gone{opacity:0}
@media (hover:hover) and (pointer:fine) and (min-width:960px){
  .air-hint{display:flex}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:.95rem;
  min-height:50px;padding:13px 22px;
  border:2px solid transparent;border-radius:10px;
  text-decoration:none;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease,box-shadow .2s ease;
}
.btn svg{width:17px;height:17px;flex:none}
.btn--lime{background:var(--lime);color:#0B0C0A}
.btn--blue{background:var(--blue);color:#fff}
.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--white)}
@media (hover:hover){
  .btn--lime:hover,.btn--blue:hover{background:var(--blue-hover);color:#fff;transform:translateY(-2px)}
  .btn--ghost:hover{border-color:var(--blue);color:var(--blue-2);transform:translateY(-2px)}
}
.btn:active{transform:translateY(0)}

/* ============================================================
   HEADER + NAVIGATION
   ============================================================ */
.topbar{height:4px;background:linear-gradient(90deg,var(--lime) 0 68%,var(--blue) 68% 100%)}

.site-head{
  position:sticky;top:0;z-index:120;
  border-bottom:1px solid var(--line);
}
/* the blur lives on a pseudo-element: backdrop-filter on the header itself
   would trap the fixed-position drawer inside it */
.site-head::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(12,13,11,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
body.nav-open .site-head{z-index:140}
.head-in{display:flex;align-items:center;gap:14px;min-height:var(--head-h)}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand .bmark{height:40px;width:auto;transition:transform .3s ease}
.brand .bword{height:19px;width:auto}
@media (hover:hover){.brand:hover .bmark{transform:translateY(-2px) rotate(-2deg)}}

.head-cta{display:none}

.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;
  background:none;border:1px solid var(--line-2);border-radius:10px;
  color:#fff;cursor:pointer;
}
.nav-toggle svg{width:22px;height:22px;display:block}
.nav-toggle .x{display:none}
body.nav-open .nav-toggle .x{display:block}
body.nav-open .nav-toggle .bars{display:none}

.nav-scrim{
  position:fixed;inset:0;z-index:130;
  background:rgba(6,7,5,.6);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;
}
body.nav-open .nav-scrim{opacity:1;visibility:visible}

/* mobile drawer */
.site-nav{
  position:fixed;top:0;right:0;bottom:0;z-index:125;
  visibility:hidden;
  width:min(86vw,360px);
  background:var(--ink-2);
  border-left:1px solid var(--line);
  padding:18px var(--gut) 40px;
  overflow-y:auto;
  overscroll-behavior:contain;
  transform:translateX(102%);
  transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s;
  display:flex;flex-direction:column;gap:2px;
}
body.nav-open .site-nav{transform:translateX(0);visibility:visible}
body.nav-open{overflow:hidden}

.nav-head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;margin-bottom:8px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.nav-close{
  width:40px;height:40px;display:grid;place-items:center;
  background:none;border:1px solid var(--line-2);border-radius:9px;color:#fff;cursor:pointer;
}
.nav-close svg{width:18px;height:18px}

.site-nav a{
  display:flex;align-items:center;
  min-height:50px;padding:8px 0;
  text-decoration:none;color:var(--muted);
  font-size:1rem;font-weight:500;
  border-bottom:1px solid var(--line);
  transition:color .18s ease;
}
.site-nav a[aria-current="page"]{color:var(--lime)}
@media (hover:hover){.site-nav a:hover{color:var(--blue-2)}}

.nav-group>button{
  width:100%;min-height:50px;padding:8px 0;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:0;border-bottom:1px solid var(--line);
  color:var(--muted);font-family:var(--body);font-size:1rem;font-weight:500;
  cursor:pointer;text-align:left;
}
.nav-group>button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.6;transition:transform .2s ease}
.nav-group[data-open="true"]>button svg{transform:rotate(180deg)}
.nav-menu{display:none;padding-left:16px;border-left:2px solid var(--lime);margin:6px 0 10px}
.nav-group[data-open="true"] .nav-menu{display:block}
.nav-menu a{min-height:46px;font-size:.94rem;border-bottom:0}

.site-nav .nav-call{
  margin-top:22px;width:100%;
  color:#0B0C0A;border-bottom:0;padding:14px 20px;min-height:52px;
}

/* tablet: there is room for a tap-to-call button beside the menu button */
@media (min-width:700px){
  :root{--head-h:70px}
  .btn{padding:13px 18px;gap:9px}
  .brand .bmark{height:44px}
  .brand .bword{height:20px}
  .head-cta{display:inline-flex;min-height:44px;padding:10px 16px;font-size:.82rem}
}

/* desktop nav */
@media (min-width:1000px){
  :root{--head-h:80px}
  .brand{gap:13px}
  .brand .bmark{height:50px}
  .brand .bword{height:22px}
  .nav-toggle,.nav-scrim,.nav-head{display:none}
  .btn{padding:13px 22px;gap:10px}
  .site-nav .nav-call{display:none}
  .head-cta{display:inline-flex;min-height:42px;padding:10px 17px;font-size:.85rem}
  .site-nav{
    position:static;transform:none;width:auto;visibility:visible;
    background:none;border:0;padding:0;overflow:visible;
    flex-direction:row;align-items:center;gap:22px;
  }
  .site-nav a{
    min-height:0;padding:6px 0;font-size:.84rem;white-space:nowrap;
    border-bottom:2px solid transparent;
  }
  .site-nav a:hover{border-color:var(--blue)}
  .site-nav a[aria-current="page"]{color:var(--lime);border-color:var(--lime)}
  .nav-group{position:relative}
  .nav-group>button{
    width:auto;min-height:0;padding:6px 0;gap:7px;white-space:nowrap;
    border-bottom:2px solid transparent;font-size:.84rem;
  }
  .nav-group>button:hover{color:var(--blue-2);border-color:var(--blue)}
  .nav-menu{
    display:block;position:absolute;top:calc(100% + 14px);left:-18px;
    width:230px;padding:8px;margin:0;
    background:var(--panel);border:1px solid var(--line-2);border-left:1px solid var(--line-2);
    border-radius:12px;box-shadow:0 22px 50px rgba(0,0,0,.5);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
  }
  .nav-group[data-open="true"] .nav-menu,
  .nav-group:hover .nav-menu{opacity:1;visibility:visible;transform:none}
  .nav-menu a{padding:9px 12px;border-radius:8px;font-size:.86rem;white-space:normal}
  .nav-menu a:hover{background:rgba(6,104,254,.16);color:#fff;border-color:transparent}
  body{padding-bottom:0}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-in{
  position:relative;z-index:2;
  display:grid;gap:34px;align-items:center;
  padding-block:clamp(36px,7vw,88px) clamp(40px,7vw,80px);
}
.hero h1{
  /* sized by .hero-lock below */
  letter-spacing:-.02em;
}
.hero h1 em{font-style:normal;color:var(--lime);display:block}

/* the company name, set quietly under the headline it belongs to */
.hero-name{
  margin:18px 0 0;
  font-family:var(--display);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(.82rem,.72rem + .5vw,1.05rem);
  line-height:1.35;color:var(--white);
}
.hero-name span{
  color:var(--muted);letter-spacing:.2em;
  font-size:.8em;margin-left:.55em;
}
@media (min-width:700px){.hero-name{margin-top:20px;letter-spacing:.17em}}

.hero .lede{max-width:54ch;margin-top:20px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.nf-actions{margin-bottom:40px}
.hero-actions .btn{flex:1 1 100%}
@media (min-width:520px){.hero-actions .btn{flex:0 0 auto}}
/* On a phone these wrap into a ragged block, so below 700px they become an
   even two-column grid instead of free-flowing text. */
.hero-trust{
  display:grid;grid-template-columns:1fr 1fr;gap:11px 16px;
  margin-top:28px;padding-top:20px;border-top:1px solid var(--line);
}
/* a page with an odd badge count (about-us has three, not four) would
   otherwise leave the last cell's neighbor empty below 1000px */
.hero-trust span:last-child:nth-child(3){grid-column:1 / -1}
.hero-trust span{
  display:block;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;line-height:1.45;
  text-transform:uppercase;color:var(--muted);
}
@media (min-width:430px){
  .hero-trust span{font-size:.64rem;letter-spacing:.12em}
}
/* Only go back to a free-flowing row once the text column is genuinely wide;
   between 700 and 1000 the hero is two columns, so the grid stays tidier. */
/* No bullets and no dividers — a wrapped divider would leave a stray rule at
   the start of the second line, so the items are separated by space alone. */
@media (min-width:1000px){
  .hero-trust{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:30px;padding-top:22px}
  .hero-trust span{font-size:.66rem;letter-spacing:.13em}
}

/* The copy and the 3D house stack below 1000px and sit side by side above. */
@media (min-width:1000px){
  .hero-in{grid-template-columns:1.04fr .96fr;gap:clamp(36px,4vw,64px)}
}

/* ---------- animated logo stage ---------- */
.hero-mark{display:flex;justify-content:center}
.stage{
  position:relative;
  width:min(clamp(158px,26vw,330px),100%);
  aspect-ratio:560/893;
  --orb:.58;
}
/* iPad mini and iPad Air: the mark carries the right-hand column, so it is
   sized to fill it rather than left at the phone size */
@media (min-width:700px) and (max-width:1099px){
  .stage{width:min(clamp(230px,34vw,330px),100%)}
}
@media (min-width:700px){.stage{--orb:.8}}
@media (min-width:1100px){.stage{--orb:1}}

.stage .glow{
  position:absolute;left:50.9%;top:20.4%;width:78%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,var(--blue-glow) 0%,rgba(6,104,254,.10) 42%,transparent 68%);
  animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{transform:translate(-50%,-50%) scale(.85);opacity:.7}
  50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}
}
.stage .ring{
  position:absolute;left:50.9%;top:20.4%;width:60%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px dashed rgba(6,104,254,.5);border-radius:50%;
  animation:spin 40s linear infinite reverse;
}
.stage .layer{position:absolute;inset:0;width:100%;height:100%}
.stage .mark{animation:float 7s ease-in-out infinite}
.stage .germ{
  transform-origin:50.9% 20.4%;
  animation:float 7s ease-in-out infinite,spin 26s linear infinite;
  filter:drop-shadow(0 0 9px rgba(118,249,9,.5));
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.orbit{position:absolute;left:50.9%;top:20.4%;width:0;height:0;transform:scale(var(--orb))}
.orbit i{position:absolute;display:block;border-radius:50%;margin:-4px 0 0 -4px;animation:orbit linear infinite}
@keyframes orbit{
  from{transform:rotate(0deg) translateX(var(--rr)) rotate(0deg)}
  to{transform:rotate(360deg) translateX(var(--rr)) rotate(-360deg)}
}

/* ---------- homepage hero: logo lockup ----------
   The HK mark and the headline are one symmetrical block: always exactly
   two lines, both lines the same width, and the mark exactly as tall as
   the two lines together (1.154em wide at the image's 560:893 ratio is
   1.84em tall, which is two lines at .92 leading). The gap is the same
   on both sides of the hairline. Everything is in em off this one font
   size, which is set to fill the column (the 6.95em is the block's full
   width in Oswald); site.js then shrinks it if a fallback font runs wider
   and tracks out "Clean air." to match the width of "Clear mind.". */
.hero-lock{
  display:flex;align-items:center;
  font-size:min(5.2rem,calc((100vw - 2 * var(--gut)) / 6.95));
}
@media (min-width:1000px){
  .hero-lock{font-size:min(5.2rem,calc((min(100vw,var(--wrap)) - 2 * var(--gut) - clamp(36px,4vw,64px)) * .52 / 6.95))}
}
/* the column never stretches to the headline; the headline is fitted to it */
.hero-copy{min-width:0}
.hero .hero-mark{flex:none}
.hero .stage{width:1.154em;--orb:.34}
.hero-lock-text{flex:none;margin-left:.34em;padding-left:.34em;border-left:1px solid var(--line-2)}
.hero-lock h1{font-size:1em}
.hero-lock h1>span,.hero-lock h1>em{display:block;width:max-content;white-space:nowrap}


/* ---------- homepage hero: the house scan ----------
   The 3D cutaway that used to be its own section further down. It floats
   on the hero background (edges fade out rather than a boxed card), a
   lime line sweeps it like a scanner, and the caption under it names
   whatever the camera is looking at, with a link to the matching test. */
.hero-scan{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
@media (max-width:999px){.hero-scan{margin-top:8px}}
.scan-line{
  position:absolute;left:14%;right:14%;top:0;height:100%;pointer-events:none;opacity:.65;
  will-change:transform;animation:scanSweep 6s ease-in-out infinite;
}
.scan-line::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(118,249,9,.85),transparent);
}
@keyframes scanSweep{0%,100%{transform:translateY(-34%)}50%{transform:translateY(32%)}}
/* Heading, the five boxes, a progress line and the description, as one
   panel. The line fills over however long the tour holds each view. All six
   descriptions sit stacked in the same grid cell and cross-fade, so the
   panel is always as tall as the longest one and never jumps. */
/* the readout over the house, to go with the line sweeping it */
.scan-status{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;
  margin:0 0 -20px;padding:8px 15px;border-radius:999px;
  border:1px solid rgba(118,249,9,.28);background:rgba(118,249,9,.06);
  font-family:var(--mono);font-weight:500;font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lime);
}
/* the dots count up 1, 2, 3 in a fixed-width slot so the pill never resizes */
/* the negative margin cancels the pill's 10px gap, so the dots follow the word */
.scan-dots{display:inline-block;width:1.7em;margin-left:-9px;text-align:left;letter-spacing:.12em}
.scan-dots::after{
  content:"...";display:inline-block;
  clip-path:inset(0 100% 0 0);animation:scanDots 1.8s steps(4,jump-none) infinite;
}
@keyframes scanDots{to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.scan-dots::after{animation:none;clip-path:none}}

/* tucked up into the house's faded lower edge so the two read as one piece */
.scan-panel{
  position:relative;z-index:2;
  width:min(100%,520px);margin-top:-26px;padding:12px 12px 18px;
  border:1px solid var(--line-2);border-radius:18px;
  background:linear-gradient(180deg,rgba(28,31,25,.94),rgba(17,19,15,.94));
  box-shadow:0 26px 50px -30px rgba(0,0,0,.85);
}
.scan-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 8px 12px}
.scan-cap{
  display:flex;align-items:center;gap:9px;margin:0;
  font-family:var(--mono);font-weight:500;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.scan-dot{
  width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none;
}
.scan-count{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--lime);white-space:nowrap}
.scan-chips{
  display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:5px;
  border:1px solid var(--line);border-radius:13px;background:rgba(10,11,9,.55);
}
.scan-chip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-height:62px;padding:10px 4px;border:0;border-radius:10px;cursor:pointer;
  background:transparent;color:var(--muted);text-align:center;
  font-family:var(--body);font-size:.72rem;font-weight:500;line-height:1.15;
  transition:background .2s ease,color .2s ease;
}
.scan-chip svg{
  width:19px;height:19px;flex:none;fill:none;stroke:var(--blue-2);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease;
}
@media (hover:hover){.scan-chip:hover{color:var(--white);background:rgba(255,255,255,.04)}}
.scan-chip[aria-pressed="true"]{background:rgba(118,249,9,.13);color:var(--lime)}
.scan-chip[aria-pressed="true"] svg{stroke:var(--lime)}
.scan-bar{position:relative;height:2px;margin:16px 8px;border-radius:2px;background:var(--line);overflow:hidden}
.scan-bar i{
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--blue),var(--lime));
  transform:scaleX(0);transform-origin:left center;will-change:transform;
}
.scan-finds{display:grid;padding:0 8px}
.scan-item{
  grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s;
}
.scan-item[data-on]{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .45s ease .1s,transform .45s ease .1s,visibility 0s;
}
.scan-item b{
  display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.03em;font-size:1.08rem;line-height:1.2;color:var(--white);
}
.scan-item p{margin:7px 0 11px;font-size:.86rem;line-height:1.55;color:var(--muted)}
.scan-item a,.scan-tip{
  font-family:var(--mono);font-weight:500;font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--lime);text-decoration:none;
}
.scan-item a:hover{text-decoration:underline}
.scan-tip{color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  .scan-line{animation:none;display:none}
  .scan-dot{animation:none}
  .scan-item,.scan-item[data-on]{transition:none;transform:none}
}

/* ============================================================
   INSIDE THE HOUSE — CSS 3D cutaway

   Footprint 300 wide x 140 deep. Two storeys of 100 with the slab between
   them at y=0, so the floor is y=100 and the wall top y=-100. The front wall
   and the front roof slope are cut away. Every cut edge carries a lime face.

   Solids (.sld) are drawn with three faces only — top, front, right — because
   those are the only ones the camera ever sees. Fewer overlapping planes means
   the browser has far less 3D sorting to get wrong.
   ============================================================ */
/* The camera framings below were tuned on a 590 x 470 stage; site.js sets
   --fit to however much of that the stage actually has, and the whole scene
   scales by it, framing included. The edges fade instead of clipping hard,
   since the close-up views run past the stage on purpose. */
.house-stage{
  position:relative;width:100%;max-width:520px;aspect-ratio:590/470;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 68%,transparent 100%);
  mask-image:radial-gradient(closest-side at 50% 50%,#000 68%,transparent 100%);
}

.house-scene{perspective:1200px;perspective-origin:50% 42%;transform:scale(var(--fit,1))}
.house{
  position:relative;width:400px;height:200px;transform-style:preserve-3d;
  transform:translate3d(calc(var(--tx,0px) + var(--fx,0px)),calc(var(--ty,0px) + var(--fy,0px)),0)
            rotateX(var(--rx,-16deg)) rotateY(var(--ry,-34deg)) scale(calc(var(--sc,1) * var(--ff,1)));
  transition:transform .95s cubic-bezier(.33,.02,.16,1);
  /* the camera move is the one thing that has to stay smooth, so the
     compositor is warned about it up front */
  will-change:transform;
}
/* Furniture faces all point toward the camera, so their backs need never be
   drawn. This is NOT applied to the shell: the left wall and gable face away
   from the viewer, and culling them deletes that whole end of the house. */
.house .sld>i{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.house .pl,.house .room,.house .sld,.house .flaw{
  position:absolute;left:50%;top:50%;transform-style:preserve-3d;
}
.house .room{width:0;height:0}

/* ---------- shell ---------- */
.deck{
  width:400px;height:140px;margin:-70px 0 0 -200px;
  border:1px solid rgba(255,255,255,.16);border-bottom:4px solid var(--lime);
}
.deck-base{
  transform:translateY(100px) rotateX(90deg);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 26px),
    linear-gradient(180deg,#2b3226,#1d221a);
}
.deck-mid{
  transform:translateY(0px) rotateX(90deg);
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.3) 0 1px,transparent 1px 22px),
    linear-gradient(180deg,#5a4530,#3f3022);
}

.wall{border:1px solid rgba(255,255,255,.3);transition:opacity .6s ease}
.wall-back{
  width:400px;height:200px;margin:-100px 0 0 -200px;transform:translateZ(-70px);
  background:linear-gradient(180deg,#eef1ea,#cdd3c6);
}
.wall-left{
  width:140px;height:200px;margin:-100px 0 0 -70px;
  transform:translateX(-200px) rotateY(-90deg);
  border-left:4px solid var(--lime);
  background:linear-gradient(180deg,#dde2d8,#b6bdae);
}
.wall-right{
  width:140px;height:200px;margin:-100px 0 0 -70px;
  transform:translateX(200px) rotateY(90deg);
  border-right:4px solid var(--lime);
  background:linear-gradient(180deg,#e6eae1,#c2c9b9);
}
.win{
  position:absolute;
  background:
    linear-gradient(90deg,transparent 0 47%,rgba(255,255,255,.7) 47% 53%,transparent 53%),
    linear-gradient(180deg,transparent 0 47%,rgba(255,255,255,.7) 47% 53%,transparent 53%),
    linear-gradient(160deg,#bcd7f5,#6f9fd8);
  border:3px solid #f2f5ee;
}
.win-up{left:40px;top:38px;width:56px;height:46px}
.win-dn{left:40px;top:136px;width:56px;height:46px}

.gable{
  width:140px;height:85px;margin:-42.5px 0 0 -70px;
  background:linear-gradient(180deg,#dbe0d5,#aab29f);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.gable-l{transform:translate3d(-200px,-142.5px,0) rotateY(-90deg)}
.gable-r{transform:translate3d(200px,-142.5px,0) rotateY(90deg)}

.roof{
  width:414px;height:131px;margin:-65.5px 0 0 -207px;
  transform:translate3d(0,-142.5px,-50px) rotateX(-49.5deg);
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.12) 0 2px,transparent 2px 3px,
      rgba(0,0,0,.25) 3px 4px,transparent 4px 20px),
    linear-gradient(180deg,#39412f,#22281c);
  border:1px solid rgba(255,255,255,.2);border-top:4px solid var(--lime);
}
.ridge{
  width:414px;height:7px;margin:-3.5px 0 0 -207px;
  transform:translate3d(0,-185px,0) rotateX(90deg);
  background:var(--lime);
}

.part{
  height:100px;margin:-50px 0 0 -70px;width:140px;
  background:linear-gradient(180deg,#e4e9de,#c3cab8);
  border:1px solid rgba(255,255,255,.3);border-left:3px solid var(--lime);
}
.part-a{transform:translate3d(-60px,50px,0) rotateY(90deg)}
.part-c{transform:translate3d(-20px,-50px,0) rotateY(90deg)}
.part-d{transform:translate3d(70px,-50px,0) rotateY(90deg)}
/* Doorways are single flat panels laid on the face of their partition, a
   whisker clear of it so the two surfaces never fight for depth. */
.door{
  background:linear-gradient(180deg,#7d5c36,#66492b);
  border:1px solid rgba(255,255,255,.2);
}
.door::after{  /* handle */
  content:"";position:absolute;right:4px;top:52%;
  width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.5);
}
.door-a{width:28px;height:66px;margin:-33px 0 0 -14px;transform:translate3d(-59.6px,67px,36px) rotateY(90deg)}
.door-c{width:26px;height:62px;margin:-31px 0 0 -13px;transform:translate3d(-19.6px,-31px,30px) rotateY(90deg)}
.door-d{width:26px;height:62px;margin:-31px 0 0 -13px;transform:translate3d(70.4px,-31px,-18px) rotateY(90deg)}

/* ---------- solids: top, front and right faces only ---------- */
.sld>i{position:absolute;left:50%;top:50%;display:block;border:1px solid rgba(0,0,0,.3)}
.sld{transform:translate3d(var(--x),var(--y),var(--z))}
.sld .t{
  width:var(--w);height:var(--d);
  margin:calc(var(--d) / -2) 0 0 calc(var(--w) / -2);
  transform:translateY(calc(var(--h) / -2)) rotateX(90deg);
  background:var(--c-top,#e9ede2);
}
.sld .f{
  width:var(--w);height:var(--h);
  margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  transform:translateZ(calc(var(--d) / 2));
  background:var(--c-face,#cdd3c4);
}
.sld .r{
  width:var(--d);height:var(--h);
  margin:calc(var(--h) / -2) 0 0 calc(var(--d) / -2);
  transform:translateX(calc(var(--w) / 2)) rotateY(90deg);
  background:var(--c-side,#aeb5a4);
}

/* Each piece gets its own colour family so the rooms are told apart at a
   glance: blues for soft furniture, warm timber for tables and storage,
   porcelain white for the bathroom, steel for the ductwork. */
.s-sofa{--c-top:#b9b2a6;--c-face:#9c9488;--c-side:#847c71}
.s-sofa-back{--c-top:#c6bfb3;--c-face:#a8a094;--c-side:#8e867a}
.s-table{--c-top:#a9814f;--c-face:#7d5c36;--c-side:#65492b}
.s-tv{--c-top:#1b1f23;--c-face:#0d1014;--c-side:#262b30}
.s-tv .screen{
  background:linear-gradient(150deg,#2f6fb8,#123a६6 60%,#0b2440);
  background:linear-gradient(150deg,#2f6fb8,#123a66 60%,#0b2440);
}
.s-counter{--c-top:#e6ebe0;--c-face:#9a7749;--c-side:#7e6039}
.s-cabinet{--c-top:#a9855a;--c-face:#93714a;--c-side:#775a39}
.s-fridge{
  --c-top:#e8ede6;--c-side:#b0b7ab;
  --c-face:#ced5c9;
}
.s-fridge .f{
  background:linear-gradient(90deg,#ced5c9 0 47%,#96a08f 47% 53%,#ced5c9 53%);
}
.s-step{--c-top:#eef2e8;--c-face:#c8cfc0;--c-side:#a8b09f}
.s-bed{--c-top:#eef4fa;--c-face:#7f8b9a;--c-side:#6b7784}
.s-pillow{--c-top:#ffffff;--c-face:#dfe6ee;--c-side:#c8d1da}
.s-headboard{--c-top:#8c6c47;--c-face:#6d5335;--c-side:#57422a}
.s-wardrobe{--c-top:#9c7549;--c-face:#7f5f3a;--c-side:#654b2d}
.s-tub{--c-top:#ffffff;--c-face:#d8e3ee;--c-side:#bccadb}
.s-basin,.s-toilet,.s-cistern,.s-tubrim{--c-top:#ffffff;--c-face:#dce6f0;--c-side:#c2cedc}
.s-screen{--c-top:#dff0ff;--c-face:rgba(190,220,245,.55);--c-side:rgba(170,205,235,.5)}
.s-vanity{--c-top:#eef2ea;--c-face:#7d6446;--c-side:#65503a}
.s-mirror{--c-top:#cfe2f5;--c-face:#9fc4e6;--c-side:#86aacb}
.s-towel{--c-top:#8fb8e0;--c-face:#79a4cf;--c-side:#6a92ba}
.s-bathmat{--c-top:#6f9fd0;--c-face:#5c86b2;--c-side:#4e7398}
.s-sofa-arm{--c-top:#b9b2a6;--c-face:#9c9488;--c-side:#847c71}
.s-tvstand{--c-top:#7d5c36;--c-face:#65492b;--c-side:#523a22}
.s-nightstand{--c-top:#8c6c47;--c-face:#6d5335;--c-side:#57422a}
.s-sink{--c-top:#cfe0f2;--c-face:#a8c2dd;--c-side:#8fabc8}
.s-oven{--c-top:#dfe4dc;--c-face:#b9c0b6;--c-side:#9ea59a}
.s-hob{--c-top:#23262a;--c-face:#171a1d;--c-side:#2d3136}
.s-hood{--c-top:#cbd3da;--c-face:#a9b2ba;--c-side:#8f98a0}
.s-micro{--c-top:#2a2e33;--c-face:#1b1f23;--c-side:#343940}
.s-island{--c-top:#e6ebe0;--c-face:#8a663c;--c-side:#6f5230}
.s-stool{--c-top:#a9814f;--c-face:#7d5c36;--c-side:#65492b}
.s-rail{--c-top:#e8ece2;--c-face:#c6cdbc;--c-side:#a8b09f}
.s-rug{--c-top:#a9714a;--c-face:#8b5a39;--c-side:#734a2f}
.s-runner{--c-top:#7a5f40;--c-face:#654e34;--c-side:#54412b}
.s-duct{--c-top:#dfe5ea;--c-face:#b8c0c8;--c-side:#9ea7b0}
.s-vent{--c-top:#8f989f;--c-face:#6f777e;--c-side:#5d656b}
.s-bench,.s-sidetable{--c-top:#8c6c47;--c-face:#6d5335;--c-side:#57422a}
.s-pot{--c-top:#b36a42;--c-face:#8f5433;--c-side:#75432a}
.s-plant{--c-top:#6a9c4c;--c-face:#54803b;--c-side:#446730}
.s-linen{--c-top:#e8ece2;--c-face:#cdd4c4;--c-side:#b0b7a6}

/* ---------- the hidden problems ---------- */
.flaw{opacity:0;transition:opacity .5s ease;pointer-events:none}
.flaw.on{opacity:1}
/* a highlight that is not showing does not need to be animating */
.flaw:not(.on) *,.flaw:not(.on) *::after{animation-play-state:paused}

/* behind the bathroom wall, at the wet end above the tub */
.flaw-moisture{transform:translate3d(14px,-46px,-68px)}
.stain{
  display:block;width:112px;height:84px;margin:-42px 0 0 -56px;
  border-radius:54% 46% 42% 58%/58% 42% 58% 42%;
  background:rgba(62,139,255,.75);
  animation:seep 4.5s ease-in-out infinite;
}
.stain::after{
  content:"";position:absolute;inset:-16px;border-radius:inherit;
  border:2px solid rgba(170,212,255,.9);animation:flare 2.6s ease-out infinite;
}
@keyframes seep{0%,100%{transform:scale(.94)}50%{transform:scale(1.05)}}
@keyframes flare{0%{transform:scale(.72);opacity:.9}72%{transform:scale(1.3);opacity:0}100%{opacity:0}}

/* The growth is painted onto the duct's own face. A separate patch floating in
   front of it disappears inside the duct box as soon as the camera moves. */
.house-stage[data-view="hvac"] .s-duct .f,
.house-stage[data-view="hvac"] .s-duct .t{
  background:
    radial-gradient(circle at 8% 44%,#9dff3d 0 4px,transparent 4.5px),
    radial-gradient(circle at 20% 66%,#9dff3d 0 3px,transparent 3.5px),
    radial-gradient(circle at 32% 30%,#9dff3d 0 4.5px,transparent 5px),
    radial-gradient(circle at 45% 62%,#9dff3d 0 3px,transparent 3.5px),
    radial-gradient(circle at 58% 38%,#9dff3d 0 4px,transparent 4.5px),
    radial-gradient(circle at 70% 66%,#9dff3d 0 3.5px,transparent 4px),
    radial-gradient(circle at 84% 34%,#9dff3d 0 4px,transparent 4.5px),
    linear-gradient(180deg,rgba(118,249,9,.3),rgba(118,249,9,.16)),
    #b8c0c8;
}
.flaw-hvac{transform:translate3d(-70px,-112px,-19px)}
.spores{
  display:block;width:120px;height:22px;margin:-11px 0 0 -60px;
  background:
    radial-gradient(circle at 10% 44%,var(--lime) 0 4px,transparent 4.5px),
    radial-gradient(circle at 30% 66%,var(--lime) 0 3px,transparent 3.5px),
    radial-gradient(circle at 50% 32%,var(--lime) 0 4.5px,transparent 5px),
    radial-gradient(circle at 70% 62%,var(--lime) 0 3px,transparent 3.5px),
    radial-gradient(circle at 88% 40%,var(--lime) 0 3.5px,transparent 4px);
  animation:bloom 2.3s ease-in-out infinite;
}
@keyframes bloom{0%,100%{opacity:.55;transform:scale(.95)}50%{opacity:1;transform:scale(1.07)}}

/* the highlight is the window, so it can never drift off it */
.house-stage[data-view="lead"] .win-up{
  border:5px solid #ffd166;
}
.flaw-lead{display:none}

/* The colonies are painted onto the worktop itself rather than floated just
   above it: a separate plane at the same height loses the 3D depth sort against
   the counter, the same trap the asbestos floor fell into. */
.house-stage[data-view="bacteria"] .s-counter .t,
.house-stage[data-view="bacteria"] .s-island .t{
  background:
    radial-gradient(circle at 12% 38%,#8ec2ff 0 4px,transparent 4.5px),
    radial-gradient(circle at 26% 66%,#8ec2ff 0 3px,transparent 3.5px),
    radial-gradient(circle at 40% 30%,#8ec2ff 0 4.5px,transparent 5px),
    radial-gradient(circle at 55% 62%,#8ec2ff 0 3px,transparent 3.5px),
    radial-gradient(circle at 68% 40%,#8ec2ff 0 4px,transparent 4.5px),
    radial-gradient(circle at 82% 68%,#8ec2ff 0 3.5px,transparent 4px),
    radial-gradient(circle at 92% 34%,#8ec2ff 0 3px,transparent 3.5px),
    linear-gradient(180deg,rgba(6,104,254,.35),rgba(6,104,254,.2)),
    #e6ebe0;
}
.flaw-bacteria{transform:translate3d(6px,68px,16px) rotateX(90deg)}
.germs{
  display:block;width:80px;height:26px;margin:-13px 0 0 -40px;border-radius:10px;
  background:
    radial-gradient(circle at 12% 40%,#8ec2ff 0 3.5px,transparent 4px),
    radial-gradient(circle at 32% 68%,#8ec2ff 0 3px,transparent 3.5px),
    radial-gradient(circle at 52% 32%,#8ec2ff 0 4px,transparent 4.5px),
    radial-gradient(circle at 72% 64%,#8ec2ff 0 3px,transparent 3.5px),
    radial-gradient(circle at 90% 42%,#8ec2ff 0 3.5px,transparent 4px);
  animation:bloom 2.8s ease-in-out infinite;
}

/* asbestos is the floor itself: 9x9 tile with the mastic lines between */
.house-stage[data-view="asbestos"] .deck-base{
  background:
    repeating-linear-gradient(90deg,rgba(255,214,140,.6) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(0deg,rgba(255,214,140,.6) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(255,176,32,.10) 0 13px,rgba(255,176,32,.2) 13px 26px),
    linear-gradient(180deg,#6a4c1e,#4a3616);
  border-color:rgba(255,196,64,.75);border-bottom-color:var(--lime);
}

/* ---------- camera ---------- */
.house-stage[data-view="all"] .house{--rx:-16deg;--ry:-32deg;--sc:.98;--tx:-16px;--ty:44px}
.house-stage[data-view="moisture"] .house{--rx:-10deg;--ry:-26deg;--sc:1.85;--tx:-26px;--ty:92px}
.house-stage[data-view="hvac"] .house{--rx:-18deg;--ry:-28deg;--sc:1.32;--tx:32px;--ty:126px}
.house-stage[data-view="lead"] .house{--rx:-8deg;--ry:-58deg;--sc:1.4;--tx:-150px;--ty:60px}
/* a gentle look down, so the floor lies flat on the ground rather than
   rearing up like a wall */
.house-stage[data-view="asbestos"] .house{--rx:-26deg;--ry:-30deg;--sc:1.2;--tx:-14px;--ty:20px}
.house-stage[data-view="bacteria"] .house{--rx:-22deg;--ry:-30deg;--sc:1.35;--tx:10px;--ty:24px}

/* With a problem in focus the house stays where it is — only whatever sits
   between the camera and the finding is removed, the way a real cutaway works.
   Everything is either fully drawn or fully gone; nothing is left part
   transparent, because blending translucent planes in 3D is what made this
   flicker when the camera moved. */
.house .pl,.house .sld{transition:opacity .34s ease}
.house-stage .hidden{opacity:0}

/* The roof does not disappear when a problem is chosen — it goes see-through,
   so the shape of the house is still there above the finding. It is a single
   large plane, so unlike a stack of translucent boxes it costs nothing and
   does not flicker. */
.house-stage:not([data-view="all"]) .roof,
.house-stage:not([data-view="all"]) .gable{opacity:.26}
.house-stage:not([data-view="all"]) .ridge{opacity:.5}

/* asbestos: the whole upper storey lifts away so the ground floor is open */
.house-stage[data-view="asbestos"] .deck-mid,
.house-stage[data-view="asbestos"] .part-c,
.house-stage[data-view="asbestos"] .part-d,
.house-stage[data-view="asbestos"] .door-c,
.house-stage[data-view="asbestos"] .door-d,
.house-stage[data-view="asbestos"] .r-bed .sld,
.house-stage[data-view="asbestos"] .r-bath .sld,
.house-stage[data-view="asbestos"] .r-hall .sld,
.house-stage[data-view="asbestos"] .s-duct,
.house-stage[data-view="asbestos"] .s-vent{opacity:0}

/* bacteria: looking down onto the worktop, so the storey above lifts away
   exactly as it does for the floor view */
.house-stage[data-view="bacteria"] .deck-mid,
.house-stage[data-view="bacteria"] .part-c,
.house-stage[data-view="bacteria"] .part-d,
.house-stage[data-view="bacteria"] .door-c,
.house-stage[data-view="bacteria"] .door-d,
.house-stage[data-view="bacteria"] .r-bed .sld,
.house-stage[data-view="bacteria"] .r-bath .sld,
.house-stage[data-view="bacteria"] .r-hall .sld,
.house-stage[data-view="bacteria"] .s-duct,
.house-stage[data-view="bacteria"] .s-vent{opacity:0}

/* the wall units hang directly over the worktop and hide it from above */
.house-stage[data-view="bacteria"] .s-cabinet,
.house-stage[data-view="bacteria"] .s-hood,
.house-stage[data-view="bacteria"] .s-micro{opacity:0}

@media (prefers-reduced-motion:reduce){
  .house{transition:none}
  .stain,.stain::after,.spores,.sash,.germs{animation:none}
  .stain::after{opacity:.45}
}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{position:relative;padding:clamp(52px,8vw,110px) 0;border-bottom:1px solid var(--line)}
.sec--raised{background:var(--ink-2)}
.sec-head{max-width:66ch;margin-bottom:clamp(30px,5vw,54px)}
/* the contact and certifications headlines sit outside .sec-head but match
   the other section headlines */
.sec-head h2,.contact-grid h2,.credstat-body h2{font-size:clamp(2.25rem,1.35rem + 3vw,3.5rem)}
.sec-head h2 em{font-style:normal;color:var(--lime)}
.sec-head p{margin-top:16px}

/* ---------- intentional asymmetry ----------
   A few sections break the centred, heading-on-top rhythm: a narrow heading
   column on the left that stays in view while a wider column of content
   scrolls beside it. Phones and tablets keep the normal stacked layout. */
@media (min-width:1000px){
  .wrap.split{
    display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7.4fr);
    gap:clamp(40px,5vw,76px);align-items:start;
  }
  .split>.sec-head{position:sticky;top:calc(var(--head-h) + 28px);margin-bottom:0}
  .split .faq{max-width:none}
  .split .who{grid-template-columns:repeat(2,1fr)}
  .split .signal{grid-template-columns:1fr}
  .split .signal>div:last-child:nth-child(odd){grid-column:auto}
}

/* ---------- service cards ---------- */
.svc-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:640px){.svc-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (min-width:1000px){.svc-grid{grid-template-columns:repeat(3,1fr);gap:18px}}

.svc-link{text-decoration:none;display:block;height:100%}
.svc{
  position:relative;height:100%;
  display:flex;flex-direction:column;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 22px 24px;overflow:hidden;
  transition:border-color .2s ease,transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.svc::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--blue);transition:width .35s ease}
@media (hover:hover){
  .svc-link:hover .svc{border-color:var(--blue);transform:translateY(-4px);background:var(--panel)}
  .svc-link:hover .svc::after{width:100%}
  .svc-link:hover .svc-ico{background:var(--blue)}
  .svc-link:hover .svc-ico svg{stroke:#fff}
  .svc-link:hover h3{color:var(--blue-2)}
  .svc-link:hover .svc-more{gap:14px;color:var(--blue-2)}
}
.svc-ico{
  width:46px;height:46px;border-radius:12px;flex:none;
  background:rgba(118,249,9,.11);display:grid;place-items:center;margin-bottom:18px;
  transition:background .2s ease;
}
.svc-ico svg{width:24px;height:24px;stroke:var(--lime);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease}
.svc h3{font-size:1.3rem;margin-bottom:9px;transition:color .2s ease}
.svc p{color:var(--muted);font-size:.92rem;margin:0}
.svc .tag{
  display:block;margin-top:16px;padding-top:14px;
  border-top:1px dashed var(--line-2);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.svc .tag b{color:var(--white);font-weight:500}
.svc-more{
  display:inline-flex;align-items:center;gap:9px;margin-top:auto;padding-top:18px;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:.82rem;letter-spacing:.07em;color:var(--lime);
  transition:gap .2s ease,color .2s ease;
}
.svc-more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* the sixth card is an invitation, not a service: dashed lime edge, no fill */
.svc--ask{background:transparent;border-style:dashed;border-color:rgba(118,249,9,.42)}
.svc--ask .svc-more{color:var(--lime)}

/* ---------- what we stand for: one card, four promises ----------
   A single solid card split into equal tiles by hairlines, with the brand's
   lime-to-blue bar along the top, so it sits with the service cards above
   instead of floating. One row each on a phone, two by two on a tablet, four
   across on a wide screen. */
.promises{
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.promises::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:1;
  background:linear-gradient(90deg,var(--lime) 0 68%,var(--blue) 68% 100%);
}
.promises li{
  background:var(--panel);
  display:flex;flex-direction:column;align-items:flex-start;
  padding:24px clamp(16px,2.4vw,26px) 22px;
}
.promise-ico{
  width:46px;height:46px;border-radius:12px;flex:none;margin-bottom:16px;
  display:grid;place-items:center;background:rgba(118,249,9,.11);
}
.promises li:nth-child(even) .promise-ico{background:rgba(6,104,254,.15)}
.promise-ico svg{width:24px;height:24px;fill:none;stroke:var(--lime);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.promises li:nth-child(even) .promise-ico svg{stroke:var(--blue-2)}
.promises h3{font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);margin:0 0 8px}
.promises p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
/* on a phone the tiles would be too narrow to read, so each promise gets
   its own row with the icon beside it */
@media (max-width:559px){
  .promises{grid-template-columns:1fr}
  .promises li{display:grid;grid-template-columns:46px 1fr;column-gap:16px;padding:20px 18px}
  .promise-ico{grid-row:1 / span 2;margin-bottom:0}
  .promises h3{margin:3px 0 6px}
}
@media (min-width:1000px){
  .promises{grid-template-columns:repeat(4,1fr)}
  .promises li{padding:30px 26px 28px}
}

/* ---------- audience list ---------- */
.who{display:grid;grid-template-columns:1fr;gap:16px}
/* each audience is a rounded card with its own icon, in the same style as
   the service cards, alternating lime and blue */
.who>div{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px 26px;transition:border-color .2s ease;
}
.sec--raised .who>div{background:var(--panel)}
@media (hover:hover){.who>div:hover{border-color:var(--line-2)}}
.who-ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:rgba(118,249,9,.11);margin-bottom:16px;
}
.who>div:nth-child(even) .who-ico{background:rgba(6,104,254,.15)}
.who-ico svg{width:24px;height:24px;fill:none;stroke:var(--lime);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.who>div:nth-child(even) .who-ico svg{stroke:var(--blue-2)}
.who h3{font-size:clamp(1.12rem,1rem + .4vw,1.3rem);margin-bottom:8px}
.who p{color:var(--muted);font-size:.92rem;line-height:1.65;margin:0}
/* under the intro: a nudge for anyone who does not see themselves listed */
.who-ask{
  margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.95rem;line-height:1.6;max-width:36ch;
}
.who-ask a{color:var(--lime);text-underline-offset:3px}
.who-ask a:hover{color:#fff}

/* Six full-width cards stacked on a phone, or a tablet in portrait,
   read as an endless scroll. A horizontal, snapping row instead keeps
   the section to one screen's height — the next card peeking in from
   the edge is the cue that there is more, no "show more" tap needed. */
@media (max-width:999px){
  .who{
    display:flex;flex-wrap:nowrap;gap:14px;
    overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
    padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .who::-webkit-scrollbar{display:none}
  .who>div{
    flex:0 0 80%;scroll-snap-align:start;
    border-left:0;background:var(--ink-2);border:1px solid var(--line);
    border-radius:var(--r);padding:18px 20px;
  }
  .sec--raised .who>div{background:var(--panel)}
  /* phones: bigger cards that fill the screen, so the row reads as the
     main event of the section rather than a strip of small boxes */
  .who>div{
    flex-basis:86%;padding:24px 22px 26px;
  }
  .who h3{font-size:1.32rem;margin-bottom:12px}
  .who p{font-size:1rem;line-height:1.7;color:#C2C8BC}
  .who-hint{margin-top:18px}
  .sec--who{padding-bottom:38px}
}
@media (min-width:560px) and (max-width:999px){.who>div{flex:0 0 46%}}
@media (min-width:1000px){.who{grid-template-columns:repeat(3,1fr);gap:18px}}

/* the swipe row's own peeking-next-card is the real affordance, but a
   first-time visitor still pauses over a horizontal scrollbar-less list —
   one small label removes the doubt. Desktop's static grid needs no such
   hint, so this only ever shows alongside the row above. */
.who-hint{
  display:none;margin:14px 0 0;
  align-items:center;justify-content:center;gap:6px;
  color:var(--muted);font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;
}
.who-hint svg{
  width:14px;height:14px;flex:none;
  stroke:var(--lime);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  animation:whoNudge 1.6s ease-in-out infinite;
}
@keyframes whoNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (max-width:999px){.who-hint{display:flex}}
@media (prefers-reduced-motion:reduce){.who-hint svg{animation:none}}

/* ---------- process: vertical rail on phones, row on desktop ---------- */
.steps{display:grid;gap:0;padding-left:26px;border-left:2px solid var(--line-2)}
.step{position:relative;padding:0 0 28px}
.step:last-child{padding-bottom:0}
.step::before{
  content:"";position:absolute;left:-33px;top:5px;
  width:12px;height:12px;border-radius:50%;
  background:var(--ink);border:2px solid var(--lime);
}
.sec--raised .step::before{background:var(--ink-2)}
.step .num{
  display:block;margin-bottom:10px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--lime);
}
.step h3{font-size:1.15rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.9rem;margin:0}

@media (min-width:700px){
  .steps{
    grid-template-columns:repeat(2,1fr);
    padding-left:0;border-left:0;border-top:1px solid var(--line-2);
  }
  .step{padding:28px 26px 30px;border-left:1px solid var(--line)}
  .step:nth-child(odd){border-left:0;padding-left:0}
  .step:last-child{padding-bottom:30px}
  .step::before{left:26px;top:-7px}
  .step:nth-child(odd)::before{left:0}
  .step:nth-child(n+3){border-top:1px solid var(--line-2)}
}
@media (min-width:1040px){
  .steps{grid-template-columns:repeat(4,1fr)}
  .step:nth-child(n+3){border-top:0}
  .step:nth-child(odd){border-left:1px solid var(--line);padding-left:26px}
  .step:nth-child(odd)::before{left:26px}
  .step:first-child{border-left:0;padding-left:0}
  .step:first-child::before{left:0}
}

/* ---------- photo slots ----------
   To use a real photo, replace the inner <div> of a .shot with:
   <img src="photos/your-photo.jpg" alt="What is shown">
------------------------------------ */
.gal{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:520px){.gal{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.gal{grid-template-columns:repeat(3,1fr);gap:16px}}

.shot{
  position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r);
  background:
    linear-gradient(180deg,rgba(118,249,9,.045),rgba(6,104,254,.05)),
    var(--ink-2);
  border:1px dashed rgba(118,249,9,.45);
  display:grid;place-items:center;text-align:center;padding:18px;
}
.sec--raised .shot{background:linear-gradient(180deg,rgba(118,249,9,.05),rgba(6,104,254,.06)),var(--panel)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot svg{
  width:28px;height:28px;margin:0 auto 11px;
  stroke:var(--lime);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.shot b{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:.92rem;display:block}
@media (min-width:520px){.shot{aspect-ratio:4/3}}
/* a slot holding a real job photo */
.shot--photo{
  display:block;padding:0;
  border:1px solid var(--line);
  background:var(--ink-2);
}
.shot--photo .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:40px 16px 14px;text-align:left;
  background:linear-gradient(to top,rgba(6,7,5,.94) 0%,rgba(6,7,5,.72) 42%,rgba(6,7,5,0) 100%);
}
.shot--photo .cap b{
  display:block;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:.95rem;letter-spacing:.02em;line-height:1.15;
}
.shot--photo .cap small{
  display:block;margin-top:5px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.shot--photo img{transition:transform .5s ease}
@media (hover:hover){.shot--photo:hover img{transform:scale(1.04)}}

.shot small{
  display:block;margin-top:7px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);
}

/* the job photos lead with one large picture: full width over two on a
   tablet, and on a wide screen a tall one beside two stacked */
@media (min-width:520px) and (max-width:999px){
  .gal--feature>.shot:first-child{grid-column:1 / -1;aspect-ratio:16/9}
}
@media (min-width:1000px){
  .gal--feature{grid-template-columns:1.45fr 1fr}
  .gal--feature>.shot:first-child{grid-row:span 2;aspect-ratio:auto;height:100%}
  .gal--feature>.shot:not(:first-child){aspect-ratio:16/10}
}

/* ---------- credentials ----------
   Earlier passes showed all 24 at once (grids, chips, a marquee, plain
   lists) and every version was too much to read for a visitor who just
   wants the headline. Now it is the big number, then three tiles in the
   same style as the about page's credential tiles; each tile opens its
   own full list underneath and the others close, so the section is short
   until someone asks for the detail. Without JavaScript the lists simply
   show. */
.credstat{
  display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:clamp(18px,4vw,36px);
  margin-bottom:clamp(30px,5vw,46px);
}
.credstat-num{
  flex:none;
  font-family:var(--display);font-weight:700;line-height:.82;
  font-size:clamp(5rem,3rem + 9vw,9rem);color:var(--lime);
  letter-spacing:-.01em;
}
.credstat-body{flex:1 1 320px;padding-top:clamp(6px,2vw,20px)}
.credstat-body .eyebrow{margin-bottom:16px}
.credstat-body h2{margin-bottom:14px}

.credtag{
  display:inline-block;padding:6px 12px;border-radius:6px;
  background:var(--blue);color:#fff;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
}

.credtabs-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.6vw,16px)}
.credtab{
  --c:var(--blue);
  position:relative;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:26px 14px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--ink-2);
  color:inherit;font:inherit;
  transition:transform .2s ease,border-color .2s ease,background-color .2s ease;
}
.credtab::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--c)}
.credtab--epa{--c:var(--blue-2)}
.credtab--epa .credtag{background:var(--blue-2);color:#0B0C0A}
.credtab--iicrc{--c:var(--lime)}
.credtab--iicrc .credtag{background:var(--lime);color:#0B0C0A}
.credtab-ico{
  width:26px;height:26px;margin-bottom:12px;
  fill:none;stroke:var(--c);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.credtab-num{
  display:block;margin-top:14px;
  font-family:var(--display);font-weight:700;line-height:1;
  font-size:clamp(2rem,1.6rem + 1.4vw,2.7rem);color:var(--c);
}
.credtab small{display:block;margin-top:8px;color:var(--muted);font-size:.82rem;line-height:1.4}
.credtab-more{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--white);transition:color .2s ease;
}
.credtab-more svg{
  width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease;
}
.credtab-close{display:none}
.credtab[aria-expanded="true"]{border-color:var(--c);background-color:var(--panel)}
.credtab[aria-expanded="true"] .credtab-more{color:var(--c)}
.credtab[aria-expanded="true"] .credtab-more svg{transform:rotate(180deg)}
.credtab[aria-expanded="true"] .credtab-open{display:none}
.credtab[aria-expanded="true"] .credtab-close{display:inline}
@media (hover:hover){.credtab:hover{transform:translateY(-3px);border-color:var(--line-2)}}
.credtab[aria-expanded="true"]:hover{border-color:var(--c)}
/* three across even on a phone, so the icon and the sentence go */
@media (max-width:599px){
  .credtab{padding:20px 8px 14px}
  .credtab-ico,.credtab small{display:none}
  .credtab .credtag{padding:5px 8px;font-size:.66rem;letter-spacing:.12em}
  .credtab-num{margin-top:12px}
  .credtab-more{margin-top:12px;font-size:.66rem;letter-spacing:.1em}
}

/* The list area: grid rows 0fr to 1fr animates its height to whatever the
   open list needs. Only the open list is displayed. */
.credpanels{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.3,.1,.2,1)}
.credpanels-in{min-height:0;overflow:hidden}
.credtabs.is-ready .credpanels{grid-template-rows:0fr}
.credtabs.is-ready.is-open .credpanels{grid-template-rows:1fr}
.credtabs.is-ready .credpanel{display:none}
.credtabs.is-ready .credpanel[data-on]{display:block;animation:credIn .4s ease both}
@keyframes credIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.credpanel{
  --c:var(--blue);
  margin-top:14px;padding:18px clamp(16px,2.6vw,28px) 10px;
  border:1px solid var(--line);border-top:3px solid var(--c);border-radius:var(--r);
  background:var(--ink-2);
}
.credpanel--epa{--c:var(--blue-2)}
/* on a raised section the tiles and lists step up one shade so they still stand off it */
.sec--raised .credtab{background:var(--panel)}
.sec--raised .credtab[aria-expanded="true"]{background-color:#20241c}
.sec--raised .credpanel{background:var(--panel)}
.credpanel--iicrc{--c:var(--lime)}
.credpanel-head{
  display:flex;align-items:baseline;gap:10px;margin:0 0 6px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c);
}
.credpanel-head b{font-family:var(--body);letter-spacing:0;color:var(--muted);font-weight:600}
@media (prefers-reduced-motion:reduce){
  .credpanels{transition:none}
  .credtabs.is-ready .credpanel[data-on]{animation:none}
}

.credlist-items{list-style:none;margin:0;padding:0}
.credlist-items li{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px 9px 0;border-bottom:1px solid var(--line);
  font-size:.88rem;color:var(--white);
  break-inside:avoid;
}
.credlist-items li:last-child{border-bottom:none}
.credlist-items li svg{flex:none;width:14px;height:14px;fill:none;stroke-width:1.6}
.credlist-items--blue li svg{stroke:var(--blue)}
.credlist-items--blue2 li svg{stroke:var(--blue-2)}
.credlist-items--lime li svg{stroke:var(--lime)}
/* IICRC's 14 rows flow left-to-right into columns sized to fit whatever
   width is available, rather than stacking into one tall list. */
.credlist-items--flow{columns:220px;column-gap:28px}
.credlist-items--flow li{break-inside:avoid}

.lic-note{margin-top:28px;color:var(--muted);font-size:.86rem;max-width:82ch}

.lic-note b{color:var(--white);font-weight:500}

/* ---------- service area ---------- */
.area-grid{display:grid;gap:34px;align-items:center}
@media (min-width:900px){.area-grid{grid-template-columns:1fr 1fr;gap:52px}}
/* the service-area heading sits outside .sec-head, so it needs its own size */
.area-grid h2{font-size:clamp(1.95rem,1.35rem + 2.6vw,3.2rem)}
.area-grid h2 em{font-style:normal;color:var(--lime)}

/* the three states at a glance, beside the heading */
.statesum-cap{
  margin:0 0 14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-2);
}
.statesum ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.4vw,24px);
}
.statesum li{
  display:flex;flex-direction:column;gap:10px;
  border-top:1px solid var(--line-2);padding-top:16px;
}
.statesum b{
  font-family:var(--display);font-weight:700;line-height:.9;
  font-size:clamp(2.8rem,2rem + 3.4vw,5rem);color:var(--lime);
}
.statesum span{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);line-height:1.5;
}

/* ---------- service area map ---------- */
.areamap{
  overflow:hidden;
  max-height:0;opacity:0;
  transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin .45s ease;
}
.areamap.open{max-height:4000px;opacity:1;margin-top:clamp(26px,4vw,44px)}
.areamap[hidden]{display:none}
.areamap-in{
  display:grid;gap:26px;
  background:var(--ink);border:1px solid var(--line-2);
  border-radius:18px;padding:clamp(16px,3vw,26px);
}
.mapgrid{display:grid;gap:16px}

/* ---- address checker ---- */
.addrcheck{background:none;border:0;padding:0;margin:0}
.addrcheck label{margin-bottom:9px}
.addrrow{display:grid;grid-template-columns:1fr auto;gap:10px}
.addrrow input{margin:0}
.addrrow .btn{width:auto;margin:0;padding-inline:20px}
@media (min-width:560px){.addrrow .btn{padding-inline:28px}}
.addrresult{
  margin:14px 0 0;padding:0;font-size:.9rem;
  border-left:2px solid transparent;
}
.addrresult:empty{display:none}
.addrresult[data-state="yes"]{border-color:var(--lime);padding-left:14px}
.addrresult[data-state="unknown"]{border-color:var(--blue);padding-left:14px}
.addrresult b{
  display:block;font-family:var(--display);font-weight:600;
  text-transform:uppercase;font-size:1rem;letter-spacing:.02em;margin-bottom:5px;
}
.addrresult[data-state="yes"] b{color:var(--lime)}
.addrresult[data-state="unknown"] b{color:var(--blue-2)}
.addrresult span{color:var(--muted);display:block;line-height:1.6}
.addrresult a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---- state tabs: one map, four views ---- */
.maptabs,.mapstage{width:100%;max-width:880px;margin-inline:auto}
.maptabs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;
  border:1px solid var(--line-2);border-radius:14px;background:rgba(255,255,255,.02);
}
.maptabs button{
  min-height:48px;padding:6px 8px;margin:0;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:none;border:0;border-radius:10px;color:var(--muted);cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.95rem;
  letter-spacing:.04em;text-transform:uppercase;
  transition:background .2s ease,color .2s ease;
}
.maptabs button i{
  font-style:normal;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;
  padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.07);
}
.maptabs button[aria-pressed="true"]{background:var(--blue);color:#fff}
.maptabs button[aria-pressed="true"] i{background:rgba(0,0,0,.25)}
.maptabs button:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
@media (hover:hover){.maptabs button[aria-pressed="false"]:hover{color:#fff;background:rgba(255,255,255,.06)}}
.maptabs .tl{display:none}
@media (min-width:700px){
  .maptabs .tl{display:inline}
  .maptabs .ts{display:none}
}

/* ---- the map itself ---- */
.mapstage{
  position:relative;border-radius:14px;
  background:
    radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1.4px) 0 0/14px 14px;
}
.mapstage svg{display:block;width:100%;height:auto;aspect-ratio:4/3;overflow:hidden;border-radius:14px}

/* neighbouring states are there for shape only */
.m-state{
  fill:rgba(255,255,255,.02);stroke:var(--line-2);stroke-width:1;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
.m-state.is-ours{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.34)}
.m-county{
  fill:rgba(6,104,254,.30);stroke:var(--blue-2);stroke-width:1;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;cursor:pointer;
  transition:fill .2s ease,stroke .2s ease,opacity .35s ease;
}
@media (hover:hover){.m-county:hover{fill:rgba(118,249,9,.30);stroke:var(--lime)}}
.m-county.on{fill:rgba(118,249,9,.38);stroke:var(--lime);stroke-width:2}
/* state lines drawn over the counties so the three states read apart */
.m-border{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
/* zoomed into one state, the other two step back */
svg[data-view="SC"] .m-county:not([data-st="SC"]),
svg[data-view="NC"] .m-county:not([data-st="NC"]),
svg[data-view="GA"] .m-county:not([data-st="GA"]){opacity:.3}

/* county names: only inside the state you are looking at, and only once the
   map is big enough for them to read. On a phone the line under the map
   names whatever you tap. */
.m-label,.m-slabel{
  fill:#fff;font-family:var(--display);font-weight:600;text-transform:uppercase;
  text-anchor:middle;dominant-baseline:central;pointer-events:none;
  paint-order:stroke;stroke:rgba(6,7,5,.85);stroke-linejoin:round;
  transition:opacity .3s ease;
}
.m-label{display:none;letter-spacing:.02em;stroke-width:.24em;opacity:0}
@media (min-width:760px){.m-label{display:inline}}
svg[data-view="SC"] .m-label[data-st="SC"],
svg[data-view="NC"] .m-label[data-st="NC"],
svg[data-view="GA"] .m-label[data-st="GA"]{opacity:1}
/* state names in the overview; sized in map units, so larger on small maps */
.m-slabel{font-size:48px;letter-spacing:.14em;stroke-width:.2em}
@media (min-width:560px){.m-slabel{font-size:34px}}
@media (min-width:900px){.m-slabel{font-size:26px}}
svg:not([data-view="all"]) .m-slabel{opacity:0}

.maphint{
  margin:12px 0 0;min-height:3.2em;text-align:center;transition:color .2s ease;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;line-height:1.6;
  text-transform:uppercase;color:var(--muted);
}
.maphint.is-on{color:var(--lime)}

/* every county as plain text, closed until asked for */
.countylist{width:100%;max-width:880px;margin-inline:auto;border-top:1px solid var(--line)}
.countylist summary{
  min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.countylist summary::-webkit-details-marker{display:none}
.countylist summary::after{
  content:"";width:9px;height:9px;flex:none;margin-right:4px;
  border-right:2px solid var(--lime);border-bottom:2px solid var(--lime);
  transform:translateY(-3px) rotate(45deg);transition:transform .2s ease;
}
.countylist[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.countylist summary:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.countylist-in{display:grid;gap:20px;padding:8px 0 6px}
@media (min-width:700px){.countylist-in{grid-template-columns:repeat(3,1fr);gap:28px}}
.countylist h3{
  margin:0 0 6px;font-family:var(--display);font-weight:600;
  text-transform:uppercase;font-size:1rem;letter-spacing:.03em;
}
.countylist h3 span{color:var(--lime);margin-left:6px}
.countylist p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.7}

/* under the map: the "just outside these lines" note and the call button */
.mapfoot{
  width:100%;max-width:880px;margin-inline:auto;
  display:flex;flex-direction:column;gap:14px;
  padding-top:18px;border-top:1px solid var(--line);
}
.mapnote{color:var(--muted);font-size:.86rem;line-height:1.6;margin:0}
.mapfoot .btn{width:100%}
@media (min-width:700px){
  .mapfoot{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
  .mapnote{max-width:52ch}
  .mapfoot .btn{width:auto;flex:none}
}

/* on a phone the panel runs edge to edge so the map gets every pixel */
@media (max-width:820px){
  .areamap{margin-inline:calc(-1 * var(--gut))}
  .areamap-in{border-radius:0;border-left:0;border-right:0;padding:16px 14px 20px}
}

@media (prefers-reduced-motion:reduce){
  .areamap,.m-county,.m-label,.m-slabel,.maptabs button{transition:none}
  .areamap.open{max-height:none}
}

/* ---------- proof bar ---------- */
.proof{padding-block:clamp(26px,4vw,44px)}
/* ---------- iPad Mini portrait (roughly 700-900 wide) ----------
   The two hero buttons wrapped onto separate lines at different widths here,
   which left the column looking ragged. Scoped so neither phones nor the
   landscape tablet are affected. */
@media (min-width:700px) and (max-width:900px){
  /* two equal buttons on one row rather than two ragged lines */
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .hero-actions .btn{width:100%;padding-inline:12px;font-size:.85rem}

  .hero-trust{grid-template-columns:1fr 1fr;gap:10px 18px}
}

/* ---------- the figures ----------
   A rule down the side of each figure rather than under it, alternating on the
   diagonal so no row or column is all one colour. */
.stats{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:20px 16px;
}
@media (min-width:700px){
  .stats{grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,28px)}
}

.stats>div{
  text-align:left;
  padding:2px 0 2px 14px;
  border-left:2px solid var(--lime);
}
/* Below 700px the four sit 2x2, so the colours run on the diagonal: 1 and 4
   lime, 2 and 3 blue, which keeps any row or column from repeating. */
.stats>div:nth-child(2),
.stats>div:nth-child(3){border-left-color:var(--blue)}

.stats b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,1.3rem + 3vw,3.1rem);line-height:1;
  white-space:nowrap;letter-spacing:-.01em;color:#fff;
}
.stats>div:nth-child(2) b,
.stats>div:nth-child(3) b{color:var(--blue-2)}
.stats>div:nth-child(1) b,
.stats>div:nth-child(4) b{color:var(--lime)}

/* From 700px they sit in one row, so the diagonal no longer applies: they
   simply alternate green, blue, green, blue across the line. */
@media (min-width:700px){
  .stats>div:nth-child(odd){border-left-color:var(--lime)}
  .stats>div:nth-child(even){border-left-color:var(--blue)}
  .stats>div:nth-child(odd) b{color:var(--lime)}
  .stats>div:nth-child(even) b{color:var(--blue-2)}
}
/* the unit rides smaller than the figure it belongs to */
.stats b i{font-style:normal;font-size:.48em;letter-spacing:.02em;margin-left:.1em;opacity:.8}

.stats span{
  display:block;margin-top:9px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);line-height:1.5;
}
@media (min-width:820px){.stats span{font-size:.66rem}}

/* ---------- reviews ---------- */
.quotes{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:760px){.quotes{grid-template-columns:repeat(3,1fr);gap:18px}}
.quotes figure{
  margin:0;display:flex;flex-direction:column;
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r);padding:24px 22px 20px;
}
.sec--raised .quotes figure{background:var(--panel)}
.quotes blockquote{
  margin:0;flex:1 1 auto;color:var(--white);
  font-size:.96rem;line-height:1.65;
}
.quotes blockquote::before{
  content:"\201C";display:block;
  font-family:var(--display);font-size:2.6rem;line-height:.6;
  color:var(--lime);margin-bottom:10px;
}
.rating{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:14px 0 0;
}
.rating b{font-family:var(--display);font-weight:700;font-size:2rem;line-height:1;color:var(--lime)}
.rating span{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
/* the star run is a span too, so it has to win back its size and colour */
.rating .stars{
  font-family:var(--body);font-size:1.35rem;letter-spacing:.1em;
  color:#ffc44d;text-transform:none;
}
.stars{color:#ffc44d;letter-spacing:.12em;font-size:1.05rem;line-height:1}
.quotes .stars{display:block;margin-bottom:12px;font-size:.95rem}
.quotes figcaption span{
  display:block;margin-top:4px;color:var(--muted);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
}

.reviews-link{margin:24px 0 0;text-align:center}
.reviews-link .btn{gap:12px}
.reviews-link svg{width:18px;height:18px;flex:none}

.quotes figcaption{
  margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--white);
}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:8px;max-width:900px}
.faq details{
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:12px;padding:0 18px;
  transition:border-color .2s ease;
}
.sec--raised .faq details{background:var(--panel)}
.faq details[open]{border-color:var(--line-2)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:17px 0;min-height:56px;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:.98rem;letter-spacing:.02em;line-height:1.25;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";flex:none;color:var(--lime);
  font-family:var(--body);font-size:1.5rem;line-height:1;
}
.faq details[open] summary::after{content:"\2013"}
@media (hover:hover){.faq summary:hover{color:var(--blue-2)}}
.faq p{color:var(--muted);font-size:.93rem;padding-bottom:20px;margin:0;max-width:72ch}

/* ---------- contact ---------- */
.contact{position:relative;overflow:hidden}
.contact-grid{position:relative;z-index:2;display:grid;gap:36px}
@media (min-width:960px){.contact-grid{grid-template-columns:.9fr 1.1fr;gap:52px}}

.contact-lines{display:grid;gap:14px;margin-top:26px}
.cline{display:flex;gap:14px;align-items:center;text-decoration:none;min-height:52px}
.cline i{
  width:44px;height:44px;border-radius:10px;flex:none;
  background:var(--lime);display:grid;place-items:center;
  transition:background .2s ease;
}
.cline i svg{width:20px;height:20px;stroke:#0B0C0A;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease}
.cline small{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);display:block;
}
.cline b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(1rem,.9rem + .6vw,1.22rem);line-height:1.2;
  letter-spacing:.01em;text-transform:none;
  transition:color .2s ease;
}
@media (hover:hover){
  .cline:hover b{color:var(--blue-2)}
  .cline:hover i{background:var(--blue)}
  .cline:hover i svg{stroke:#fff}
}

form{
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:18px;padding:clamp(20px,4vw,34px);
}
.sec--raised form{background:var(--panel)}
.row{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:560px){.row{grid-template-columns:1fr 1fr;gap:16px}}
.f{margin-bottom:16px}
label{
  display:block;margin-bottom:8px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
input,select,textarea{
  width:100%;
  background:var(--ink);border:1px solid var(--line-2);border-radius:10px;
  padding:13px 14px;color:#fff;
  font-family:var(--body);font-size:1rem; /* 1rem (16px by default) stops iOS zooming on focus */
  min-height:50px;
  transition:border-color .2s ease;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
textarea{resize:vertical;min-height:118px;line-height:1.55}
select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--lime) 50%),linear-gradient(135deg,var(--lime) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:40px;
}
form .btn{width:100%;margin-top:4px}
.form-note{font-size:.78rem;color:var(--muted);margin:13px 0 0;text-align:center}
.form-note[data-state="error"]{color:#FF8A7A}
.form-note[data-state="ok"]{color:var(--lime)}

/* ============================================================
   SERVICE PAGE PIECES
   ============================================================ */
.phero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.crumb{
  position:relative;z-index:2;margin:0;padding-top:18px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);
}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--lime)}
.crumb span{color:var(--white)}

.phero-in{
  position:relative;z-index:2;
  display:grid;gap:32px;align-items:center;
  padding-block:clamp(26px,5vw,60px) clamp(38px,6vw,72px);
}
.phero-in>*{min-width:0}
.phero h1{font-size:clamp(2.9rem,14vw,5.4rem);letter-spacing:-.02em}
@media (max-width:699px){
  .phero h1.tight{font-size:clamp(2.5rem,12.6vw,5.4rem)}
}
@media (min-width:700px){
  .phero-in{grid-template-columns:1.36fr .64fr;gap:40px}
  .phero h1{font-size:clamp(2.6rem,6.2vw,4.1rem)}
}
@media (min-width:1000px){
  .phero-in{grid-template-columns:1.15fr .85fr;gap:48px}
  .phero h1{font-size:clamp(3.4rem,5.6vw,5.4rem)}
}
.phero h1 em{font-style:normal;color:var(--lime);display:block}
.phero .lede{max-width:54ch;margin-top:18px}

/* signs — static, not hoverable */
/* Signs it is time to call. Five cards of different text lengths were sitting
   at different heights and the odd one out left a hole in the grid, so the rows
   are forced equal and the last card spans the full width. */
.signal{display:grid;grid-template-columns:1fr;gap:12px;grid-auto-rows:1fr}
@media (min-width:700px){
  .signal{grid-template-columns:repeat(2,1fr);gap:14px}
  .signal>div:last-child:nth-child(odd){grid-column:1 / -1}
}
.signal>div{
  display:flex;gap:16px;align-items:center;
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:12px;padding:20px;min-height:96px;
}
.sec--raised .signal>div{background:var(--panel)}
/* the warning mark reads at a glance, on its own badge */
.signal>div>svg{
  width:38px;height:38px;flex:none;
  stroke:var(--lime);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
@media (min-width:700px){.signal>div>svg{width:44px;height:44px}}
.signal p{margin:0;font-size:.94rem;color:var(--white)}

/* ---------- collapsing a long .signal list on phones ----------
   Five stacked cards is a lot of scroll on a phone. site.js hides everything
   past the third and adds a toggle when a .signal list has more than three
   items — desktop already shows two columns, so this never applies there,
   and without JS every card just shows, same as always. */
@media (max-width:699px){
  .js .signal[data-collapsed="true"]>div:nth-child(n+4){display:none}
  /* the hidden cards show as a deck tucked under the last visible one, so
     it reads as "there is more" before the button is even noticed */
  .js .signal[data-collapsed="true"]{position:relative;isolation:isolate;margin-bottom:16px}
  .js .signal[data-collapsed="true"]::before,
  .js .signal[data-collapsed="true"]::after{
    content:"";position:absolute;z-index:-1;height:24px;
    border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;
    background:var(--ink-2);
  }
  .js .signal[data-collapsed="true"]::before{left:10px;right:10px;bottom:-8px}
  .js .signal[data-collapsed="true"]::after{left:22px;right:22px;bottom:-16px;opacity:.6}
  .js .sec--raised .signal[data-collapsed="true"]::before,
  .js .sec--raised .signal[data-collapsed="true"]::after{background:var(--panel)}
}
/* a pill, centred, with the chevron on a lime disc */
.signal-toggle{
  display:none;width:fit-content;margin:20px auto 0;
  align-items:center;gap:12px;min-height:48px;padding:0 7px 0 20px;
  background:rgba(118,249,9,.07);border:1px solid rgba(118,249,9,.42);border-radius:999px;
  color:var(--white);font-family:var(--body);font-weight:600;font-size:.92rem;
  cursor:pointer;transition:background .2s ease,border-color .2s ease;
}
.signal-toggle svg{
  width:34px;height:34px;flex:none;padding:9px;border-radius:50%;
  background:var(--lime);stroke:#0B0C0A;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s ease;
}
.signal-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (hover:hover){.signal-toggle:hover{background:rgba(118,249,9,.13);border-color:var(--lime)}}
@media (max-width:699px){.js .signal-toggle{display:flex}}

/* the places we check — a flowing block of names, not a list of rows.
   Reads as one statement at any width instead of eight stacked lines. */
.spotflow{
  display:block;margin:0;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.25rem,.95rem + 2.4vw,2.4rem);
  line-height:1.22;letter-spacing:.01em;
}
/* a long phrase may break inside itself on a narrow phone — better than
   overflowing the screen. The separator still rides with the closing word. */
.spotflow span{color:#fff}
.spotflow span:nth-child(even){color:var(--lime)}
/* the separator rides along with the word it follows, so it never starts a line */
.spotflow span:not(:last-child)::after{
  content:" /";color:var(--blue-2);font-weight:400;
}
@media (min-width:900px){
  .spotflow{font-size:clamp(1.7rem,1rem + 1.9vw,2.6rem)}
}

/* deliverables — static */
.deliver{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:700px){.deliver{grid-template-columns:repeat(2,1fr);gap:14px}}
.deliver>div{
  display:flex;gap:14px;align-items:flex-start;
  border-left:2px solid var(--blue);padding:6px 0 6px 16px;
}
.deliver svg{width:21px;height:21px;flex:none;margin-top:2px;stroke:var(--blue-2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.deliver b{font-weight:500;font-size:.94rem}

/* ---------- meet the owner : large photo, editorial bio ----------
   Not a bordered card pairing a thumbnail with text — a tall feature
   photo with its own glow/ring backdrop (the same device the hero mark
   uses), and the copy running free beside it rather than boxed in. */
.ownerfeature{display:grid;grid-template-columns:1fr;gap:36px}
@media (min-width:820px){
  .ownerfeature{grid-template-columns:minmax(0,46%) 1fr;gap:52px;align-items:center}
}
@media (min-width:1100px){
  .ownerfeature{grid-template-columns:minmax(0,48%) 1fr;gap:68px}
}

.ownerfeature-photo{position:relative}
.ownerfeature-photo .shot{
  position:relative;z-index:2;aspect-ratio:4/5;border-radius:26px;overflow:hidden;
}
.ownerfeature-glow{display:none}
.ownerfeature-ring{
  position:absolute;left:-20px;bottom:-20px;width:44%;aspect-ratio:1;z-index:1;
  border:1px dashed rgba(118,249,9,.4);border-radius:50%;
  animation:spin 44s linear infinite;
}
@media (max-width:819px){.ownerfeature-ring{display:none}}
@media (prefers-reduced-motion:reduce){.ownerfeature-glow,.ownerfeature-ring{animation:none}}

.ownerfeature-body{max-width:58ch}
.ownerfeature-body .owner-role{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lime);margin:0 0 10px;
}
.ownerfeature-body h3{
  font-size:clamp(1.5rem,1.25rem + 1.2vw,2.15rem);margin-bottom:18px;
}
.owner-quote{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);line-height:1.35;
  color:var(--white);padding-left:20px;border-left:3px solid var(--blue);
  margin-bottom:24px;
}
.owner-quote .qmark{
  display:block;font-family:var(--display);font-size:2.6em;line-height:.6;
  color:var(--blue-2);margin-bottom:2px;
}
.owner-bio{color:var(--muted);font-size:.96rem;line-height:1.7;margin-bottom:26px}
.owner-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.owner-chips li{
  padding:9px 16px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--ink-2);font-family:var(--mono);font-size:.66rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--white);
}
.sec--raised .owner-chips li{background:var(--panel)}

/* ---------- straight from me: three things I tell everyone (About) ----------
   The heading on the left, and on the right one signed card: three pieces
   of advice, each with an icon instead of a number, closed with my name, so
   it reads like a note from me rather than another list. Stacked on a phone. */
.advice{display:grid;gap:clamp(26px,4vw,40px);align-items:start}
.advice .sec-head{margin-bottom:0}
@media (min-width:960px){.advice{grid-template-columns:.85fr 1.15fr;gap:56px}}
.advice-card{
  position:relative;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:6px clamp(18px,3vw,30px) 0;
}
.advice-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--lime) 0 68%,var(--blue) 68% 100%);
}
.tells{list-style:none;margin:0;padding:0}
.tells li{
  display:grid;grid-template-columns:46px 1fr;column-gap:18px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--line);
}
.tell-ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:rgba(118,249,9,.11);
}
.tells li:nth-child(even) .tell-ico{background:rgba(6,104,254,.15)}
.tell-ico svg{width:24px;height:24px;fill:none;stroke:var(--lime);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tells li:nth-child(even) .tell-ico svg{stroke:var(--blue-2)}
.tells b{
  display:block;margin:2px 0 6px;color:var(--white);
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);line-height:1.12;letter-spacing:.005em;
}
.tells li>div>span{display:block;color:var(--muted);font-size:.94rem;line-height:1.65}
/* the sign-off: my initials and name, like the bottom of a note */
.tells-sign{display:flex;align-items:center;gap:14px;padding:18px 0 22px}
.tells-sign .mono{
  width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--lime);color:var(--lime);
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.04em;
}
.tells-sign p{margin:0;line-height:1.35}
.tells-sign b{display:block;color:var(--white);font-weight:600;font-size:.95rem}
.tells-sign small{
  display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:3px;
}

.ask{position:relative;z-index:2;display:grid;gap:36px}
@media (min-width:960px){.ask{grid-template-columns:.9fr 1.1fr;gap:52px}}
.ask h2{font-size:clamp(1.8rem,1.35rem + 2.2vw,2.8rem)}

/* ============================================================
   FOOTER + STICKY CALL BAR
   ============================================================ */
.site-foot{padding:clamp(44px,6vw,72px) 0 26px;position:relative}

.foot-grid{
  display:grid;grid-template-columns:1fr;gap:34px;
  padding-bottom:clamp(28px,4vw,40px);
  border-bottom:1px solid var(--line);
}
@media (min-width:620px){.foot-grid{grid-template-columns:repeat(2,1fr);gap:36px 30px}}

@media (min-width:1000px){
  /* the brand block takes the space of two so the three link columns line up */
  .foot-grid{grid-template-columns:1.6fr 1fr 1fr 1.15fr;gap:44px}
}

.foot-brand .foot-logo{width:min(100%,230px);height:auto;display:block}
.foot-tag{
  margin:20px 0 0;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem);
  line-height:1.12;letter-spacing:.01em;
}
.foot-tag span{color:var(--lime)}
.foot-blurb{margin:12px 0 0;color:var(--muted);font-size:.86rem;line-height:1.6;max-width:38ch}

.foot-col{display:flex;flex-direction:column}
.foot-col h3,.nf-links h2{
  font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lime);
  margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid var(--line-2);
}
.foot-col a{
  color:var(--muted);text-decoration:none;font-size:.88rem;
  padding:9px 0;display:block;transition:color .18s ease,padding-left .18s ease;
}
.foot-col a:hover{color:var(--lime);padding-left:5px}

.foot-phone{
  font-family:var(--display)!important;font-weight:700;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem)!important;
  color:var(--white)!important;letter-spacing:.01em;line-height:1.1;
  padding-top:14px!important;
}
.foot-phone:hover{color:var(--lime)!important;padding-left:0!important}
.foot-reach a{word-break:break-word}
.foot-note{margin:14px 0 0;color:var(--muted);font-size:.8rem;line-height:1.7}

.foot-bot{
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  padding-top:22px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}

/* Legal links under the footer, plus the Cookie settings button that site.js
   reveals only when Google Analytics is switched on. */
.foot-legal{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
}
.foot-legal a,.foot-consent{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:6px 0;
  background:none;border:0;cursor:pointer;transition:color .18s ease;
}
.foot-legal a:hover,.foot-consent:hover{color:var(--lime)}
.foot-consent[hidden]{display:none}
.foot-legal a[aria-current]{color:var(--white)}
.fn-dot{display:none}

/* Phones. The footer is laid out as: brand row, a "get in touch" card
   (the thing most people scroll down here for), the two link lists side by
   side, then a centred sign-off. A thin lime-to-blue rule marks where the
   footer starts. Icons are drawn from inline SVG so no markup changes.
   This block has to come after every base footer rule above. */
@media (max-width:619px){
  .site-foot{padding-top:26px;padding-bottom:18px}
  .site-foot::before{
    content:"";position:absolute;left:0;right:0;top:0;height:2px;
    background:linear-gradient(90deg,var(--lime),var(--blue));opacity:.85;
  }
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:22px 18px;padding-bottom:18px}
  .foot-brand,.foot-reach{grid-column:1 / -1}
  .foot-grid>nav.foot-col{order:2}
  .foot-reach{order:1}

  .foot-brand{display:flex;align-items:center;gap:18px}
  /* the link is the flex item, so it is the one that has to be sized */
  .foot-brand>a{flex:0 0 96px;max-width:96px}
  .foot-brand .foot-logo{width:100%}
  .foot-tag{margin:0;flex:1 1 auto;font-size:clamp(1.25rem,.8rem + 2.6vw,1.5rem);line-height:1.02}
  .foot-tag span{display:block}
  .foot-blurb{display:none}

  /* get in touch, as a card */
  .foot-reach{
    display:grid;gap:10px;padding:16px 16px 14px;
    border:1px solid var(--line-2);border-radius:16px;
    background:linear-gradient(135deg,rgba(118,249,9,.06),rgba(6,104,254,.08));
  }
  .foot-reach h3{margin:0 0 2px;padding-bottom:0;border-bottom:0}
  .foot-reach a{
    display:flex!important;align-items:center;gap:12px;
    padding:0!important;color:var(--white);word-break:normal;overflow-wrap:anywhere;
  }
  .foot-reach a::before{
    content:"";flex:none;width:36px;height:36px;border-radius:11px;
    background:rgba(118,249,9,.12) center/18px no-repeat;
  }
  .foot-reach .foot-phone{font-size:1.45rem!important}
  .foot-reach .foot-phone::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2376F909%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z%27/%3E%3C/svg%3E")}
  .foot-reach a[href^="mailto:"]{font-size:.92rem}
  .foot-reach a[href^="mailto:"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2376F909%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%275%27 width=%2718%27 height=%2714%27 rx=%272%27/%3E%3Cpath d=%27M3.5 6.5L12 13l8.5-6.5%27/%3E%3C/svg%3E")}
  .foot-reach .foot-note{
    position:relative;margin:0;padding:10px 0 0 48px;
    border-top:1px dashed var(--line-2);font-size:.78rem;line-height:1.55;
  }
  .foot-reach .foot-note::before{
    content:"";position:absolute;left:0;top:10px;width:36px;height:20px;
    background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2376F909%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 21s7-6.1 7-11a7 7 0 1 0-14 0c0 4.9 7 11 7 11z%27/%3E%3Ccircle cx=%2712%27 cy=%2710%27 r=%272.6%27/%3E%3C/svg%3E") center/17px no-repeat;
  }
  .foot-reach .foot-note br{display:none}
  .foot-reach .fn-dot{display:inline}

  .foot-col h3{margin-bottom:4px;padding-bottom:8px}
  .foot-col a{padding:4px 0;font-size:.88rem;line-height:1.35}
  .foot-col a:hover{padding-left:0}

  /* centred sign-off */
  .foot-bot{
    flex-direction:column;align-items:center;text-align:center;
    gap:4px;padding-top:16px;font-size:.66rem;letter-spacing:.05em;
  }
  .foot-bot>span:last-child{display:none}
  .foot-legal{justify-content:center;gap:0 18px;margin-top:10px;padding-top:4px}
  .foot-legal a,.foot-consent{font-size:.66rem;padding:9px 0}
  .foot-legal .fl-x{display:none}
}

.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line-2);
  padding-bottom:env(safe-area-inset-bottom);
  /* lift it off the page instead of the content just stopping against it,
     and round the leading edge so it reads as a placed bar, not a slab */
  border-radius:16px 16px 0 0;
  overflow:hidden;
  box-shadow:0 -10px 24px rgba(0,0,0,.35);
}
.callbar a{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:56px;text-decoration:none;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:.88rem;letter-spacing:.05em;
}
.callbar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.callbar .c1{background:var(--lime);color:#0B0C0A}
.callbar .c2{background:var(--ink-2);color:#fff}
@media (min-width:1000px){.callbar{display:none}}

/* ---------- scroll reveal ---------- */
/* Only hide these when scripting is confirmed (the .js class is set by an inline
   script in <head>). Without it the content just shows — never a blank page. */
.js .rise{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.js .rise.in{opacity:1;transform:none}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .js .rise{opacity:1;transform:none}
  .drift{opacity:.16 !important}
}


/* ============================================================
   FORM EXTRAS, LEGAL LINKS, COOKIE BANNER, LEGAL PAGES
   ============================================================ */
/* spam trap: off screen for people, still in the form for bots */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-legal{margin:6px 0 0;text-align:center;font-size:.72rem;color:var(--muted)}
.form-legal a{color:var(--white);text-underline-offset:3px}
.form-legal a:hover{color:var(--lime)}


.consent{
  position:fixed;z-index:115;left:12px;right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  max-width:420px;padding:16px 18px 18px;
  background:rgba(19,21,17,.97);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  opacity:0;transform:translateY(14px);transition:opacity .25s ease,transform .25s ease;
}
.consent.is-on{opacity:1;transform:none}
.consent[hidden]{display:none}
.consent-k{
  margin:0;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lime);
}
.consent-t{margin:8px 0 14px;font-size:.84rem;line-height:1.55;color:var(--white)}
.consent-t a{color:var(--lime);text-underline-offset:3px;white-space:nowrap}
.consent-b{display:flex;gap:10px}
.consent-b .btn{flex:1;min-height:44px;padding:10px 16px;font-size:.88rem}
/* phones and tablets: sit above the call bar instead of over it */
@media (max-width:999px){.consent{bottom:calc(74px + env(safe-area-inset-bottom))}}
@media (min-width:1000px){.consent{left:24px;bottom:24px}}
@media (prefers-reduced-motion:reduce){.consent{transition:none}}

.legal-date{
  margin-top:18px!important;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.legal{display:grid;gap:30px}
@media (min-width:1000px){
  .legal{grid-template-columns:240px minmax(0,1fr);gap:64px;align-items:start}
}
.legal-toc{
  padding:16px 18px 10px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--ink-2);
}
@media (min-width:1000px){.legal-toc{position:sticky;top:calc(var(--head-h) + 28px)}}
.legal-toc p{
  margin:0 0 6px;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lime);
}
.legal-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.legal-toc li{counter-increment:toc;border-top:1px solid var(--line)}
.legal-toc li:first-child{border-top:0}
.legal-toc a{
  display:flex;gap:12px;align-items:baseline;padding:9px 0;
  color:var(--muted);text-decoration:none;font-size:.86rem;line-height:1.35;
  transition:color .18s ease;
}
.legal-toc a::before{
  content:counter(toc,decimal-leading-zero);flex:none;
  font-family:var(--mono);font-size:.64rem;color:var(--lime);
}
.legal-toc a:hover{color:var(--white)}
@media (max-width:999px){
  /* two short columns on a phone so the list is not a screen long */
  .legal-toc ol{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .legal-toc li:nth-child(2){border-top:0}
  .legal-toc a{font-size:.8rem}
}
@media (max-width:379px){
  .legal-toc ol{grid-template-columns:1fr}
  .legal-toc li:nth-child(2){border-top:1px solid var(--line)}
}
.legal-body{max-width:72ch;min-width:0}
.legal-body>section{
  margin:0 0 30px;padding:0 0 30px;border-bottom:1px solid var(--line);
  scroll-margin-top:calc(var(--head-h) + 24px);
}
.legal-body>section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.legal-body h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);margin:0 0 14px}
.legal-body h3{font-size:1.05rem;margin:20px 0 8px;letter-spacing:.02em}
.legal-body p,.legal-body li{color:var(--muted);font-size:.95rem;line-height:1.75}
.legal-body p{margin:0 0 12px}
.legal-body p:last-child{margin-bottom:0}
.legal-body ul{margin:0 0 12px;padding-left:1.15em}
.legal-body li{margin:5px 0}
.legal-body li::marker{color:var(--lime)}
.legal-body strong{color:var(--white);font-weight:500}
.legal-body a{color:var(--lime);text-underline-offset:3px;overflow-wrap:anywhere}
.legal-reach{
  display:grid;gap:12px;margin-top:16px;
}
@media (min-width:620px){.legal-reach{grid-template-columns:1fr 1fr}}
.legal-reach a{
  display:block;padding:16px 18px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--ink-2);text-decoration:none;color:var(--white);
  transition:border-color .18s ease;
}
.legal-reach a:hover{border-color:var(--lime)}
.legal-reach small{
  display:block;margin-bottom:4px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lime);
}
.legal-reach b{font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:.02em;overflow-wrap:anywhere}
.page-head h1{font-size:clamp(2.5rem,1.5rem + 3.6vw,4.2rem)}
.who:focus-visible{outline:3px solid var(--lime);outline-offset:4px;border-radius:6px}


/* 404: the page list sits in columns instead of one long line of links */
.nf-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));column-gap:28px;max-width:900px}
.nf-links h2{grid-column:1 / -1}

/* ============================================================
   ACCESSIBILITY PASS (WCAG 2.2 AA, with the 48px target guideline)
   Kept at the end of the file so these win over the layout rules above.
   ============================================================ */

/* 2.4.7 Focus Visible: the same lime ring for any custom focusable element,
   not only native controls. The map counties keep their own fill style. */
[tabindex]:not([tabindex="-1"]):focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* 2.4.11 Focus Not Obscured: when the browser scrolls a focused element into
   view, keep it clear of the sticky header and, on phones, the call bar */
html{scroll-padding-top:calc(var(--head-h) + 16px)}
@media (max-width:999px){html{scroll-padding-bottom:calc(64px + env(safe-area-inset-bottom) + 16px)}}

/* 1.4.3 Contrast: placeholders at full strength (Firefox fades them) */
::placeholder{color:var(--muted);opacity:1}

/* 2.5.8 Target Size (AA 24px) and 2.5.5 (AAA 44px), sized to 48px.
   Where growing the box would move the design (header links, breadcrumb),
   an invisible ::after extends the tap area instead. */
.btn,.consent-b .btn{min-height:48px}
.nav-toggle,.nav-close{width:48px;height:48px}
.brand{min-height:48px}
.nav-menu a{min-height:48px}
.legal-toc a{padding-block:16px}
.crumb{z-index:4}
.crumb a{position:relative}
.crumb a::after{content:"";position:absolute;inset:-19px -10px}
.foot-col a{display:flex;align-items:center;min-height:48px;padding-block:0}
.foot-legal a,.foot-consent{display:inline-block;line-height:48px;min-height:48px;min-width:48px;padding-block:0;text-align:center}
@media (min-width:1000px){
  .head-cta{min-height:48px}
  .site-nav a,.nav-group>button{position:relative}
  .site-nav a::after,.nav-group>button::after{content:"";position:absolute;left:-8px;right:-8px;top:-8px;bottom:-8px}
  .nav-group>button::after{top:-10px;bottom:-10px}
  .nav-menu a::after{display:none}
}
/* the smallest phones: keep the sign-off and legal links to one line each */
@media (max-width:380px){
  .foot-bot{letter-spacing:.02em}
  .foot-legal{gap:0 6px}
  .foot-legal a,.foot-consent{letter-spacing:.08em}
}

/* ============================================================
   HERO, FULL-SECTION HOUSE (redesign)
   The 3D cutaway is the section: the stage fills the hero, pins are
   projected onto the model by site.js, and the copy and the legend sit on
   top of it. The older .hero-in / .scan-panel rules above are no longer
   used by the homepage.
   ============================================================ */
.hero--house{
  --dock-h:176px;
  height:calc(100svh - var(--head-h) - 4px);
  min-height:700px;max-height:1040px;
  display:flex;
}
.hero-house{position:absolute;inset:0;overflow:hidden;z-index:1}
.hero--house .house-stage{
  position:absolute;left:38%;right:0;top:0;bottom:var(--dock-h);
  width:auto;max-width:none;aspect-ratio:auto;overflow:visible;
  -webkit-mask-image:none;mask-image:none;
}
.hero--house .scan-line{left:6%;right:6%}
/* keeps the copy legible where it crosses the house */
.hero-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,var(--ink) 0,rgba(12,13,11,.92) 22%,rgba(12,13,11,.55) 38%,transparent 56%),
    linear-gradient(0deg,var(--ink) 0,rgba(12,13,11,.9) 12%,transparent 30%);
}
.hero-ui{
  position:relative;z-index:3;
  display:flex;flex-direction:column;justify-content:space-between;
  padding-block:clamp(28px,5vh,64px) clamp(16px,2.6vh,30px);
  pointer-events:none;
}
.hero-ui>*{pointer-events:auto}
.hero--house .hero-copy{max-width:min(600px,100%)}
.hero--house h1{
  font-size:clamp(2.2rem,1rem + 3.2vw,4.1rem);line-height:1;letter-spacing:-.01em;
}
.hero--house h1 span{display:block}
.hero--house h1 em{display:block;margin-top:.06em}
.hero--house .lede{font-size:clamp(.95rem,.9rem + .25vw,1.08rem);line-height:1.62;margin-top:20px;max-width:48ch;color:#C4CABD}
.hero--house .hero-actions{margin-top:24px}
.hero--house .lede-short{display:none}

/* ---------- pins over the model ---------- */
.pins{position:absolute;inset:0;pointer-events:none}
.pin{
  position:absolute;left:0;top:0;width:0;height:0;
  padding:0;border:0;background:none;cursor:pointer;color:var(--white);
  opacity:0;transform:translate(-9999px,-9999px);
  transition:opacity .35s ease;pointer-events:auto;will-change:transform;
  font-family:var(--body);
}
.pins.is-ready .pin{opacity:1}
.pin i{
  position:absolute;left:-15px;top:-15px;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--lime);color:#0B0C0A;
  font:600 .68rem/1 var(--mono);font-style:normal;letter-spacing:.02em;
  box-shadow:0 0 0 4px rgba(118,249,9,.22),0 6px 18px rgba(0,0,0,.55);
}
.pin i::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--lime);animation:pinPing 2.4s ease-out infinite;
}
@keyframes pinPing{0%{transform:scale(.9);opacity:.9}80%,100%{transform:scale(2.1);opacity:0}}
.pin span{
  position:absolute;left:24px;top:0;transform:translateY(-50%);
  padding:6px 11px 6px 10px;border-radius:8px;
  background:rgba(12,13,11,.86);border:1px solid var(--line-2);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:.74rem;font-weight:500;line-height:1.2;white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.pin[data-side="l"] span{left:auto;right:24px}
@media (hover:hover){.pin:hover span{border-color:var(--lime);color:var(--lime)}}
/* a problem in focus: only its pin stays, and it turns into a label */
.hero--house[data-view]:not([data-view="all"]) .pin:not(.is-focus){opacity:0;pointer-events:none}
.pin.is-focus span{background:var(--lime);color:#0B0C0A;border-color:var(--lime)}
.pin.is-focus i{background:#0B0C0A;color:var(--lime);box-shadow:0 0 0 2px var(--lime),0 6px 18px rgba(0,0,0,.55)}

/* ---------- the legend, docked along the bottom ---------- */
.scan-dock{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center;
  padding:16px 20px 16px;margin-top:auto;
  border:1px solid var(--line-2);border-radius:16px;
  background:linear-gradient(180deg,rgba(26,29,23,.9),rgba(14,16,12,.94));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9);
}
.scan-dock .scan-head{padding:0 2px 10px}
.scan-dock .scan-chips{background:rgba(10,11,9,.6)}
.scan-dock .scan-chip{min-height:56px}
.scan-dock .scan-bar{margin:12px 2px 0}
.scan-dock .scan-finds{padding:0;min-height:5.6rem;align-content:center}
.scan-dock .scan-item b{font-size:1.2rem}
.scan-dock .scan-item p{font-size:.92rem;margin:6px 0 9px;max-width:56ch}
.hero--house .air-hint{display:none}

@media (max-width:999px){
  .hero--house{height:auto;min-height:0;max-height:none;flex-direction:column;--dock-h:0px}
  .hero-ui{display:contents}
  .hero--house .hero-copy{order:1;position:relative;z-index:3;margin:0;padding:28px var(--gut) 0;max-width:none}
  .hero-house{
    order:2;position:relative;inset:auto;flex:none;z-index:2;
    height:clamp(300px,50svh,470px);margin-top:0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  }
  .hero--house .house-stage{left:0;right:0;top:0;bottom:0}
  .hero--house .house-stage[data-view="all"] .house{--sc:.96;--tx:-6px;--ty:30px}
  .hero-scrim{display:none}
  .scan-dock{
    order:3;position:relative;z-index:3;grid-template-columns:1fr;gap:10px;padding:12px;
    margin:0 var(--gut) 22px;
  }
  .scan-dock .scan-finds{min-height:6.4rem}
  .scan-dock .scan-item b{font-size:1.05rem}
  .scan-dock .scan-item p{font-size:.84rem}
  .hero--house .lede-long{display:none}
  .hero--house .lede-short{display:inline}
  .hero--house .eyebrow{font-size:.62rem;letter-spacing:.13em}
  .pin span{font-size:.68rem;padding:5px 8px}
  .pin i{width:26px;height:26px;left:-13px;top:-13px}
}
@media (max-width:520px){
  .scan-dock .scan-chip{font-size:.66rem;min-height:52px;gap:5px;padding:8px 2px}
  .scan-dock .scan-chip svg{width:17px;height:17px}
  .hero--house .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero--house .hero-actions .btn{width:100%;padding-inline:8px;font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){.pin i::after{animation:none;display:none}}
.house .anchor{position:absolute;left:50%;top:50%;width:2px;height:2px;margin:-1px 0 0 -1px;pointer-events:none;visibility:hidden}

/* the whole-house view fills the frame; the focus views keep their own framing */
.hero--house .house-stage[data-view="all"] .house{--sc:1.22;--tx:-6px;--ty:46px}

/* ============================================================
   HOMEPAGE REDESIGN: proof, problem, matcher, service map, CTA
   ============================================================ */

/* ---------- proof: three claims you can check ---------- */
.receipts{display:grid;gap:14px}
@media (min-width:860px){.receipts{grid-template-columns:repeat(3,1fr);gap:18px}}
.receipt{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(22px,3vw,32px);border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--panel);
}
.receipt-n{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.6rem,2rem + 2.4vw,4rem);line-height:1;color:var(--lime);letter-spacing:-.01em;
}
.receipt-n i{font-style:normal;font-size:.42em;margin-left:.2em;color:var(--muted);letter-spacing:.06em}
.receipt h3{margin:14px 0 10px;font-size:1.35rem}
.receipt p{color:var(--muted);font-size:.95rem;line-height:1.65;flex:1}
.receipt a{
  margin-top:18px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);text-decoration:none;
}
.receipt a svg{width:14px;height:14px;transition:transform .2s ease}
@media (hover:hover){.receipt a:hover{text-decoration:underline}.receipt a:hover svg{transform:translateX(3px)}}
.proofline{
  display:flex;flex-wrap:wrap;gap:10px 34px;margin:30px 0 0;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.proofline b{color:var(--white);font-weight:500}

/* ---------- the problem: what you notice vs what is behind it ---------- */
.symptoms{border-top:1px solid var(--line-2)}
.sym{
  display:grid;gap:6px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start;
}
.sym--head{display:none}
.sym b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:1.25rem;line-height:1.2}
.sym p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.65}
.sym a{
  margin-top:4px;display:inline-flex;align-items:center;gap:8px;width:max-content;
  font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);text-decoration:none;
}
.sym a svg,.svc-t svg{width:14px;height:14px;transition:transform .2s ease}
@media (hover:hover){.sym a:hover{text-decoration:underline}.sym a:hover svg{transform:translateX(3px)}}
@media (min-width:900px){
  .sym{grid-template-columns:minmax(0,4fr) minmax(0,5.4fr) minmax(0,2.4fr);gap:clamp(24px,4vw,56px);padding:26px 0;align-items:baseline}
  .sym--head{
    display:grid;padding:14px 0;
    font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  }
  .sym a{margin:0}
}
.sym-close{
  margin:28px 0 0;font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.3rem,1rem + 1.2vw,1.9rem);line-height:1.15;color:var(--lime);
}

/* ---------- service matcher ---------- */
.mx-fallback{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mx-fallback[hidden]{display:none}
.mx-fallback a{display:block;padding:14px 16px;border:1px solid var(--line-2);border-radius:10px;text-decoration:none;color:var(--white)}
.mx{max-width:980px}
.mx-label{
  display:flex;align-items:center;gap:12px;margin:0 0 16px;
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:1.35rem;
}
.mx-label i{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--blue);color:#fff;font:500 .78rem/1 var(--mono);font-style:normal;
}
.mx-opts{display:grid;gap:10px}
@media (min-width:640px){.mx-opts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.mx-opts{grid-template-columns:repeat(3,1fr)}}
.mx-opts button{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;
  min-height:76px;padding:15px 17px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--panel);color:var(--white);font-family:var(--body);
  transition:border-color .18s ease,background .18s ease,transform .15s ease;
}
.mx-opts button b{font-weight:600;font-size:.98rem;line-height:1.3}
.mx-opts button span{font-size:.82rem;line-height:1.45;color:var(--muted)}
.mx-opts button[aria-pressed="true"]{border-color:var(--lime);background:rgba(118,249,9,.09)}
@media (hover:hover){.mx-opts button:hover{border-color:var(--blue-2);transform:translateY(-2px)}}
.mx-opts--who{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.mx-opts--who button{min-height:58px;justify-content:center}
.mx-back{
  margin-top:16px;padding:8px 0;border:0;background:none;cursor:pointer;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.mx-actions .mx-back{margin:0 0 0 6px}
@media (hover:hover){.mx-back:hover{color:var(--white)}}
.mx-out{
  margin-top:0;padding:clamp(22px,3.4vw,38px);border-radius:var(--r);
  border:1px solid rgba(118,249,9,.4);
  background:linear-gradient(180deg,rgba(118,249,9,.07),rgba(6,104,254,.05)),var(--panel);
  scroll-margin-top:calc(var(--head-h) + 20px);
}
.mx-kicker{margin:0 0 6px;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.mx-out h3{font-size:clamp(1.8rem,1.3rem + 2vw,2.7rem)}
.mx-out>p{margin:14px 0 0;color:#C4CABD;max-width:68ch}
.mx-get{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;max-width:68ch}
.mx-get li{position:relative;padding-left:26px;font-size:.95rem;line-height:1.55}
.mx-get li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:6px;border-left:2px solid var(--lime);border-bottom:2px solid var(--lime);transform:rotate(-45deg)}
.mx-also{padding:12px 14px;border-radius:10px;border:1px dashed var(--line-2);font-size:.9rem}
.mx-also a{color:var(--lime)}
.mx-you{color:var(--white)!important}
.mx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}

/* ---------- service map: question, sample, deliverable ---------- */
.svcmap{border-top:1px solid var(--line-2)}
.svcrow{
  display:grid;gap:10px;padding:22px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:background .2s ease;
}
.svcrow--head{display:none}
.svcrow>span:not(.svc-t){font-size:.94rem;line-height:1.65;color:var(--muted)}
.svc-t{display:flex;flex-direction:column;gap:6px}
.svc-t b{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;font-size:1.6rem;line-height:1.1}
.svc-t em{font-style:normal;color:var(--white);font-weight:500;font-size:.98rem;line-height:1.4}
.svc-t small{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);line-height:1.5}
.svcrow:not(.svcrow--head)>span:nth-child(2)::before,
.svcrow:not(.svcrow--head)>span:nth-child(3)::before{
  display:block;margin-bottom:4px;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2);
}
.svcrow:not(.svcrow--head)>span:nth-child(2)::before{content:"What we sample"}
.svcrow:not(.svcrow--head)>span:nth-child(3)::before{content:"What you get"}
@media (hover:hover){.svcrow:not(.svcrow--head):hover{background:rgba(255,255,255,.025)}.svcrow:not(.svcrow--head):hover b{color:var(--lime)}}
@media (min-width:900px){
  .svcrow{grid-template-columns:minmax(0,4.2fr) minmax(0,3.8fr) minmax(0,4.4fr);gap:clamp(24px,4vw,56px);padding:28px 14px;margin-inline:-14px;align-items:start}
  .svcrow--head{
    display:grid;padding-block:14px;
    font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  }
  .svcrow:not(.svcrow--head)>span:nth-child(2)::before,
  .svcrow:not(.svcrow--head)>span:nth-child(3)::before{display:none}
}
.svc-note{margin:26px 0 0;color:var(--muted)}
.svc-note a{color:var(--lime)}

/* ---------- clarifying CTA ---------- */
.cta{display:grid;gap:34px;align-items:center}
@media (min-width:960px){.cta{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,90px)}}
.cta-copy h2{font-size:clamp(2.1rem,1.3rem + 2.8vw,3.4rem)}
.cta-copy h2 em{display:block}
.cta-actions{display:flex;flex-direction:column;gap:14px;align-items:stretch;
  padding:clamp(22px,3vw,32px);border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel)}
.cta-main{min-height:64px;font-size:1.15rem}
.cta-or{display:flex;align-items:center;gap:12px;margin:2px 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cta-or::before,.cta-or::after{content:"";flex:1;height:1px;background:var(--line)}
.cta-or span{flex:none;text-align:center}
.cta-link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:6px 0;text-decoration:none;color:var(--muted);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
}
.cta-link svg{width:14px;height:14px}
@media (hover:hover){.cta-link:hover{color:var(--white)}}

/* ---------- navigation: symptom first, test name second ---------- */
.nav-menu a{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.nav-menu a span{color:var(--white);font-weight:500;line-height:1.3}
.nav-menu a small{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.nav-menu a.nav-match{margin-top:4px;border-top:1px solid var(--line)!important;border-radius:0 0 8px 8px}
.nav-menu a.nav-match small{color:var(--blue-2)}
.nav-menu a[aria-current="page"] span{color:var(--lime)}
@media (min-width:1000px){
  .nav-menu{width:320px}
  .nav-menu a{padding:10px 12px;min-height:0}
}
.head-cta{white-space:nowrap}
@media (min-width:1000px) and (max-width:1180px){.site-nav{gap:15px}.brand .bword{height:19px}}

/* title is the original logo lockup again; the legend carries the "five places" line */
.hero--house .hero-lock{font-size:min(4.7rem,calc((100vw - 2 * var(--gut)) / 6.95))}
.hero--house .hero-name{margin-top:16px}
.hero--house .lede{margin-top:16px}
.scan-dock .scan-cap{
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1rem,.85rem + .6vw,1.3rem);line-height:1.15;color:var(--white);align-items:center;
}
.scan-dock .scan-cap b{color:var(--lime);font-weight:600}
@media (max-width:520px){.scan-dock .scan-cap{font-size:.95rem}.scan-dock .scan-cap .scan-dot{display:none}}
.hero--house .hero-lock h1{font-size:1em;line-height:1;letter-spacing:-.02em}
.hero--house .hero-lock h1 em{margin-top:0}
@media (min-width:1000px){
  .scan-dock{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .scan-dock .scan-cap{white-space:nowrap}
  .scan-dock .scan-cap .scan-dot{display:none}
}
@media (min-width:1000px){.scan-dock .scan-count{display:none}}

/* ---------- who we work for: compact tiles ---------- */
.who2{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:640px){.who2{grid-template-columns:repeat(2,1fr);gap:12px}}
.who2 li{
  display:flex;align-items:center;gap:14px;padding:16px 18px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);
}
.who2 .who-ico{flex:none;width:44px;height:44px;margin:0}
.who2 h3{font-size:1.05rem;line-height:1.15}
.who2 p{margin:4px 0 0;font-size:.86rem;line-height:1.45;color:var(--muted)}
@media (min-width:1000px){.nav-menu{width:230px}}

/* keep the house out from under the copy: the stage starts where the copy column ends */
@media (min-width:1000px){
  .hero--house{--copy-w:clamp(440px,38vw,540px)}
  .hero--house .hero-copy{max-width:var(--copy-w)}
  .hero--house .hero-lock{font-size:calc(var(--copy-w) / 6.95)}
  .hero--house .lede{max-width:none}
  .hero--house .house-stage{
    left:calc(max((100vw - var(--wrap)) / 2, 0px) + var(--gut) + var(--copy-w) + 8px);
    right:0;
  }
  .hero--house .house-stage[data-view="all"] .house{--sc:1.3;--tx:-70px;--ty:50px}
}
@media (min-width:1000px) and (max-width:1299px){
  .hero--house .house-stage[data-view="all"] .house{--sc:1.02;--tx:-45px;--ty:46px}
}
@media (min-width:1000px){
  .hero--house .house-stage[data-view="moisture"] .house{--tx:30px}
}

/* ============================================================
   BLUE, KEPT QUIET
   Flat blue on a few details only: the figures and links in "What you
   can check". No glows, gradients or tinted fills.
   ============================================================ */
#proof .receipt-n{color:var(--blue-2)}
#proof .receipt a{color:var(--blue-2)}
#proof .proofline b{color:var(--blue-2)}
#proof .receipt{border-top:2px solid var(--blue)}

/* ============================================================
   PHONE LAYOUT (under 768px)
   Fewer full-width rows: grids, swipe rows and chips, and tighter
   spacing so a section reads as one block.
   ============================================================ */
@media (max-width:767px){
  .sec{padding:34px 0}
  .sec-head{margin-bottom:18px}
  .sec-head h2,.contact-grid h2,.credstat-body h2{font-size:clamp(1.8rem,1.2rem + 3.4vw,2.3rem)}
  .sec-head p,.lede{font-size:.95rem}
  .sec-head .lede{margin-top:10px}

  /* swipe rows */
  .receipts,.quotes{
    display:flex;gap:10px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
    margin-inline:calc(var(--gut) * -1);padding:2px var(--gut) 8px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .receipts::-webkit-scrollbar,.quotes::-webkit-scrollbar{display:none}
  .receipts>*,.quotes>*{flex:0 0 80%;scroll-snap-align:start}
  .receipt{padding:18px}
  .receipt h3{margin:8px 0 6px;font-size:1.15rem}
  .receipt p{font-size:.88rem;line-height:1.55}
  .receipt a{margin-top:12px}
  .quotes figure{padding:18px 18px 16px}
  .quotes blockquote{font-size:.92rem}

  /* inline chips */
  .proofline{gap:8px;margin-top:14px;padding-top:0;border-top:0}
  .proofline span{padding:6px 11px;border:1px solid var(--line-2);border-radius:999px;font-size:.62rem;letter-spacing:.1em}

  /* services: two across */
  .svc-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .svc{padding:14px 13px 12px;border-radius:12px}
  .svc-ico{width:36px;height:36px;margin-bottom:10px;border-radius:10px}
  .svc-ico svg{width:20px;height:20px}
  .svc h3{font-size:1.02rem;margin-bottom:6px}
  .svc p{font-size:.78rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  .svc .tag{display:none}
  .svc-more{padding-top:10px;font-size:.74rem}

  /* test finder */
  .mx-label{font-size:1.15rem;margin-bottom:10px}
  .mx-opts{grid-template-columns:1fr 1fr;gap:8px}
  .mx-opts button{min-height:0;padding:10px 11px;gap:3px;border-radius:10px}
  .mx-opts button b{font-size:.84rem;line-height:1.25}
  .mx-opts button span{font-size:.7rem;line-height:1.35}
  .mx-opts--who{display:flex;flex-wrap:wrap;gap:8px}
  .mx-opts--who button{min-height:0;padding:9px 14px;border-radius:999px;width:auto}
  .mx-opts--who button b{font-size:.84rem}
  .mx-out{padding:18px}
  .mx-actions{gap:8px}

  /* what we stand for */
  .promises li{padding:14px 13px}
  .promise-ico{width:36px;height:36px;margin-bottom:8px}
  .promises h3{font-size:1rem;margin-bottom:5px}
  .promises p{font-size:.8rem;line-height:1.45}

  /* who we work for: two across */
  .who2{grid-template-columns:1fr 1fr;gap:8px}
  .who2 li{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .who2 .who-ico{width:34px;height:34px}
  .who2 h3{font-size:.95rem}
  .who2 p{font-size:.76rem;margin-top:3px}
  .who-ask{font-size:.9rem}

  /* certifications, area, reviews, faq, contact */
  .credstat{gap:10px}
  .lic-note{font-size:.8rem}
  .statesum ul{gap:8px}
  .faq summary{padding:14px 0;font-size:.95rem}
  .faq p{padding-bottom:14px;font-size:.88rem}
  .contact-lines{gap:8px;margin-top:16px}
  .reviews-link{margin-top:14px}
}

@media (max-width:767px){
  #inquiry .row{grid-template-columns:1fr 1fr;gap:10px}
  #inquiry .f{margin-bottom:10px}
  .foot-col a{min-height:0;padding:5px 0}
  .site-foot{padding-top:28px}
}

/* ---------- spores: each sits in space reserved for it ----------
   Desktop: a smaller spore in the empty band beside the heading, and the
   Certifications text is given a gutter so it can never run under it.
   Phones: tucked into the section's top-right corner, inside the margin. */
@media (min-width:1200px){
  #proof>.wrap>.spore,#values>.wrap>.spore,#credentials>.wrap>.spore,#reviews>.wrap>.spore{font-size:104px;top:0}
  #credentials .credstat-body{padding-right:190px}
}
@media (max-width:1199px){
  #proof>.wrap>.spore,#values>.wrap>.spore,#credentials>.wrap>.spore,#reviews>.wrap>.spore{font-size:40px;top:-26px;right:calc(var(--gut) + 14px)}
}
@media (min-width:1200px) and (max-width:1399px){
  #proof>.wrap>.spore{font-size:80px}
}
@media (max-width:380px){
  #proof>.wrap>.spore,#values>.wrap>.spore,#credentials>.wrap>.spore,#reviews>.wrap>.spore{font-size:28px;top:-24px;right:calc(var(--gut) + 4px)}
}
@media (max-width:339px){#proof>.wrap>.spore,#values>.wrap>.spore,#credentials>.wrap>.spore,#reviews>.wrap>.spore{display:none}}

/* ---------- who we work for: tabs ---------- */
.whotabs{display:grid;gap:14px}
@media (min-width:860px){.whotabs{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,3vw,44px);align-items:start}}
.who-pills{display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:860px){.who-pills{flex-direction:column;flex-wrap:nowrap;gap:6px}}
.who-pill{
  display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  padding:9px 14px 9px 10px;border-radius:999px;border:1px solid var(--line-2);
  background:transparent;color:var(--muted);font-family:var(--body);font-weight:500;font-size:.88rem;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
@media (min-width:860px){.who-pill{border-radius:12px;padding:12px 16px 12px 12px;font-size:.98rem}}
.who-pill .who-ico{width:30px;height:30px;margin:0;flex:none;border-radius:8px}
.who-pill .who-ico svg{width:17px;height:17px}
@media (hover:hover){.who-pill:hover{color:var(--white);border-color:var(--blue-2)}}
.who-pill[aria-selected="true"]{background:var(--lime);border-color:var(--lime);color:#0B0C0A}
.who-pill[aria-selected="true"] .who-ico{background:rgba(11,12,10,.12)}
.who-pill[aria-selected="true"] .who-ico svg{stroke:#0B0C0A}
.who-panels{
  padding:clamp(20px,3vw,34px);border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);
  min-height:14rem;
}
.who-panel h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);margin-bottom:12px}
.who-panel>p{color:#C4CABD;font-size:1rem;line-height:1.7;max-width:56ch;margin:0}
.whotabs.is-ready .who-panel[data-off]{display:none}
.who-panel+.who-panel{margin-top:28px}
.whotabs.is-ready .who-panel+.who-panel{margin-top:0}
.who-panel .who-often{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px;padding-top:18px;border-top:1px dashed var(--line-2);
}
.who-often span{margin-right:4px;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.who-often a{
  padding:6px 12px;border:1px solid rgba(62,139,255,.5);border-radius:999px;text-decoration:none;
  font-size:.8rem;font-weight:500;color:var(--blue-2);transition:background .18s ease,color .18s ease;
}
@media (hover:hover){.who-often a:hover{background:var(--blue);border-color:var(--blue);color:#fff}}
@media (max-width:767px){
  .who-panels{padding:16px;min-height:0}
  .who-panel h3{font-size:1.3rem;margin-bottom:8px}
  .who-panel>p{font-size:.92rem;line-height:1.6}
  .who-panel .who-often{margin-top:14px;padding-top:12px}
}
@media (max-width:767px){
  .who-pill{padding:8px 13px;font-size:.84rem}
  .who-pill .who-ico{display:none}
}

/* ---------- hero house: its own clear frame ----------
   The model lives in a rectangle that stops above the info bar and short of
   the screen edge, so nothing runs under the bar and nothing is cut off by
   the page. Close-ups are cropped by the frame's soft edge, not by the bar. */
@media (min-width:1000px){
  .hero--house .house-stage{
    left:calc(max((100vw - var(--wrap)) / 2, 0px) + var(--gut) + var(--copy-w) + 8px);
    right:max(14px,calc((100vw - var(--wrap)) / 2 - 20px));
    top:10px;bottom:calc(var(--dock-h) + 22px);
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent),linear-gradient(180deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent),linear-gradient(180deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
    mask-composite:intersect;
  }
  .hero--house .house-stage[data-view="all"] .house{--sc:1.3;--tx:-6px;--ty:22px}
  .hero--house .house-stage[data-view="moisture"] .house{--sc:1.5;--tx:0px;--ty:70px}
}
@media (min-width:1000px) and (max-width:1299px){
  .hero--house .house-stage[data-view="all"] .house{--sc:1.06;--tx:-6px;--ty:24px}
}

/* "who we work for": the card fills the height of the list beside it */
@media (min-width:860px){
  .whotabs{align-items:stretch}
  .who-panels{display:flex;flex-direction:column;min-height:0}
  .who-panels .who-panel:not([data-off]){display:block}
}
.who-cta{
  margin-top:auto;padding-top:22px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;
}
.who-panel+.who-cta,.who-panels>.who-cta{margin-top:auto}
.who-cta p{margin:0;max-width:34ch;font-size:.92rem;line-height:1.5;color:var(--muted)}
.who-cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.who-cta .btn{min-height:46px;padding:10px 18px;font-size:.88rem}
.who-panels>.who-panel{margin-bottom:22px}
@media (min-width:860px){
  .who-panel>p{font-size:1.06rem}
  .who-panel h3{font-size:clamp(1.9rem,1.4rem + 1.4vw,2.6rem)}
  .who-panel .who-often{margin-top:26px}
  .who-pill{padding-block:15px}
}
@media (max-width:767px){.who-cta{padding-top:6px}.who-cta p{font-size:.84rem}.who-cta .btn{flex:1 1 100%}.who-panels>.who-panel{margin-bottom:14px}}
.whotabs:not(.is-ready) .who-panel+.who-panel{margin-top:0}

/* question 2 gets its own breathing room under question 1 */
.mx-step+.mx-step{margin-top:30px;padding-top:24px;border-top:1px dashed var(--line-2)}
@media (max-width:767px){.mx-step+.mx-step{margin-top:20px;padding-top:16px}}


/* ============================================================
   ACCESSIBILITY PASS (WCAG 2.2 AA)
   ============================================================ */
/* 2.4.11 focus not obscured: keep keyboard focus clear of the sticky header and the call bar */
html{scroll-padding-top:calc(var(--head-h) + 20px);scroll-padding-bottom:84px}
@media (min-width:1000px){html{scroll-padding-bottom:24px}}

/* 1.4.4 / 1.4.12 readable text: nothing under 12px */
body .eyebrow,body .scan-chip,body .scan-tip,body .scan-item a,body .tag,body .svc .tag,body .mx-back,body .mx-kicker,
body .credtag,body .credtab-open,body .credtab-close,body .credpanel-head,body .statesum-cap,body .f label,
body .maphint,body figcaption span,body small,body .form-legal,body .fl-x,body .svc-more,body .scan-count,
body .proofline span,body .who-often span,body .receipt a,body .sym a,body .air-hint,body .foot-bot span,
body .foot-legal a,body .foot-legal button,body .mapnote,body .addrresult,body .lic-note,body .cline small,
body .hero-trust span,body .stats span,body .credtab small,body .rating span,body .who-hint,body .signal-toggle{
  font-size:max(.75rem,12px);
}
body .scan-chip{font-size:max(.78rem,12.5px)}
body .eyebrow{letter-spacing:.16em}
body .scan-pause{font-size:max(.75rem,12px)}

/* 2.5.8 target size: every link and button is at least 44px tall, 48px for the main touch controls */
.receipt a,.sym a,.who-often a,.svc-more,.mx-back,.cta-link,.foot-col a,.foot-legal a,.foot-phone,.nav-menu a,.who-pill,.reviews-link a{
  min-height:44px;display:inline-flex;align-items:center;
}
.who-often a{padding-block:8px}
.nav-toggle{width:48px;height:48px}
.nav-close{width:48px;height:48px}
.callbar a{min-height:56px}
@media (max-width:999px){
  .site-nav a,.nav-group>button{min-height:52px}
  .foot-col a{padding-block:6px}
  .who-pill{min-height:48px}
  .mx-opts button{min-height:56px}
  .faq summary{min-height:48px}
  .scan-chip{min-height:56px}
  .credtab{min-height:72px}
}
.scan-pause{
  margin-left:auto;margin-right:12px;min-height:44px;padding:0 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-2);background:transparent;color:var(--muted);
  font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;
}
.scan-pause[aria-pressed="true"]{color:var(--lime);border-color:var(--lime)}
@media (hover:hover){.scan-pause:hover{color:var(--white);border-color:var(--blue-2)}}

/* keyboard users get the dropdown on focus, not only on hover */
@media (min-width:1000px){.nav-group:focus-within .nav-menu{opacity:1;visibility:visible;transform:none}}

/* 2.2.2 pause, stop, hide: one switch stops all ambient motion */
.motion-off *,.motion-off *::before,.motion-off *::after{animation-play-state:paused!important}
.motion-off .scan-line{display:none}
.motion-off .house{transition:none}

/* 2.3.3 and the user's own setting: no ambient motion when asked */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important}
  .pin i::after{display:none}
}

/* 1.4.12 text spacing survives user overrides without clipping */
.svc p,.who-panel>p,.receipt p,.promises p{overflow-wrap:anywhere}

html body .nav-head span,html body .statesum li span,html body .addrcheck label,html body .maptabs i,html body .countylist summary,
html body .quotes figcaption,html body .quotes figcaption span,html body .foot-col h3,html body .hero--house .eyebrow,
html body .hero-name span,html body .scan-dock .scan-chip,html body .mx-opts button span,html body .credtab .credtag,
html body .scan-dock .scan-item a,html body .scan-dock .scan-tip{font-size:max(.75rem,12px)}
html body .scan-dock .scan-item a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:1000px){html body .site-nav>a,html body .nav-group>button{padding-block:12px}}

/* pause control sits on the progress line, not in the heading row */
.scan-foot{display:flex;align-items:center;gap:12px;margin-top:12px}
.scan-foot .scan-bar{flex:1;margin:0}
.scan-foot .scan-pause{margin:-9px 0;flex:none;min-height:44px;padding:0 14px}

/* ---------- spacing balance ----------
   Desktop: smaller section headlines and tighter section padding, so the
   page is not mostly empty space and headline. Phones: a little more air
   between sections, and the two intro paragraphs that repeat the heading
   are dropped. */
@media (min-width:900px){
  .sec{padding:clamp(48px,6vw,84px) 0}
  .sec-head{margin-bottom:clamp(26px,3.4vw,40px)}
  .sec-head h2,.contact-grid h2,.credstat-body h2{font-size:clamp(2rem,1.2rem + 2.2vw,2.9rem)}
}
@media (max-width:767px){
  .sec{padding:44px 0}
  .sec-head{margin-bottom:22px}
  .svc-grid{gap:12px}
  .who-pills,.mx-opts{gap:10px}
  #values .sec-head .lede,.split .sec-head .lede{display:none}
}

/* 1.4.11 non-text contrast: a form field's edge must be visible at 3:1 */
input,select,textarea{border-color:rgba(255,255,255,.5)}
input:focus,select:focus,textarea:focus{border-color:var(--blue-2);outline:2px solid var(--blue-2);outline-offset:2px}

/* ============================================================
   PHONE REFINEMENTS
   ============================================================ */
@media (max-width:767px){
  /* mobile drawer: the Services sub-menu is one link per line */
  .nav-menu a{display:flex;width:100%}

  /* services: the original full cards, swiped sideways instead of stacked */
  .svc-grid{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
    margin-inline:calc(var(--gut) * -1);padding:2px var(--gut) 10px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .svc-grid::-webkit-scrollbar{display:none}
  .svc-grid>.svc-link{flex:0 0 78%;max-width:320px;scroll-snap-align:start;display:flex}
  .svc{padding:22px 20px 20px;border-radius:var(--r);width:100%}
  .svc-ico{width:44px;height:44px;margin-bottom:14px}
  .svc-ico svg{width:24px;height:24px}
  .svc h3{font-size:1.25rem;margin-bottom:8px}
  .svc p{font-size:.92rem;line-height:1.55;display:block;-webkit-line-clamp:unset;overflow:visible}
  .svc .tag{display:block;margin-top:14px;padding-top:12px}
  .svc-more{padding-top:16px;font-size:.82rem}

  /* test finder: room to read and tap */
  .mx-opts{grid-template-columns:1fr;gap:10px}
  .mx-opts button{padding:15px 16px;gap:4px;border-radius:12px;min-height:64px}
  .mx-opts button b{font-size:1rem;line-height:1.3}
  .mx-opts button span{font-size:.84rem;line-height:1.45}
  .mx-opts--who{gap:10px}
  .mx-opts--who button{padding:12px 18px;min-height:48px}
  .mx-label{font-size:1.25rem;margin-bottom:14px}
  .mx-step+.mx-step{margin-top:26px;padding-top:22px}
  .mx-out{padding:20px}
  .mx-actions{gap:10px}
  .mx-actions .btn{flex:1 1 100%}

  /* what we stand for: icon centred on its text */
  .promises li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;padding:16px 16px}
  .promise-ico{grid-column:1;grid-row:1 / span 2;margin:0;align-self:center}
  .promises h3{grid-column:2;grid-row:1;margin:0 0 3px;align-self:end}
  .promises p{grid-column:2;grid-row:2;align-self:start}
}
.nav-menu a{align-items:flex-start;text-align:left;justify-content:center}

/* ============================================================
   VISIBLE OUTLINES (WCAG 1.4.11: a control's edge needs 3:1)
   The old hairline borders faded into the dark background.
   ============================================================ */
:root{--edge:rgba(255,255,255,.55)}
.btn--ghost,.who-pill,.mx-opts button,.scan-pause,.nav-toggle,.nav-close,.credtab,.faq details,.faq summary{border-color:var(--edge)}
.signal-toggle{border:2px solid var(--lime);background:rgba(118,249,9,.1)}
.who-often a{border:1.5px solid var(--blue-2)}
.addrcheck input,.addrrow input{border-color:var(--edge)}
.who-pill[aria-selected="true"],.mx-opts button[aria-pressed="true"]{border-color:var(--lime)}
@media (hover:hover){.btn--ghost:hover,.who-pill:hover,.mx-opts button:hover{border-color:var(--blue-2)}}


/* ============================================================
   PHONE: counties served, and the "what you can check" cards
   ============================================================ */
@media (max-width:767px){
  /* each state is its own tile, so the names never run together */
  .statesum ul{gap:10px}
  .statesum li{
    align-items:center;text-align:center;gap:6px;
    padding:14px 6px 12px;border:1px solid var(--edge);border-radius:12px;
  }
  .statesum b{font-size:2.4rem}
  html body .statesum li span{
    font-size:.82rem;letter-spacing:.04em;line-height:1.3;text-transform:none;
    font-family:var(--body);font-weight:500;color:var(--white);
  }

  /* credentials: a still layout instead of a third sideways row */
  .receipts{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    overflow:visible;scroll-snap-type:none;margin-inline:0;padding:0;
  }
  .receipts>*{flex:none}
  .receipts .receipt:first-child{grid-column:1 / -1}
  .receipt{padding:16px}
  .receipt-n{font-size:2.2rem}
  .receipts .receipt:not(:first-child) .receipt-n{font-size:1.9rem}
  .receipts .receipt:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}
  .receipts .receipt:first-child .receipt-n{grid-row:1 / span 2}
  .receipts .receipt:first-child h3{margin:0 0 4px;align-self:end}
  .receipts .receipt:first-child p{grid-column:2;margin:0}
  .receipts .receipt:first-child a{grid-column:1 / -1;margin-top:8px}
  .receipt h3{font-size:1.05rem}
  .receipt p{font-size:.84rem}
}

/* phone: the big 24 sits beside the heading, centred on it, instead of above it */
@media (max-width:767px){
  .credstat{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:0;align-items:center}
  .credstat-body{display:contents}
  .credstat-num{grid-column:1;grid-row:1 / span 2;font-size:5.2rem;line-height:.85;margin:0}
  .credstat-body .eyebrow{grid-column:2;grid-row:1;margin:0 0 8px;align-self:end}
  .credstat-body h2{grid-column:2;grid-row:2;margin:0;align-self:start}
  .credstat-body .lede{grid-column:1 / -1;grid-row:3;margin-top:14px}
}

/* ---------- outlines: reviews a touch brighter, Q&A a touch softer ---------- */
.quotes figure,.sec--raised .quotes figure{border-color:rgba(255,255,255,.22)}
.faq details,.faq details[open]{border-color:rgba(255,255,255,.26)}
.faq summary{border-color:transparent}

/* ---------- phone: counties served, no boxes ---------- */
@media (max-width:767px){
  .statesum li{border:0;padding:6px 4px 4px}
  .statesum ul{gap:6px}
}


/* ============================================================
   ONE SYSTEM FOR COLOUR, HEADINGS AND SPACE (desktop = phone)
   ============================================================ */

/* colour: every section label is lime and every headline accent is lime,
   at every screen size. Blue is for numbers, links, icons and rules. */
.eyebrow--blue{color:var(--lime)}
.eyebrow--blue::before{background:var(--lime)}
body:has(.phero) .step .num{color:var(--blue-2)}
body:has(.phero) .step::before{border-color:var(--blue-2)}
body:has(.phero) .steps{border-left-color:var(--blue)}
body:has(.phero) .signal>div{border-color:rgba(62,139,255,.45)}
body:has(.phero) .signal>div>svg{stroke:var(--lime)}
body:has(.phero) .deliver>div{border-color:rgba(62,139,255,.45)}
body:has(.phero) .spotflow span:nth-child(even){color:var(--blue-2)}
body:has(.phero) .sec--raised{border-top:1px solid rgba(62,139,255,.4)}

/* headlines: lines break evenly, no lonely last word */
h1,h2,h3{text-wrap:balance}
p,.lede,li{text-wrap:pretty}
.sec-head .eyebrow{margin-bottom:14px}
.sec-head h2{margin:0}
.sec-head .lede{margin-top:14px;max-width:58ch}
.sec-head p{margin-top:14px}

/* decorative spores are a desktop detail; on phones and small tablets they only add noise */
@media (max-width:899px){.sec>.wrap>.spore,.spore{display:none!important}}

/* desktop: a heading and its intro sit side by side instead of leaving the right half empty */
@media (min-width:1000px){
  #values>.wrap>.sec-head{display:block!important;max-width:66ch!important}
  .wrap:not(.split)>.sec-head:has(.lede){
    max-width:none;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    column-gap:clamp(40px,6vw,88px);align-items:start;
  }
  .wrap:not(.split)>.sec-head:has(.lede) .eyebrow{grid-column:1 / -1}
  .wrap:not(.split)>.sec-head:has(.lede) h2{grid-column:1}
  .wrap:not(.split)>.sec-head:has(.lede) .lede{grid-column:2;margin:8px 0 0;align-self:start}
  .mx{max-width:none}
}

/* ---------- service and about heroes ---------- */
.phero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.phero-in{
  display:grid;gap:26px;align-items:center;
  padding-block:22px 44px;
}
.phero .crumb{padding-top:18px}
.phero h1{font-size:clamp(2.5rem,1.5rem + 4.4vw,4.4rem);line-height:1;letter-spacing:-.01em}
.phero h1 em{display:inline;color:var(--lime)}
.phero .eyebrow{margin-bottom:14px}
.phero .lede{max-width:52ch;margin-top:16px;font-size:clamp(1rem,.96rem + .3vw,1.12rem);line-height:1.65}
.phero .hero-actions{margin-top:24px}
.phero-chips{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.phero-chips li{
  padding:7px 13px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  font-size:.8rem;font-weight:500;line-height:1.3;color:#D6DBCF;
}
.phero-photo{
  position:relative;margin:0;aspect-ratio:4/3;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.22);background:var(--panel);
}
.phero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero-photo figcaption{
  position:absolute;left:14px;bottom:14px;padding:7px 14px;border-radius:999px;
  background:rgba(12,13,11,.86);border:1px solid rgba(255,255,255,.2);
  font-size:.8rem;font-weight:500;line-height:1.2;color:var(--white);
}
@media (min-width:900px){
  .phero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,5vw,72px);padding-block:30px 72px}
  .phero-photo{aspect-ratio:5/4}
}
@media (max-width:767px){
  .phero .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .phero .hero-actions .btn{width:100%;padding-inline:8px;font-size:.82rem;flex:none}
  .phero .hero-actions .btn svg{display:none}
  .phero-photo{border-radius:16px}
}

/* ---------- phone: more room to breathe ---------- */
@media (max-width:767px){
  .sec{padding:52px 0}
  .sec-head{margin-bottom:26px}
  .lede,.sec-head p{line-height:1.65}
  .svc-grid{gap:14px}
  .faq{gap:10px}
  .contact-lines{gap:12px}
  .promises li{padding:18px 16px}
  .receipts{gap:12px}
  .receipt{padding:18px}
  .mx-opts{gap:12px}
  .who-pills{gap:10px}
  .who-panels{padding:20px}
  .quotes{gap:14px}
  .foot-col a{padding-block:8px}
}
@media (min-width:1200px){#proof>.wrap>.spore{font-size:76px;top:-6px}}
/* a section with a spore keeps its heading and intro stacked, so the spore never sits on the intro text */
@media (min-width:1000px){
  .wrap:has(>.spore)>.sec-head{display:block!important;max-width:66ch!important}
  .wrap:has(>.spore)>.sec-head .lede{margin-top:14px!important}
}
/* About, "Straight from me": the heading column is narrow, so no spore competes with its intro */
.advice>.spore{display:none!important}


/* service and About heroes: the HK mark on the right, no photo */
.phero-mark{display:flex;justify-content:center;align-items:center}
.phero .phero-mark .stage{width:min(230px,56%);--orb:.8}
@media (min-width:900px){.phero .phero-mark .stage{width:min(270px,70%);--orb:.9}}
@media (max-width:899px){
  .phero-mark{order:2;margin-top:6px}
  .phero .phero-mark .stage{width:120px;--orb:.42}
}


/* About, "Straight from me": a bigger heading that holds its own beside the card */
.advice .sec-head h2{font-size:clamp(2.5rem,1.7rem + 3.4vw,3.2rem);line-height:1}
.advice .sec-head .lede{font-size:clamp(1.05rem,1rem + .4vw,1.2rem);line-height:1.6;max-width:30ch;margin-top:18px}
@media (min-width:960px){
  .advice{align-items:center}
  .advice .sec-head h2{font-size:clamp(3rem,1.6rem + 3.4vw,4.4rem)}
  .advice .sec-head .lede{font-size:1.25rem}
}
@media (min-width:960px){
  .tells li{padding-block:22px}
  .tells b{font-size:1.3rem}
  .tells span:not(.tell-ico){font-size:1rem;line-height:1.6}
}

/* section intros: heading, then its copy underneath, then a hairline to the full width of the content.
   (Replaces the heading-left, copy-right arrangement.) */
@media (min-width:1000px){
  .wrap:not(.split)>.sec-head,.wrap:has(>.spore)>.sec-head{
    display:block!important;max-width:none!important;
    padding-bottom:26px;margin-bottom:34px;border-bottom:1px solid rgba(255,255,255,.16);
  }
  .wrap:not(.split)>.sec-head .lede,.wrap:has(>.spore)>.sec-head .lede{
    margin:14px 0 0!important;max-width:60ch;font-size:1.08rem;line-height:1.65;
  }
  .wrap:not(.split)>.sec-head h2{max-width:none}
}

/* links under the credential descriptions are green; warning icons on service pages are green */
#proof .receipt a{color:var(--lime)}
.signal>div>svg,body:has(.phero) .signal>div>svg{stroke:var(--lime)}


/* service pages: the "sound familiar" cards keep a plain edge, no blue outline */
body:has(.phero) .signal>div{border-color:var(--line)}

/* About, "Who you are hiring": a big, friendly greeting */
.sec:has(.ownerfeature) .sec-head h2{font-size:clamp(3rem,1.8rem + 5.4vw,5.6rem);line-height:.98;letter-spacing:-.01em}
.sec:has(.ownerfeature) .sec-head{margin-bottom:clamp(28px,4vw,48px);border-bottom:0!important;padding-bottom:0!important}
@media (max-width:767px){.sec:has(.ownerfeature) .sec-head h2{font-size:clamp(2.9rem,15vw,3.6rem)}}

/* the big 24 sits lower, level with the heading instead of up beside the section label */
.credstat-num{transform:translateY(30px)}
@media (max-width:767px){.credstat-num{transform:translateY(14px)}}


/* ============================================================
   REVISIONS: dividers, signs list, "what to expect", phone hero, greeting
   ============================================================ */

/* no blue divider lines between or around sections */
body:has(.phero) .sec--raised{border-top:0}
.promises::before{background:var(--lime)}
.site-foot::before{background:var(--line-2)!important;opacity:1!important}

/* "Signs it's time to test": a plain numbered-feel checklist, no boxes, no hidden items */
.signal,.js .signal[data-collapsed]{display:block!important}
.js .signal[data-collapsed="true"]>div:nth-child(n+4){display:flex!important}
.js .signal[data-collapsed="true"]::before,.js .signal[data-collapsed="true"]::after{display:none!important}
.signal-toggle{display:none!important}
.signal>div,.sec--raised .signal>div,body:has(.phero) .signal>div{
  display:flex;align-items:center;gap:18px;min-height:0;
  background:none;border:0;border-bottom:1px solid var(--line-2);border-radius:0;
  padding:20px 4px;
}
.signal>div:first-child{border-top:1px solid var(--line-2)}
.signal>div>svg,body:has(.phero) .signal>div>svg{width:30px;height:30px;stroke:var(--lime)}
.signal p{font-size:1.05rem;line-height:1.45;text-wrap:balance}
.signal>div:last-child:nth-child(odd){grid-column:auto}

/* "What to expect": a bigger heading on its own, no intro line and no rule under it */
.sec:has(.steps) .sec-head{border-bottom:0!important;padding-bottom:0!important;margin-bottom:clamp(26px,4vw,44px)}
.sec:has(.steps) .sec-head h2{font-size:clamp(2.9rem,1.6rem + 4.8vw,4.9rem);line-height:.98}

/* About, "Hi, I'm Johnathan!": friendly, not shouting */
.sec:has(.ownerfeature) .sec-head h2{font-size:clamp(2.4rem,1.5rem + 3vw,3.6rem)}
@media (max-width:767px){.sec:has(.ownerfeature) .sec-head h2{font-size:clamp(2.3rem,10.5vw,2.8rem)}}

/* phone: service and About hero. Stacked title on the left, a bigger logo on the right, tight spacing */
@media (max-width:767px){
  .phero-in{
    display:grid;grid-template-columns:minmax(0,1fr) 104px;column-gap:14px;row-gap:0;
    align-items:center;padding-block:10px 30px;
  }
  .phero-copy{display:contents}
  .phero .eyebrow{grid-column:1;grid-row:1;margin:0 0 6px;font-size:.7rem}
  .phero h1{grid-column:1;grid-row:2;font-size:clamp(2.7rem,13.4vw,3.4rem);line-height:.98;margin:0}
  .phero h1 em{display:block}
  .phero-mark{grid-column:2;grid-row:1 / span 2;margin:0;order:0}
  .phero .phero-mark .stage{width:104px;--orb:.5}
  .phero .lede{grid-column:1 / -1;grid-row:3;margin-top:16px;font-size:1rem;line-height:1.6}
  .phero .hero-actions{grid-column:1 / -1;grid-row:4;margin-top:18px}
  .phero-chips{
    grid-column:1 / -1;grid-row:5;margin-top:16px;
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
  }
  .phero-chips li{text-align:center;padding:9px 8px;font-size:.78rem}
  .phero-chips li:last-child:nth-child(odd){grid-column:1 / -1}
  .phero .crumb{padding-top:14px}
}
@media (max-width:767px){.phero-chips li{border-radius:14px}}


/* ============================================================
   "USUAL SUSPECTS": all green
   ============================================================ */
.spotflow span,body:has(.phero) .spotflow span:nth-child(even){color:#fff}
.spotflow span:nth-child(even),body:has(.phero) .spotflow span:nth-child(even){color:var(--lime)}
.spotflow span:not(:last-child)::after{color:var(--lime);opacity:.55}

/* ============================================================
   SERVICE PAGES: "When to call"
   A call-to-action card beside a checklist of badged rows
   ============================================================ */
.sec:has(.signal)>.wrap.split>.sec-head{
  padding:clamp(22px,3vw,34px);border:1px solid rgba(255,255,255,.2);border-radius:20px;
  background:var(--panel);
}
.sec:has(.signal) .sec-head h2{font-size:clamp(2.2rem,1.4rem + 2.6vw,3.2rem)}
.sec:has(.signal) .sec-head .lede{margin-top:14px}
.callcard-btn{margin-top:22px;width:100%}
.signal>div,.sec--raised .signal>div,body:has(.phero) .signal>div{gap:18px;padding:18px 4px}
.signal>div>svg,body:has(.phero) .signal>div>svg{
  flex:none;width:46px;height:46px;padding:10px;border-radius:12px;
  background:rgba(118,249,9,.12);stroke:var(--lime);stroke-width:1.7;
}
.signal p{font-size:1.12rem;line-height:1.45;text-wrap:pretty}
@media (max-width:767px){
  .signal p{font-size:1.02rem}
  .signal>div>svg,body:has(.phero) .signal>div>svg{width:40px;height:40px;padding:8px}
  .sec:has(.signal)>.wrap.split>.sec-head{margin-bottom:8px}
}

/* ============================================================
   ABOUT: one opening section (replaces the hero and the owner card)
   ============================================================ */
.ahero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.ahero .crumb{padding-top:18px}
.ahero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding-block:18px 52px}
.ahero-top{order:1}
.ahero-portrait{order:2;margin:26px 0 0}
.ahero-bottom{order:3;margin-top:28px}
.ahero .eyebrow{margin:0 0 12px}
.ahero h1{font-size:clamp(2.8rem,1.6rem + 6vw,3.6rem);line-height:.98;letter-spacing:-.01em}
.ahero h1 em{color:var(--lime)}
.ahero-role{margin:16px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.ahero-role b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:1.25rem}
.ahero-role span{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}

.ahero-portrait{position:relative}
.ahero-portrait::before{
  content:"";position:absolute;inset:14px -14px -14px 14px;border:2px solid var(--lime);border-radius:26px;opacity:.7;
}
.ahero-frame{
  position:relative;z-index:1;aspect-ratio:5/4;border-radius:24px;overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(160deg,#1d2218,#12150f 60%,#0f1210);
}
.ahero-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ahero-ph{position:absolute;inset:0;display:grid;place-items:center}
.ahero-ph img{width:auto;height:62%;opacity:.16}
.ahero-ph span{
  position:absolute;left:16px;top:16px;padding:6px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);font-size:.78rem;font-weight:500;color:#D6DBCF;background:rgba(12,13,11,.6);
}
.ahero-stats{
  position:absolute;z-index:2;left:14px;right:14px;bottom:-22px;margin:0;padding:0;list-style:none;
  display:flex;gap:10px;
}
.ahero-stats li{
  flex:1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:12px 14px;border-radius:14px;background:var(--ink);border:1px solid rgba(255,255,255,.3);
}
.ahero-stats b{font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1;color:var(--lime)}
.ahero-stats span{font-size:.8rem;line-height:1.25;color:#D6DBCF}

.ahero-quote{
  margin:0;padding:2px 0 2px 18px;border-left:3px solid var(--lime);
  font-family:var(--display);font-weight:500;font-size:clamp(1.35rem,1.1rem + 1.2vw,1.9rem);line-height:1.3;
  text-transform:none;letter-spacing:.005em;color:var(--white);text-wrap:balance;
}
.ahero-bio{margin:20px 0 0;max-width:60ch;color:#C4CABD;font-size:1.02rem;line-height:1.7}
.ahero-chips{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ahero-chips li{padding:7px 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:.82rem;font-weight:500;color:#D6DBCF}
.ahero .hero-actions{margin-top:26px}
.ahero-portrait{margin-bottom:22px}

@media (min-width:900px){
  .ahero-grid{
    grid-template-columns:minmax(0,5fr) minmax(0,6.6fr);column-gap:clamp(48px,7vw,104px);
    grid-template-rows:auto auto;padding-block:30px 96px;
  }
  .ahero-portrait{grid-column:1;grid-row:1 / span 2;order:0;margin:0;align-self:center}
  .ahero-top{grid-column:2;grid-row:1;order:0;align-self:end;padding-bottom:26px}
  .ahero-bottom{grid-column:2;grid-row:2;order:0;margin-top:0;align-self:start;padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
  .ahero h1{font-size:clamp(3.2rem,1.4rem + 4.6vw,5.4rem)}
  .ahero-frame{aspect-ratio:4/5}
  .ahero-stats{left:-20px;right:auto;bottom:34px;flex-direction:column;gap:10px}
  .ahero-stats li{flex:none;padding:12px 18px}
}
@media (max-width:767px){
  .ahero-grid{padding-block:10px 36px}
  .ahero .crumb{padding-top:14px}
  .ahero .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ahero .hero-actions .btn{width:100%;padding-inline:8px;font-size:.82rem;flex:none}
  .ahero .hero-actions .btn svg{display:none}
  .ahero-portrait::before{inset:10px -8px -10px 10px}
}


/* ============================================================
   HOUSE MODEL: glitch fixes
   1. A parent that is part of the 3D scene collapses flat the moment its
      opacity drops below 1, so furniture used to squash for a frame while it
      faded. The fade now runs on each piece's faces, and the pieces stay at 1.
   2. The moisture patch was a loose shape floating in front of the wall that
      sliced through the partitions. It is now painted on the wall itself, with
      soft edges, so nothing can poke through or flicker.
   ============================================================ */
.house .sld{opacity:1!important;transition:none!important}
.house .sld>i{transition:opacity .34s ease}
.house-stage[data-view="asbestos"] .r-bed .sld>i,
.house-stage[data-view="asbestos"] .r-bath .sld>i,
.house-stage[data-view="asbestos"] .r-hall .sld>i,
.house-stage[data-view="asbestos"] .s-duct>i,
.house-stage[data-view="asbestos"] .s-vent>i,
.house-stage[data-view="bacteria"] .r-bed .sld>i,
.house-stage[data-view="bacteria"] .r-bath .sld>i,
.house-stage[data-view="bacteria"] .r-hall .sld>i,
.house-stage[data-view="bacteria"] .s-duct>i,
.house-stage[data-view="bacteria"] .s-vent>i,
.house-stage[data-view="bacteria"] .s-cabinet>i,
.house-stage[data-view="bacteria"] .s-hood>i,
.house-stage[data-view="bacteria"] .s-micro>i{opacity:0}

.flaw-moisture{display:none}
.house .wall-back{transform-style:flat;overflow:hidden}
.wall-back::after{
  content:"";position:absolute;left:184px;top:14px;width:82px;height:88px;
  border-radius:50% 50% 46% 46% / 56% 56% 44% 44%;
  background:radial-gradient(ellipse at 50% 52%,rgba(86,156,255,.95) 0,rgba(62,139,255,.8) 42%,rgba(62,139,255,.35) 66%,rgba(62,139,255,0) 82%);
  opacity:0;transition:opacity .5s ease;
}
.house-stage[data-view="moisture"] .wall-back::after{opacity:1;animation:wallSeep 4.5s ease-in-out infinite}
@keyframes wallSeep{0%,100%{transform:scale(.95)}50%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.house-stage[data-view="moisture"] .wall-back::after{animation:none}}

/* camera moves: a calmer ease in and out instead of a hard lurch at the start */
.house{transition-duration:1.1s!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}
.house .pl{transition:opacity .45s ease}

/* ABOUT opening, phone: compact, thumb-friendly, one clear path to the call button */
@media (max-width:767px){
  .ahero-grid{padding-block:6px 32px}
  .ahero .eyebrow{margin-bottom:8px;font-size:.7rem}
  .ahero h1{font-size:clamp(2.6rem,13vw,3.2rem)}
  .ahero h1 em{display:block}
  .ahero-role{margin-top:12px;flex-direction:column;gap:2px}
  .ahero-role b{font-size:1.1rem}
  .ahero-role span{font-size:.72rem}
  .ahero-portrait{margin:20px 0 0}
  .ahero-portrait::before{display:none}
  .ahero-frame{aspect-ratio:16/11;border-radius:18px}
  .ahero-ph img{height:70%}
  .ahero-stats{position:static;margin:10px 0 0;gap:10px}
  .ahero-stats li{flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;background:var(--panel)}
  .ahero-stats b{font-size:2.1rem}
  .ahero-bottom{margin-top:22px}
  .ahero-quote{font-size:1.3rem;padding-left:14px}
  .ahero-bio{margin-top:14px;font-size:.98rem;line-height:1.65}
  .ahero-chips{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ahero-chips li{text-align:center;padding:9px 8px;font-size:.78rem;border-radius:14px}
  .ahero-chips li:first-child{grid-column:1 / -1}
  .ahero .hero-actions{margin-top:20px;grid-template-columns:1fr;gap:10px}
  .ahero .hero-actions .btn{min-height:52px;font-size:.95rem}
  .ahero .hero-actions .btn svg{display:inline-block}
}
.ahero-bio{text-wrap:wrap}

/* PHONE: section headlines were shrinking to blend in. One bigger, consistent size. */
@media (max-width:767px){
  html body .sec-head h2,html body .contact-grid h2,html body .credstat-body h2,html body .cta-copy h2,
  html body .area-grid h2,html body .ask h2,html body .sec h2{
    font-size:clamp(2.6rem,12.5vw,3.2rem);line-height:1;letter-spacing:-.005em;
  }
  html body .sec:has(.steps) .sec-head h2{font-size:clamp(2.8rem,13.5vw,3.4rem)}
  html body .sec:has(.ownerfeature) .sec-head h2,html body .ahero h1{font-size:clamp(2.6rem,13vw,3.2rem)}
  html body .credstat-body h2{font-size:clamp(2.1rem,9.6vw,2.5rem)}
  html body .sec-head .eyebrow{margin-bottom:12px}
}
@media (max-width:767px){
  html body .credstat-body h2,html body .sec:has(.signal) .sec-head h2,html body .advice .sec-head h2{
    font-size:clamp(2.6rem,12.5vw,3.2rem);line-height:1;
  }
  html body .credstat-body h2{font-size:clamp(2.2rem,10.4vw,2.7rem)}
}


/* ============================================================
   SERVICE PAGES (redesign): hero with a stat strip, "When to call" as a
   headline, a grid of sign cards and a call band
   ============================================================ */
/* hero */
.phero{background:radial-gradient(ellipse 50% 80% at 88% 40%,rgba(255,255,255,.04),transparent 70%)}
.phero-stats{
  list-style:none;margin:28px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(255,255,255,.22);border-radius:16px;overflow:hidden;background:var(--panel);
}
.phero-stats li{padding:16px 14px;border-left:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:4px}
.phero-stats li:first-child{border-left:0}
.phero-stats b{font-family:var(--display);font-weight:700;font-size:1.7rem;line-height:1;color:var(--lime);letter-spacing:.01em}
.phero-stats b i{font-style:normal;font-size:.55em;margin-left:3px;color:var(--white)}
.phero-stats span{font-size:.8rem;line-height:1.25;color:#D6DBCF}
.phero .phero-mark .stage::before{
  content:"";position:absolute;left:50.9%;top:20.4%;width:92%;aspect-ratio:1;transform:translate(-50%,-50%);
  border:1px dashed rgba(255,255,255,.22);border-radius:50%;
}
@media (min-width:900px){
  .phero-in{padding-block:34px 64px}
  .phero h1{font-size:clamp(3.6rem,2rem + 4.6vw,6rem)}
  .phero .phero-mark .stage{width:min(300px,76%)}
  .phero-stats{grid-template-columns:repeat(4,auto);justify-content:start;max-width:560px}
}
@media (max-width:767px){
  .phero-stats{grid-column:1 / -1;grid-row:5;margin-top:18px;grid-template-columns:1fr 1fr}
  .phero-stats li{padding:14px 14px;border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .phero-stats li:nth-child(odd){border-right:1px solid rgba(255,255,255,.14)}
  .phero-stats li:nth-child(-n+2){border-top:0}
  .phero-stats b{font-size:1.9rem}
  .phero .phero-mark .stage::before{display:none}
}

/* when to call */
.sec:has(.signal)>.wrap.split{display:block}
.sec:has(.signal)>.wrap.split>.sec-head{
  position:static;padding:0!important;border:0!important;background:none;margin-bottom:clamp(24px,3.4vw,40px)!important;
  max-width:none!important;
}
.sec:has(.signal) .sec-head h2{font-size:clamp(3rem,1.6rem + 4.4vw,5rem);line-height:.98}
.sec:has(.signal) .sec-head .lede{max-width:50ch;font-size:clamp(1.02rem,.98rem + .3vw,1.2rem)}
.signal,.js .signal[data-collapsed]{
  display:grid!important;grid-template-columns:repeat(2,1fr);gap:14px;grid-auto-rows:auto;
}
.signal>div,.sec--raised .signal>div,body:has(.phero) .signal>div,.signal>div:first-child{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  padding:22px 22px 24px;min-height:150px;
  background:var(--panel);border:1px solid rgba(255,255,255,.2);border-radius:18px;
}
.signal>div>svg,body:has(.phero) .signal>div>svg{width:52px;height:52px;padding:12px;border-radius:14px;background:rgba(118,249,9,.13);stroke:var(--lime)}
.signal p{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);line-height:1.35;font-weight:500;text-wrap:balance}
.signal>div:last-child:nth-child(odd){grid-column:1 / -1;flex-direction:row;align-items:center;min-height:0}
.signal-cta{
  margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;
  padding:clamp(20px,3vw,30px);border-radius:18px;background:var(--lime);color:#0B0C0A;
}
.signal-cta p{margin:0;max-width:52ch;display:flex;flex-direction:column;gap:4px}
.signal-cta b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);line-height:1.05}
.signal-cta span{font-size:1rem;line-height:1.5}
.signal-cta .btn{background:#0B0C0A;color:#fff;min-height:56px;font-size:1.05rem}
@media (hover:hover){.signal-cta .btn:hover{background:var(--blue);transform:translateY(-2px)}}
@media (max-width:767px){
  .signal,.js .signal[data-collapsed]{grid-template-columns:1fr 1fr;gap:10px}
  .signal>div,.sec--raised .signal>div,body:has(.phero) .signal>div,.signal>div:first-child{padding:16px 14px 18px;min-height:0;gap:12px;border-radius:16px}
  .signal>div>svg,body:has(.phero) .signal>div>svg{width:42px;height:42px;padding:9px}
  .signal p{font-size:1rem;line-height:1.35}
  .signal>div:last-child:nth-child(odd){flex-direction:column;align-items:flex-start}
  .signal-cta{flex-direction:column;align-items:stretch;gap:14px;margin-top:12px}
  .signal-cta .btn{width:100%}
  .sec:has(.signal) .sec-head h2{font-size:clamp(2.7rem,13vw,3.3rem)}
}
@media (min-width:900px){.phero-stats b{font-size:2.1rem}.phero-stats li{padding:18px 20px}.phero-stats{max-width:640px}}
html body .signal>div:last-child:nth-child(odd){grid-column:1 / -1}
.faq details p+p{padding-top:0}
.faq details p b{color:var(--lime);font-weight:600}

.faq-list{list-style:none;margin:0;padding:0 0 20px;display:grid;gap:10px;max-width:72ch}
.faq-list li{color:var(--muted);font-size:.93rem;line-height:1.6;padding-left:14px;border-left:2px solid var(--lime)}
.faq-list b{color:var(--lime);font-weight:600}


/* ============================================================
   WEB HEADLINES BACK TO THEIR EARLIER SIZE (the larger sizes are phone-only)
   ============================================================ */
@media (min-width:768px) and (max-width:899px){
  .sec:has(.signal) .sec-head h2{font-size:clamp(2.25rem,1.35rem + 3vw,3.5rem)}
}
@media (min-width:900px){
  .sec:has(.signal) .sec-head h2{font-size:clamp(2rem,1.2rem + 2.2vw,2.9rem);line-height:1.06}
  .phero h1{font-size:clamp(2.6rem,1.5rem + 4.4vw,4.4rem)}
  .ahero h1{font-size:clamp(2.6rem,1.4rem + 3vw,3.8rem)}
}

/* ============================================================
   SERVICE PAGE HERO: copy on the left, a "job summary" sheet on the right.
   No big circle, no stat strip. The logo sits in the sheet's header.
   ============================================================ */
.phero{background:none}
.phero .phero-mark,.phero-stats{display:none}
.phero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:center;padding-block:22px 48px}
.phero-copy{display:block}
.jobsheet{
  position:relative;margin:0;padding:0;border-radius:18px;overflow:hidden;
  background:var(--panel);border:1px solid rgba(255,255,255,.24);
  box-shadow:10px 10px 0 rgba(118,249,9,.16);
}
.jobsheet-head{
  display:flex;align-items:center;gap:14px;padding:16px 20px;
  background:var(--lime);color:#0B0C0A;
}
.jobsheet-head img{width:26px;height:auto;filter:invert(1)}
.jobsheet-head b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.15rem;line-height:1.1}
.jobsheet-head span{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-top:3px}
.jobsheet dl{margin:0;padding:6px 20px}
.jobsheet dl>div{display:grid;grid-template-columns:7.2rem 1fr;gap:14px;padding:13px 0;border-bottom:1px dashed rgba(255,255,255,.22);align-items:baseline}
.jobsheet dl>div:last-child{border-bottom:0}
.jobsheet dt{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.jobsheet dd{margin:0;font-size:1.02rem;font-weight:500;line-height:1.4;color:var(--white)}
.jobsheet dl>div:first-child dd{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1.35rem;color:var(--lime)}
.jobsheet-foot{margin:0;padding:13px 20px;border-top:1px solid rgba(255,255,255,.2);font-size:.82rem;line-height:1.4;color:#C4CABD}
@media (min-width:900px){
  .phero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(44px,6vw,88px);padding-block:36px 72px}
  .jobsheet{justify-self:end;width:100%;max-width:470px;transform:rotate(1.2deg)}
}
@media (max-width:899px){.jobsheet{box-shadow:6px 6px 0 rgba(118,249,9,.16);margin-right:6px}}
@media (max-width:767px){
  .phero-in{display:block;padding-block:10px 36px}
  .phero-copy{display:block}
  .phero .eyebrow{margin-bottom:8px}
  .phero h1{font-size:clamp(2.9rem,14vw,3.6rem);line-height:.98}
  .phero h1 em{display:block}
  .phero .lede{margin-top:16px}
  .phero .hero-actions{margin-top:20px}
  .jobsheet{margin-top:28px}
  .jobsheet-head{padding:14px 16px}
  .jobsheet dl{padding:4px 16px}
  .jobsheet dl>div{grid-template-columns:5.6rem 1fr;gap:10px;padding:11px 0}
  .jobsheet dt{font-size:.7rem}
  .jobsheet dd{font-size:.98rem}
  .jobsheet-foot{padding:12px 16px}
}
@media (min-width:900px){.jobsheet{transform:none}}


/* ============================================================
   SERVICE PAGE HERO (v3): copy left, the HK logo large on the right.
   No circle, no card, no glow.
   ============================================================ */
html body .phero .phero-mark{display:flex;justify-content:center;align-items:center}
html body .phero .phero-mark .stage::before{display:none}
html body .phero .phero-mark .stage{width:min(270px,62%);--orb:.9}
html body .phero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:center;padding-block:24px 52px}
html body .phero-facts{
  list-style:none;margin:26px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.2);
  display:flex;flex-wrap:wrap;gap:10px 28px;
}
html body .phero-facts li{font-size:.9rem;line-height:1.35;color:#D6DBCF}
html body .phero-facts b{display:block;font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.05;color:var(--lime);letter-spacing:.01em}
@media (min-width:900px){
  html body .phero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,88px);padding-block:36px 76px}
  html body .phero .phero-mark .stage{width:min(340px,82%);--orb:1}
}
@media (max-width:767px){
  html body .phero-in{
    display:grid;grid-template-columns:minmax(0,1fr) 128px;column-gap:12px;row-gap:0;align-items:center;padding-block:8px 34px;
  }
  html body .phero-copy{display:contents}
  html body .phero h1{grid-column:1;grid-row:1;font-size:clamp(2.9rem,14vw,3.6rem);line-height:.98;margin:0}
  html body .phero h1 em{display:block}
  html body .phero .phero-mark{grid-column:2;grid-row:1;order:0;margin:0}
  html body .phero .phero-mark .stage{width:128px;--orb:.55}
  html body .phero .lede{grid-column:1 / -1;grid-row:2;margin-top:18px}
  html body .phero .hero-actions{grid-column:1 / -1;grid-row:3;margin-top:20px}
  html body .phero-facts{grid-column:1 / -1;grid-row:4;margin-top:22px;padding-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  html body .phero-facts li{font-size:.78rem}
  html body .phero-facts b{font-size:1.2rem}
}

/* ============================================================
   WHEN TO CALL (v3): a compact template. Heading, the signs as
   wrapping pills, then one slim call row. Nothing oversized.
   ============================================================ */
html body .sec:has(.signal)>.wrap.split>.sec-head{margin-bottom:22px!important}
html body .signal,html body .js .signal[data-collapsed]{
  display:flex!important;flex-wrap:wrap;gap:10px;grid-template-columns:none;
}
html body .signal>div,html body .sec--raised .signal>div,html body body:has(.phero) .signal>div,
html body .signal>div:first-child,html body .signal>div:last-child:nth-child(odd){
  grid-column:auto;flex:0 1 auto;flex-direction:row;align-items:center;gap:12px;min-height:0;
  padding:12px 18px 12px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.26);background:var(--panel);
}
html body .signal>div>svg,html body body:has(.phero) .signal>div>svg{width:30px;height:30px;padding:6px;border-radius:50%;background:rgba(118,249,9,.14);stroke:var(--lime);flex:none}
html body .signal p{font-size:1rem;line-height:1.35;font-weight:500;text-wrap:pretty}
html body .signal-cta{
  margin-top:22px;padding:16px 20px;border-radius:16px;background:none;color:var(--white);
  border:1px dashed rgba(118,249,9,.55);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
}
html body .signal-cta p{margin:0;display:block;font-size:1rem;line-height:1.45;color:#D6DBCF;max-width:60ch}
html body .signal-cta b{display:inline;font-family:var(--body);font-weight:600;font-size:1rem;text-transform:none;color:var(--white)}
html body .signal-cta span{display:inline;font-size:1rem}
html body .signal-cta .btn{background:var(--blue);color:#fff;min-height:50px;font-size:.95rem}
@media (hover:hover){html body .signal-cta .btn:hover{background:var(--blue-hover)}}
@media (max-width:767px){
  html body .signal,html body .js .signal[data-collapsed]{gap:8px}
  html body .signal>div,html body .sec--raised .signal>div,html body .signal>div:first-child,html body .signal>div:last-child:nth-child(odd){
    border-radius:16px;padding:11px 14px 11px 11px;width:100%;flex:1 1 100%;
  }
  html body .signal p{font-size:.98rem}
  html body .signal-cta{flex-direction:column;align-items:stretch;gap:12px;margin-top:16px}
  html body .signal-cta .btn{width:100%}
}

/* when to call: make the pill template win over the older card rules */
html body:has(.phero) .sec .signal>div,html body:has(.phero) .sec--raised .signal>div,
html body:has(.phero) .sec .signal>div:first-child,html body:has(.phero) .sec .signal>div:last-child:nth-child(odd){
  grid-column:auto;flex:0 1 auto;flex-direction:row;align-items:center;gap:12px;min-height:0;width:auto;
  padding:11px 18px 11px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.26);background:var(--panel);
}
html body:has(.phero) .sec .signal>div>svg{width:30px;height:30px;padding:6px;border-radius:50%;background:rgba(118,249,9,.14);stroke:var(--lime);flex:none}
html body:has(.phero) .sec .signal p{font-size:1rem;line-height:1.35;font-weight:500}
html body .signal-cta b{display:block;margin-bottom:2px}
@media (max-width:767px){
  html body:has(.phero) .sec .signal>div,html body:has(.phero) .sec .signal>div:first-child,html body:has(.phero) .sec .signal>div:last-child:nth-child(odd){
    flex:1 1 100%;width:100%;border-radius:16px;padding:10px 14px 10px 10px;
  }
  html body:has(.phero) .sec .signal p{font-size:.98rem}
}
html body:has(.phero) .sec .signal,html body:has(.phero) .sec .js .signal[data-collapsed],html body.js:has(.phero) .sec .signal{display:flex!important;flex-wrap:wrap;grid-template-columns:none!important;gap:10px}
@media (max-width:767px){html body:has(.phero) .sec .signal{gap:8px}}
/* the top of the 24 lines up with the top of "Certifications, all current." */
html body .credstat-num{transform:translateY(57px)}
@media (max-width:767px){html body .credstat-num{transform:translateY(10px)}}

/* "What to expect": the standard section headline size on web (it stays large on phones) */
@media (min-width:768px) and (max-width:899px){html body .sec:has(.steps) .sec-head h2{font-size:clamp(2.25rem,1.35rem + 3vw,3.5rem);line-height:1.06}}
@media (min-width:900px){html body .sec:has(.steps) .sec-head h2{font-size:clamp(2rem,1.2rem + 2.2vw,2.9rem);line-height:1.06}}


/* ============================================================
   WHEN TO CALL (v5): a tidy two-column set of equal rows and one solid call row
   ============================================================ */
html body:has(.phero) .sec .signal,html body:has(.phero) .sec .js .signal[data-collapsed]{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
html body:has(.phero) .sec .signal>div,html body:has(.phero) .sec--raised .signal>div,
html body:has(.phero) .sec .signal>div:first-child,html body:has(.phero) .sec .signal>div:last-child:nth-child(odd){
  flex:none;width:auto;grid-column:auto;flex-direction:row;align-items:center;gap:16px;min-height:76px;
  padding:14px 20px 14px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.22);background:var(--panel);
}
html body:has(.phero) .sec .signal>div:last-child:nth-child(odd){grid-column:1 / -1}
html body:has(.phero) .sec .signal>div>svg{width:44px;height:44px;padding:10px;border-radius:12px;background:rgba(118,249,9,.14);stroke:var(--lime);flex:none}
html body:has(.phero) .sec .signal p{font-size:1.05rem;line-height:1.4;font-weight:500;text-wrap:balance}
html body .signal-cta{
  margin-top:14px;padding:18px 22px;border-radius:16px;border:1px solid rgba(118,249,9,.5);background:rgba(118,249,9,.07);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;color:var(--white);
}
html body .signal-cta p{margin:0;max-width:62ch;font-size:1rem;line-height:1.45;color:#D6DBCF}
html body .signal-cta b{display:block;margin-bottom:2px;font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:.02em;text-transform:uppercase;color:var(--lime)}
html body .signal-cta span{display:block}
html body .signal-cta .btn{background:var(--blue);color:#fff;min-height:52px;font-size:.98rem}
@media (hover:hover){html body .signal-cta .btn:hover{background:var(--blue-hover)}}
@media (max-width:767px){
  html body:has(.phero) .sec .signal,html body:has(.phero) .sec .js .signal[data-collapsed]{grid-template-columns:1fr;gap:10px}
  html body:has(.phero) .sec .signal>div,html body:has(.phero) .sec .signal>div:first-child,html body:has(.phero) .sec .signal>div:last-child:nth-child(odd){min-height:0;padding:12px 16px 12px 12px;gap:14px}
  html body:has(.phero) .sec .signal>div>svg{width:40px;height:40px;padding:9px}
  html body:has(.phero) .sec .signal p{font-size:1rem}
  html body .signal-cta{flex-direction:column;align-items:stretch;padding:18px}
  html body .signal-cta .btn{width:100%}
}

/* ============================================================
   SERVICE HERO (v5): ruled-paper grid, the HK mark large inside viewfinder
   corner marks, and a full-width figures band along the bottom. No shapes.
   ============================================================ */
html body .phero{
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/52px 52px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/52px 52px;
  -webkit-mask-image:none;
}
html body .phero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 70% 90% at 28% 50%,var(--ink) 30%,transparent 100%);
}
html body .phero>.wrap{position:relative;z-index:2}
html body .phero .phero-mark{position:relative;z-index:1}
html body .phero .phero-mark::before{display:none}
html body .phero .phero-mark{background:none;border-radius:0;padding:0}
html body .phero .phero-mark::after{display:none}
html body .phero .phero-mark .stage{width:min(300px,64%);--orb:.95;position:relative}
html body .phero .phero-mark .stage::before{
  display:block!important;content:"";position:absolute;border:0;border-radius:0;transform:none;width:auto;aspect-ratio:auto;inset:-26px -34px -26px -34px;
  background:
    linear-gradient(var(--lime),var(--lime)) 0 0/28px 3px no-repeat,
    linear-gradient(var(--lime),var(--lime)) 0 0/3px 28px no-repeat,
    linear-gradient(var(--lime),var(--lime)) 100% 0/28px 3px no-repeat,
    linear-gradient(var(--lime),var(--lime)) 100% 0/3px 28px no-repeat,
    linear-gradient(var(--lime),var(--lime)) 0 100%/28px 3px no-repeat,
    linear-gradient(var(--lime),var(--lime)) 0 100%/3px 28px no-repeat,
    linear-gradient(var(--lime),var(--lime)) 100% 100%/28px 3px no-repeat,
    linear-gradient(var(--lime),var(--lime)) 100% 100%/3px 28px no-repeat;
}
html body .phero h1{font-size:clamp(3rem,1.6rem + 5vw,5rem);line-height:.95;letter-spacing:-.015em}
html body .phero h1 em{display:block}
html body .phero .lede{max-width:46ch}
html body .phero-band{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.28);position:relative;z-index:2;
}
html body .phero-band li{padding:20px 22px 24px 0;display:flex;flex-direction:column;gap:6px;border-left:0}
html body .phero-band li+li{padding-left:22px;border-left:1px solid rgba(255,255,255,.16)}
html body .phero-band b{font-family:var(--display);font-weight:700;font-size:clamp(2rem,1.4rem + 2vw,3rem);line-height:1;color:var(--lime);letter-spacing:.005em}
html body .phero-band b i{font-style:normal;font-size:.45em;margin-left:5px;color:var(--white);letter-spacing:.06em}
html body .phero-band span{font-size:.92rem;line-height:1.3;color:#D6DBCF}
@media (min-width:900px){
  html body .phero-in{align-items:center;padding-block:34px 44px}
  html body .phero .phero-mark{align-self:center}
  html body .phero .phero-mark .stage{width:min(310px,80%)}
}
@media (max-width:767px){
  html body .phero-in{padding-block:8px 26px}
  html body .phero .phero-mark{background:none;padding:0}
  html body .phero .phero-mark .stage{width:112px;--orb:.5}
  html body .phero .phero-mark .stage::before{inset:-12px -14px -12px -14px;background-size:18px 2px,2px 18px,18px 2px,2px 18px,18px 2px,2px 18px,18px 2px,2px 18px}
  html body .phero h1{font-size:clamp(2.9rem,14vw,3.6rem)}
  html body .phero-band{grid-template-columns:1fr 1fr}
  html body .phero-band li,html body .phero-band li+li{padding:16px 14px 18px 0;border-left:0}
  html body .phero-band li:nth-child(even){padding-left:16px;border-left:1px solid rgba(255,255,255,.16)}
  html body .phero-band li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16)}
  html body .phero-band b{font-size:2.2rem}
}
@media (min-width:768px) and (max-width:899px){html body .phero .phero-mark .stage{width:210px}html body .phero-in{gap:40px}}


/* ============================================================
   WHEN TO CALL (v6): a vertical timeline of signs beside a call card
   ============================================================ */
html body .sec.wtc>.wrap.split{display:block}
html body .sec.wtc .sec-head{padding:0!important;margin:0 0 22px!important;border:0!important;max-width:none!important}
html body .sec.wtc .signal,html body:has(.phero) .sec.wtc .signal{display:block!important;position:relative;grid-template-columns:none!important}
html body:has(.phero) .sec.wtc .signal>div,html body:has(.phero) .sec.wtc .signal>div:first-child,html body:has(.phero) .sec.wtc .signal>div:last-child:nth-child(odd){
  position:relative;display:flex;flex-direction:row;align-items:flex-start;gap:20px;min-height:0;width:auto;grid-column:auto;
  padding:0 0 26px;border:0;border-radius:0;background:none;
}
html body:has(.phero) .sec.wtc .signal>div:last-child{padding-bottom:0}
html body:has(.phero) .sec.wtc .signal>div::before{
  content:"";position:absolute;left:23px;top:50px;bottom:2px;width:2px;background:repeating-linear-gradient(var(--lime) 0 6px,transparent 6px 12px);opacity:.45;
}
html body:has(.phero) .sec.wtc .signal>div:last-child::before{display:none}
html body:has(.phero) .sec.wtc .signal>div>svg{
  flex:none;width:48px;height:48px;padding:11px;border-radius:50%;background:var(--lime);stroke:#0B0C0A;stroke-width:1.9;position:relative;z-index:1;
}
html body:has(.phero) .sec.wtc .signal p{padding-top:10px;font-size:1.25rem;line-height:1.35;font-weight:500;text-wrap:balance}
html body .sec.wtc .signal-cta{
  margin-top:26px;padding:22px;border-radius:18px;border:1px solid rgba(255,255,255,.22);border-left:5px solid var(--lime);background:var(--panel);
  display:block;
}
html body .sec.wtc .signal-cta b{font-size:1.5rem;color:var(--white);margin-bottom:6px}
html body .sec.wtc .signal-cta p{max-width:none;margin:0 0 16px;font-size:1rem;color:#C4CABD}
html body .sec.wtc .signal-cta .btn{width:100%}
@media (min-width:900px){
  html body .sec.wtc>.wrap.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6.4fr);column-gap:clamp(48px,7vw,104px);align-items:start}
  html body .sec.wtc .sec-head{grid-column:1;grid-row:1}
  html body .sec.wtc .signal-cta{grid-column:1;grid-row:2;margin-top:6px}
  html body .sec.wtc .signal{grid-column:2;grid-row:1 / span 2;padding-top:6px}
}
@media (max-width:767px){
  html body:has(.phero) .sec.wtc .signal>div{gap:16px;padding-bottom:22px}
  html body:has(.phero) .sec.wtc .signal>div>svg{width:42px;height:42px;padding:9px}
  html body:has(.phero) .sec.wtc .signal>div::before{left:20px;top:44px}
  html body:has(.phero) .sec.wtc .signal p{font-size:1.1rem;padding-top:8px}
  html body .sec.wtc .signal-cta{margin-top:24px}
}

/* ============================================================
   WHAT YOU'LL GET (v6): a mock report page beside a checklist
   ============================================================ */
html body .sec.wyg>.wrap{display:block}
html body .sec.wyg .sec-head{padding:0!important;margin:0 0 22px!important;border:0!important;max-width:none!important}
html body .sec.wyg .deliver{display:block}
html body .sec.wyg .deliver>div{
  display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.18);background:none;border-top:0;border-left:0;border-right:0;border-radius:0;
}
html body .sec.wyg .deliver>div:first-child{border-top:1px solid rgba(255,255,255,.18)}
html body .sec.wyg .deliver svg{width:42px;height:42px;padding:10px;border-radius:12px;background:rgba(118,249,9,.14);stroke:var(--lime);margin:0;flex:none}
html body .sec.wyg .deliver b{font-size:1.15rem;line-height:1.4;font-weight:500}
.reportmock{position:relative;margin:34px auto 0;width:min(100%,360px);padding:0 14px 14px 0}
.rm-back{position:absolute;inset:14px 0 0 14px;border-radius:12px;background:#9ba596;transform:rotate(2.5deg)}
.rm-page{position:relative;padding:20px 22px 24px;border-radius:12px;background:#eef1ea;color:#1b2018;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.rm-top{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:2px solid #1b2018}
.rm-top img{width:20px;height:auto;filter:invert(1)}
.rm-top span{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem}
.rm-lines{display:grid;gap:8px;padding:16px 0}
.rm-lines i,.rm-table i,.rm-photos i{display:block;height:8px;border-radius:4px;background:#c3cbbd}
.rm-lines i.s{width:62%}
.rm-table{border:1px solid #1b2018;border-radius:8px;overflow:hidden}
.rm-table>div{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:10px 12px;border-bottom:1px solid #c3cbbd}
.rm-table>div:last-child{border-bottom:0}
.rm-table em{font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#0b5be0;font-weight:600}
.rm-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.rm-photos i{height:56px;border-radius:8px;background:linear-gradient(135deg,#aab3a4,#c9d0c3)}
.rm-stamp{
  position:absolute;right:16px;bottom:18px;padding:8px 12px;border:2px solid #0b5be0;border-radius:8px;color:#0b5be0;background:rgba(238,241,234,.92);
  font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:.12em;line-height:1.35;text-transform:uppercase;text-align:center;transform:rotate(-7deg);
}
@media (min-width:900px){
  html body .sec.wyg>.wrap{display:grid;grid-template-columns:minmax(0,6.4fr) minmax(0,5fr);column-gap:clamp(48px,7vw,104px);align-items:center}
  html body .sec.wyg .sec-head{grid-column:1;grid-row:1}
  html body .sec.wyg .deliver{grid-column:1;grid-row:2}
  .reportmock{grid-column:2;grid-row:1 / span 2;margin:0;width:min(100%,380px);justify-self:center}
}
@media (max-width:767px){
  html body .sec.wyg .deliver>div{gap:14px;padding:14px 0}
  html body .sec.wyg .deliver svg{width:38px;height:38px;padding:9px}
  html body .sec.wyg .deliver b{font-size:1.05rem}
  .reportmock{margin-top:30px;width:min(100%,320px)}
}


/* ============================================================
   WHAT YOU'LL GET (v8): a plain, believable lab report page
   ============================================================ */
.reportmock{display:none!important}
html body .sec.wyg>.wrap{display:block!important}
html body .sec.wyg .sec-head{margin:0 0 28px!important}
html body .sec.wyg .deliver{
  display:block;counter-reset:rp;max-width:900px;overflow:hidden;
  background:#f4f2ea;color:#1a1f17;border-radius:4px;
  box-shadow:0 1px 0 rgba(255,255,255,.35),0 24px 48px -20px rgba(0,0,0,.8);
  border:0;
}
html body .sec.wyg .rp-head{display:block!important;padding:0!important;border:0!important;background:none!important;border-radius:0!important}
.rp-brand{display:flex;align-items:center;gap:14px;padding:22px 32px 18px;border-bottom:1px solid #1a1f17;box-shadow:0 3px 0 #f4f2ea,0 4px 0 #1a1f17}
.rp-brand img{width:26px;height:auto;filter:invert(1)}
.rp-brand b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:1.25rem;line-height:1.1;color:#1a1f17}
.rp-brand small{display:block;margin-top:3px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#5b6455}
.rp-meta{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;padding:22px 32px 10px}
.rp-meta span{display:block;padding-bottom:6px;border-bottom:1px solid #8c9484;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#5b6455}
.rp-cols{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:0 14px;padding:14px 32px 8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#5b6455}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot){
  counter-increment:rp;display:grid;grid-template-columns:4rem minmax(0,1fr) auto;align-items:center;gap:0 14px;
  padding:18px 32px;border:0;border-top:1px solid #c9ccbf;border-radius:0;background:none;
}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot):first-of-type{border-top:1px solid #1a1f17}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)>svg{display:none}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)::before{
  grid-column:1;content:counter(rp);font-family:var(--display);font-weight:700;font-size:2.1rem;line-height:1;color:#1a1f17;
}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot) b{grid-column:2;font-family:var(--body);font-size:1.15rem;line-height:1.4;font-weight:600;color:#1a1f17}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)::after{
  grid-column:3;content:"Included";padding-left:22px;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1c6b0a;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c6b0a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") left center/16px no-repeat;
}
html body .sec.wyg .rp-foot{
  display:grid!important;grid-template-columns:1fr 1fr;gap:28px;padding:20px 32px 24px;margin:0;border-top:1px solid #1a1f17;background:none;border-radius:0;
}
.rp-foot small{display:block;padding-bottom:6px;margin-bottom:8px;border-bottom:1px solid #8c9484;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#5b6455}
.rp-foot b{font-family:var(--body);font-size:1rem;font-weight:600;line-height:1.35;color:#1a1f17}
@media (max-width:767px){
  .rp-brand{padding:18px 18px 14px;gap:12px}
  .rp-brand b{font-size:1.05rem}
  .rp-brand small{font-size:.62rem}
  .rp-meta{grid-template-columns:1fr 1fr;gap:18px;padding:18px 18px 6px}
  .rp-meta span:first-child{grid-column:1 / -1}
  .rp-cols{padding:12px 18px 8px;grid-template-columns:2.4rem 1fr}
  html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot){grid-template-columns:2.4rem minmax(0,1fr);padding:16px 18px;gap:6px 12px}
  html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)::before{font-size:1.8rem;grid-row:1 / span 2}
  html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot) b{font-size:1.05rem;grid-column:2;grid-row:1}
  html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)::after{grid-column:2;grid-row:2;justify-self:start}
  html body .sec.wyg .rp-foot{grid-template-columns:1fr;gap:16px;padding:18px}
}
html body .sec.wyg .rp-foot{padding:20px 32px 26px!important;border-bottom:0!important}
@media (max-width:767px){html body .sec.wyg .rp-foot{padding:18px!important}}

/* report sheet in the site's own dark palette */
html body .sec.wyg .deliver{
  background:var(--panel);color:var(--white);border-radius:var(--r);
  box-shadow:none;border:1px solid rgba(255,255,255,.22);
}
.rp-brand{border-bottom:1px solid rgba(255,255,255,.28);box-shadow:none}
.rp-brand img{filter:none}
.rp-brand b{color:var(--white)}
.rp-brand small{color:var(--lime)}
.rp-meta span{border-bottom-color:rgba(255,255,255,.3);color:var(--muted)}
.rp-cols{color:var(--muted)}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot){border-top-color:rgba(255,255,255,.16)}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot):first-of-type{border-top-color:rgba(255,255,255,.28)}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)::before{color:var(--lime)}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot) b{color:var(--white)}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)::after{
  color:var(--lime);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376F909' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") left center/16px no-repeat;
}
html body .sec.wyg .rp-foot{border-top:1px solid rgba(255,255,255,.28)}
.rp-foot small{border-bottom-color:rgba(255,255,255,.3);color:var(--muted)}
.rp-foot b{color:var(--white)}


/* ============================================================
   WHEN TO CALL (v9): both columns end level; the five signs share the height equally
   ============================================================ */
@media (min-width:900px){
  html body .sec.wtc>.wrap.split{grid-template-rows:auto 1fr;align-items:stretch}
  html body .sec.wtc .signal-cta{align-self:end;margin-top:28px}
  html body .sec.wtc .signal,html body:has(.phero) .sec.wtc .signal{
    display:flex!important;flex-direction:column;padding-top:6px;
  }
  html body:has(.phero) .sec.wtc .signal>div,html body:has(.phero) .sec.wtc .signal>div:first-child,html body:has(.phero) .sec.wtc .signal>div:last-child:nth-child(odd){
    flex:1 1 0;padding-bottom:26px;align-items:flex-start;
  }
  html body:has(.phero) .sec.wtc .signal>div:last-child{padding-bottom:0;flex:0 0 auto}
}
html body:has(.phero) .sec.wtc .signal p{min-height:48px;display:flex;align-items:center;padding-top:0}

/* ============================================================
   SERVICE HERO (v9): factual strapline, a measured frame around the mark
   ============================================================ */
html body .phero .eyebrow{margin:0 0 16px}
html body .phero .phero-mark .stage{width:min(330px,82%)}
html body .phero .phero-mark .stage::before{
  inset:-30px -38px -30px -38px;
  background-size:38px 4px,4px 38px,38px 4px,4px 38px,38px 4px,4px 38px,38px 4px,4px 38px;
}
html body .phero .phero-mark .stage::after{
  content:"";position:absolute;left:-38px;right:-38px;bottom:-52px;height:12px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 1px,transparent 1px 14px),
             linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)) 0 0/100% 1px no-repeat;
}
html body .phero .phero-mark::after{
  display:block;content:"Field inspection  \00b7  Upstate SC";position:absolute;left:0;right:0;bottom:-6px;text-align:center;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
html body .phero-in{padding-bottom:70px}
html body .phero-band b{font-size:clamp(2.4rem,1.6rem + 2.4vw,3.6rem)}
html body .phero-band li{padding-top:26px;padding-bottom:28px}
@media (max-width:767px){
  html body .phero .phero-mark::after,html body .phero .phero-mark .stage::after{display:none}
  html body .phero-in{padding-bottom:26px}
  html body .phero .eyebrow{grid-column:1 / -1;grid-row:1;margin:0 0 10px}
  html body .phero h1{grid-row:2}
  html body .phero .phero-mark{grid-row:2}
  html body .phero .lede{grid-row:3}
  html body .phero .hero-actions{grid-row:4}
  html body .phero-band b{font-size:2.2rem}
}
@media (max-width:767px){
  html body .phero .phero-mark .stage::before{inset:-12px -14px -12px -14px;background-size:18px 3px,3px 18px,18px 3px,3px 18px,18px 3px,3px 18px,18px 3px,3px 18px}
  html body .phero .phero-mark{padding:12px 14px}
  html body .phero .eyebrow{font-size:.66rem;letter-spacing:.12em}
}

/* removed caption */
html body .phero .phero-mark::after{display:none!important}

/* when to call: the call card sits right under the intro */
@media (min-width:900px){
  html body .sec.wtc>.wrap.split{grid-template-rows:auto auto 1fr}
  html body .sec.wtc .sec-head{grid-row:1}
  html body .sec.wtc .signal-cta{grid-row:2;align-self:start;margin-top:4px}
  html body .sec.wtc .signal{grid-row:1 / span 3}
}

/* hero figures: four even tiles */
html body .phero-band{
  border-top:0;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr));padding-bottom:4px;
}
html body .phero-band li,html body .phero-band li+li{
  padding:20px 22px 22px;border:1px solid rgba(255,255,255,.22);border-left:1px solid rgba(255,255,255,.22);border-radius:14px;background:var(--panel);gap:8px;
  border-top:3px solid var(--lime);
}
html body .phero-band b{font-size:clamp(2.2rem,1.5rem + 2vw,3.2rem);color:var(--white)}
html body .phero-band b i{color:var(--lime)}
html body .phero-band span{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.35}
@media (max-width:767px){
  html body .phero-band{grid-template-columns:1fr 1fr;gap:10px}
  html body .phero-band li,html body .phero-band li+li,html body .phero-band li:nth-child(even),html body .phero-band li:nth-child(n+3){
    padding:14px 14px 16px;border:1px solid rgba(255,255,255,.22);border-top:3px solid var(--lime);border-radius:12px;
  }
  html body .phero-band b{font-size:2rem}
  html body .phero-band span{font-size:.66rem;letter-spacing:.1em}
}
@media (min-width:900px){html body .sec.wtc>.wrap.split{row-gap:0}}
/* no ruler lines under the hero logo */
html body .phero .phero-mark .stage::after{display:none!important}
/* hero stats sit higher, with room under them */
html body .phero-band{margin-bottom:60px}
@media (min-width:900px){html body .phero-in{padding-bottom:44px}}
@media (max-width:767px){html body .phero-band{margin-bottom:40px}}


/* ============================================================
   ABOUT OPENING (v2): a "Hello, my name is" badge and his own words
   ============================================================ */
.ahero{display:none}
.abt{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.abt .crumb{padding-top:18px}
.abt-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;padding-block:22px 56px;align-items:center}
.abt-badge{
  position:relative;width:100%;max-width:440px;border-radius:24px;overflow:hidden;
  background:var(--panel);border:1px solid rgba(255,255,255,.28);
  box-shadow:0 26px 50px -26px rgba(0,0,0,.9);
}
.abt-slot{position:absolute;z-index:2;left:50%;top:12px;width:54px;height:12px;margin-left:-27px;border-radius:999px;background:var(--ink);box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.abt-band{background:var(--lime);color:#0B0C0A;text-align:center;padding:36px 20px 18px}
.abt-band b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:3.4rem;line-height:.95}
.abt-band span{display:block;margin-top:6px;font-family:var(--mono);font-weight:500;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase}
.abt-name{padding:30px 24px 22px;text-align:center;position:relative}
.abt-name strong{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:.01em;font-size:clamp(3.2rem,2rem + 4vw,4.6rem);color:var(--white)}
.abt-name strong.g{color:var(--lime)}
.abt-name::after{content:"";display:block;width:70%;height:2px;margin:20px auto 0;background:rgba(255,255,255,.28)}
.abt-role{display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 20px 24px}
.abt-role img{width:22px;height:auto}
.abt-role span{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#D6DBCF}
.abt-facts{margin:22px 0 0;padding:0;max-width:440px}
.abt-facts>div{display:grid;grid-template-columns:8rem 1fr;gap:14px;padding:12px 0;border-top:1px solid rgba(255,255,255,.18);align-items:baseline}
.abt-facts>div:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.abt-facts dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.abt-facts dd{margin:0;font-size:1rem;font-weight:500;color:var(--white)}
.abt .eyebrow{margin:0 0 12px}
.abt h1{font-size:clamp(2.7rem,1.4rem + 4vw,4.3rem);line-height:.98;letter-spacing:-.01em}
.abt h1 em{display:block;color:var(--lime)}
.abt-quote{margin:24px 0 0;padding:0 0 0 18px;border-left:4px solid var(--lime);font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);line-height:1.3;text-transform:none;letter-spacing:.005em;color:var(--white);text-wrap:balance}
.abt-bio{margin:20px 0 0;max-width:60ch;color:#C4CABD;font-size:1.04rem;line-height:1.7;text-wrap:wrap}
.abt-chips{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.abt-chips li{padding:7px 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:.82rem;font-weight:500;color:#D6DBCF}
.abt .hero-actions{margin-top:26px}
@media (min-width:900px){
  .abt-grid{grid-template-columns:minmax(0,5fr) minmax(0,6.6fr);column-gap:clamp(48px,7vw,104px);padding-block:36px 84px}
  .abt-badge{transform:rotate(-2deg)}
  .abt-facts{margin-top:30px}
}
@media (max-width:767px){
  .abt-grid{gap:26px;padding-block:8px 36px}
  .abt-main{order:2}
  .abt-side{order:1}
  .abt-badge{max-width:none;border-radius:20px}
  .abt-band{padding:32px 16px 14px}
  .abt-band b{font-size:2.8rem}
  .abt-band span{font-size:.7rem}
  .abt-name{padding:22px 16px 16px}
  .abt-name strong{font-size:clamp(3rem,15vw,3.8rem)}
  .abt-name::after{margin-top:14px}
  .abt-role{padding:4px 16px 18px}
  .abt-role span{font-size:.7rem}
  .abt-facts{display:none}
  .abt h1{font-size:clamp(2.6rem,13vw,3.2rem)}
  .abt-quote{font-size:1.3rem;margin-top:20px}
  .abt-bio{font-size:.98rem;line-height:1.65;margin-top:16px}
  .abt-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .abt-chips li{text-align:center;padding:9px 8px;font-size:.78rem;border-radius:14px}
  .abt-chips li:first-child{grid-column:1 / -1}
  .abt .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .abt .hero-actions .btn{min-height:52px;width:100%}
}


/* ============================================================
   ABOUT OPENING (v3): his credential card. Fits a company that tests, certifies and shows its papers.
   ============================================================ */
.abt-badge,.abt-facts{display:none!important}
.abt-id{
  width:100%;max-width:450px;border-radius:18px;overflow:hidden;background:var(--panel);
  border:1px solid rgba(255,255,255,.26);
}
.id-top{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--lime);color:#0B0C0A}
.id-top img{width:20px;height:auto;filter:invert(1)}
.id-top b{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;line-height:1.1}
.id-top span{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;text-align:right}
.id-body{display:grid;grid-template-columns:116px minmax(0,1fr);gap:20px;padding:22px 20px 20px;align-items:center}
.id-photo{position:relative;aspect-ratio:4/5;border-radius:10px;border:1px dashed rgba(255,255,255,.34);background:var(--ink);display:grid;place-items:center;overflow:hidden}
.id-photo img{width:44%;height:auto;opacity:.22}
.id-photo small{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.id-who strong{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.9rem,1.5rem + 1.2vw,2.4rem);line-height:1;letter-spacing:.01em;color:var(--white)}
.id-who span{display:block;margin-top:8px;font-size:.92rem;color:#D6DBCF}
.id-who em{display:inline-block;margin-top:10px;font-style:normal;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.id-lic{margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.2)}
.id-lic>div{padding:16px 16px 18px;border-left:1px solid rgba(255,255,255,.14)}
.id-lic>div:first-child{border-left:0}
.id-lic dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.id-lic dd{margin:6px 0 0;font-size:.82rem;line-height:1.3;color:#D6DBCF}
.id-lic b{display:block;font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1;color:var(--lime);margin-bottom:4px}
.id-foot{margin:0;padding:12px 20px;border-top:1px solid rgba(255,255,255,.2);background:var(--ink);font-size:.82rem;color:#C4CABD}
@media (min-width:900px){.abt-id{transform:none}.abt-side{align-self:center}}
@media (max-width:767px){
  .abt-id{max-width:none}
  .id-top{padding:12px 16px}
  .id-top b{font-size:.95rem}
  .id-body{grid-template-columns:92px minmax(0,1fr);gap:16px;padding:18px 16px 16px}
  .id-who strong{font-size:1.9rem}
  .id-lic>div{padding:14px 12px 16px}
  .id-lic b{font-size:2rem}
  .id-foot{padding:11px 16px;font-size:.78rem}
}


/* ============================================================
   ABOUT OPENING (v4): a short greeting beside a large arched headshot frame
   ============================================================ */
.abt{display:none}
.abt2{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.abt2 .crumb{padding-top:18px}
.abt2-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;padding-block:22px 56px;align-items:center}
.abt2 .eyebrow{margin:0 0 14px}
.abt2 h1{font-size:clamp(3rem,1.6rem + 5vw,5rem);line-height:.96;letter-spacing:-.015em}
.abt2 h1 em{display:block;color:var(--lime)}
.abt2-role{margin:20px 0 0;font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);line-height:1.5}
.abt2-line{margin:14px 0 0;max-width:34ch;font-size:clamp(1.1rem,1rem + .5vw,1.3rem);line-height:1.5;color:#D6DBCF}
.abt2 .hero-actions{margin-top:28px}
.abt2-photo{margin:0;position:relative;justify-self:center;width:100%;max-width:400px}
.abt2-photo::before{content:"";position:absolute;inset:16px -16px -16px 16px;border:2px solid var(--lime);border-radius:200px 200px 26px 26px;opacity:.75}
.abt2-frame{
  position:relative;aspect-ratio:4/5;border-radius:200px 200px 26px 26px;overflow:hidden;
  background:var(--panel);border:1px solid rgba(255,255,255,.28);
}
.abt2-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.abt2-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;border:2px dashed rgba(255,255,255,.22);border-radius:inherit;margin:10px;inset:0}
.abt2-ph svg{width:44px;height:44px;stroke:var(--lime);margin-bottom:6px}
.abt2-ph b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:1.25rem}
.abt2-ph span{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (min-width:900px){
  .abt2-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(48px,7vw,104px);padding-block:40px 88px}
  .abt2-photo{justify-self:end;max-width:430px}
}
@media (max-width:767px){
  .abt2-grid{gap:26px;padding-block:6px 44px}
  .abt2 h1{font-size:clamp(2.9rem,14vw,3.6rem)}
  .abt2-copy{display:contents}
  .abt2 .eyebrow{order:1}
  .abt2-grid>*{min-width:0}
  .abt2-copy .eyebrow,.abt2-copy h1,.abt2-copy .abt2-role{grid-column:1}
  .abt2-photo{max-width:300px;margin-right:16px}
  .abt2-line{max-width:none}
  .abt2 .hero-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:6px}
  .abt2 .hero-actions .btn{min-height:52px;width:100%}
}
/* his words */
.abt2-storygrid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}
.abt2-quote{margin:0;padding:0 0 0 20px;border-left:4px solid var(--lime);font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,1.2rem + 2vw,2.7rem);line-height:1.2;text-transform:none;letter-spacing:.005em;color:var(--white);text-wrap:balance}
.abt2-bio p{margin:0 0 16px;max-width:58ch;color:#C4CABD;font-size:1.06rem;line-height:1.7}
.abt2-bio p:last-child{margin-bottom:0;color:var(--white);font-weight:500}
@media (min-width:900px){.abt2-storygrid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(48px,7vw,104px);align-items:center}}
@media (max-width:767px){.abt2-bio p{font-size:.98rem;line-height:1.65}}
@media (max-width:767px){
  .abt2 .eyebrow{order:1;margin-bottom:0}
  .abt2 h1{order:2}
  .abt2-role{order:3;margin-top:0}
  .abt2-photo{order:4}
  .abt2-line{order:5;margin-top:0}
  .abt2 .hero-actions{order:6}
  .abt2-grid{gap:16px}
  .abt2-photo{margin-top:12px;margin-bottom:12px}
}


/* About hero: square, rounded headshot frame, and one spore beside the headline */
.abt2-photo::before{border-radius:30px;inset:14px -14px -14px 14px}
.abt2-frame{aspect-ratio:1/1;border-radius:30px}
.abt2-photo{max-width:420px}
.abt2-grid{position:relative}
html body .abt2 .abt2-spore{display:block!important;z-index:1;pointer-events:none}
@media (min-width:900px){
  html body .abt2 .abt2-spore{top:calc(50% - 215px);right:auto;left:min(calc(50% - 20px),calc(var(--gut) + 480px));font-size:104px}
}
@media (max-width:767px){
  .abt2-photo{max-width:300px}
  html body .abt2 .abt2-spore{top:2px;right:var(--gut);left:auto;font-size:46px}
}
/* service pages, "What to expect": the spore sits level with the heading, above the steps */
@media (min-width:900px){
  html body .sec:has(.steps)>.wrap>.spore{font-size:84px;top:-36px}
}
/* corner brackets sit tighter around the hero logo */
html body .phero .phero-mark .stage::before{
  inset:-10px -14px -10px -14px;
  background-size:30px 4px,4px 30px,30px 4px,4px 30px,30px 4px,4px 30px,30px 4px,4px 30px;
}
@media (max-width:767px){
  html body .phero .phero-mark .stage::before{
    inset:-6px -8px -6px -8px;
    background-size:16px 3px,3px 16px,16px 3px,3px 16px,16px 3px,3px 16px,16px 3px,3px 16px;
  }
}
html body .phero .phero-mark .stage::before{inset:-6px 17% -4px 17%}
@media (max-width:767px){html body .phero .phero-mark .stage::before{inset:-4px 16% -3px 16%}}
html body .phero .phero-mark .stage::before{inset:-8px 11% -6px 11%}
@media (max-width:767px){html body .phero .phero-mark .stage::before{inset:-5px 11% -4px 11%}}
html body .phero .phero-mark .stage::before{inset:-8px 4% -6px 4%}
@media (max-width:767px){html body .phero .phero-mark .stage::before{inset:-5px 2% -4px 2%}}
/* hero logo frame: a square, centred on the mark */
html body .phero .phero-mark .stage::before{
  inset:auto;left:50%;top:-8px;width:auto;height:calc(100% + 16px);aspect-ratio:1/1;transform:translateX(-50%);
}
@media (max-width:767px){
  html body .phero .phero-mark .stage::before{top:-5px;height:calc(100% + 10px);left:50%;transform:translateX(-50%)}
  html body .phero .phero-mark{overflow:visible}
}


/* ============================================================
   ABOUT: "My word to you" (replaces the three-things section)
   ============================================================ */
#advice{display:none}
.word-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.word-feature{
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:clamp(24px,3vw,38px);border-radius:20px;
  background:var(--lime);color:#0B0C0A;
}
.word-kicker{margin:0;font-family:var(--mono);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.word-feature h3{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.3rem);line-height:1;letter-spacing:-.005em;text-wrap:balance}
.word-feature>p:not(.word-kicker){margin:0;max-width:44ch;font-size:1.08rem;line-height:1.6;font-weight:500}
.word-sign{display:flex;align-items:center;gap:14px;margin-top:6px}
.word-mono{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#0B0C0A;color:var(--lime);font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:.04em}
.word-sign p{margin:0;line-height:1.25}
.word-sign b{display:block;font-weight:600;font-size:1.05rem}
.word-sign small{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.word-feature .btn{background:#0B0C0A;color:#fff;margin-top:6px}
@media (hover:hover){.word-feature .btn:hover{background:var(--blue)}}
.word-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.word-cards article{
  display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2.4vw,26px);border-radius:18px;
  background:var(--panel);border:1px solid rgba(255,255,255,.22);
}
.word-cards article>span{font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.14em;color:var(--lime)}
.word-cards h3{font-size:clamp(1.25rem,1rem + .9vw,1.6rem);line-height:1.1}
.word-cards p{margin:0;font-size:.95rem;line-height:1.55;color:#C4CABD}
@media (min-width:900px){
  .word-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:18px;align-items:stretch}
}
@media (max-width:767px){
  .word-feature{padding:22px 20px;gap:14px;border-radius:18px}
  .word-feature h3{font-size:2.3rem}
  .word-feature .btn{width:100%}
  .word-cards{gap:10px}
  .word-cards article{padding:16px 14px;gap:8px;border-radius:16px}
  .word-cards h3{font-size:1.15rem}
  .word-cards p{font-size:.84rem;line-height:1.45}
}

/* ============================================================
   ABOUT HERO, phone: bigger spore, a name caption on the headshot, a fuller intro
   ============================================================ */
@media (max-width:767px){
  html body .abt2 .abt2-spore{top:62px;right:calc(var(--gut) - 6px);font-size:92px}
  .abt2-photo{max-width:320px;margin-bottom:34px}
  .abt2-photo::after{
    content:"Johnathan Hood  \00b7  Owner";position:absolute;z-index:3;left:50%;bottom:-18px;transform:translateX(-50%);white-space:nowrap;
    padding:10px 20px;border-radius:999px;background:var(--lime);color:#0B0C0A;
    font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;
  }
  .abt2-line{
    font-family:var(--display);font-weight:500;font-size:1.55rem;line-height:1.25;letter-spacing:.005em;text-transform:none;color:var(--white);
    padding:0 0 0 16px;border-left:4px solid var(--lime);text-wrap:balance;margin-top:4px;
  }
  .abt2 .hero-actions{grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
  .abt2 .hero-actions .btn{padding-inline:8px;font-size:.84rem;min-height:52px}
  .abt2 .hero-actions .btn svg{display:none}
}
@media (max-width:767px){html body .abt2 .abt2-spore{top:30px;right:-6px;font-size:84px}}

.abt2-stats{list-style:none;margin:0;padding:0}
@media (min-width:768px){.abt2-stats{display:none}.abt2-line b,.abt2-line span{display:inline}}
@media (max-width:767px){
  html body .abt2 .abt2-spore{top:34px;right:14px;left:auto;font-size:78px}
  .abt2-line{border-left:0;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;text-align:left;font-family:var(--body)}
  .abt2-line b{font-family:var(--display);font-weight:600;font-size:1.75rem;line-height:1.1;text-transform:uppercase;letter-spacing:.01em;color:var(--white)}
  .abt2-line span{font-size:1.05rem;line-height:1.5;color:#C4CABD;font-weight:400}
  .abt2-stats{order:6;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.22);border-radius:14px;background:var(--panel);overflow:hidden}
  .abt2-stats li{padding:14px 10px 14px 14px;display:flex;flex-direction:column;gap:2px}
  .abt2-stats li+li{border-left:1px solid rgba(255,255,255,.16)}
  .abt2-stats b{font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1;color:var(--lime)}
  .abt2-stats span{font-size:.74rem;line-height:1.25;color:#D6DBCF}
  .abt2 .hero-actions{order:7}
}
.abt2-stats{display:none!important}

/* ============================================================
   PHONE: test finder and "What we stand for", redone
   ============================================================ */
@media (max-width:767px){
  /* test finder: six even tiles, short labels only */
  html body #matcher .mx-opts{grid-template-columns:1fr 1fr;gap:10px}
  html body #matcher .mx-opts button{
    min-height:92px;padding:14px 12px;border-radius:16px;align-items:flex-start;justify-content:flex-end;gap:0;
    background:var(--panel);border:1px solid rgba(255,255,255,.26);
  }
  html body #matcher .mx-opts button b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:1.12rem;line-height:1.12}
  html body #matcher .mx-opts button span{display:none}
  html body #matcher .mx-opts--who{display:flex;flex-wrap:wrap;gap:10px}
  html body #matcher .mx-opts--who button{min-height:48px;padding:10px 18px;border-radius:999px;justify-content:center;align-items:center}
  html body #matcher .mx-opts--who button b{font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:0;font-size:.95rem}
  html body #matcher .mx-label{font-size:1.3rem;margin-bottom:14px}
  html body #matcher .sec-head .lede{display:none}
  html body #matcher .mx-step+.mx-step{margin-top:26px;padding-top:22px}

  /* what we stand for: four separate cards with room to breathe */
  html body #values .sec-head .lede{display:none}
  html body #values .promises{
    display:grid;grid-template-columns:1fr;gap:12px;background:none;border:0;border-radius:0;overflow:visible;
  }
  html body #values .promises::before{display:none}
  html body #values .promises li{
    display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;row-gap:4px;align-items:center;
    padding:20px 18px;background:var(--panel);border:1px solid rgba(255,255,255,.22);border-radius:16px;
  }
  html body #values .promise-ico{grid-row:1 / span 2;width:52px;height:52px;border-radius:14px;margin:0}
  html body #values .promise-ico svg{width:26px;height:26px}
  html body #values .promises h3{grid-column:2;margin:0;font-size:1.3rem;line-height:1.1;align-self:end}
  html body #values .promises p{grid-column:2;font-size:.98rem;line-height:1.5;align-self:start}
}


/* ============================================================
   PHONE (v2): test finder as a tool with icons; "What we stand for" as centred badges
   ============================================================ */
@media (max-width:767px){
  html body #matcher .mx{
    padding:18px 16px 20px;border:1px solid rgba(255,255,255,.26);border-radius:20px;background:var(--panel);
  }
  html body #matcher .mx-opts{gap:10px}
  html body #matcher .mx-opts button{
    min-height:118px;padding:14px 14px 14px;border-radius:16px;justify-content:space-between;align-items:flex-start;
    background:var(--ink);border:1px solid rgba(255,255,255,.24);position:relative;
  }
  html body #matcher .mx-opts button::before{
    content:"";width:40px;height:40px;border-radius:12px;background:rgba(118,249,9,.14) center/22px no-repeat;flex:none;
  }
  html body #matcher .mx-opts button b{font-size:1.05rem;line-height:1.15}
  html body #matcher .mx-opts--who button::before{display:none}
  html body #matcher .mx-opts button[aria-pressed="true"]{border-color:var(--lime);background:rgba(118,249,9,.1)}
  html body #matcher .mx-label{margin-bottom:14px}
  html body #matcher .mx-label i{background:var(--lime);color:#0B0C0A;box-shadow:none}
  html body #matcher .mx-out{margin-top:0;padding:18px;border-radius:16px}
  html body #matcher .mx-opts button[data-sit="smell"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376F909' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10a3 3 0 1 0-3-3'/%3E%3Cpath d='M3 12h14a3 3 0 1 1-3 3'/%3E%3Cpath d='M3 16h6'/%3E%3C/svg%3E")}
  html body #matcher .mx-opts button[data-sit="leak"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376F909' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z'/%3E%3C/svg%3E")}
  html body #matcher .mx-opts button[data-sit="sewage"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376F909' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9c2-2 4-2 6 0s4 2 6 0 4-2 6 0'/%3E%3Cpath d='M3 15c2-2 4-2 6 0s4 2 6 0 4-2 6 0'/%3E%3C/svg%3E")}
  html body #matcher .mx-opts button[data-sit="reno"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376F909' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l9-9'/%3E%3Cpath d='M12 6l4-3 5 5-3 4z'/%3E%3C/svg%3E")}
  html body #matcher .mx-opts button[data-sit="paint"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376F909' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20c0-3 2-4.5 4.5-4.5l1.5 1.5C10 19 8 20 4 20z'/%3E%3Cpath d='M10 15L20 4l-1-1L8.500 13.500'/%3E%3C/svg%3E")}
  html body #matcher .mx-opts button[data-sit="symptoms"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376F909' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c0-4 3-6 7-6s7 2 7 6'/%3E%3C/svg%3E")}

  html body #values .promises{grid-template-columns:1fr 1fr;gap:10px}
  html body #values .promises li{
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:22px 12px 20px;
    background:var(--panel);border:1px solid rgba(255,255,255,.24);border-radius:18px;
  }
  html body #values .promise-ico{grid-row:auto;width:56px;height:56px;border-radius:50%;margin:0;background:rgba(118,249,9,.14)}
  html body #values .promises li:nth-child(even) .promise-ico{background:rgba(118,249,9,.14)}
  html body #values .promises li:nth-child(even) .promise-ico svg{stroke:var(--lime)}
  html body #values .promise-ico svg{width:28px;height:28px}
  html body #values .promises h3{grid-column:auto;font-size:1.15rem;line-height:1.12;align-self:auto}
  html body #values .promises p{grid-column:auto;font-size:.88rem;line-height:1.45;align-self:auto;color:#C4CABD}
}

/* ============================================================
   PHONE (v3): fewer boxes. Both sections become clean, large typographic rows.
   ============================================================ */
@media (max-width:767px){
  /* ---------- test finder ---------- */
  html body #matcher .mx{padding:0;border:0;border-radius:0;background:none}
  html body #matcher .mx-label{font-size:1.15rem;margin:0 0 6px;color:var(--muted);font-family:var(--mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
  html body #matcher .mx-label i{display:none}
  html body #matcher .mx-opts{display:block}
  html body #matcher .mx-opts:not(.mx-opts--who) button{
    display:grid;grid-template-columns:minmax(0,1fr) 36px;column-gap:14px;align-items:center;width:100%;
    min-height:0;padding:20px 0;border:0;border-bottom:1px solid rgba(255,255,255,.2);border-radius:0;background:none;text-align:left;position:relative;
  }
  html body #matcher .mx-opts:not(.mx-opts--who) button:first-child{border-top:1px solid rgba(255,255,255,.2)}
  html body #matcher .mx-opts button::before{display:none}
  html body #matcher .mx-opts:not(.mx-opts--who) button b{
    grid-column:1;font-family:var(--display);font-weight:600;font-size:1.55rem;line-height:1.08;text-transform:uppercase;letter-spacing:.01em;color:var(--white);
  }
  html body #matcher .mx-opts:not(.mx-opts--who) button span{
    display:block;grid-column:1;margin-top:5px;font-size:.88rem;line-height:1.4;color:var(--muted);
  }
  html body #matcher .mx-opts:not(.mx-opts--who) button::after{
    content:"";grid-column:2;grid-row:1 / span 2;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--lime);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376F909' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12M13 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat;
  }
  html body #matcher .mx-opts:not(.mx-opts--who) button[aria-pressed="true"]{background:rgba(118,249,9,.07)}
  html body #matcher .mx-opts--who{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
  html body #matcher .mx-opts--who button{min-height:52px;padding:10px 20px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);background:none}
  html body #matcher .mx-opts--who button b{font-family:var(--body);font-size:1rem;font-weight:600;text-transform:none;letter-spacing:0}
  html body #matcher .mx-step+.mx-step{margin-top:30px;padding-top:0;border-top:0}
  html body #matcher .mx-step+.mx-step .mx-label{margin-bottom:14px}
  html body #matcher .mx-out{border-radius:18px}

  /* ---------- what we stand for ---------- */
  html body #values .promises{display:block}
  html body #values .promises li{
    display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:16px;row-gap:6px;align-items:start;text-align:left;
    padding:24px 0;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.2);border-radius:0;
  }
  html body #values .promises li:first-child{border-top:1px solid rgba(255,255,255,.2)}
  html body #values .promise-ico{
    grid-row:1 / span 2;width:34px;height:34px;border-radius:50%;margin:3px 0 0;background:var(--lime)!important;display:grid;place-items:center;
  }
  html body #values .promise-ico svg{display:none}
  html body #values .promise-ico::after{
    content:"";width:16px;height:16px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0C0A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.500l5 5L20 6.500'/%3E%3C/svg%3E") center/16px no-repeat;
  }
  html body #values .promises h3{grid-column:2;font-size:1.75rem;line-height:1.05;text-align:left;margin:0}
  html body #values .promises p{grid-column:2;font-size:1.02rem;line-height:1.55;text-align:left;color:#C4CABD;margin:0}
}

/* house info bar: the description sits in the middle of its half of the bar, vertically and horizontally */
@media (min-width:1000px){
  html body .scan-dock{align-items:stretch}
  html body .scan-dock .scan-finds{align-self:stretch;display:grid;padding:0 0 0 clamp(8px,2vw,28px)}
  html body .scan-dock .scan-item{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;height:100%}
  html body .scan-dock .scan-item p{margin:8px 0 14px}
}

/* ============================================================
   PHONE (v4), from your answers
   What we stand for: the single card with divider rows, compact, coloured icons.
   Test finder: short, tappable "chips" in a sentence, no descriptions, no boxes.
   ============================================================ */
@media (max-width:767px){
  /* ----- what we stand for ----- */
  html body #values .promises{
    display:block;position:relative;background:var(--panel);border:1px solid rgba(255,255,255,.24);border-radius:18px;overflow:hidden;
  }
  html body #values .promises::before{
    display:block;content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--lime) 0 68%,var(--blue) 68% 100%);
  }
  html body #values .promises li,html body #values .promises li:first-child{
    display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;text-align:left;
    padding:16px 16px;background:none;border:0;border-top:1px solid rgba(255,255,255,.14);border-radius:0;
  }
  html body #values .promises li:first-child{border-top:0;padding-top:20px}
  html body #values .promise-ico{
    grid-row:1 / span 2;width:44px;height:44px;border-radius:12px;margin:0;display:grid;place-items:center;background:rgba(118,249,9,.13)!important;
  }
  html body #values .promises li:nth-child(even) .promise-ico{background:rgba(6,104,254,.18)!important}
  html body #values .promise-ico::after{display:none}
  html body #values .promise-ico svg{display:block;width:22px;height:22px;stroke:var(--lime)}
  html body #values .promises li:nth-child(even) .promise-ico svg{stroke:var(--blue-2)}
  html body #values .promises h3{grid-column:2;font-size:1.1rem;line-height:1.15;margin:0;align-self:end}
  html body #values .promises p{grid-column:2;font-size:.88rem;line-height:1.45;margin:0;align-self:start;color:var(--muted)}

  /* ----- test finder ----- */
  html body #matcher .mx-label{
    display:block;margin:0 0 14px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.02em;
    font-size:1.5rem;line-height:1.1;color:var(--white);
  }
  html body #matcher .mx-label i{display:none}
  html body #matcher .mx-opts,html body #matcher .mx-opts--who{display:flex;flex-wrap:wrap;gap:10px;margin:0}
  html body #matcher .mx-opts:not(.mx-opts--who) button,html body #matcher .mx-opts--who button{
    display:inline-flex;flex-direction:row;align-items:center;gap:9px;width:auto;min-height:50px;
    padding:10px 18px 10px 12px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);background:none;text-align:left;
  }
  html body #matcher .mx-opts:not(.mx-opts--who) button::before{
    display:block;content:"";flex:none;width:28px;height:28px;border-radius:50%;background-color:rgba(118,249,9,.16);background-size:16px;background-position:center;background-repeat:no-repeat;
  }
  html body #matcher .mx-opts:not(.mx-opts--who) button::after{display:none}
  html body #matcher .mx-opts:not(.mx-opts--who) button span{display:none}
  html body #matcher .mx-opts:not(.mx-opts--who) button:first-child{border-top:1.5px solid rgba(255,255,255,.4)}
  html body #matcher .mx-opts button b,html body #matcher .mx-opts:not(.mx-opts--who) button b{
    font-family:var(--body);font-weight:600;font-size:.96rem;line-height:1.2;text-transform:none;letter-spacing:0;color:var(--white);
  }
  html body #matcher .mx-opts--who button{padding:10px 18px}
  html body #matcher .mx-opts button[aria-pressed="true"]{background:var(--lime);border-color:var(--lime)}
  html body #matcher .mx-opts button[aria-pressed="true"] b{color:#0B0C0A}
  html body #matcher .mx-step+.mx-step{margin-top:28px;padding-top:0;border-top:0}
}


/* ============================================================
   PHONE (v5): bold redesigns
   ============================================================ */
.mx-sel{display:none}
@media (max-width:767px){
  /* ----- test finder: a sentence with two big dropdowns ----- */
  html body #matcher .mx-step{display:none!important}
  html body #matcher .mx-sel{display:block}
  html body #matcher .mx-sel label{display:block;margin:0 0 8px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:1.45rem;line-height:1.1;color:var(--white)}
  html body #matcher .mx-sel select{
    width:100%;min-height:62px;margin:0 0 22px;padding:0 52px 0 18px;border:2px solid var(--lime);border-radius:14px;background-color:var(--panel);
    color:var(--white);font-family:var(--body);font-size:1.08rem;font-weight:500;appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376F909' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 16px center;background-size:22px;
  }
  html body #matcher .mx-sel select:disabled{opacity:.45;border-color:rgba(255,255,255,.3)}
  html body #matcher .mx-sel select:focus{outline:3px solid var(--blue-2);outline-offset:3px}

  /* ----- what we stand for: big outlined numerals ----- */
  html body #values .promises{display:block;background:none;border:0;border-radius:0;overflow:visible}
  html body #values .promises::before{display:none}
  html body #values .promises{counter-reset:pr}
  html body #values .promises li,html body #values .promises li:first-child{
    counter-increment:pr;display:grid;grid-template-columns:78px minmax(0,1fr);column-gap:10px;row-gap:4px;align-items:center;
    padding:20px 0;border:0;border-bottom:1px solid rgba(255,255,255,.16);background:none;
  }
  html body #values .promises li:first-child{border-top:1px solid rgba(255,255,255,.16)}
  html body #values .promise-ico{display:none!important}
  html body #values .promises li::before{
    content:counter(pr,decimal-leading-zero);grid-row:1 / span 2;font-family:var(--display);font-weight:700;font-size:3.6rem;line-height:1;
    color:transparent;-webkit-text-stroke:1.5px var(--lime);letter-spacing:.01em;
  }
  html body #values .promises h3{grid-column:2;font-size:1.45rem;line-height:1.08;align-self:end}
  html body #values .promises p{grid-column:2;font-size:.95rem;line-height:1.45;align-self:start;color:#C4CABD}
}


/* ============================================================
   WHAT WE STAND FOR: scoreboard of four numbers (every screen size)
   ============================================================ */
html body #values .sec-head .lede{display:block}
.scoreboard{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.scoreboard li{background:var(--panel);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:24px 20px 26px;display:flex;flex-direction:column;gap:12px}
.scoreboard b{font-family:var(--display);font-weight:700;font-size:clamp(3rem,2.2rem + 2vw,4.2rem);line-height:1;color:var(--lime);letter-spacing:.005em}
.scoreboard b i{font-style:normal;font-size:.42em;margin-left:5px;color:var(--white);letter-spacing:.06em}
.scoreboard span{font-size:1rem;line-height:1.5;color:#D6DBCF}
@media (max-width:899px){.scoreboard{grid-template-columns:1fr 1fr;gap:10px}}
@media (max-width:767px){
  .scoreboard li{padding:18px 14px 20px;border-radius:18px;gap:10px}
  .scoreboard b{font-size:2.9rem}
  .scoreboard span{font-size:.88rem;line-height:1.4}
}
@media (max-width:767px){html body .credstat-body h2{font-size:clamp(1.7rem,8vw,2.2rem)}}


/* ============================================================
   TEST FINDER (final): one clear tool, same on every screen size
   ============================================================ */
html body #matcher .mx{max-width:none;padding:clamp(18px,3vw,32px);background:var(--panel);border:1px solid rgba(255,255,255,.24);border-radius:22px}
html body #matcher .mx-sel{display:none!important}
html body #matcher .mx-step:not([hidden]){display:block!important}
html body #matcher .mx-top{display:flex;align-items:center;gap:16px;margin:0 0 22px}
html body #matcher .mx-top span{flex:none;font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
html body #matcher .mx-prog{flex:1;height:6px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
html body #matcher .mx-prog i{display:block;height:100%;width:50%;background:linear-gradient(90deg,var(--blue),var(--lime));border-radius:6px;transition:width .35s ease}
html body #matcher .mx-label{display:block;margin:0 0 16px;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.7rem,1.3rem + 1.6vw,2.3rem);line-height:1.05;color:var(--white)}
html body #matcher .mx-label i{display:none}
html body #matcher .mx-opts:not(.mx-opts--who){display:grid;grid-template-columns:1fr;gap:10px;margin:0}
html body #matcher .mx-opts:not(.mx-opts--who) button{
  display:grid;grid-template-columns:50px minmax(0,1fr) 22px;column-gap:14px;align-items:center;width:100%;min-height:76px;
  padding:13px 16px 13px 13px;border-radius:16px;border:1px solid rgba(255,255,255,.2);background:var(--ink);text-align:left;position:relative;
  transition:border-color .18s ease,background .18s ease,transform .15s ease;
}
html body #matcher .mx-opts:not(.mx-opts--who) button::before{
  content:"";grid-row:1 / span 2;width:50px;height:50px;border-radius:14px;background-color:rgba(255,255,255,.1);background-repeat:no-repeat;background-position:center;background-size:26px;
}
html body #matcher .mx-opts:not(.mx-opts--who) button::after{
  content:"";grid-column:3;grid-row:1 / span 2;width:22px;height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376F909' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/20px no-repeat;
}
html body #matcher .mx-opts:not(.mx-opts--who) button b{grid-column:2;grid-row:1;align-self:end;font-family:var(--body);font-weight:600;font-size:1.02rem;line-height:1.25;text-transform:none;letter-spacing:0;color:var(--white)}
html body #matcher .mx-opts:not(.mx-opts--who) button span{display:block;grid-column:2;grid-row:2;align-self:start;margin-top:2px;font-size:.82rem;line-height:1.35;color:var(--muted)}
@media (hover:hover){html body #matcher .mx-opts:not(.mx-opts--who) button:hover{border-color:var(--lime);transform:translateY(-2px)}}
html body #matcher .mx-opts button[aria-pressed="true"]{border-color:var(--lime);background:rgba(118,249,9,.09)}
html body #matcher .mx-opts--who{display:flex;flex-wrap:wrap;gap:10px;margin:0}
html body #matcher .mx-opts--who button{display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:54px;padding:12px 22px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);background:var(--ink)}
html body #matcher .mx-opts--who button b{font-family:var(--body);font-weight:600;font-size:1rem;text-transform:none;letter-spacing:0}
html body #matcher .mx-opts--who button::before,html body #matcher .mx-opts--who button::after{display:none}
@media (hover:hover){html body #matcher .mx-opts--who button:hover{border-color:var(--lime)}}
html body #matcher .mx-step+.mx-step{margin-top:28px;padding-top:24px;border-top:1px dashed rgba(255,255,255,.22)}
html body #matcher .mx-back{margin-top:16px}
html body #matcher .mx-out{margin:0;padding:clamp(18px,3vw,30px);border-radius:18px;border:1px solid rgba(118,249,9,.45);background:rgba(118,249,9,.06)}
@media (min-width:700px){html body #matcher .mx-opts:not(.mx-opts--who){grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){html body #matcher .mx-opts:not(.mx-opts--who){grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){
  html body #matcher .mx{padding:18px 14px 20px;border-radius:20px}
  html body #matcher .mx-opts:not(.mx-opts--who) button{min-height:72px;padding:12px 14px 12px 12px}
  html body #matcher .mx-opts--who button{flex:1 1 calc(50% - 5px);padding:12px 14px}
  html body #matcher .sec-head .lede{display:block}
  html body #matcher .mx-actions .btn{width:100%}
}
html body #matcher .mx-opts button[data-sit="smell"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10a3 3 0 1 0-3-3'/%3E%3Cpath d='M3 12h14a3 3 0 1 1-3 3'/%3E%3Cpath d='M3 16h6'/%3E%3C/svg%3E");background-color:#2d5a12}
html body #matcher .mx-opts button[data-sit="leak"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z'/%3E%3C/svg%3E");background-color:#0b4aa8}
html body #matcher .mx-opts button[data-sit="sewage"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9c2-2 4-2 6 0s4 2 6 0 4-2 6 0'/%3E%3Cpath d='M3 15c2-2 4-2 6 0s4 2 6 0 4-2 6 0'/%3E%3C/svg%3E");background-color:#0e6a5e}
html body #matcher .mx-opts button[data-sit="reno"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l9-9'/%3E%3Cpath d='M12 6l4-3 5 5-3 4z'/%3E%3C/svg%3E");background-color:#8a4a14}
html body #matcher .mx-opts button[data-sit="paint"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20c0-3 2-4.5 4.5-4.5l1.5 1.5C10 19 8 20 4 20z'/%3E%3Cpath d='M10 15L20 4l-1-1L8.500 13.500'/%3E%3C/svg%3E");background-color:#6d2f92}
html body #matcher .mx-opts button[data-sit="symptoms"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c0-4 3-6 7-6s7 2 7 6'/%3E%3C/svg%3E");background-color:#a07a10}


/* ============================================================
   TEST FINDER (human pass): no icon tiles, no gradient, no cards in cards.
   A plain, ruled list in the customer's own words, with the answer on the right.
   One accent colour. Small corner radii.
   ============================================================ */
html body #matcher .mx{padding:0;background:none;border:0;border-radius:0}
html body #matcher .mx-top{display:none}
html body #matcher .mx-label{display:flex;align-items:baseline;gap:12px;margin:0 0 6px;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);color:var(--white)}
html body #matcher .mx-label i{display:inline;background:none;box-shadow:none;width:auto;height:auto;color:var(--lime);font:700 1.1em/1 var(--display);font-style:normal}
html body #matcher .mx-label i::after{content:"."}
html body #matcher .mx-opts:not(.mx-opts--who){display:block}
html body #matcher .mx-opts:not(.mx-opts--who) button{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;width:100%;min-height:0;
  padding:18px 4px;border:0;border-bottom:1px solid rgba(255,255,255,.18);border-radius:0;background:none;transform:none;
}
html body #matcher .mx-opts:not(.mx-opts--who) button:first-child{border-top:1px solid rgba(255,255,255,.18)}
html body #matcher .mx-opts:not(.mx-opts--who) button::before,html body #matcher .mx-opts:not(.mx-opts--who) button::after{display:none}
html body #matcher .mx-opts:not(.mx-opts--who) button b{
  font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem);line-height:1.15;text-transform:none;letter-spacing:.005em;color:var(--white);text-align:left;
}
html body #matcher .mx-opts:not(.mx-opts--who) button span{
  display:block;flex:none;margin:0;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
html body #matcher .mx-opts:not(.mx-opts--who) button span::before{content:"\2192\00a0"}
@media (hover:hover){
  html body #matcher .mx-opts:not(.mx-opts--who) button:hover{background:rgba(255,255,255,.04);transform:none;border-color:rgba(255,255,255,.18)}
  html body #matcher .mx-opts:not(.mx-opts--who) button:hover span{color:var(--lime)}
}
html body #matcher .mx-opts:not(.mx-opts--who) button[aria-pressed="true"]{background:rgba(255,255,255,.05)}
html body #matcher .mx-opts:not(.mx-opts--who) button[aria-pressed="true"] b{color:var(--lime)}
html body #matcher .mx-opts:not(.mx-opts--who) button[aria-pressed="true"] span{color:var(--lime)}
html body #matcher .mx-opts--who{gap:8px}
html body #matcher .mx-opts--who button{border-radius:6px;border:1px solid rgba(255,255,255,.35);background:none;min-height:50px;padding:10px 18px}
html body #matcher .mx-opts--who button b{font-size:.98rem}
html body #matcher .mx-opts--who button[aria-pressed="true"]{border-color:var(--lime);background:var(--lime)}
html body #matcher .mx-opts--who button[aria-pressed="true"] b{color:#0B0C0A}
html body #matcher .mx-step+.mx-step{margin-top:36px;padding-top:0;border-top:0}
html body #matcher .mx-step+.mx-step .mx-label{margin-bottom:14px}
html body #matcher .mx-out{padding:4px 0 4px 22px;border:0;border-left:4px solid var(--lime);border-radius:0;background:none}
html body #matcher .mx-out h3{font-size:clamp(2.2rem,1.6rem + 2.4vw,3.4rem);line-height:1}
html body #matcher .mx-kicker{color:var(--muted)}
html body #matcher .mx-also{border:0;border-radius:0;padding:0;font-size:.95rem}
html body #matcher .mx-actions .btn{border-radius:6px}
@media (min-width:1000px){html body #matcher .mx{max-width:900px}}
@media (max-width:767px){
  html body #matcher .mx-opts:not(.mx-opts--who) button{flex-direction:column;align-items:flex-start;gap:5px;padding:16px 2px}
  html body #matcher .mx-opts:not(.mx-opts--who) button span{white-space:normal}
  html body #matcher .mx-opts--who button{flex:1 1 calc(50% - 4px);justify-content:flex-start}
  html body #matcher .mx-out{padding-left:16px}
}
html body #matcher .mx-opts:not(.mx-opts--who) button b,html body #matcher .mx-opts:not(.mx-opts--who) button span{align-self:flex-start;grid-column:auto;grid-row:auto}
@media (min-width:768px){html body #matcher .mx-opts:not(.mx-opts--who) button{flex-direction:row;align-items:baseline;justify-content:space-between}}


/* ============================================================
   TEST FINDER (v7): brand-true. Big numbered rows that fill solid lime when you
   point at them, and a solid lime answer block. Heading left, tool right on desktop.
   ============================================================ */
html body #matcher .mx-call{margin:22px 0 0;font-size:1rem;color:var(--muted)}
html body #matcher .mx-call a{color:var(--white);font-weight:600;text-decoration:underline;text-decoration-color:var(--lime);text-underline-offset:4px;text-decoration-thickness:2px;white-space:nowrap}
@media (min-width:1000px){
  html body #matcher>.wrap.matcher{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7.4fr);column-gap:clamp(48px,6vw,96px);align-items:start}
  html body #matcher .sec-head{grid-column:1;grid-row:1;position:sticky;top:calc(var(--head-h) + 28px);border:0!important;padding:0!important;margin:0!important;max-width:none}
  html body #matcher .mx{grid-column:2;grid-row:1;max-width:none}
  html body #matcher .mx-fallback{display:none}
}
html body #matcher .mx-label{margin:0 0 14px;font-size:1.05rem;letter-spacing:.12em;font-family:var(--mono);font-weight:500;text-transform:uppercase;color:var(--muted)}
html body #matcher .mx-label i{font:500 1em/1 var(--mono);color:var(--lime)}
html body #matcher .mx-label i::after{content:" /"}
html body #matcher .mx-opts:not(.mx-opts--who){counter-reset:sit;border-top:2px solid var(--white)}
html body #matcher #mx .mx-opts:not(.mx-opts--who) button{
  counter-increment:sit;display:grid;grid-template-columns:3rem minmax(0,1fr) 26px;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;
  width:100%;padding:20px 14px 20px 6px;border:0;border-bottom:1px solid rgba(255,255,255,.22);border-radius:0;background:none;text-align:left;
  transition:background .14s ease,color .14s ease,padding .18s ease;
}
html body #matcher #mx .mx-opts:not(.mx-opts--who) button::before{
  display:block;content:counter(sit,decimal-leading-zero);grid-column:1;grid-row:1 / span 2;width:auto;height:auto;background:none;border-radius:0;
  font:500 .85rem/1 var(--mono);letter-spacing:.08em;color:var(--lime);align-self:center;
}
html body #matcher #mx .mx-opts:not(.mx-opts--who) button b{
  grid-column:2;grid-row:1;align-self:end;justify-self:start;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.35rem,1.1rem + 1.2vw,2rem);line-height:1.08;color:var(--white);
}
html body #matcher #mx .mx-opts:not(.mx-opts--who) button span{
  grid-column:2;grid-row:2;align-self:start;justify-self:start;margin:0;font:500 .74rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:normal;
}
html body #matcher #mx .mx-opts:not(.mx-opts--who) button span::before{content:"Suggests  "}
html body #matcher #mx .mx-opts:not(.mx-opts--who) button::after{
  display:block;content:"";grid-column:3;grid-row:1 / span 2;width:26px;height:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376F909' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/26px no-repeat;
}
@media (hover:hover){
  html body #matcher #mx .mx-opts:not(.mx-opts--who) button:hover{background:var(--lime);padding-left:18px}
  html body #matcher #mx .mx-opts:not(.mx-opts--who) button:hover::before,html body #matcher #mx .mx-opts:not(.mx-opts--who) button:hover b,html body #matcher #mx .mx-opts:not(.mx-opts--who) button:hover span{color:#0B0C0A}
  html body #matcher #mx .mx-opts:not(.mx-opts--who) button:hover::after{filter:brightness(0)}
}
html body #matcher #mx .mx-opts:not(.mx-opts--who) button:active,html body #matcher #mx .mx-opts:not(.mx-opts--who) button[aria-pressed="true"]{background:var(--lime)}
html body #matcher #mx .mx-opts:not(.mx-opts--who) button:active::before,html body #matcher #mx .mx-opts:not(.mx-opts--who) button[aria-pressed="true"]::before,
html body #matcher #mx .mx-opts:not(.mx-opts--who) button:active b,html body #matcher #mx .mx-opts:not(.mx-opts--who) button[aria-pressed="true"] b,
html body #matcher #mx .mx-opts:not(.mx-opts--who) button:active span,html body #matcher #mx .mx-opts:not(.mx-opts--who) button[aria-pressed="true"] span{color:#0B0C0A}
html body #matcher #mx .mx-opts:not(.mx-opts--who) button:active::after,html body #matcher #mx .mx-opts:not(.mx-opts--who) button[aria-pressed="true"]::after{filter:brightness(0)}
/* step 2 */
html body #matcher .mx-step+.mx-step{margin-top:44px}
html body #matcher .mx-opts--who{gap:0;border:2px solid var(--white);border-radius:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
html body #matcher .mx-opts--who button{border:0;border-radius:0;border-right:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.3);margin:0 -1px -1px 0;min-height:60px;justify-content:flex-start;padding:14px 18px;background:none;flex:none}
html body #matcher .mx-opts--who button b{font:600 1rem/1.25 var(--body);color:var(--white)}
@media (hover:hover){html body #matcher .mx-opts--who button:hover{background:var(--lime)}html body #matcher .mx-opts--who button:hover b{color:#0B0C0A}}
html body #matcher .mx-opts--who button[aria-pressed="true"]{background:var(--lime)}
/* the answer */
html body #matcher .mx-out{padding:clamp(22px,3.4vw,40px);border:0;border-left:0;border-radius:0;background:var(--lime);color:#0B0C0A}
html body #matcher .mx-out *{color:#0B0C0A}
html body #matcher .mx-kicker{font:700 .74rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;opacity:.7}
html body #matcher .mx-out h3{font-size:clamp(2.4rem,1.8rem + 3vw,4rem);line-height:.98;text-transform:uppercase}
html body #matcher .mx-out>p{font-size:1.04rem;line-height:1.6;max-width:62ch}
html body #matcher .mx-get li{font-weight:500}
html body #matcher .mx-get li::before{border-color:#0B0C0A}
html body #matcher .mx-also a{color:#0B0C0A;text-decoration:underline;text-underline-offset:3px;font-weight:700}
html body #matcher .mx-also{border:0;padding:0}
html body #matcher .mx-actions .btn{border-radius:0}
html body #matcher .mx-actions .btn--lime{background:#0B0C0A;color:#fff!important;border-color:#0B0C0A}
html body #matcher .mx-actions .btn--ghost{background:none;border:2px solid #0B0C0A;color:#0B0C0A!important}
html body #matcher .mx-actions .btn--lime *,html body #matcher .mx-actions .btn--lime{color:#fff!important}
html body #matcher .mx-back{color:#0B0C0A;opacity:.75}
@media (max-width:767px){
  html body #matcher #mx .mx-opts:not(.mx-opts--who) button{grid-template-columns:2.5rem minmax(0,1fr) 22px;padding:18px 10px 18px 2px}
  html body #matcher #mx .mx-opts:not(.mx-opts--who) button b{font-size:1.4rem}
  html body #matcher .mx-opts--who{grid-template-columns:1fr}
  html body #matcher .mx-out{padding:22px 18px}
  html body #matcher .mx-actions .btn{width:100%}
}

/* TEST FINDER (v7b) color fixes */
html body #matcher .mx-back{color:rgba(255,255,255,.78)!important;opacity:1!important}
html body #matcher .mx-out .mx-back{color:#0B0C0A!important;opacity:.8!important}
html body #matcher .mx-out .mx-you,html body #matcher .mx-out p,html body #matcher .mx-out li{color:#0B0C0A!important}

/* TEST FINDER (v8) light, conversational */
html body #matcher .wrap.matcher{display:block!important;max-width:820px!important;text-align:center}
html body #matcher .sec-head{position:static!important;margin:0 auto 1.6rem!important;text-align:center}
html body #matcher .sec-head .eyebrow{justify-content:center}
html body #matcher .sec-head h2{margin-bottom:.4rem}
html body #matcher .mx-call{margin:.5rem 0 0!important;font-size:.95rem;color:var(--muted)}
html body #matcher .mx-call a{color:var(--lime);text-decoration:none;font-weight:600;white-space:nowrap}
html body #matcher #mx .mx-label{justify-content:center;text-align:center;font-family:var(--body);font-size:1.05rem;text-transform:none;letter-spacing:0;color:#fff;margin:0 0 1rem}
html body #matcher #mx .mx-label i{display:none}
html body #matcher #mx .mx-opts,html body #matcher #mx .mx-opts--who{display:flex!important;flex-wrap:wrap;justify-content:center;gap:.65rem;border:0!important;padding:0!important;background:none!important;counter-reset:none}
html body #matcher #mx .mx-opts button,html body #matcher #mx .mx-opts--who button{display:inline-flex!important;grid-template-columns:none!important;width:auto!important;min-height:48px;padding:.7rem 1.25rem!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:999px!important;background:transparent!important;color:#fff!important;text-align:center;transition:background .15s,border-color .15s,color .15s}
html body #matcher #mx .mx-opts button::before,html body #matcher #mx .mx-opts button::after{content:none!important;display:none!important}
html body #matcher #mx .mx-opts button b{font-family:var(--body)!important;font-size:1rem!important;font-weight:500!important;text-transform:none!important;letter-spacing:0!important;color:inherit!important;line-height:1.2}
html body #matcher #mx .mx-opts button span{display:none!important}
html body #matcher #mx .mx-opts button:hover,html body #matcher #mx .mx-opts button:focus-visible{border-color:var(--lime)!important;background:rgba(118,249,9,.1)!important}
html body #matcher #mx .mx-opts button:active,html body #matcher #mx .mx-opts button[aria-pressed="true"]{background:var(--lime)!important;border-color:var(--lime)!important;color:#0B0C0A!important}
html body #matcher #mx .mx-opts button:active b,html body #matcher #mx .mx-opts button[aria-pressed="true"] b{color:#0B0C0A!important}
html body #matcher .mx-back{display:inline-block;margin-top:1.2rem;background:none;border:0;color:var(--muted)!important;font:inherit;font-size:.9rem;text-decoration:underline;text-underline-offset:3px;min-height:44px;cursor:pointer}
/* result */
html body #matcher .mx-out{background:var(--panel)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:20px!important;padding:2rem 1.5rem!important;max-width:560px;margin:0 auto;text-align:center}
html body #matcher .mx-out *{color:inherit}
html body #matcher .mx-out .mx-kicker{color:var(--lime)!important;font-size:.8rem}
html body #matcher .mx-out h3{color:#fff!important;font-size:clamp(2rem,1.5rem+2vw,2.8rem)!important;margin:.3rem 0 .8rem}
html body #matcher .mx-out #mxWhy{color:rgba(255,255,255,.8)!important;font-size:1rem;margin:0 auto 1.4rem;max-width:44ch}
html body #matcher .mx-out #mxGet,html body #matcher .mx-out #mxAlso,html body #matcher .mx-out #mxYou{display:none!important}
html body #matcher .mx-out .mx-actions{display:flex;flex-direction:column;align-items:center;gap:.6rem}
html body #matcher .mx-out .btn--lime{background:var(--lime)!important;color:#0B0C0A!important;border-radius:999px!important;border:0!important}
html body #matcher .mx-out .btn--ghost{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:999px!important}
html body #matcher .mx-out .mx-back{color:var(--muted)!important;opacity:1!important;margin-top:.2rem}
@media (min-width:600px){html body #matcher .mx-out .mx-actions{flex-direction:row;flex-wrap:wrap;justify-content:center}html body #matcher .mx-out .mx-back{flex-basis:100%}}
@media (max-width:767px){html body #matcher #mx .mx-opts button{padding:.65rem 1rem!important}html body #matcher .mx-out{padding:1.6rem 1.2rem!important}}

/* TEST FINDER (v9) even sizing, bolder questions */
html body #matcher #mx .mx-label{font-family:var(--display)!important;font-weight:700!important;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)!important;text-transform:uppercase!important;letter-spacing:.02em!important;color:#fff!important;margin:0 0 1.1rem!important;line-height:1.1}
html body #matcher #mx .mx-step+.mx-step .mx-label,html body #matcher #mx #mxQ2 .mx-label{margin-top:.2rem!important}
html body #matcher #mx .mx-opts,html body #matcher #mx .mx-opts--who{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:.75rem!important;max-width:760px;margin:0 auto}
html body #matcher #mx .mx-opts button,html body #matcher #mx .mx-opts--who button{display:flex!important;align-items:center;justify-content:center;width:100%!important;min-height:64px!important;padding:.75rem 1rem!important;border-width:1.5px!important;border-radius:16px!important;font-family:var(--body)!important}
html body #matcher #mx .mx-opts button b{font-family:var(--body)!important;font-size:1rem!important;font-weight:600!important;line-height:1.25!important;text-align:center}
html body #matcher #mx .mx-opts--who{grid-template-columns:repeat(6,1fr)!important}
html body #matcher #mx .mx-opts--who button{grid-column:span 2}
html body #matcher #mx .mx-opts--who button:nth-child(4){grid-column:2/span 2}
html body #matcher #mx .mx-opts--who button:nth-child(5){grid-column:4/span 2}
html body #matcher .mx-back,html body #matcher .mx-out .mx-back{font-family:var(--body)!important;text-transform:none!important;letter-spacing:0!important;font-size:.95rem!important;font-weight:500}
html body #matcher .mx-out .mx-kicker{font-family:var(--mono)}
@media (max-width:767px){
html body #matcher #mx .mx-opts,html body #matcher #mx .mx-opts--who{grid-template-columns:1fr 1fr!important;gap:.6rem!important}
html body #matcher #mx .mx-opts--who button,html body #matcher #mx .mx-opts--who button:nth-child(4),html body #matcher #mx .mx-opts--who button:nth-child(5){grid-column:auto}
html body #matcher #mx .mx-opts--who button:nth-child(5){grid-column:1/-1}
html body #matcher #mx .mx-opts button{min-height:68px!important;padding:.6rem .7rem!important}
html body #matcher #mx .mx-opts button b{font-size:.97rem!important}
}

/* v9b */
html body #matcher #mx .mx-opts button{padding-top:.75rem!important;padding-bottom:.75rem!important;gap:0!important}
html body #matcher #mx .mx-opts button b{margin:0!important;padding:0!important;display:block!important;flex:0 1 auto!important;align-self:center!important}
html body #matcher #mx .mx-label{font-size:clamp(1.9rem,1.5rem + 1.6vw,2.6rem)!important;margin-bottom:1.3rem!important}
html body #matcher #mx #mxQ2{margin-top:2.2rem}

/* v9c bigger finder heading */
html body #matcher .sec-head h2{font-size:clamp(3.2rem,2.2rem + 4vw,5.2rem)!important;line-height:.98!important}
html body #matcher .sec-head h2 em{display:block}
html body #matcher #mx .mx-label{font-size:clamp(1.9rem,1.5rem + 1.2vw,2.4rem)!important}

/* ADDRESS CHECKER RESULT (v2) clear yes / not-sure */
html body .addrresult{margin:16px 0 0!important;padding:16px 16px 16px 64px!important;border:2px solid transparent!important;border-radius:14px;position:relative;font-size:1rem!important;line-height:1.5}
html body .addrresult:empty{display:none!important}
html body .addrresult::before{content:"";position:absolute;left:16px;top:16px;width:34px;height:34px;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:20px}
html body .addrresult[data-state="yes"]{background:var(--lime)!important;border-color:var(--lime)!important}
html body .addrresult[data-state="yes"]::before{background-color:#0B0C0A;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376F909' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E")}
html body .addrresult[data-state="yes"] b{color:#0B0C0A!important;font-size:1.3rem!important;line-height:1.15;margin-bottom:6px}
html body .addrresult[data-state="yes"] span,html body .addrresult[data-state="yes"] a{color:#0B0C0A!important}
html body .addrresult[data-state="unknown"]{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.35)!important}
html body .addrresult[data-state="unknown"]::before{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0C0A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18v.5'/%3E%3C/svg%3E")}
html body .addrresult[data-state="unknown"] b{color:#fff!important;font-size:1.2rem!important;line-height:1.2;margin-bottom:6px}
html body .addrresult[data-state="unknown"] span{color:rgba(255,255,255,.85)!important}
html body .addrresult[data-state="unknown"] a{color:var(--lime)!important}
@media (max-width:767px){html body .addrresult{padding:14px 14px 14px 56px!important}html body .addrresult::before{left:12px;top:14px;width:32px;height:32px}}

/* WHAT YOU CAN CHECK - mobile, one clear column */
@media (max-width:767px){
html body #proof .receipts{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;overflow:visible!important;padding:0!important;margin:0!important;scroll-snap-type:none!important}
html body #proof .receipt{display:grid!important;grid-template-columns:92px 1fr;column-gap:16px;row-gap:6px;align-items:start;width:auto!important;min-width:0!important;max-width:none!important;flex:none!important;padding:20px 18px!important}
html body #proof .receipt .receipt-n{grid-row:1/3;grid-column:1;align-self:start;margin:0!important;font-size:2.1rem!important;line-height:1;word-break:normal}
html body #proof .receipt h3{grid-column:2;margin:0!important}
html body #proof .receipt p{grid-column:2;margin:0 0 4px!important;font-size:.98rem!important;line-height:1.55}
html body #proof .receipt a{grid-column:2;margin-top:6px;min-height:44px;display:inline-flex;align-items:center;gap:8px;font-size:.78rem!important;letter-spacing:.08em}
html body #proof .proofline{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px!important}
html body #proof .proofline span{display:flex!important;flex-direction:column;align-items:center;text-align:center;border:1px solid var(--line);border-radius:14px;padding:14px 6px;font-size:.72rem;line-height:1.35;letter-spacing:.06em;white-space:normal}
html body #proof .proofline span b{display:block;font-family:var(--display);font-size:1.7rem;line-height:1;margin-bottom:6px}
}
@media (max-width:767px){
html body #proof .receipt{grid-template-columns:1fr!important;row-gap:4px}
html body #proof .receipt .receipt-n,html body #proof .receipt h3,html body #proof .receipt p,html body #proof .receipt a{grid-column:1!important;grid-row:auto!important}
html body #proof .receipt .receipt-n{font-size:2.6rem!important;margin-bottom:2px!important}
html body #proof .receipt h3{font-size:1.15rem!important;margin-bottom:6px!important}
}

/* WHAT YOU CAN CHECK - mobile tabs */
.proof-tabs{display:none}
@media (max-width:767px){
html body #proof .proof-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
html body #proof .proof-tabs button{min-height:48px;border:1.5px solid rgba(255,255,255,.22);border-radius:999px;background:transparent;color:#fff;font:600 .95rem/1 var(--body);cursor:pointer}
html body #proof .proof-tabs button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
html body #proof .receipts .receipt{display:none!important}
html body #proof .receipts .receipt.is-on{display:block!important;padding:24px 20px!important}
html body #proof .receipts .receipt .receipt-n{display:block;font-size:3.2rem!important;margin-bottom:6px!important}
html body #proof .receipts .receipt h3{font-size:1.3rem!important;margin:0 0 8px!important}
html body #proof .receipts .receipt p{font-size:1rem!important;margin:0 0 14px!important}
html body #proof .receipts .receipt a{margin-top:0}
}

/* WHAT YOU'LL GET (v9): one report sheet, same design on web and mobile */
html body .sec.wyg .deliver{display:grid!important;grid-template-columns:repeat(2,1fr);gap:0;padding:0!important;background:var(--panel)!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:20px!important;overflow:hidden;width:100%;max-width:none}
html body .sec.wyg .rp-head{grid-column:1/-1;display:flex!important;align-items:center;padding:20px 24px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.18)!important;background:rgba(255,255,255,.03)!important}
html body .sec.wyg .rp-head .rp-meta,html body .sec.wyg .rp-head .rp-cols{display:none!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot){display:flex!important;flex-direction:column;align-items:flex-start;gap:12px;min-height:0;padding:26px 24px 28px!important;border:0!important;border-radius:0!important;background:none!important;border-right:1px solid rgba(255,255,255,.14)!important;border-bottom:1px solid rgba(255,255,255,.14)!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot):nth-of-type(2n+1){border-right:0!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)::before{font-size:3rem!important;line-height:1;grid-row:auto!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot) b{font-size:1.05rem!important;line-height:1.4!important;grid-column:auto!important;grid-row:auto!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)::after{display:none!important}
html body .sec.wyg .rp-foot{grid-column:1/-1;display:grid!important;grid-template-columns:1fr 1fr!important;gap:16px!important;align-items:start!important;padding:18px 24px!important;border:0!important;border-radius:0!important;background:none!important}
html body .sec.wyg .rp-foot>div{margin:0!important;padding:0!important;border:0!important}
html body .sec.wyg .rp-foot small{display:block;margin:0 0 6px!important;padding:0!important;border:0!important}
html body .sec.wyg .rp-foot b{font-size:.95rem!important;line-height:1.3}
@media (min-width:900px){
html body .sec.wyg .deliver{grid-template-columns:repeat(4,1fr)}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot){padding:30px 24px 34px!important;border-bottom:0!important;border-right:1px solid rgba(255,255,255,.14)!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot):nth-of-type(2n+1){border-right:1px solid rgba(255,255,255,.14)!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot):nth-of-type(4){border-right:0!important}
html body .sec.wyg .rp-foot{border-top:1px solid rgba(255,255,255,.18)!important;padding:18px 24px!important}
html body .sec.wyg .rp-foot{grid-template-columns:auto auto!important;justify-content:start;column-gap:64px!important}
}
html body .sec.wyg .rp-brand{border:0!important;padding:0!important;margin:0!important;width:100%}
html body .sec.wyg .rp-head{padding:20px 24px!important}

/* CERTIFICATIONS (v10) tidy, left-aligned, one color system */
html body #credentials .credtabs-row{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:16px!important}
html body #credentials .credtab{position:relative;display:grid!important;grid-template-columns:1fr auto;grid-template-areas:"tag ico" "num num" "sub sub" "more more";align-items:start;justify-items:start;text-align:left!important;gap:0!important;padding:22px 22px 18px!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:18px!important;background:var(--panel)!important;color:#fff;cursor:pointer;min-height:0!important;transition:border-color .15s,background .15s}
html body #credentials .credtab::before,html body #credentials .credtab::after{display:none!important}
html body #credentials .credtab:hover,html body #credentials .credtab[aria-expanded="true"]{border-color:var(--lime)!important}
html body #credentials .credtab .credtag{grid-area:tag;background:none!important;padding:0!important;border:0!important;border-radius:0!important;color:var(--lime)!important;font:600 .8rem/1 var(--mono)!important;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}
html body #credentials .credtab .credtab-ico{grid-area:ico;position:static!important;width:24px;height:24px;margin:0!important;stroke:var(--lime)!important;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body #credentials .credtab .credtab-num{grid-area:num;font:700 clamp(3.6rem,3rem + 2vw,4.6rem)/.95 var(--display)!important;color:#fff!important;margin:0 0 8px}
html body #credentials .credtab small{grid-area:sub;font:400 .95rem/1.4 var(--body)!important;color:rgba(255,255,255,.72)!important;margin:0 0 18px}
html body #credentials .credtab .credtab-more{grid-area:more;display:flex;align-items:center;gap:8px;width:100%;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font:600 .8rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff}
html body #credentials .credtab .credtab-more svg{width:16px;height:16px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:2.2}
@media (max-width:767px){
html body #credentials .credtabs-row{grid-template-columns:1fr!important;gap:12px!important}
html body #credentials .credtab{grid-template-columns:auto 1fr auto;grid-template-areas:"num tag ico" "num sub sub" "more more more";column-gap:18px!important;padding:18px 18px 14px!important;align-items:center}
html body #credentials .credtab .credtag{margin:0 0 4px;align-self:end}
html body #credentials .credtab .credtab-num{font-size:3.4rem!important;margin:0;align-self:center;min-width:2ch}
html body #credentials .credtab small{margin:0 0 12px;align-self:start}
}
@media (max-width:767px){
html body #credentials .credtab small{display:block!important;font-size:.92rem!important;color:rgba(255,255,255,.75)!important}
html body #credentials .credtab .credtab-ico{display:block!important}
}

/* CERTIFICATIONS (v11) one connected stat bar, compact on every screen */
html body #credentials .credtabs-row{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:0!important;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:var(--panel);overflow:hidden}
html body #credentials .credtab{border:0!important;border-radius:0!important;background:none!important;border-right:1px solid rgba(255,255,255,.14)!important;padding:20px 22px 16px!important;grid-template-areas:"tag ico" "num num" "sub sub" "more more"!important;grid-template-columns:1fr auto!important;align-items:start!important;column-gap:0!important}
html body #credentials .credtab:last-child{border-right:0!important}
html body #credentials .credtab:hover,html body #credentials .credtab[aria-expanded="true"]{background:rgba(118,249,9,.07)!important;border-color:rgba(255,255,255,.14)!important}
html body #credentials .credtab .credtab-num{font-size:clamp(3rem,2.6rem + 1.4vw,3.8rem)!important;margin:0 0 6px!important;align-self:start!important;min-width:0!important}
html body #credentials .credtab .credtag{margin:0 0 10px!important;align-self:start!important}
html body #credentials .credtab small{margin:0 0 14px!important}
@media (max-width:767px){
html body #credentials .credtab{padding:14px 10px 12px!important;grid-template-columns:1fr!important;grid-template-areas:"tag" "num" "more"!important;justify-items:center!important;text-align:center!important}
html body #credentials .credtab .credtab-ico,html body #credentials .credtab small{display:none!important}
html body #credentials .credtab .credtag{font-size:.7rem!important;letter-spacing:.12em;margin:0 0 6px!important;justify-self:center}
html body #credentials .credtab .credtab-num{font-size:2.7rem!important;margin:0 0 6px!important;justify-self:center}
html body #credentials .credtab .credtab-more{justify-content:center;border-top:0!important;padding-top:0!important;font-size:.68rem!important;gap:4px;min-height:32px}
html body #credentials .credtab .credtab-more svg{margin-left:0!important}
}

/* WHAT YOU'LL GET (v10) compact cells */
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot){padding:18px 16px 20px!important;gap:8px!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)::before{font-size:2.2rem!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot) b{font-size:.96rem!important;line-height:1.35!important}
html body .sec.wyg .rp-head{padding:14px 16px!important}
html body .sec.wyg .rp-foot{padding:14px 16px!important}
@media (min-width:900px){
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot){padding:26px 24px 28px!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)::before{font-size:3rem!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot) b{font-size:1.05rem!important}
html body .sec.wyg .rp-head,html body .sec.wyg .rp-foot{padding:18px 24px!important}
}
@media (max-width:767px){html body .sec.wyg .rp-brand b{font-size:.95rem}html body .sec.wyg .rp-brand small{font-size:.62rem!important}}
@media (max-width:767px){
html body #credentials .credtab .credtab-more .credtab-open,html body #credentials .credtab .credtab-more .credtab-close{display:none!important}
html body #credentials .credtab .credtab-more svg{width:22px;height:22px}
html body .sec.wyg .rp-foot b{font-size:.86rem!important}
}

/* CERTIFICATIONS (v12) 24 ticks + plain legend, no boxes */
html body #credentials .pips{display:flex;gap:4px;margin:34px 0 6px;height:44px}
html body #credentials .pips i{flex:1;max-width:48px;border-radius:3px;transition:opacity .2s}
html body #credentials .pips .g1{background:#fff}
html body #credentials .pips .g2{background:var(--blue-2)}
html body #credentials .pips .g3{background:var(--lime)}
html body #credentials .pips[data-on] i:not(.g1):not(.g2):not(.g3){opacity:1}
html body #credentials .pips[data-on="g1"] i:not(.g1),html body #credentials .pips[data-on="g2"] i:not(.g2),html body #credentials .pips[data-on="g3"] i:not(.g3){opacity:.18}
html body #credentials .credtabs-row{display:flex!important;flex-wrap:wrap;gap:4px 34px!important;border:0!important;background:none!important;border-radius:0!important;overflow:visible!important;margin-top:8px}
html body #credentials .credtab{display:inline-flex!important;flex-direction:row;align-items:center;gap:10px!important;padding:8px 0!important;border:0!important;background:none!important;min-height:48px;grid-template-areas:none!important}
html body #credentials .credtab:hover,html body #credentials .credtab[aria-expanded="true"]{background:none!important}
html body #credentials .credtab .credtab-ico,html body #credentials .credtab small{display:none!important}
html body #credentials .credtab .credtab-num{order:1;font:700 2.4rem/1 var(--display)!important;margin:0!important;min-width:0!important}
html body #credentials .credtab .credtag{order:2;margin:0!important;color:#fff!important;font-size:.8rem!important}
html body #credentials .credtab .credtab-more{order:3;width:auto!important;border:0!important;padding:0!important;margin:0!important;display:inline-flex}
html body #credentials .credtab .credtab-more .credtab-open,html body #credentials .credtab .credtab-more .credtab-close{display:none!important}
html body #credentials .credtab .credtab-more svg{width:20px;height:20px;margin:0!important;transition:transform .2s}
html body #credentials .credtab[aria-expanded="true"] .credtab-more svg{transform:rotate(180deg)}
html body #credentials .credtab--lic .credtab-num{box-shadow:inset 0 -4px 0 #fff}
html body #credentials .credtab--epa .credtab-num{box-shadow:inset 0 -4px 0 var(--blue-2)}
html body #credentials .credtab--iicrc .credtab-num{box-shadow:inset 0 -4px 0 var(--lime)}
/* the opened list: flowing tags */
html body #credentials .credpanel{background:none!important;border:0!important;border-radius:0!important;padding:14px 0 0!important}
html body #credentials .credpanel-head{display:none!important}
html body #credentials .credlist-items{display:flex!important;flex-wrap:wrap;gap:8px!important;padding:0!important;margin:0!important;list-style:none;columns:auto!important}
html body #credentials .credlist-items li{display:inline-flex!important;align-items:center;gap:8px;width:auto!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:999px;padding:8px 14px!important;font-size:.92rem!important;line-height:1.25;background:none!important}
html body #credentials .credlist-items li svg{width:14px;height:14px;flex:none}
@media (max-width:767px){html body #credentials .pips{height:34px;gap:3px;margin-top:24px}html body #credentials .credtabs-row{gap:0 18px!important}html body #credentials .credtab .credtab-num{font-size:2rem!important}}
html body #credentials .pips{justify-content:space-between;height:60px;gap:0}
html body #credentials .pips i{flex:none;width:10px;max-width:none;border-radius:2px}
html body #credentials .credtab .credtab-num{box-shadow:none!important}
html body #credentials .credtab::before{content:"";display:block!important;width:10px;height:10px;border-radius:50%;background:#fff;position:static!important;border:0!important;flex:none;order:0;inset:auto!important;opacity:1!important;transform:none!important}
html body #credentials .credtab--epa::before{background:var(--blue-2)}
html body #credentials .credtab--iicrc::before{background:var(--lime)}
html body #credentials .credtab .credtag{align-self:center}
@media (max-width:767px){
html body #credentials .pips{height:44px}html body #credentials .pips i{width:8px}
html body #credentials .credtabs-row{display:grid!important;grid-template-columns:repeat(3,1fr);gap:0!important}
html body #credentials .credtab{flex-direction:column;justify-content:flex-start;gap:4px!important;padding:10px 0!important}
html body #credentials .credtab::before{display:none!important}
html body #credentials .credtab--lic .credtab-num{color:#fff!important}
html body #credentials .credtab--epa .credtab-num{color:var(--blue-2)!important}
html body #credentials .credtab--iicrc .credtab-num{color:var(--lime)!important}
html body #credentials .credtab .credtab-num{font-size:2.4rem!important}
}
html body #credentials .credtab::before{align-self:center}
@media (max-width:767px){html body #credentials .credtab{align-items:center!important}}

/* WHAT YOU'LL GET (v11) editorial run-in: no cells, no boxes */
html body .sec.wyg .deliver{display:block!important;background:none!important;border:0!important;border-radius:0!important;padding:0!important;overflow:visible!important;max-width:60ch;font-family:var(--body);font-size:clamp(1.3rem,1.05rem + 1.5vw,2.1rem);line-height:1.42;font-weight:500;color:rgba(255,255,255,.55)}
html body .sec.wyg .rp-head{display:flex!important;padding:0 0 22px!important;margin:0 0 26px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.18)!important;background:none!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot){display:inline!important;padding:0!important;border:0!important;background:none!important;min-height:0!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)>svg{display:none!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)::before{display:inline-block!important;vertical-align:.45em;margin-right:.4em;font:600 .42em/1 var(--mono)!important;letter-spacing:.08em;color:var(--lime)!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot) b{display:inline!important;font-size:inherit!important;font-weight:600!important;line-height:inherit!important;color:#fff!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)::after{display:inline!important;content:" "!important;padding:0!important;border:0!important;background:none!important}
html body .sec.wyg .rp-foot{display:flex!important;flex-wrap:wrap;gap:6px 36px!important;margin-top:30px;padding:18px 0 0!important;border:0!important;border-top:1px solid rgba(255,255,255,.18)!important;background:none!important}
html body .sec.wyg .rp-foot>div{padding:0!important;border:0!important}
html body .sec.wyg .rp-foot small{display:block;margin:0 0 4px!important}
html body .sec.wyg .rp-foot b{font-size:.95rem!important;color:#fff}
@media (min-width:900px){html body .sec.wyg .deliver{max-width:none;font-size:clamp(1.9rem,1.2rem + 1.6vw,2.6rem)}html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot){display:inline!important}html body .sec.wyg .rp-head,html body .sec.wyg .rp-foot{padding-left:0!important;padding-right:0!important}}
html body .sec.wyg .deliver>div,html body .sec.wyg .deliver>div:nth-of-type(n){border-right:0!important;border-bottom:0!important;border-left:0!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)::before{content:"+"!important;font:700 .9em/1 var(--display)!important;vertical-align:baseline;margin:0 .3em 0 0;color:var(--lime)!important;letter-spacing:0}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)::after{content:"\00a0\00a0"!important}
html body .sec.wyg .rp-foot>div{display:flex!important;flex-direction:column;gap:4px;margin:0!important}
html body .sec.wyg .rp-foot b{margin:0!important;padding:0!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot)::before{display:inline!important}
html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot),html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot) b,html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot):last-of-type,html body .sec.wyg .deliver>div:not(.rp-head):not(.rp-foot):nth-of-type(n){border:0!important;box-shadow:none!important;outline:0!important}

/* CERTIFICATIONS (v13) heading + bento, after the harbour/stat-card reference */
html body #credentials{position:relative;overflow:hidden}
html body #credentials::before{content:"";position:absolute;left:-200px;top:-160px;width:620px;height:620px;border-radius:50%;pointer-events:none;background:repeating-radial-gradient(circle,transparent 0 54px,rgba(118,249,9,.09) 55px 56px)}
html body #credentials>.wrap{position:relative}
html body #credentials .cert-head{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:28px}
html body #credentials .cert-head h2{margin:8px 0 0;font-size:clamp(2.4rem,1.8rem + 3vw,4rem);line-height:1}
html body #credentials .cert-head h2 em{font-style:normal;color:var(--lime)}
html body #credentials .cert-head h2 span{color:#fff}
html body #credentials .cert-head .lede{margin:0;max-width:46ch;font-size:1rem;color:rgba(255,255,255,.7)}
html body #credentials .cert-bento{display:grid;grid-template-columns:1fr;gap:12px}
html body #credentials .cc{position:relative;display:grid;grid-template-columns:1fr auto;align-content:start;gap:0 16px;padding:22px 20px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(255,255,255,.035)}
html body #credentials .cc-ring{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(118,249,9,.45);border-radius:50%}
html body #credentials .cc-ring svg{width:22px;height:22px;fill:none;stroke:var(--lime);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html body #credentials .cc-tag{grid-column:1;margin:0 0 6px;font:600 .75rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
html body #credentials .cc-num{grid-column:1;margin:0;font:700 clamp(3.6rem,3rem + 3vw,5.4rem)/.95 var(--display);color:#fff}
html body #credentials .cc-sub{grid-column:1/-1;margin:10px 0 0;max-width:34ch;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.7)}
html body #credentials .cc-more{grid-column:1/-1;margin-top:16px}
html body #credentials .cc-more summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px 0 0;font:600 .78rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;cursor:pointer;list-style:none}
html body #credentials .cc-more summary::-webkit-details-marker{display:none}
html body #credentials .cc-more summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--lime);border-bottom:2px solid var(--lime);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
html body #credentials .cc-more[open] summary::after{transform:rotate(-135deg)}
html body #credentials .cc-list{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
html body #credentials .cc-list li{padding:7px 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;font-size:.88rem;line-height:1.25;color:#fff}
html body #credentials .lic-note{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:.9rem;color:rgba(255,255,255,.62);max-width:none}
html body #credentials .lic-note a{color:var(--lime);margin-left:6px;white-space:nowrap}
@media (min-width:768px){
html body #credentials .cert-head{grid-template-columns:1.25fr 1fr;align-items:end;gap:48px;margin-bottom:40px}
html body #credentials .cert-bento{grid-template-columns:repeat(12,1fr);gap:16px}
html body #credentials .cc{padding:28px 28px 26px}
html body #credentials .cc--iicrc{grid-column:1/8;grid-row:1/3}
html body #credentials .cc--lic{grid-column:8/13}
html body #credentials .cc--epa{grid-column:8/13}
html body #credentials .cc-more summary{display:none}
html body #credentials .cc-more{margin-top:14px}
html body #credentials .cc--iicrc .cc-num{font-size:clamp(5rem,4rem + 4vw,7.5rem)}
}
@media (max-width:767px){
html body #credentials .cc{grid-template-columns:auto 1fr;align-items:center;padding:16px 16px 6px}
html body #credentials .cc-tag{grid-column:1/-1;margin:0 0 4px}
html body #credentials .cc-num{grid-column:1;font-size:3.6rem;padding-right:4px}
html body #credentials .cc-sub{grid-column:2;margin:0;font-size:.9rem;max-width:none}
html body #credentials .cc-ring{width:40px;height:40px;top:14px;right:14px}
html body #credentials .cc-ring svg{width:18px;height:18px}
html body #credentials .cc-more{margin-top:6px}
}
@media (min-width:768px){
html body #credentials .cc--iicrc .cc-list{gap:12px;margin-top:22px}
html body #credentials .cc--iicrc .cc-list li{padding:11px 18px;font-size:1rem}
html body #credentials .cc--iicrc .cc-sub{font-size:1.05rem;max-width:36ch}
}
html body #credentials .cc-sub{padding-right:52px}
@media (min-width:768px){html body #credentials .cc-sub{padding-right:0}}

/* WHAT YOU'LL GET (v12) intro + dashed timeline, after the "simple process" reference */
html body .sec.wyg>.wrap.wy2{display:grid!important;grid-template-columns:1fr!important;gap:28px}
html body .sec.wyg .wy2-intro .sec-head{margin:0 0 20px!important;padding:0!important}
html body .sec.wyg .wy2-intro .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid rgba(118,249,9,.55);border-radius:999px;font-size:.72rem}
html body .sec.wyg .wy2-intro .eyebrow::before{display:none}
html body .sec.wyg .wy2-intro h2{margin:14px 0 12px}
html body .sec.wyg .wy2-intro .lede{margin:0;max-width:44ch}
html body .sec.wyg .wy2-intro .btn{margin:4px 0 0}
html body .sec.wyg .wy2-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0 0;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.14)}
html body .sec.wyg .wy2-facts dt{margin:0 0 4px;font:500 .68rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
html body .sec.wyg .wy2-facts dd{margin:0;font-size:.92rem;line-height:1.35;color:#fff;font-weight:500}
html body .sec.wyg .wy2-steps{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:12px}
html body .sec.wyg .wy2-steps::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;border-left:1.5px dashed rgba(118,249,9,.5)}
html body .sec.wyg .wy2-steps li{position:relative;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
html body .sec.wyg .wy-node{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--lime);color:#0B0C0A;font:700 .95rem/1 var(--display);letter-spacing:.02em}
html body .sec.wyg .wy2-steps li:not(:first-child) .wy-node{background:#0b0c0a;color:var(--lime);border:1.5px solid var(--lime)}
html body .sec.wyg .wy-card{padding:16px 18px 18px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.035)}
html body .sec.wyg .wy-lab{margin:0 0 6px;font:600 .68rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
html body .sec.wyg .wy-txt{margin:0;font-size:1.08rem;line-height:1.4;font-weight:600;color:#fff}
@media (min-width:900px){
html body .sec.wyg>.wrap.wy2{grid-template-columns:minmax(0,5fr) minmax(0,6fr)!important;gap:clamp(48px,7vw,110px);align-items:start}
html body .sec.wyg .wy2-intro{position:sticky;top:110px}
html body .sec.wyg .wy2-steps{gap:16px}
html body .sec.wyg .wy2-steps::before{left:23px}
html body .sec.wyg .wy2-steps li{grid-template-columns:48px 1fr;gap:20px}
html body .sec.wyg .wy-node{width:48px;height:48px;font-size:1.05rem}
html body .sec.wyg .wy-card{padding:24px 26px 26px;border-radius:22px}
html body .sec.wyg .wy-txt{font-size:1.25rem}
}

/* ABOUT HERO (v3) light rounded panel, centered, after the "Meet the Professional Mentor" reference */
html body .abt3{padding:12px 0 40px}
html body .abt3 .crumb{margin:0 0 14px}
html body .abt3-panel{position:relative;overflow:hidden;text-align:center;padding:36px 18px 34px;border-radius:30px;background:#F1F2EC;color:#0B0C0A}
html body .abt3-pill{display:inline-block;margin:0 0 16px;padding:7px 14px;border:1.5px solid #0B0C0A;border-radius:999px;font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#0B0C0A}
html body .abt3 h1{margin:0;font-size:clamp(3rem,2.2rem + 5vw,6.2rem);line-height:.95;color:#0B0C0A;text-transform:uppercase}
html body .abt3 h1 em{display:block;font-style:normal;color:#0B0C0A;background:linear-gradient(transparent 62%,var(--lime) 62% 92%,transparent 92%);width:fit-content;margin:0 auto}
html body .abt3-role{margin:14px auto 0;max-width:34ch;font-size:1rem;line-height:1.45;color:#3b3f36}
html body .abt3-stage{position:relative;margin:26px auto 0;width:min(100%,520px);aspect-ratio:1/.92}
html body .abt3-disc{position:absolute;left:50%;top:50%;width:84%;aspect-ratio:1;transform:translate(-50%,-46%);border-radius:50%;background:var(--lime)}
html body .abt3-photo{position:absolute;left:50%;top:50%;margin:0;width:56%;aspect-ratio:1;transform:translate(-50%,-52%)}
html body .abt3-frame{position:relative;width:100%;height:100%;overflow:hidden;border-radius:26px;background:#0B0C0A;box-shadow:0 18px 40px rgba(0,0,0,.25)}
html body .abt3-frame img{width:100%;height:100%;object-fit:cover;display:block}
html body .abt3-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px;text-align:center;color:#fff}
html body .abt3-ph svg{width:34px;height:34px;color:var(--lime)}
html body .abt3-ph b{font:600 .9rem/1.2 var(--body)}
html body .abt3-ph span{font-size:.75rem;color:rgba(255,255,255,.7)}
html body .abt3-spore{position:absolute!important;display:block!important;top:2%!important;right:4%!important;left:auto!important;width:76px!important;height:auto!important;z-index:3;pointer-events:none}
html body .abt3-spore img{width:100%;height:auto}
html body .abt3-card{position:absolute;z-index:4;margin:0;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);box-shadow:0 10px 28px rgba(0,0,0,.16);text-align:left;color:#0B0C0A}
html body .abt3-card--quote{left:0;bottom:2%;max-width:56%}
html body .abt3-card--quote>span{display:block;font:700 2rem/.6 var(--display);color:#0B0C0A;height:14px}
html body .abt3-card--quote p{margin:6px 0 0;font-size:.74rem;line-height:1.4;color:#2b2f27}
html body .abt3-card--rate{right:0;bottom:12%;display:grid;gap:2px;justify-items:start}
html body .abt3-card--rate b{font:700 1.5rem/1 var(--display)}
html body .abt3-card--rate span{font-size:.7rem;letter-spacing:.1em;color:#0B0C0A}
html body .abt3-card--rate small{font-size:.68rem;color:#3b3f36}
html body .abt3-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;margin:22px auto 0;max-width:340px}
html body .abt3-actions .btn{justify-content:center;border-radius:999px}
html body .abt3-actions .btn--blue{background:#0B0C0A;color:#fff;border-color:#0B0C0A}
html body .abt3-actions .btn--ghost{background:#fff;color:#0B0C0A;border:1.5px solid #0B0C0A}
@media (min-width:768px){
html body .abt3-panel{padding:56px 40px 48px;border-radius:44px}
html body .abt3-stage{width:min(100%,640px);margin-top:34px}
html body .abt3-photo{width:50%}
html body .abt3-spore{width:110px!important}
html body .abt3-card{padding:16px 18px;border-radius:20px}
html body .abt3-card--quote{max-width:46%;left:-4%}
html body .abt3-card--quote p{font-size:.9rem}
html body .abt3-card--rate{right:-2%}
html body .abt3-card--rate b{font-size:2rem}
html body .abt3-actions{flex-direction:row;justify-content:center;max-width:none}
html body .abt3-actions .btn{min-width:230px}
}
html body .abt3 h1 em{background:none!important;width:auto}
@media (max-width:767px){
html body .abt3-stage{aspect-ratio:1/1.08;margin-top:20px}
html body .abt3-disc{width:92%;transform:translate(-50%,-56%)}
html body .abt3-photo{width:60%;transform:translate(-50%,-62%)}
html body .abt3-card--rate{left:0;right:auto;top:6%;bottom:auto}
html body .abt3-card--quote{left:3%;right:3%;max-width:none;bottom:0}
html body .abt3-spore{width:64px!important;top:2%!important;right:2%!important}
}

/* ABOUT HERO (v3b) dark panel, no white */
html body .abt3-panel{background:var(--panel)!important;color:#fff!important;border:1px solid rgba(255,255,255,.1)}
html body .abt3-pill{border-color:rgba(118,249,9,.6)!important;color:var(--lime)!important}
html body .abt3 h1,html body .abt3 h1 em{color:#fff!important}
html body .abt3 h1 em{color:var(--lime)!important}
html body .abt3-role{color:rgba(255,255,255,.75)!important}
html body .abt3-frame{box-shadow:0 18px 40px rgba(0,0,0,.45)}
html body .abt3-card{background:rgba(12,13,11,.82)!important;border:1px solid rgba(255,255,255,.14);color:#fff!important;box-shadow:0 10px 28px rgba(0,0,0,.4)}
html body .abt3-card--quote>span,html body .abt3-card--rate b{color:var(--lime)!important}
html body .abt3-card--quote p{color:rgba(255,255,255,.88)!important}
html body .abt3-card--rate span{color:var(--lime)!important}
html body .abt3-card--rate small{color:rgba(255,255,255,.7)!important}
html body .abt3-actions .btn--blue{background:var(--lime)!important;color:#0B0C0A!important;border-color:var(--lime)!important}
html body .abt3-actions .btn--ghost{background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.55)!important}

/* SPORES (web): one consistent, clearly visible size, kept clear of text */
@media (min-width:900px){
html body .sec>.wrap>.spore.spore{font-size:120px!important;top:-18px!important}
html body #credentials .cert-head{padding-right:150px}
}

/* WHAT YOU CAN CHECK (web) bigger, calmer cards + stat row */
@media (min-width:768px){
html body #proof .sec-head{margin-bottom:44px!important}
html body #proof .sec-head h2{font-size:clamp(3rem,2.2rem + 2.4vw,4.6rem)}
html body #proof .receipts{display:grid!important;grid-template-columns:1.25fr 1fr 1fr!important;gap:20px!important}
html body #proof .receipt{position:relative;display:flex!important;flex-direction:column;padding:38px 34px 30px!important;min-height:380px;border:1px solid rgba(255,255,255,.12)!important;border-top:1px solid rgba(255,255,255,.12)!important;border-radius:26px!important;background:rgba(255,255,255,.035)!important;box-shadow:none!important}
html body #proof .receipt::before{display:none!important}
html body #proof .receipt::after{content:"";position:absolute;top:26px;right:26px;width:56px;height:56px;border:1px solid rgba(62,139,255,.5);border-radius:50%}
html body #proof .receipt .receipt-n{font-size:clamp(4.6rem,3.6rem + 3vw,6.6rem)!important;line-height:.95!important;margin:0 0 18px!important}
html body #proof .receipt .receipt-n i{font-size:.32em;margin-left:.15em}
html body #proof .receipt h3{font-size:1.5rem!important;margin:0 0 12px!important}
html body #proof .receipt p{font-size:1.02rem!important;line-height:1.6!important;color:rgba(255,255,255,.72)!important;margin:0 0 28px!important;max-width:34ch}
html body #proof .receipt a{margin-top:auto!important;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:space-between;font-size:.82rem!important;letter-spacing:.1em}
html body #proof .proofline{display:grid!important;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px!important;padding-top:30px;border-top:1px solid rgba(255,255,255,.14)}
html body #proof .proofline span{display:flex!important;align-items:baseline;gap:14px;font:500 .85rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);border:0!important;padding:0!important}
html body #proof .proofline span b{font:700 clamp(2.4rem,1.8rem + 1.6vw,3.4rem)/1 var(--display);color:var(--blue-2);letter-spacing:0}
}
@media (min-width:768px){
html body #proof .sec-head h2{font-size:clamp(2.6rem,2rem + 1.8vw,3.6rem)}
html body #proof .receipts{grid-template-columns:repeat(3,1fr)!important}
html body #proof .receipt{min-height:360px}
html body #proof .receipt::after{width:44px;height:44px;top:24px;right:24px}
html body #proof .receipt .receipt-n{font-size:clamp(3.4rem,2.6rem + 2vw,4.8rem)!important;white-space:nowrap;margin:44px 0 16px!important}
html body #proof .receipt a{width:100%;align-self:stretch}
}

/* ABOUT HERO (web) wider composition: one-line headline, big disc, cards at the edges */
@media (min-width:900px){
html body .abt3-panel{padding:52px 48px 46px;background:radial-gradient(circle at 50% 74%,transparent 0 250px,rgba(118,249,9,.07) 251px 252px,transparent 253px 330px,rgba(118,249,9,.06) 331px 332px,transparent 333px 410px,rgba(118,249,9,.05) 411px 412px,transparent 413px),var(--panel)!important}
html body .abt3 h1{font-size:clamp(4.6rem,2.6rem + 4.4vw,7rem);white-space:nowrap}
html body .abt3 h1 em{display:inline;margin:0}
html body .abt3-role{max-width:none;font-size:1.15rem;margin-top:16px}
html body .abt3-stage{width:100%;max-width:none;aspect-ratio:auto;height:500px;margin-top:30px}
html body .abt3-disc{width:470px;height:470px;aspect-ratio:auto;top:auto;bottom:0;transform:translateX(-50%)}
html body .abt3-photo{width:300px;top:auto;bottom:70px;transform:translateX(-50%)}
html body .abt3-spore{width:130px!important;top:6%!important;right:auto!important;left:calc(50% + 150px)!important}
html body .abt3-card--quote{left:5%;bottom:auto;top:44%;max-width:300px;padding:20px 22px}
html body .abt3-card--quote>span{font-size:3rem;height:22px}
html body .abt3-card--quote p{font-size:1rem;margin-top:10px}
html body .abt3-card--rate{right:5%;bottom:auto;top:30%;padding:18px 22px}
html body .abt3-card--rate b{font-size:2.6rem}
html body .abt3-card--rate span{font-size:.9rem}
html body .abt3-card--rate small{font-size:.8rem}
html body .abt3-actions{margin-top:26px}
}
@media (min-width:900px){html body .abt3-card--quote{left:3%;max-width:270px}}

/* SERVICE HERO (v5) rounded logo panel, pill eyebrow, plain stat strip. Same system as the About hero. */
html body .phero{background:none!important}
html body .phero::before,html body .phero::after{display:none!important}
html body .phero .eyebrow{display:inline-flex;align-items:center;margin:0 0 16px!important;padding:7px 14px;border:1px solid rgba(118,249,9,.55);border-radius:999px;font-size:.72rem!important;letter-spacing:.14em}
html body .phero .eyebrow::before{display:none!important}
html body .phero .phero-mark{position:relative;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:radial-gradient(circle at 50% 52%,transparent 0 22%,rgba(118,249,9,.09) 22.4% 22.9%,transparent 23.3% 36%,rgba(118,249,9,.07) 36.4% 36.9%,transparent 37.3% 50%,rgba(118,249,9,.05) 50.4% 50.9%,transparent 51.3%),var(--panel);overflow:hidden}
html body .phero .phero-mark .stage::before{display:none!important}
html body .phero .phero-band{display:grid!important;grid-template-columns:repeat(4,1fr);gap:0;margin:0!important;padding:0!important;list-style:none;background:none!important;border:0!important;border-top:1px solid rgba(255,255,255,.14)!important;border-radius:0!important}
html body .phero .phero-band li{display:flex!important;flex-direction:column;gap:6px;padding:22px 22px 24px 0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important}
html body .phero .phero-band li::before,html body .phero .phero-band li::after{display:none!important}
html body .phero .phero-band li+li{padding-left:22px!important;border-left:1px solid rgba(255,255,255,.14)!important}
html body .phero .phero-band b{font:700 clamp(1.9rem,1.5rem + 1.4vw,2.6rem)/1 var(--display)!important;color:#fff!important;letter-spacing:0}
html body .phero .phero-band b i{font-style:normal;font-size:.5em;margin-left:5px;color:var(--lime)}
html body .phero .phero-band span{font:500 .72rem/1.35 var(--mono)!important;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65)!important}
@media (min-width:900px){
html body .phero-in{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;gap:clamp(40px,6vw,88px)!important;align-items:center!important;padding-block:28px 52px!important}
html body .phero .phero-mark{aspect-ratio:1/1;width:100%;max-width:440px;justify-self:end}
html body .phero .phero-mark .stage{width:52%!important;--orb:1}
html body .phero h1{font-size:clamp(3.6rem,2.4rem + 3.4vw,5.6rem)!important;line-height:.95!important}
html body .phero .lede{font-size:1.15rem!important;max-width:48ch}
}
@media (max-width:899px) and (min-width:768px){
html body .phero-in{display:grid!important;grid-template-columns:1fr!important;gap:24px!important}
html body .phero .phero-mark{height:200px}
html body .phero .phero-mark .stage{width:110px!important;--orb:.5}
}
@media (max-width:767px){
html body .phero-in{display:flex!important;flex-direction:column;gap:0!important;padding-block:6px 30px!important}
html body .phero .phero-copy{display:contents!important}
html body .phero .eyebrow{order:1;align-self:flex-start;grid-column:auto!important;font-size:.64rem!important;padding:6px 12px}
html body .phero h1{order:2;font-size:clamp(3.1rem,15vw,3.9rem)!important;line-height:.95!important;margin:0 0 18px!important}
html body .phero .phero-mark{order:3;width:100%;height:168px;border-radius:24px;margin:0 0 20px!important;grid-column:auto!important}
html body .phero .phero-mark .stage{width:92px!important;--orb:.42}
html body .phero .lede{order:4;font-size:1.02rem!important;line-height:1.6!important;margin:0 0 22px!important}
html body .phero .hero-actions{order:5;display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin:0!important}
html body .phero .hero-actions .btn{width:100%!important;min-height:52px;font-size:.95rem!important;justify-content:center}
html body .phero .hero-actions .btn svg{display:inline-block!important}
html body .phero .phero-band{grid-template-columns:1fr 1fr}
html body .phero .phero-band li,html body .phero .phero-band li+li{padding:18px 14px 18px 0!important;border-left:0!important}
html body .phero .phero-band li:nth-child(even){padding-left:16px!important;border-left:1px solid rgba(255,255,255,.14)!important}
html body .phero .phero-band li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)!important}
html body .phero .phero-band b{font-size:2rem!important}
html body .phero .phero-band span{font-size:.68rem!important}
}
html body .phero-in{padding-top:22px!important}
@media (max-width:767px){
html body .phero-in{align-items:stretch!important;justify-items:stretch!important;padding-top:20px!important}
html body .phero h1,html body .phero .lede{text-align:left!important;align-self:stretch;width:auto!important;margin-left:0!important;margin-right:0!important}
html body .phero .hero-actions{align-self:stretch;justify-content:stretch}
html body .phero .hero-actions .btn{margin:0!important}
}

/* ABOUT, "What I wish everyone knew" (v3): what people say vs what is true */
html body .wk>.wrap.wk-grid{display:grid!important;grid-template-columns:1fr!important;gap:32px}
html body .wk .wk-intro .sec-head{display:none}
html body .wk .wk-intro h2{margin:12px 0 14px}
html body .wk .wk-intro .lede{margin:0 0 22px;max-width:40ch}
html body .wk-sign{display:flex;align-items:center;gap:14px;margin:0 0 20px}
html body .wk-mono{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--lime);color:#0B0C0A;font:700 1rem/1 var(--display)}
html body .wk-sign p{margin:0}
html body .wk-sign b{display:block;font-size:1rem;color:#fff}
html body .wk-sign small{display:block;margin-top:2px;font:500 .7rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.65)}
html body .wk-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.16)}
html body .wk-list li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:22px 0 24px;border-bottom:1px solid rgba(255,255,255,.16)}
html body .wk-n{font:600 .78rem/1.9 var(--mono);letter-spacing:.1em;color:var(--lime)}
html body .wk-myth{margin:0 0 8px;font-size:.95rem;line-height:1.4;color:rgba(255,255,255,.55)}
html body .wk-myth s{text-decoration-thickness:1.5px;text-decoration-color:rgba(118,249,9,.8)}
html body .wk-list h3{margin:0 0 8px;font-size:clamp(1.5rem,1.25rem + 1vw,2rem);line-height:1.05;color:#fff}
html body .wk-body{margin:0;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.78);max-width:56ch}
@media (min-width:900px){
html body .wk>.wrap.wk-grid{grid-template-columns:minmax(0,4.5fr) minmax(0,7fr)!important;gap:clamp(48px,7vw,104px);align-items:start}
html body .wk-intro{position:sticky;top:110px}
html body .wk-list li{grid-template-columns:56px 1fr;gap:20px;padding:28px 0 30px}
html body .wk-list h3{font-size:2.1rem}
html body .wk-body{font-size:1.05rem}
}
html body .wk .wk-intro h2{font-size:clamp(2.6rem,2rem + 2.4vw,3.8rem)!important;line-height:1}
html body .wk-say{display:block;margin:0 0 4px;font:600 .66rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
html body .wk-myth s{text-decoration-color:rgba(255,255,255,.55)!important;color:rgba(255,255,255,.62)}
html body .wk-list h3::before{content:"Truth";display:block;margin:0 0 6px;font:600 .66rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}

/* CERTIFICATIONS (v14) compact: one short row, lists open on tap */
@media (min-width:768px){
html body #credentials .cert-head{margin-bottom:28px;gap:40px}
html body #credentials .cert-head h2{font-size:clamp(2.4rem,1.9rem + 2vw,3.4rem)}
html body #credentials .cert-bento{grid-template-columns:repeat(3,1fr)!important;gap:16px;align-items:start}
html body #credentials .cc--iicrc,html body #credentials .cc--lic,html body #credentials .cc--epa{grid-column:auto!important;grid-row:auto!important}
html body #credentials .cc{padding:22px 22px 12px;grid-template-columns:auto 1fr;align-items:center;column-gap:18px}
html body #credentials .cc-tag{grid-column:1/-1;margin-bottom:6px}
html body #credentials .cc-num,html body #credentials .cc--iicrc .cc-num{grid-column:1;font-size:clamp(3.4rem,2.8rem + 1.6vw,4.4rem)}
html body #credentials .cc-sub,html body #credentials .cc--iicrc .cc-sub{grid-column:2;margin:0;font-size:.92rem;max-width:none;padding-right:0}
html body #credentials .cc-ring{width:40px;height:40px;top:16px;right:16px}
html body #credentials .cc-ring svg{width:18px;height:18px}
html body #credentials .cc-more{margin-top:8px}
html body #credentials .cc-more summary{display:inline-flex!important}
html body #credentials .cc--iicrc .cc-list{gap:8px;margin-top:12px}
html body #credentials .cc--iicrc .cc-list li{padding:7px 13px;font-size:.88rem}
html body #credentials .lic-note{margin-top:22px}
}
html body #credentials .cert-head{margin-bottom:38px!important}

/* SIZING + ACCESSIBILITY PASS: nothing under 12px, body-type notes at 14px, comfortable tap targets */
html body .crumb,html body .crumb a,html body .crumb span{font-size:.75rem!important}
html body .crumb a{display:inline-block;padding:10px 2px;margin:-10px 0}
html body .phero .eyebrow,html body .wy2-intro .eyebrow,html body .abt3-pill{font-size:.75rem!important}
html body .phero .phero-band span,html body .wy2-facts dt,html body .wy-lab,html body .wk-say,html body .wk-sign small,html body .abt3-card small,html body .gal .cap small,html body .steps .step .num,html body .proofline span{font-size:.75rem!important}
html body .abt3-card--quote p{font-size:.875rem!important}
html body .form-legal,html body .form-note,html body .foot-note,html body .foot-blurb{font-size:.875rem!important;line-height:1.55}
html body .abt3-ph span{font-size:.8rem}
@media (max-width:767px){
html body .btn{font-size:.95rem}
html body .who-tabs span,html body .statesum span,html body #who span,html body .statesum li span{font-size:.875rem!important}
html body .hero-name{font-size:.875rem}
}
/* keyboard focus: one clear ring on every interactive element */
html body a:focus-visible,html body button:focus-visible,html body summary:focus-visible,html body input:focus-visible,html body select:focus-visible,html body textarea:focus-visible{outline:3px solid var(--lime)!important;outline-offset:3px!important;border-radius:6px}

/* CERTIFICATIONS (v15) short grouped lists instead of one long list of tags */
html body .cc-groups{margin:12px 0 0;padding:0;display:grid;gap:12px}
html body .cc-groups div{padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
html body .cc-groups dt{margin:0 0 4px;font:600 .75rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
html body .cc-groups dd{margin:0;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.86)}
html body #credentials .cc--iicrc .cc-groups{grid-template-columns:1fr}
/* rings: keep them in the top corner on phones so they never cross the text */
@media (max-width:767px){
html body #credentials::before{left:auto;right:-230px;top:-200px;width:440px;height:440px;opacity:.7}
}
@media (min-width:768px){html body #credentials::before{left:-220px;top:-170px}}
html body .cc-groups{gap:10px}
html body .cc-groups div{padding-top:10px}
html body .cc-groups dd{font-size:.88rem;line-height:1.55}
@media (min-width:768px){
html body #credentials .cc--iicrc:has(.cc-more[open]){grid-column:1/-1!important}
html body #credentials .cc--iicrc .cc-groups{grid-template-columns:repeat(4,1fr);gap:0 24px}
html body #credentials .cc--iicrc .cc-groups div{border-top:1px solid rgba(255,255,255,.14)}
}
html body #credentials .cert-head{padding-right:0}
@media (min-width:900px){html body #credentials .cert-head{padding-right:190px!important}}

/* SERVICES HEADLINE AREA (index) */
html body #services .svc-head{display:grid;grid-template-columns:1fr;gap:18px;margin:0 0 30px}
html body #services .svc-head h2{margin:10px 0 0;font-size:clamp(2.6rem,2rem + 2.6vw,4rem);line-height:1}
html body #services .svc-head .lede{margin:0;max-width:42ch;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.72)}
html body #services .svc-head-link{display:inline-flex;align-items:center;gap:10px;margin-top:14px;min-height:44px;font:600 .8rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lime);text-decoration:none;border-bottom:1px solid rgba(118,249,9,.5);padding-bottom:2px}
html body #services .svc-head-link svg{width:16px;height:16px}
@media (min-width:768px){
html body #services .svc-head{grid-template-columns:1.2fr 1fr;align-items:end;gap:48px;margin-bottom:40px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14)}
}

/* SERVICE HERO STATS (v2): lime tick above each number, plain-language labels, no boxes */
html body .phero .phero-band{border-top:0!important;margin-top:8px!important}
html body .phero .phero-band li{position:relative;padding:30px 22px 26px 0!important;gap:8px}
html body .phero .phero-band li::before{content:""!important;display:block!important;position:absolute;left:0;top:0;width:34px;height:4px;border-radius:2px;background:var(--lime)}
html body .phero .phero-band li+li{padding-left:24px!important;border-left:0!important}
html body .phero .phero-band li+li::before{left:24px}
html body .phero .phero-band b{font-size:clamp(2.4rem,1.8rem + 2vw,3.6rem)!important}
html body .phero .phero-band span{font:500 .95rem/1.35 var(--body)!important;letter-spacing:0!important;text-transform:none!important;color:rgba(255,255,255,.78)!important}
@media (max-width:767px){
html body .phero .phero-band{margin-top:26px!important;gap:0 18px}
html body .phero .phero-band li,html body .phero .phero-band li+li{padding:26px 0 22px 0!important;border:0!important}
html body .phero .phero-band li:nth-child(even){padding-left:0!important;border-left:0!important}
html body .phero .phero-band li:nth-child(n+3){border-top:0!important}
html body .phero .phero-band li::before,html body .phero .phero-band li+li::before{left:0}
html body .phero .phero-band b{font-size:2.5rem!important}
html body .phero .phero-band span{font-size:.9rem!important}
}
@media (max-width:767px){html body .phero .eyebrow{font-size:.7rem!important;letter-spacing:.06em!important;padding:6px 10px!important;white-space:nowrap}}

/* PHOTOS (mobile): one wide lead photo, two staggered portraits, numbered tags */
@media (max-width:767px){
html body .gal--feature{counter-reset:ph;display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;align-items:start;padding-bottom:28px}
html body .gal--feature>.shot{counter-increment:ph;border-radius:22px!important;aspect-ratio:3/4!important;height:auto!important;grid-column:auto!important;grid-row:auto!important;overflow:hidden}
html body .gal--feature>.shot:first-child{grid-column:1/-1!important;aspect-ratio:4/3!important}
html body .gal--feature>.shot:nth-child(3){margin-top:30px}
html body .gal--feature>.shot::before{content:"0" counter(ph);position:absolute;z-index:2;left:12px;top:12px;padding:6px 10px;border-radius:999px;background:var(--lime);color:#0B0C0A;font:700 .75rem/1 var(--mono);letter-spacing:.08em}
html body .gal--feature>.shot .cap{padding:30px 14px 14px!important}
html body .gal--feature>.shot .cap b{font-size:1rem!important}
html body .gal--feature>.shot:not(:first-child) .cap small{display:none}
html body .gal--feature>.shot:first-child .cap b{font-size:1.2rem!important}
}

/* WHAT I WISH EVERYONE KNEW (v4): tap-to-open on phones, big numerals on web */
html body .wk-list li{display:block!important;padding:0!important;grid-template-columns:none}
html body .wk-item summary{display:grid;grid-template-columns:40px 1fr 28px;gap:12px;align-items:start;padding:20px 0;list-style:none;cursor:pointer;min-height:48px}
html body .wk-item summary::-webkit-details-marker{display:none}
html body .wk-sum{display:block}
html body .wk-sum .wk-say{display:block}
html body .wk-sum s{display:block;margin:0 0 6px;font-size:.92rem;line-height:1.4}
html body .wk-sum h3{margin:0}
html body .wk-n{font:700 1.6rem/1 var(--display);letter-spacing:0;color:var(--lime);padding-top:2px}
html body .wk-plus{position:relative;width:28px;height:28px;border:1.5px solid rgba(118,249,9,.6);border-radius:50%;margin-top:2px}
html body .wk-plus::before,html body .wk-plus::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--lime);transform:translate(-50%,-50%);transition:transform .2s}
html body .wk-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
html body .wk-item[open] .wk-plus::after{transform:translate(-50%,-50%) rotate(0)}
html body .wk-item .wk-body{margin:0 0 22px 52px!important;max-width:52ch;padding-right:40px}
html body .wk-item summary:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
@media (max-width:767px){
html body .wk-sum h3{font-size:1.45rem!important}
html body .wk-sum h3::before{display:none}
html body .wk-item .wk-body{margin-left:52px!important;padding-right:0;font-size:.98rem}
}
@media (min-width:900px){
html body .wk-item summary{grid-template-columns:72px 1fr;gap:20px;padding:30px 0 12px;cursor:default}
html body .wk-n{font-size:3rem;line-height:.9}
html body .wk-plus{display:none}
html body .wk-sum h3{font-size:2.2rem!important}
html body .wk-item .wk-body{margin:0 0 30px 92px!important;font-size:1.05rem;padding-right:0}
}

/* ABOUT HERO (v4): portrait frame on a tilted lime plate, monogram placeholder */
html body .abt3-disc{border-radius:34px!important;aspect-ratio:4/5!important}
html body .abt3-ph::before{content:"JH";display:block;font:700 4.4rem/1 var(--display);color:var(--lime);letter-spacing:.02em}
html body .abt3-ph svg{display:none}
html body .abt3-ph b{font-size:.95rem}
html body .abt3-frame{border-radius:30px!important;background:linear-gradient(160deg,#1f241b,#0B0C0A)!important}
@media (min-width:900px){
html body .abt3-stage{height:540px}
html body .abt3-disc{width:320px!important;height:auto!important;bottom:28px!important;top:auto!important;transform:translateX(-50%) rotate(-7deg)!important}
html body .abt3-photo{width:320px!important;aspect-ratio:4/5!important;bottom:36px!important;transform:translateX(-50%) translateX(14px)!important}
html body .abt3-spore{left:calc(50% + 150px)!important;top:4%!important}
}
@media (max-width:899px){
html body .abt3-stage{aspect-ratio:auto;height:430px}
html body .abt3-disc{width:60%!important;height:auto!important;aspect-ratio:4/5!important;left:50%!important;top:46%!important;bottom:auto!important;transform:translate(-50%,-50%) rotate(-7deg)!important}
html body .abt3-photo{width:60%!important;aspect-ratio:4/5!important;left:50%!important;top:46%!important;bottom:auto!important;transform:translate(-46%,-50%)!important}
html body .abt3-ph::before{font-size:3.4rem}
}
@media (max-width:767px){html body .phero .eyebrow{font-size:.75rem!important;letter-spacing:.04em!important;padding:6px 10px!important}}

/* CERTIFICATIONS, phones (v16): three tabs, one panel, everything visible without extra taps */
#certTabs{display:none}
@media (max-width:767px){
html body #credentials #certTabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
html body #credentials #certTabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:76px;padding:10px 6px;border:1.5px solid rgba(255,255,255,.2);border-radius:18px;background:rgba(255,255,255,.03);color:#fff;cursor:pointer}
html body #credentials #certTabs b{font:700 2.1rem/1 var(--display)}
html body #credentials #certTabs span{font:600 .72rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:center}
html body #credentials #certTabs button[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:#0B0C0A}
html body #credentials .cert-bento{display:block!important}
html body #credentials .cert-bento .cc{display:none!important}
html body #credentials .cert-bento .cc.is-on{display:block!important;padding:18px 18px 8px}
html body #credentials .cc-ring,html body #credentials .cc-tag,html body #credentials .cc-num{display:none!important}
html body #credentials .cc-sub{display:block;margin:0 0 4px;padding:0;font-size:1rem;line-height:1.5;color:rgba(255,255,255,.85)}
html body #credentials .cc-more{margin:0}
html body #credentials .cc-more summary{display:none!important}
html body #credentials .cc-groups{margin-top:10px}
html body #credentials .cc-groups div:first-child{border-top:0;padding-top:0}
}

/* SERVICES HEADLINE (v3): one calm statement + quick-jump chips */
html body #services .svc-head{display:block!important;margin:0 0 30px!important;padding:0!important;border:0!important}
html body #services .svc-head h2{font-size:clamp(2.6rem,2rem + 3.4vw,4.6rem);line-height:.98;margin:12px 0 14px}
html body #services .svc-head .lede{max-width:46ch;margin:0 0 22px}
html body #services .svc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
html body #services .svc-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid rgba(255,255,255,.28);border-radius:999px;font:600 .95rem/1 var(--body);color:#fff;text-decoration:none;transition:background .15s,border-color .15s}
html body #services .svc-chips a:hover{border-color:var(--lime);background:rgba(118,249,9,.1)}
html body #services .svc-chips .svc-chips-find a{border-color:var(--lime);color:var(--lime)}

/* WHAT YOU CAN CHECK (v3): open columns, white numerals, blue labels, lime links. No cards, no tabs. */
html body #proof .proof-tabs{display:none!important}
html body #proof .receipts{display:grid!important;grid-template-columns:1fr!important;gap:0!important;margin:8px 0 0!important;border-top:1px solid rgba(255,255,255,.16)!important;overflow:visible!important}
html body #proof .receipts .receipt{position:relative;display:grid!important;grid-template-columns:auto 1fr;grid-template-areas:"lab lab" "num ttl" "txt txt" "lnk lnk";column-gap:16px;align-items:end;padding:26px 0 20px!important;min-height:0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.16)!important;border-radius:0!important;background:none!important;box-shadow:none!important}
html body #proof .receipts .receipt::before{grid-area:lab;display:block!important;position:static!important;height:auto!important;width:auto!important;background:none!important;margin:0 0 8px;font:600 .75rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2)}
html body #proof .receipts .receipt:nth-child(1)::before{content:"Licensed"}
html body #proof .receipts .receipt:nth-child(2)::before{content:"Independent"}
html body #proof .receipts .receipt:nth-child(3)::before{content:"Documented"}
html body #proof .receipts .receipt::after{display:none!important}
html body #proof .receipts .receipt .receipt-n{grid-area:num;margin:0!important;font:700 3.2rem/.9 var(--display)!important;color:#fff!important;white-space:nowrap}
html body #proof .receipts .receipt .receipt-n i{font-size:.34em;margin-left:.2em;color:rgba(255,255,255,.7)}
html body #proof .receipts .receipt h3{grid-area:ttl;margin:0 0 4px!important;font-size:1.25rem!important;color:#fff}
html body #proof .receipts .receipt p{grid-area:txt;margin:12px 0 4px!important;font-size:1rem!important;line-height:1.6!important;color:rgba(255,255,255,.75)!important;max-width:60ch}
html body #proof .receipts .receipt a{grid-area:lnk;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0!important;padding:0!important;border:0!important;font:600 .8rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lime)!important;justify-self:start}
html body #proof .proofline{display:flex!important;flex-wrap:wrap;gap:6px 28px;margin-top:26px!important;padding:0!important;border:0!important}
html body #proof .proofline span{display:inline-flex!important;align-items:baseline;gap:8px;border:0!important;padding:0!important;font:500 .8rem/1.4 var(--mono)!important;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)!important}
html body #proof .proofline span b{font:700 1.5rem/1 var(--display)!important;color:var(--blue-2)!important;letter-spacing:0}
@media (min-width:768px){
html body #proof .receipts{grid-template-columns:repeat(3,1fr)!important;border-top:1px solid rgba(255,255,255,.16)!important}
html body #proof .receipts .receipt{display:flex!important;flex-direction:column;align-items:flex-start;padding:34px 34px 30px 0!important;border-bottom:0!important}
html body #proof .receipts .receipt+.receipt{padding-left:34px!important;border-left:1px solid rgba(255,255,255,.16)!important}
html body #proof .receipts .receipt .receipt-n{font-size:clamp(4.4rem,3.6rem + 2.6vw,6rem)!important;margin:14px 0 14px!important}
html body #proof .receipts .receipt h3{font-size:1.5rem!important;margin:0 0 10px!important}
html body #proof .receipts .receipt p{margin:0 0 24px!important;max-width:34ch}
html body #proof .receipts .receipt a{margin-top:auto!important}
html body #proof .proofline{margin-top:30px!important;padding-top:24px!important;border-top:1px solid rgba(255,255,255,.16)!important}
html body #proof .proofline span b{font-size:2rem!important}
}
html body #proof .proofline span{flex-direction:row!important;align-items:baseline!important}
html body #proof .proofline span b{display:inline!important}

/* WHO WE WORK FOR (v3): clear panel with a "often needs" list that links to each test */
html body #who .who-panel:not([data-off]){display:grid!important;grid-template-columns:1fr;gap:6px 0;padding:26px 22px 8px!important}
html body #who .who-panel h3{margin:0 0 10px!important;font-size:clamp(1.8rem,1.4rem + 1.4vw,2.4rem)!important;line-height:1.05}
html body #who .who-panel>p:not(.who-often){margin:0 0 18px!important;font-size:1.02rem!important;line-height:1.65!important;color:rgba(255,255,255,.82)!important;max-width:52ch;border:0!important;padding:0!important}
html body #who .who-often{display:flex!important;flex-direction:column;gap:0!important;margin:0 0 6px!important;padding:0!important;border:0!important}
html body #who .who-often span{display:block;margin:0 0 4px;font:600 .75rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
html body #who .who-often a{display:flex!important;align-items:center;justify-content:space-between;min-height:52px;padding:0 2px!important;border:0!important;border-top:1px solid rgba(255,255,255,.16)!important;border-radius:0!important;background:none!important;font:500 1.05rem/1.2 var(--body)!important;color:#fff!important;text-decoration:none}
html body #who .who-often a:last-child{border-bottom:1px solid rgba(255,255,255,.16)!important}
html body #who .who-often a::after{content:"";width:9px;height:9px;border-right:2px solid var(--lime);border-top:2px solid var(--lime);transform:rotate(45deg);flex:none;transition:transform .15s}
html body #who .who-often a:hover::after{transform:rotate(45deg) translate(2px,-2px)}
html body #who .who-cta{margin-top:18px!important;padding:18px 22px 22px!important;border:0!important;border-top:1px solid rgba(255,255,255,.14)!important;border-radius:0!important;background:none!important}
html body #who .who-cta p{margin:0 0 14px!important;font-size:.98rem;color:rgba(255,255,255,.75)}
html body #who .who-cta-btns{display:flex;flex-direction:column;gap:10px}
html body #who .who-cta-btns .btn{width:100%;justify-content:center}
html body #who .who-cta-btns .btn--blue{background:var(--lime)!important;border-color:var(--lime)!important;color:#0B0C0A!important}
@media (min-width:768px){
html body #who .who-panel:not([data-off]){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:48px;padding:34px 34px 10px!important;align-items:start}
html body #who .who-panel h3{grid-column:1;grid-row:1}
html body #who .who-panel>p:not(.who-often){grid-column:1;grid-row:2}
html body #who .who-often{grid-column:2;grid-row:1/3;align-self:start;padding-top:6px!important}
html body #who .who-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 34px 26px!important}
html body #who .who-cta p{margin:0!important;max-width:38ch}
html body #who .who-cta-btns{flex-direction:row;gap:12px}
html body #who .who-cta-btns .btn{width:auto}
}
html body #who .who-panels{padding:0!important}
html body #who .who-often{width:100%;align-items:stretch!important}
html body #who .who-often a{width:100%}
html body #who .who-panel:not([data-off]){justify-items:stretch;text-align:left!important}
html body #who .who-cta-btns{align-items:stretch}
html body #who .who-cta{text-align:left!important}
@media (min-width:768px){html body #who .who-cta-btns{align-items:center}html body #who .who-cta-btns .btn{width:auto}}
@media (max-width:767px){html body #who .who-cta-btns .btn{width:100%!important}}

/* SERVICE HERO STATS (v3): one lime band, black type */
html body .phero .wrap:has(>.phero-band){padding-bottom:6px}
html body .phero .phero-band{background:var(--lime)!important;border-radius:22px!important;margin:6px 0 34px!important;padding:6px 8px!important;border:0!important;gap:0!important}
html body .phero .phero-band li,html body .phero .phero-band li+li{padding:20px 22px!important;border:0!important;gap:4px}
html body .phero .phero-band li+li{border-left:1px solid rgba(11,12,10,.22)!important}
html body .phero .phero-band li::before,html body .phero .phero-band li+li::before{display:none!important}
html body .phero .phero-band b{color:#0B0C0A!important;font-size:clamp(2.2rem,1.7rem + 1.8vw,3.2rem)!important}
html body .phero .phero-band b i{color:#0B0C0A!important;opacity:.7}
html body .phero .phero-band span{color:rgba(11,12,10,.82)!important;font:600 .9rem/1.3 var(--body)!important}
@media (max-width:767px){
html body .phero .phero-band{margin:24px 0 28px!important;padding:4px 6px!important;grid-template-columns:1fr 1fr!important}
html body .phero .phero-band li,html body .phero .phero-band li+li{padding:16px 14px!important;border:0!important}
html body .phero .phero-band li:nth-child(even){border-left:1px solid rgba(11,12,10,.22)!important;padding-left:16px!important}
html body .phero .phero-band li:nth-child(n+3){border-top:1px solid rgba(11,12,10,.22)!important}
html body .phero .phero-band b{font-size:2.3rem!important}
html body .phero .phero-band span{font-size:.85rem!important}
}

/* WHAT YOU'LL GET (v3): lime panel, check list. Different from the dark timeline above it. */
html body .sec.wyg{background:none!important}
html body .sec.wyg>.wrap.wy2{background:var(--lime);color:#0B0C0A;border-radius:30px;padding:30px 22px!important;max-width:calc(100% - 2*var(--gut,20px))}
html body .sec.wyg .wy2-intro .eyebrow{color:#0B0C0A!important;border-color:#0B0C0A!important}
html body .sec.wyg .wy2-intro h2,html body .sec.wyg .wy2-intro h2 em{color:#0B0C0A!important}
html body .sec.wyg .wy2-intro .lede{color:rgba(11,12,10,.82)!important}
html body .sec.wyg .wy2-intro .btn{background:#0B0C0A!important;color:#fff!important;border-color:#0B0C0A!important}
html body .sec.wyg .wy2-facts{border-top-color:rgba(11,12,10,.25)!important}
html body .sec.wyg .wy2-facts dt{color:rgba(11,12,10,.7)!important}
html body .sec.wyg .wy2-facts dd{color:#0B0C0A!important}
html body .sec.wyg .wy2-steps{gap:0!important}
html body .sec.wyg .wy2-steps::before{display:none!important}
html body .sec.wyg .wy2-steps li{display:grid;grid-template-columns:36px 1fr!important;gap:14px;align-items:start;padding:16px 0!important;border-top:1px solid rgba(11,12,10,.22)}
html body .sec.wyg .wy2-steps li:last-child{border-bottom:1px solid rgba(11,12,10,.22)}
html body .sec.wyg .wy-node{width:32px!important;height:32px!important;font-size:0!important;border-radius:50%!important;background:#0B0C0A!important;border:0!important;position:relative}
html body .sec.wyg .wy2-steps li:not(:first-child) .wy-node{background:#0B0C0A!important}
html body .sec.wyg .wy-node::after{content:"";position:absolute;left:50%;top:48%;width:6px;height:11px;border:solid var(--lime);border-width:0 2.5px 2.5px 0;transform:translate(-50%,-50%) rotate(45deg)}
html body .sec.wyg .wy-card{padding:3px 0 0!important;border:0!important;background:none!important;border-radius:0!important}
html body .sec.wyg .wy-lab{display:none}
html body .sec.wyg .wy-txt{color:#0B0C0A!important;font-size:1.12rem;line-height:1.35;font-weight:600}
@media (min-width:900px){
html body .sec.wyg>.wrap.wy2{padding:54px 56px!important;border-radius:40px;max-width:calc(1100px + 112px);margin-inline:auto;align-items:center!important}
html body .sec.wyg .wy2-intro{position:static!important}
html body .sec.wyg .wy2-steps li{padding:22px 0!important;grid-template-columns:44px 1fr!important}
html body .sec.wyg .wy-node{width:38px!important;height:38px!important}
html body .sec.wyg .wy-txt{font-size:1.3rem}
}
@media (max-width:899px){
html body .sec.wyg>.wrap.wy2{display:flex!important;flex-direction:column;gap:0!important;padding:24px 20px 22px!important}
html body .sec.wyg .wy2-intro{display:contents!important}
html body .sec.wyg .wy2-intro .sec-head{order:1;margin:0 0 14px!important}
html body .sec.wyg .wy2-steps{order:2;margin:0 0 20px!important}
html body .sec.wyg .wy2-intro>.btn{order:3;align-self:stretch;justify-content:center;min-height:52px}
html body .sec.wyg .wy2-facts{order:4;margin:18px 0 0!important;padding-top:16px!important}
html body .sec.wyg .wy2-intro h2{margin:12px 0 10px!important}
html body .sec.wyg .wy-txt{font-size:1.05rem}
html body .sec.wyg .wy2-steps li{padding:13px 0!important}
}

/* ABOUT HERO (v5): no panel, bigger portrait */
html body .abt3-panel{background:none!important;border:0!important;border-radius:0!important;overflow:visible!important;padding:18px 0 34px!important}
@media (min-width:900px){
html body .abt3-panel{padding:30px 0 50px!important}
html body .abt3-stage{height:660px!important;margin-top:20px}
html body .abt3-disc{width:400px!important;bottom:36px!important}
html body .abt3-photo{width:400px!important;bottom:48px!important;transform:translateX(-50%) translateX(16px)!important}
html body .abt3-spore{left:calc(50% + 220px)!important;top:6%!important}
html body .abt3-card--quote{left:6%!important;top:52%!important}
html body .abt3-card--rate{right:6%!important;top:36%!important}
html body .abt3-ph::before{font-size:6rem}
}
@media (max-width:899px){
html body .abt3-stage{height:520px!important}
html body .abt3-disc{width:76%!important}
html body .abt3-photo{width:76%!important;top:44%!important}
html body .abt3-disc{top:44%!important}
html body .abt3-card--rate{left:0!important;top:2%!important}
html body .abt3-card--quote{bottom:0!important}
html body .abt3-spore{top:0!important;right:0!important}
html body .abt3-ph::before{font-size:4.6rem}
}

/* WHAT I WISH EVERYONE KNEW (v5): tap a myth, read the truth */
html body .wk-tool{min-width:0}
html body .wk-tool-lab{margin:0 0 12px;font:600 .75rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
html body .wk-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
html body .wk-chips button{min-height:48px;padding:0 18px;border:1.5px solid rgba(255,255,255,.26);border-radius:999px;background:transparent;color:#fff;font:600 .95rem/1 var(--body);cursor:pointer;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.45);transition:background .15s,border-color .15s,color .15s}
html body .wk-chips button[aria-selected="true"]{background:var(--lime);border-color:var(--lime);color:#0B0C0A;text-decoration-color:rgba(11,12,10,.6)}
html body .wk-pan{padding:22px 20px 24px;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:rgba(255,255,255,.035)}
html body .wk-pan[hidden]{display:none}
html body .wk-pan .wk-myth{margin:0 0 18px;font-size:1rem;color:rgba(255,255,255,.6)}
html body .wk-pan .wk-say{display:block;margin:0 0 4px}
html body .wk-truth{margin:0 0 6px;font:600 .75rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
html body .wk-pan h3{margin:0 0 12px!important;font-size:clamp(1.9rem,1.5rem + 1.6vw,2.6rem)!important;line-height:1.02;color:#fff}
html body .wk-pan h3::before{display:none!important}
html body .wk-pan .wk-body{margin:0!important;padding:0!important;font-size:1.05rem;line-height:1.65;color:rgba(255,255,255,.85);max-width:56ch}
@media (min-width:900px){html body .wk-pan{padding:34px 36px 38px;min-height:300px}html body .wk-pan h3{font-size:3rem!important}}

/* ABOUT CREDENTIALS (v3): a short first-person summary; the full lists live on the home page */
html body .acred{display:grid;grid-template-columns:1fr;gap:6px 48px;align-items:center}
html body .acred-num{margin:0;font:700 clamp(7rem,5rem + 12vw,15rem)/.8 var(--display);color:transparent;-webkit-text-stroke:2px var(--lime);letter-spacing:-.02em}
html body .acred h2{margin:12px 0 14px;font-size:clamp(2.2rem,1.8rem + 2vw,3.4rem);line-height:1.02}
html body .acred .lede{margin:0 0 22px;max-width:46ch}
html body .acred-count{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 26px;padding:18px 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.16)}
html body .acred-count li{display:flex;align-items:baseline;gap:10px}
html body .acred-count b{font:700 2.2rem/1 var(--display);color:#fff}
html body .acred-count span{font:600 .75rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
@media (max-width:767px){html body .acred .btn{width:100%;justify-content:center}html body .acred-num{margin-bottom:8px}}
@media (min-width:900px){html body .acred{grid-template-columns:auto 1fr;gap:64px}html body .acred-num{font-size:clamp(12rem,9rem + 10vw,18rem)}}
html body #credentials #certTabs span{font-size:.75rem!important}

/* CERTIFICATIONS (v17): one design for every screen. Three tabs, one panel. */
html body #credentials #certTabs{display:grid!important;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 14px}
html body #credentials #certTabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:96px;padding:14px 8px;border:1.5px solid rgba(255,255,255,.2);border-radius:20px;background:rgba(255,255,255,.03);color:#fff;cursor:pointer;transition:background .15s,border-color .15s}
html body #credentials #certTabs button:hover{border-color:var(--lime)}
html body #credentials #certTabs b{font:700 clamp(2.4rem,2rem + 1.4vw,3.6rem)/1 var(--display)}
html body #credentials #certTabs span{font:600 .75rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}
html body #credentials #certTabs button[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:#0B0C0A}
@media (min-width:768px){
html body #credentials .cert-bento{display:block!important}
html body #credentials .cert-bento .cc{display:none!important}
html body #credentials .cert-bento .cc.is-on{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr)!important;column-gap:48px;align-items:start;padding:30px 34px 30px!important}
html body #credentials .cc-ring,html body #credentials .cc-tag,html body #credentials .cc-num{display:none!important}
html body #credentials .cc .cc-sub,html body #credentials .cc--iicrc .cc-sub{display:block;grid-column:1!important;margin:0;font-size:1.15rem;line-height:1.5;color:#fff;max-width:26ch;padding:0}
html body #credentials .cc-more{grid-column:2!important;margin:0!important}
html body #credentials .cc-more summary{display:none!important}
html body #credentials .cc-groups{margin:0}
html body #credentials .cc-groups div:first-child{border-top:0;padding-top:0}
html body #credentials .cc--iicrc .cc-groups{grid-template-columns:repeat(2,1fr);gap:18px 32px}
html body #credentials .cc--iicrc .cc-groups div{border-top:0;padding-top:0}
html body #credentials .cc--lic .cc-groups,html body #credentials .cc--epa .cc-groups{grid-template-columns:repeat(2,1fr);gap:0 32px}
html body #credentials .cc--lic .cc-groups div,html body #credentials .cc--epa .cc-groups div{border-top:0;padding-top:0}
}

/* WHAT YOU CAN CHECK (v4): a credential seal + three proofs */
html body #proof .pf{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;margin-top:10px}
html body #proof .pf-seal{justify-self:center;width:min(250px,68vw);color:var(--lime)}
html body #proof .pf-seal svg{display:block;width:100%;height:auto}
html body #proof .pf-ring{transform-origin:110px 110px;animation:pfspin 60s linear infinite}
html body #proof .pf-ring text{font:600 10.5px var(--mono);letter-spacing:.06em;fill:currentColor}
html body #proof .pf-big{font:700 62px var(--display);fill:#fff}
html body #proof .pf-small{font:600 9.5px var(--mono);letter-spacing:.2em;fill:rgba(255,255,255,.7)}
@keyframes pfspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html body #proof .pf-ring{animation:none}}
html body #proof .pf-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.16)}
html body #proof .pf-list li{padding:22px 0 20px;border-bottom:1px solid rgba(255,255,255,.16)}
html body #proof .pf-lab{margin:0 0 6px;font:600 .75rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2)}
html body #proof .pf-list h3{margin:0 0 8px;font-size:1.5rem;line-height:1.1;color:#fff}
html body #proof .pf-list h3 b{color:var(--lime);font-weight:700;margin-right:.2em}
html body #proof .pf-list li>p:not(.pf-lab){margin:0 0 6px;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.75);max-width:58ch}
html body #proof .pf-list a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 .8rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;text-decoration:none;border-bottom:1px solid rgba(118,249,9,.6);align-self:flex-start}
html body #proof .pf-list a svg{width:16px;height:16px;color:var(--lime)}
html body #proof .pf-stats{display:flex;flex-wrap:wrap;gap:6px 26px;margin:22px 0 0;padding:0}
html body #proof .pf-stats span{display:inline-flex;align-items:baseline;gap:8px;font:500 .8rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
html body #proof .pf-stats b{font:700 1.6rem/1 var(--display);color:#fff;letter-spacing:0}
@media (min-width:900px){
html body #proof .pf{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);margin-top:20px}
html body #proof .pf-seal{width:100%;max-width:340px}
html body #proof .pf-list li{padding:28px 0 26px}
html body #proof .pf-list h3{font-size:1.9rem}
html body #proof .pf-stats{margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
}

/* WHO WE WORK FOR headline */
html body #who .who-head{display:grid;grid-template-columns:1fr;gap:16px;margin:0 0 30px}
html body #who .who-head h2{margin:12px 0 0;font-size:clamp(3.2rem,2.4rem + 4.4vw,6rem);line-height:.92;letter-spacing:-.01em}
html body #who .who-head h2 em{display:block;font-style:normal;color:var(--lime)}
html body #who .who-head .lede{margin:0;max-width:44ch;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.75);padding-left:16px;border-left:3px solid var(--lime)}
@media (min-width:900px){html body #who .who-head{grid-template-columns:1.1fr 1fr;align-items:end;gap:64px;margin-bottom:44px}}

/* WHAT YOU CAN CHECK (v5): three linked rows with big figures */
html body #proof .pf{list-style:none;margin:10px 0 0;padding:0;display:block;border-top:1px solid rgba(255,255,255,.2)}
html body #proof .pf>li{border-bottom:1px solid rgba(255,255,255,.2)}
html body #proof .pf-row{position:relative;display:grid;grid-template-columns:1fr;gap:6px;padding:24px 0 22px;color:#fff;text-decoration:none;transition:background .2s,padding .2s}
html body #proof .pf-fig{display:flex;align-items:baseline;gap:8px;font-family:var(--display);line-height:.9}
html body #proof .pf-fig b{font-size:clamp(3.6rem,3rem + 2.6vw,5.6rem);font-weight:700;color:#fff;white-space:nowrap}
html body #proof .pf-fig i{font-style:normal;font-size:1.4rem;color:var(--lime);font-weight:700;text-transform:uppercase}
html body #proof .pf-main{display:grid;gap:6px}
html body #proof .pf-lab{font:600 .75rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2)}
html body #proof .pf-main h3{margin:0;font-size:1.55rem;line-height:1.1;color:#fff}
html body #proof .pf-txt{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.75);max-width:58ch}
html body #proof .pf-go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;min-height:44px;font:600 .8rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
html body #proof .pf-go svg{width:18px;height:18px;transition:transform .2s}
html body #proof .pf-row:hover .pf-go svg,html body #proof .pf-row:focus-visible .pf-go svg{transform:translateX(5px)}
html body #proof .pf-row:hover h3{color:var(--lime)}
@media (min-width:900px){
html body #proof .pf-row{grid-template-columns:minmax(260px,4fr) minmax(0,7fr);gap:56px;align-items:center;padding:38px 0 36px}
html body #proof .pf-row:hover{background:linear-gradient(90deg,rgba(118,249,9,.06),transparent)}
html body #proof .pf-main h3{font-size:2rem}
html body #proof .pf-go{margin-top:10px}
}

/* WHO WE WORK FOR headline (v3): heading + overlapping audience icons + lede */
html body #who .who-head{display:block!important;margin:0 0 30px!important}
html body #who .who-head h2{margin:12px 0 18px!important;font-size:clamp(2.8rem,2.2rem + 3vw,4.8rem)!important;line-height:.98!important}
html body #who .who-head h2 em{display:inline!important}
html body #who .who-meta{display:flex;flex-direction:column;gap:18px}
html body #who .who-stack{display:flex}
html body #who .who-stack span{display:grid;place-items:center;width:56px;height:56px;margin-left:-12px;border:2px solid var(--panel,#191C16);border-radius:50%;background:#0B0C0A;box-shadow:inset 0 0 0 1.5px rgba(118,249,9,.7)}
html body #who .who-stack span:first-child{margin-left:0}
html body #who .who-stack svg{width:24px;height:24px;fill:none;stroke:var(--lime);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html body #who .who-head .lede{margin:0!important;padding:0!important;border:0!important;max-width:50ch}
@media (min-width:900px){
html body #who .who-meta{flex-direction:row;align-items:center;gap:28px}
html body #who .who-stack{flex:none}
}

html body #proof .pf-row{gap:12px}
@media (min-width:900px){html body #proof .pf-row{padding:30px 0 28px;gap:56px}}
@media (max-width:767px){
html body #proof .pf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
html body #proof .pf-stats span{display:block;font-size:.7rem;line-height:1.4}
html body #proof .pf-stats b{display:block;margin-bottom:4px;font-size:1.9rem}
}
@media (max-width:767px){html body #proof .pf-stats span{font-size:.75rem!important}}

/* WHAT YOU CAN CHECK (v6): compact, three tidy cards with icon rings */
html body #proof .sec-head{margin-bottom:22px!important}
html body #proof .pf{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;border-top:0!important;margin-top:0!important}
html body #proof .pf>li{border:0!important}
html body #proof .pf-row{position:relative;display:grid!important;grid-template-columns:1fr auto;grid-template-areas:"fig ico" "main main";gap:10px 12px!important;padding:20px 20px 16px!important;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:rgba(255,255,255,.035);transition:border-color .2s,background .2s}
html body #proof .pf-row:hover{border-color:var(--lime);background:rgba(118,249,9,.05)}
html body #proof .pf-fig{grid-area:fig;align-self:end}
html body #proof .pf-fig b{font-size:clamp(3rem,2.6rem + 1.6vw,4rem)!important}
html body #proof .pf-ico{grid-area:ico;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(118,249,9,.5);border-radius:50%}
html body #proof .pf-ico svg{width:20px;height:20px;fill:none;stroke:var(--lime);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html body #proof .pf-main{grid-area:main;gap:4px}
html body #proof .pf-main h3{font-size:1.25rem!important}
html body #proof .pf-lab{display:none}
html body #proof .pf-txt{font-size:.95rem;line-height:1.5}
html body #proof .pf-go{margin-top:2px;min-height:44px}
html body #proof .pf-stats{margin-top:20px!important}
@media (min-width:900px){
html body #proof .pf{grid-template-columns:repeat(3,1fr)!important;gap:18px!important}
html body #proof .pf-row{grid-template-columns:1fr auto!important;gap:14px 12px!important;padding:26px 26px 20px!important;align-content:start}
html body #proof .pf-row:hover{background:rgba(118,249,9,.05)}
html body #proof .pf-main h3{font-size:1.45rem!important}
html body #proof .pf-stats{margin-top:26px!important;padding-top:20px!important}
}
html body #proof .pf>li{display:flex}
html body #proof .pf-row{flex:1;width:100%;align-content:space-between}
html body #proof .pf>li{margin:0!important;transform:none!important;align-self:stretch!important}



/* PHOTO NUMBERS on web too */
@media (min-width:768px){
html body .gal--feature{counter-reset:ph}
html body .gal--feature>.shot{counter-increment:ph}
html body .gal--feature>.shot::before{content:"0" counter(ph);position:absolute;z-index:2;left:16px;top:16px;padding:7px 12px;border-radius:999px;background:var(--lime);color:#0B0C0A;font:700 .8rem/1 var(--mono);letter-spacing:.08em}
}

/* SERVICE AREA NUMBERS: the original trio, tidied. White numerals, one lime rule per state, a total line. */
html body #area .statesum{width:100%}
html body #area .statesum-cap{margin:0 0 16px;font:600 .75rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2)}
html body #area .statesum ul{display:grid;grid-template-columns:repeat(3,1fr);gap:0 22px;margin:0;padding:0;list-style:none}
html body #area .statesum li{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px 0 0;border:0;text-align:left}
html body #area .statesum li::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:rgba(255,255,255,.18)}
html body #area .statesum li::after{content:"";position:absolute;left:0;top:0;width:36px;height:2px;background:var(--lime)}
html body #area .statesum li b{font:700 clamp(3.6rem,3rem + 3vw,5.6rem)/.9 var(--display);color:#fff}
html body #area .statesum li span{font:500 .95rem/1.3 var(--body);letter-spacing:0;text-transform:none;color:rgba(255,255,255,.78)}
html body #area .statesum-total{margin:20px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font:600 .8rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
@media (max-width:767px){html body #area .statesum ul{gap:0 14px}html body #area .statesum li span{font-size:.85rem}}
@media (min-width:900px){html body #area .statesum{max-width:520px;justify-self:end}}
html body #area .statesum li{align-items:flex-start!important;text-align:left!important}
html body #area .statesum li b{font-size:clamp(4.6rem,3.6rem + 4.6vw,8rem)!important;line-height:.88!important}
html body #area .statesum li span{font-size:1rem!important}
@media (min-width:900px){html body #area .statesum{max-width:600px}}
@media (max-width:420px){html body #area .statesum li b{font-size:4.4rem!important}}
@media (max-width:767px){html body #area .statesum li span{font-size:.85rem!important}}

/* wish-everyone-knew: no strike-through on the myths */
html body .wk-chips button,html body .wk-chips button[aria-selected="true"]{text-decoration:none!important}
html body .wk-myth s,html body .wk-pan .wk-myth s,html body .wk-sum s{text-decoration:none!important;font-style:italic}
html body .wk-pan .wk-myth s::before{content:"\201C"}
html body .wk-pan .wk-myth s::after{content:"\201D"}

/* ABOUT credentials: solid 24 */
html body .acred-num{color:var(--lime)!important;-webkit-text-stroke:0!important}

/* SMALL BLUE ACCENTS, site-wide: lines, rings, labels and tags. Green stays the main colour. */
html body .eyebrow::before{background:var(--blue-2)!important}
html body .gal--feature>.shot::before{background:var(--blue)!important;color:#fff!important}
html body #credentials .cc-ring,html body #proof .pf-ico{border-color:rgba(62,139,255,.7)!important}
html body #credentials .cc-groups dt,html body #who .who-often span{color:var(--blue-2)!important}
html body #who .who-stack span{box-shadow:inset 0 0 0 1.5px rgba(62,139,255,.85)!important}
html body .svc .tag,html body .svc .tag b{color:var(--blue-2)}
html body .svc .tag b{color:rgba(255,255,255,.85)}
html body .foot-col h3,html body .foot-col h4,html body .foot-col .foot-h,html body .foot-col>p:first-child{color:var(--blue-2)!important}
html body .wk-n{color:var(--blue-2)!important}
html body .wk-chips button:hover{border-color:var(--blue-2)}
html body .acred-count b{color:var(--blue-2)}
html body .phero .eyebrow{border-color:rgba(62,139,255,.7)!important}
html body .wy2-facts dt{color:rgba(11,12,10,.7)}
html body .statesum li::after{background:var(--blue-2)!important}
html body .lic-note a,html body .abt3-card--rate span{color:var(--blue-2)}
html body #certTabs button:hover{border-color:var(--blue-2)!important}
html body .gal--feature>.shot::before{background:var(--lime)!important;color:#0B0C0A!important}
html body #credentials .cert-hint{margin:0 0 6px;font:500 .9rem/1.4 var(--body);color:rgba(255,255,255,.6)}
html body #credentials #certTabs.has-open~.cert-hint{display:none}
@media (min-width:768px){html body #credentials .cert-hint{margin-bottom:0}}

/* service-page hero: location line is plain text, no rounded box */
html body .phero .eyebrow{display:flex!important;border:0!important;border-radius:0!important;padding:0!important;background:none!important}
html body .phero .eyebrow::before{display:block!important;content:"";width:24px;height:2px;background:var(--blue-2)!important;flex:none;margin-right:10px}
@media (max-width:767px){html body .phero .eyebrow{padding:0!important;white-space:normal!important;letter-spacing:.06em!important;font-size:.75rem!important;line-height:1.5}}

/* service hero stats: four separate bubbles */
html body .phero .phero-band{background:none!important;border-radius:0!important;padding:0!important;gap:14px!important;margin:6px 0 34px!important}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){background:var(--lime)!important;border:0!important;border-radius:24px!important;padding:20px 22px!important}
@media (max-width:767px){
html body .phero .phero-band{gap:10px!important;margin:24px 0 28px!important}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){padding:16px 16px!important;border-radius:22px!important}
}

/* hero stat bubbles (v2): icon chip, big numeral, label at the bottom */
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){position:relative;display:flex!important;flex-direction:column!important;justify-content:space-between;gap:18px!important;min-height:150px;padding:18px 20px 18px!important;border-radius:28px!important;background:linear-gradient(160deg,#82ff1a 0%,var(--lime) 55%,#6be600 100%)!important}
html body .phero .phero-band .pb-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0B0C0A;flex:none}
html body .phero .phero-band .pb-ico svg{width:19px;height:19px;fill:none;stroke:var(--lime);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body .phero .phero-band b{font-size:clamp(2.4rem,1.9rem + 1.8vw,3.4rem)!important;line-height:.9!important}
html body .phero .phero-band span:not(.pb-ico){font:600 .9rem/1.25 var(--body)!important;color:rgba(11,12,10,.85)!important}
@media (max-width:767px){
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){min-height:130px;padding:14px 16px 16px!important;gap:12px!important;border-radius:24px!important}
html body .phero .phero-band .pb-ico{width:32px;height:32px}
html body .phero .phero-band .pb-ico svg{width:16px;height:16px}
html body .phero .phero-band b{font-size:2.2rem!important}
html body .phero .phero-band span:not(.pb-ico){font-size:.85rem!important}
}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){background:var(--lime)!important}

/* hero stat bubbles (v3): icon on top, number + label grouped at the bottom with even spacing */
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){justify-content:flex-start!important;gap:0!important;min-height:168px;padding:20px 22px 22px!important}
html body .phero .phero-band .pb-ico{margin-bottom:auto!important}
html body .phero .phero-band b{display:block;margin:18px 0 8px!important;font-size:clamp(2.6rem,2.1rem + 1.6vw,3.4rem)!important;line-height:.95!important;letter-spacing:0}
html body .phero .phero-band b i{font-size:.42em!important;margin-left:.25em!important;vertical-align:baseline}
html body .phero .phero-band span:not(.pb-ico){display:block;font:600 1rem/1.3 var(--body)!important;letter-spacing:0!important}
@media (max-width:767px){
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){min-height:148px;padding:16px 16px 18px!important}
html body .phero .phero-band b{margin:14px 0 6px!important;font-size:2.4rem!important}
html body .phero .phero-band span:not(.pb-ico){font-size:.9rem!important;line-height:1.3!important}
}
@media (max-width:767px){html body .phero .phero-band span:not(.pb-ico){min-height:2.6em}}
html body .abt3-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%}
html body .abt3-frame img{transform:scale(1.75);transform-origin:68% 62%;object-position:68% 50%}
html body .shot img[src*="about-job-3"]{object-position:50% 24%}
html body .shot img[src*="about-job-1"]{object-position:50% 20%}

/* WHAT YOU'LL GET (v4): dark panel with a lime header band, so lime is an accent not the whole block */
html body .sec.wyg>.wrap.wy2{background:#14170f!important;border:1px solid rgba(255,255,255,.12);color:#fff;overflow:hidden;padding:0!important}
html body .sec.wyg .wy2-intro{background:var(--lime);padding:28px 22px 24px;color:#0B0C0A}
html body .sec.wyg .wy2-steps{padding:6px 22px 8px!important}
html body .sec.wyg .wy2-steps li{border-color:rgba(255,255,255,.14)!important}
html body .sec.wyg .wy2-steps li:last-child{border-bottom:0!important}
html body .sec.wyg .wy-node{background:var(--lime)!important;width:34px!important;height:34px!important}
html body .sec.wyg .wy-node::after{border-color:#0B0C0A!important}
html body .sec.wyg .wy-txt{color:#fff!important;font-size:1.15rem;font-weight:700;line-height:1.3}
html body .sec.wyg .wy2-intro h2{font-size:clamp(2.6rem,2rem + 3vw,4.2rem)!important;line-height:.95!important}
html body .sec.wyg .wy2-intro .btn{background:#0B0C0A!important}
@media (max-width:899px){
html body .sec.wyg>.wrap.wy2{display:block!important}
html body .sec.wyg .wy2-intro{display:block!important}
html body .sec.wyg .wy2-intro .sec-head{margin:0 0 18px!important}
html body .sec.wyg .wy2-intro>.btn{display:flex;margin:0 0 4px}
html body .sec.wyg .wy2-facts{margin-top:18px!important}
html body .sec.wyg .wy2-steps{margin:0!important}
}
@media (min-width:900px){
html body .sec.wyg>.wrap.wy2{display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,6fr)!important;gap:0!important;align-items:stretch!important;max-width:1208px}
html body .sec.wyg .wy2-intro{padding:48px 44px!important}
html body .sec.wyg .wy2-steps{padding:24px 44px!important;align-self:center}
html body .sec.wyg .wy2-steps li{padding:22px 0!important}
html body .sec.wyg .wy-txt{font-size:1.35rem}
}

/* HERO STATS (v4): quiet dark chips with a lime figure, no big lime blocks */
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:20px!important;min-height:0!important;padding:18px 20px!important;flex-direction:row!important;align-items:center!important;gap:14px!important;justify-content:flex-start!important}
html body .phero .phero-band .pb-ico{margin:0!important;width:44px;height:44px;background:rgba(62,139,255,.16)!important;box-shadow:inset 0 0 0 1.5px rgba(62,139,255,.7)}
html body .phero .phero-band .pb-ico svg{stroke:var(--blue-2)!important;width:20px;height:20px}
html body .phero .phero-band b{margin:0 0 4px!important;color:#fff!important;font-size:clamp(1.9rem,1.5rem + 1.2vw,2.5rem)!important}
html body .phero .phero-band b i{color:var(--lime)!important;opacity:1!important}
html body .phero .phero-band span:not(.pb-ico){color:rgba(255,255,255,.72)!important;font-size:.9rem!important;min-height:0!important}
html body .phero .phero-band li>:not(.pb-ico){display:block}
@media (max-width:767px){
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){padding:14px 12px!important;gap:10px!important}
html body .phero .phero-band .pb-ico{width:36px;height:36px}
html body .phero .phero-band b{font-size:1.8rem!important}
html body .phero .phero-band span:not(.pb-ico){font-size:.8rem!important;line-height:1.25!important}
}
html body .sec.wyg .wy2-steps li:not(:first-child) .wy-node,html body .sec.wyg .wy2-steps li .wy-node{background:var(--lime)!important;border:0!important}
html body .sec.wyg .wy-node::after{display:block!important}
/* hero stats v5: stacked, nothing wraps awkwardly */
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){flex-direction:column!important;align-items:flex-start!important;gap:0!important;padding:18px 18px 16px!important}
html body .phero .phero-band .pb-ico{margin:0 0 16px!important}
html body .phero .phero-band b{white-space:nowrap;margin:0 0 6px!important}
html body .phero .phero-band span:not(.pb-ico){min-height:0!important;font-size:.9rem!important}
@media (max-width:767px){html body .phero .phero-band b{font-size:2rem!important}}

/* HERO STATS (v6): lime cards, black type, one clean structure */
html body .phero .phero-band{gap:12px!important}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){position:relative;background:var(--lime)!important;border:0!important;border-radius:22px!important;padding:18px 20px 18px!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-end!important;min-height:150px!important;gap:0!important}
html body .phero .phero-band .pb-ico{position:absolute!important;top:16px;right:16px;margin:0!important;width:34px;height:34px;background:transparent!important;box-shadow:inset 0 0 0 1.5px #0B0C0A!important}
html body .phero .phero-band .pb-ico svg{stroke:#0B0C0A!important;width:17px;height:17px}
html body .phero .phero-band b{color:#0B0C0A!important;margin:0 0 6px!important;padding-top:12px;border-top:2px solid #0B0C0A;width:100%;font-size:clamp(2.3rem,1.8rem + 1.6vw,3.1rem)!important}
html body .phero .phero-band b i{color:#0B0C0A!important;opacity:.65}
html body .phero .phero-band span:not(.pb-ico){color:#0B0C0A!important;font:600 .92rem/1.25 var(--body)!important}
@media (max-width:767px){
html body .phero .phero-band{gap:10px!important}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){min-height:136px!important;padding:14px 14px 14px!important;border-radius:20px!important}
html body .phero .phero-band .pb-ico{top:12px;right:12px;width:30px;height:30px}
html body .phero .phero-band b{font-size:2.1rem!important;padding-top:10px}
html body .phero .phero-band span:not(.pb-ico){font-size:.85rem!important}
}

/* WHAT YOU'LL GET (v5): numbered report on dark, lime only on the header panel */
html body .sec.wyg .wy2-steps{counter-reset:wy}
html body .sec.wyg .wy2-steps li{counter-increment:wy;grid-template-columns:56px 1fr 34px!important;align-items:center!important;padding:20px 0!important}
html body .sec.wyg .wy-node{order:3;grid-column:3}
html body .sec.wyg .wy-card{grid-column:2;grid-row:1}
html body .sec.wyg .wy2-steps li::before{content:"0" counter(wy);grid-column:1;grid-row:1;font:700 2.4rem/1 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--blue-2)}
html body .sec.wyg .wy-txt{font-size:1.2rem!important}
html body .sec.wyg .wy2-intro .eyebrow{background:#0B0C0A;color:var(--lime)!important;border-color:#0B0C0A!important}
html body .sec.wyg .wy2-intro .lede{font-weight:500}
html body .sec.wyg .wy2-facts dd{font-weight:700}
@media (min-width:900px){
html body .sec.wyg .wy2-steps li{grid-template-columns:84px 1fr 38px!important;padding:26px 0!important}
html body .sec.wyg .wy2-steps li::before{font-size:3.4rem}
html body .sec.wyg .wy-txt{font-size:1.4rem!important}
html body .sec.wyg .wy2-steps li:hover .wy-txt{color:var(--lime)!important}
}
html body .phero .phero-band b{border-top:0!important;padding-top:0!important;width:auto!important;position:relative}
html body .phero .phero-band li::before{content:""!important;display:block!important;position:absolute;left:20px;top:20px;width:34px;height:4px;border-radius:2px;background:#0B0C0A}
@media (max-width:767px){html body .phero .phero-band li::before{left:14px;top:18px}}
@media (max-width:767px){
html body .sec.wyg .wy2-steps li{grid-template-columns:44px 1fr 30px!important;gap:10px!important}
html body .sec.wyg .wy2-steps li::before{font-size:1.9rem}
html body .sec.wyg .wy-txt{font-size:1.1rem!important}
html body .sec.wyg .wy-node{width:30px!important;height:30px!important}
}
html body .phero .phero-band li+li::before,html body .phero .phero-band li:nth-child(even)::before,html body .phero .phero-band li:nth-child(n+3)::before{content:""!important;display:block!important;left:20px!important;top:20px!important;width:34px!important;height:4px!important;background:#0B0C0A!important}
@media (max-width:767px){html body .phero .phero-band li+li::before,html body .phero .phero-band li:nth-child(even)::before,html body .phero .phero-band li:nth-child(n+3)::before{left:14px!important;top:18px!important}}

/* ABOUT HERO: headline and portrait visible together on first view */
@media (min-width:900px){
html body .abt3 .crumb{margin:0 0 4px}
html body .abt3-panel{padding:10px 0 30px!important}
html body .abt3-pill{margin-bottom:10px}
html body .abt3 h1{font-size:clamp(3.8rem,2.2rem + 3.6vw,5.6rem)!important}
html body .abt3-role{margin-top:8px;font-size:1.05rem}
html body .abt3-stage{height:520px!important;margin-top:10px!important}
html body .abt3-disc{width:330px!important;bottom:20px!important}
html body .abt3-photo{width:330px!important;bottom:28px!important}
html body .abt3-spore{top:2%!important}
html body .abt3-card--quote{top:42%!important}
html body .abt3-card--rate{top:26%!important}
html body .abt3-actions{margin-top:14px}
}
@media (max-width:899px){
html body .abt3 .crumb{margin:0 0 2px}
html body .abt3-panel{padding:6px 0 28px!important}
html body .abt3-pill{margin-bottom:10px}
html body .abt3-role{margin-top:8px}
html body .abt3-stage{height:430px!important;margin-top:8px!important}
html body .abt3-disc,html body .abt3-photo{width:66%!important;top:46%!important}
}

/* HERO STATS (v7): quiet. Dark cards, white figures, a small lime tick. */
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.12)!important;min-height:0!important;padding:20px 20px 16px!important;justify-content:flex-start!important;border-radius:18px!important}
html body .phero .phero-band li::before,html body .phero .phero-band li+li::before,html body .phero .phero-band li:nth-child(even)::before,html body .phero .phero-band li:nth-child(n+3)::before{background:var(--lime)!important;width:22px!important;height:3px!important;top:0!important;left:20px!important;border-radius:0 0 3px 3px!important}
html body .phero .phero-band .pb-ico{display:none!important}
html body .phero .phero-band b{color:#fff!important;font-size:clamp(1.8rem,1.5rem + 1vw,2.4rem)!important;margin:6px 0 4px!important;font-weight:600}
html body .phero .phero-band b i{color:rgba(255,255,255,.6)!important}
html body .phero .phero-band span:not(.pb-ico){color:rgba(255,255,255,.65)!important;font:500 .88rem/1.3 var(--body)!important}
@media (max-width:767px){
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){padding:16px 14px 14px!important}
html body .phero .phero-band li::before,html body .phero .phero-band li+li::before,html body .phero .phero-band li:nth-child(even)::before,html body .phero .phero-band li:nth-child(n+3)::before{left:14px!important}
html body .phero .phero-band b{font-size:1.7rem!important}
html body .phero .phero-band span:not(.pb-ico){font-size:.82rem!important}
}

/* WHAT YOU'LL GET (v6): no blue */
html body .sec.wyg .wy2-steps li::before{-webkit-text-stroke:0!important;color:rgba(255,255,255,.28)!important;font-weight:600}
html body .sec.wyg .wy2-steps li:hover::before{color:var(--lime)!important}
html body .sec.wyg .wy2-steps li{border-color:rgba(255,255,255,.12)!important}
html body .sec.wyg .wy-txt{font-weight:600!important}
html body .phero .phero-band b i{font-size:.75rem!important}

/* HERO INFO BOX (simplified): one slim bar. Five chips, the current issue's name and its link. No paragraphs. */
html body .scan-dock .scan-item p,html body .scan-dock .scan-tip,html body .scan-dock .scan-count,html body .scan-dock .scan-bar{display:none!important}
html body .scan-dock{padding:10px 14px!important;min-height:0!important}
html body .scan-dock .scan-head{display:none!important}
html body .scan-dock .scan-foot{display:flex;margin:0}
html body .scan-dock .scan-item b{font-size:1.05rem;margin:0}
html body .scan-dock .scan-item a{display:inline-flex;align-items:center;min-height:44px;margin:0}
@media (min-width:900px){
html body .scan-dock{display:flex!important;align-items:center;justify-content:space-between;gap:24px;grid-template-columns:none!important}
html body .scan-dock .scan-dock-l{display:flex;align-items:center;gap:14px;flex:1 1 auto}
html body .scan-dock .scan-finds{flex:0 1 330px;display:flex;align-items:center}
html body .scan-dock .scan-item{display:flex;align-items:center;gap:14px}
}
@media (max-width:899px){
html body .scan-dock .scan-finds{display:block;padding-top:6px}
html body .scan-dock .scan-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
}
@media (min-width:900px){
html body .scan-dock{padding:8px 14px!important;gap:20px!important}
html body .scan-dock .scan-dock-l{flex:0 0 auto}
html body .scan-dock .scan-finds{flex:1 1 auto;justify-content:flex-end}
html body .scan-dock .scan-item{white-space:nowrap;justify-content:flex-end}
html body .scan-dock .scan-item b{font-size:1.1rem;white-space:nowrap}
html body .scan-dock .scan-item a{white-space:nowrap}
}
html body .scan-dock .scan-finds,html body .scan-dock .scan-item{min-height:0!important;height:auto!important}
html body .scan-dock .scan-item{flex-direction:row!important}
html body .scan-dock .scan-item[data-find="all"] a{display:none}
@media (max-width:899px){
html body .scan-dock{padding:8px 12px 6px!important}
html body .scan-dock .scan-dock-l{display:flex;flex-direction:column;gap:8px}
html body .scan-dock .scan-foot{justify-content:flex-start;margin:0}
html body .scan-dock .scan-finds{padding:0!important;margin:0!important;position:static!important}
html body .scan-dock .scan-item{position:static!important;margin:0!important}
}
html body .scan-dock .scan-item:not([data-on]){display:none!important}

/* HERO: info bar removed from view. It stays in the page for keyboard and screen-reader users and shows only while it has focus. */
html body .scan-dock:not(:focus-within){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;border:0!important;white-space:nowrap}
@media (min-width:900px){
html body #top{min-height:0!important;height:auto!important}
html body #top>.wrap{min-height:0!important;padding-bottom:36px!important}
}
@media (min-width:900px){html body #top{min-height:clamp(640px,calc(100vh - 150px),760px)!important}}
@media (min-width:900px){html body #top{min-height:600px!important}}
@media (min-width:900px){html body #top{min-height:690px!important}}

@media (min-width:1000px){html body #top .hero-ui .hero-copy{margin-top:66px!important}}

/* HERO: only the Pause motion button stays visible, bottom-right of the hero. The chips and descriptions stay available to keyboard and screen-reader users. */
html body .scan-dock:not(:focus-within),html body .scan-dock{position:absolute!important;right:var(--gut,20px)!important;left:auto!important;bottom:18px!important;top:auto!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;clip:auto!important;border:0!important;background:none!important;box-shadow:none!important;display:block!important;z-index:6}
html body .scan-dock .scan-head,html body .scan-dock .scan-finds,html body .scan-dock .scan-bar,html body .scan-dock .scan-count{display:none!important}
html body .scan-dock:not(:has(.scan-chip:focus-visible)) .scan-chips{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html body .scan-dock:has(.scan-chip:focus-visible) .scan-chips{display:flex;position:absolute;right:0;bottom:56px;background:var(--panel,#191C16);padding:8px;border-radius:14px;border:1px solid rgba(255,255,255,.2)}
html body .scan-dock .scan-dock-l{display:block!important}
html body .scan-dock .scan-foot{display:block!important;margin:0}
html body .scan-dock .scan-pause{background:rgba(12,13,11,.7);backdrop-filter:blur(6px);min-height:44px}
@media (max-width:899px){
html body .scan-dock{position:absolute!important;right:var(--gut,16px)!important;bottom:14px!important}
}

/* Pause button: green, directly under the house */
html body .scan-dock .scan-pause{background:var(--lime)!important;border:0!important;color:#0B0C0A!important;backdrop-filter:none!important;font-weight:700}
html body .scan-dock .scan-pause:hover{background:#8dff2e!important}
@media (min-width:900px){html body .scan-dock{right:auto!important;left:calc(50% + 310px)!important;transform:translateX(-50%);bottom:92px!important}}
@media (min-width:900px){html body .scan-dock{bottom:128px!important}}

/* CERTIFICATIONS on phones: same composition as web (spore, bold tabs, roomy panel) */
@media (max-width:899px){
html body #credentials>.wrap>.spore.spore{display:block!important;position:absolute!important;top:-14px!important;right:16px!important;left:auto!important;font-size:84px!important}
html body #credentials .cert-head{margin-bottom:22px}
html body #credentials .cert-head .lede{font-size:.95rem;color:rgba(255,255,255,.7)}
html body #credentials #certTabs{gap:10px;margin-bottom:12px}
html body #credentials #certTabs button{min-height:92px;border-radius:20px}
html body #credentials #certTabs b{font-size:2.9rem}
html body #credentials .cert-hint{text-align:center;margin:4px 0 0}
html body #credentials .cert-bento .cc.is-on{padding:22px 20px 16px!important;border-radius:22px}
html body #credentials .cc-sub{font-size:1.1rem!important;color:#fff!important;margin-bottom:14px!important}
html body #credentials .cc-groups{gap:14px}
html body #credentials .cc-groups div{padding-top:12px}
html body #credentials .lic-note{font-size:.9rem}
}
@media (max-width:899px){html body #credentials>.wrap>.spore.spore{top:-22px!important;right:10px!important;font-size:52px!important}}
@media (max-width:767px){
html body .phero .phero-band{gap:12px!important;margin:24px 0 30px!important}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){padding:26px 16px 22px!important;min-height:132px!important;justify-content:flex-end!important;border-radius:20px!important}
html body .phero .phero-band li::before,html body .phero .phero-band li+li::before,html body .phero .phero-band li:nth-child(even)::before,html body .phero .phero-band li:nth-child(n+3)::before{left:16px!important;width:28px!important;height:4px!important}
html body .phero .phero-band b{font-size:2.5rem!important;margin:0 0 8px!important;line-height:1!important}
html body .phero .phero-band b i{font-size:.8rem!important}
html body .phero .phero-band span:not(.pb-ico){font-size:.95rem!important;line-height:1.3!important;color:rgba(255,255,255,.72)!important}
}
@media (max-width:767px){
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){justify-content:flex-start!important;min-height:0!important}
html body .phero .phero-band span:not(.pb-ico){min-height:2.6em!important}
}

/* ABOUT credentials (v4): same look as the home page, no dropdowns */
html body #abt-creds{position:relative;overflow:hidden}
html body #abt-creds::before{content:"";position:absolute;left:-200px;top:-160px;width:620px;height:620px;border-radius:50%;pointer-events:none;background:repeating-radial-gradient(circle,transparent 0 54px,rgba(118,249,9,.09) 55px 56px)}
html body #abt-creds>.wrap{position:relative}
html body #abt-creds .cert-head{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:26px}
html body #abt-creds .cert-head h2{margin:8px 0 0;font-size:clamp(2.4rem,1.8rem + 3vw,4rem);line-height:1}
html body #abt-creds .cert-head h2 em{font-style:normal;color:var(--lime)}
html body #abt-creds .cert-head .lede{margin:0;max-width:46ch;color:rgba(255,255,255,.7)}
html body #abt-creds .ac-grid{display:grid;grid-template-columns:1fr;gap:12px}
html body #abt-creds .ac{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num tag" "num sub";align-items:center;column-gap:18px;padding:20px 20px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:rgba(255,255,255,.035)}
html body #abt-creds .ac-num{grid-area:num;margin:0;font:700 3.6rem/.9 var(--display);color:#fff}
html body #abt-creds .ac--a .ac-num{color:var(--lime)}
html body #abt-creds .ac-tag{grid-area:tag;margin:0 0 4px;align-self:end;font:600 .75rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2)}
html body #abt-creds .ac-sub{grid-area:sub;margin:0;align-self:start;font-size:.95rem;line-height:1.45;color:rgba(255,255,255,.82)}
html body #abt-creds .ac-cta{margin:24px 0 0}
html body #abt-creds .ac-cta .btn{width:100%;justify-content:center}
@media (min-width:768px){
html body #abt-creds .cert-head{grid-template-columns:1.25fr 1fr;align-items:end;gap:48px;margin-bottom:36px;padding-right:190px}
html body #abt-creds .ac-grid{grid-template-columns:repeat(3,1fr);gap:16px}
html body #abt-creds .ac{grid-template-columns:1fr;grid-template-areas:"tag" "num" "sub";row-gap:6px;padding:28px 28px 30px}
html body #abt-creds .ac-num{font-size:clamp(5rem,4rem + 3vw,7rem)}
html body #abt-creds .ac-tag{align-self:start}
html body #abt-creds .ac-sub{font-size:1rem;max-width:30ch}
html body #abt-creds .ac-cta .btn{width:auto}
}

/* Pause button: one fixed spot at the bottom of the hero, centred under the house */
html body .scan-dock,html body .scan-dock:not(:focus-within){position:absolute!important;left:0!important;right:0!important;transform:none!important;bottom:14px!important;top:auto!important;width:auto!important;display:flex!important;justify-content:center!important;pointer-events:none}
html body .scan-dock .scan-pause{pointer-events:auto}
@media (min-width:900px){html body .scan-dock,html body .scan-dock:not(:focus-within){left:46%!important}}
/* the house is framed to fit now, so its edges no longer need to fade out */
html body .hero--house .house-stage,html body .hero-house,html body .hero-house .house-stage{-webkit-mask-image:none!important;mask-image:none!important}
html body .hero--house .house-stage,html body .hero-house .house-stage{overflow:visible!important}
@media (min-width:900px){html body .scan-dock,html body .scan-dock:not(:focus-within){left:calc(46% + 80px)!important}}

/* CERTIFICATIONS on phones, polish (home + about) */
@media (max-width:767px){
html body #credentials .cert-head h2,html body #abt-creds .cert-head h2{font-size:2.7rem;line-height:.98}
html body #credentials .cert-head,html body #abt-creds .cert-head{gap:12px;margin-bottom:20px}
html body #credentials .cert-head .lede,html body #abt-creds .cert-head .lede{font-size:.95rem;line-height:1.55}
/* home: bolder tabs with a label under the number, hint as a small pill */
html body #credentials #certTabs{gap:10px}
html body #credentials #certTabs button{min-height:104px;gap:6px;border-radius:22px;border-width:1.5px}
html body #credentials #certTabs b{font-size:3.2rem}
html body #credentials #certTabs span{font-size:.75rem;letter-spacing:.14em}
html body #credentials .cert-hint{display:flex;justify-content:center;margin:12px 0 0;padding:0}
html body #credentials .cert-hint::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);margin:0 8px 0 0;align-self:center;flex:none}
html body #credentials .cert-bento .cc.is-on{margin-top:12px;border-color:rgba(118,249,9,.35)}
html body #credentials .cc-groups dt{font-size:.75rem;color:var(--blue-2)}
html body #credentials .lic-note{margin-top:20px;padding-top:16px;font-size:.88rem;line-height:1.55}
/* about: tidy rows with a divider between number and text */
html body #abt-creds .ac-grid{gap:10px}
html body #abt-creds .ac{grid-template-columns:84px 1fr;column-gap:0;padding:16px 18px 16px 0;border-radius:20px;overflow:hidden}
html body #abt-creds .ac-num{font-size:3.4rem;text-align:center;align-self:center;padding:0 6px;border-right:1px solid rgba(255,255,255,.14);height:100%;display:flex;align-items:center;justify-content:center}
html body #abt-creds .ac-tag,html body #abt-creds .ac-sub{padding-left:16px}
html body #abt-creds .ac-sub{font-size:.92rem}
html body #abt-creds .ac--a{border-color:rgba(118,249,9,.35)}
html body #abt-creds .ac-cta{margin-top:20px}
}
@media (max-width:767px){html body #credentials .cert-head h2,html body #abt-creds .cert-head h2{margin-bottom:10px}}
/* asbestos photo 3: crop to the equipment table */
html body .shot img[src*="sampling-setup"]{object-position:30% 100%}
html body .shot img[src*="sampling-setup"]{object-position:30% 100%;transform:scale(1.45);transform-origin:32% 88%}
@media (hover:hover){html body .shot--photo:hover img[src*="sampling-setup"]{transform:scale(1.5)}}
@media (max-width:767px){html body .shot img[src*="sampling-setup"]{object-position:38% 100%;transform:scale(1.2);transform-origin:38% 92%}}
@media (max-width:767px){html body .shot img[src*="sampling-setup"]{object-position:36% 100%;transform:scale(1.7);transform-origin:36% 100%}}
/* asbestos photo 3: keep both the HK shirt and the equipment table in view */
html body .shot img[src*="sampling-setup"]{object-position:50% 100%;transform:scale(1.15);transform-origin:100% 100%}
@media (hover:hover){html body .shot--photo:hover img[src*="sampling-setup"]{transform:scale(1.2)}}
@media (max-width:767px){
html body .gal--feature:has(img[src*="sampling-setup"])>.shot:nth-child(n+2){grid-column:1/-1!important;margin-top:0!important;aspect-ratio:4/3!important}
html body .shot img[src*="sampling-setup"]{object-position:50% 100%;transform:scale(1.1);transform-origin:100% 100%}
}

/* two-photo galleries: two equal portraits side by side */
@media (min-width:768px){
html body .gal--feature:not(:has(.shot:nth-child(3))){grid-template-columns:1fr 1fr!important}
html body .gal--feature:not(:has(.shot:nth-child(3)))>.shot{grid-row:auto!important;height:auto!important;aspect-ratio:4/3!important}
html body .gal--feature:not(:has(.shot:nth-child(3)))>.shot:first-child{grid-column:auto!important}
}
@media (max-width:767px){
html body .gal--feature:not(:has(.shot:nth-child(3)))>.shot,html body .gal--feature:not(:has(.shot:nth-child(3)))>.shot:nth-child(n){grid-column:1/-1!important;margin-top:0!important;aspect-ratio:4/3!important}
}

/* SERVICE HERO STATS (v8): open editorial row, no cards. Big numerals between thin rules. */
html body .phero .phero-band{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:0!important;margin:10px 0 34px!important;padding:0!important;background:none!important;border:0!important;border-top:1px solid rgba(255,255,255,.22)!important;border-bottom:1px solid rgba(255,255,255,.22)!important;border-radius:0!important}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){position:relative;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:0!important;min-height:0!important;padding:26px 22px 24px!important;background:none!important;border:0!important;border-left:1px solid rgba(255,255,255,.14)!important;border-radius:0!important;box-shadow:none!important}
html body .phero .phero-band li:first-child{border-left:0!important;padding-left:0!important}
html body .phero .phero-band li::before,html body .phero .phero-band li+li::before,html body .phero .phero-band li:nth-child(even)::before,html body .phero .phero-band li:nth-child(n+3)::before{display:none!important}
html body .phero .phero-band .pb-ico{display:grid!important;position:static!important;place-items:center;width:34px;height:34px;margin:0 0 16px!important;background:none!important;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(118,249,9,.7)!important}
html body .phero .phero-band .pb-ico svg{width:16px!important;height:16px!important;stroke:var(--lime)!important}
html body .phero .phero-band b{margin:0 0 8px!important;padding:0!important;border:0!important;width:auto!important;color:#fff!important;font:700 clamp(2.4rem,1.8rem + 2vw,3.6rem)/.95 var(--display)!important;letter-spacing:0;white-space:nowrap}
html body .phero .phero-band b i{font-size:.9rem!important;margin-left:.3em;color:var(--lime)!important;font-style:normal;letter-spacing:.04em}
html body .phero .phero-band span:not(.pb-ico){min-height:0!important;color:rgba(255,255,255,.72)!important;font:500 .95rem/1.3 var(--body)!important;letter-spacing:0!important;text-transform:none!important}
@media (max-width:767px){
html body .phero .phero-band{grid-template-columns:1fr 1fr!important;margin:22px 0 28px!important}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){padding:20px 16px 18px!important;border-left:0!important;border-top:0!important}
html body .phero .phero-band li:nth-child(odd){padding-left:0!important}
html body .phero .phero-band li:nth-child(even){border-left:1px solid rgba(255,255,255,.14)!important}
html body .phero .phero-band li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)!important}
html body .phero .phero-band .pb-ico{margin-bottom:12px!important}
html body .phero .phero-band b{font-size:2.6rem!important;margin-bottom:6px!important}
html body .phero .phero-band span:not(.pb-ico){font-size:.9rem!important;min-height:2.6em!important}
}

/* PHOTOS on phones: staggered, overlapping, not a plain column */
@media (max-width:767px){
html body .gal--feature:not(:has(.shot:nth-child(3))){display:block!important;padding-bottom:6px}
html body .gal--feature:not(:has(.shot:nth-child(3)))>.shot{display:block;position:relative;border-radius:24px!important}
html body .gal--feature:not(:has(.shot:nth-child(3)))>.shot:first-child{width:86%!important;aspect-ratio:4/5!important}
html body .gal--feature:not(:has(.shot:nth-child(3)))>.shot:nth-child(2){width:74%!important;aspect-ratio:1/1!important;margin:-56px 0 0 auto!important;border:5px solid var(--bg,#0C0D0B)!important;box-shadow:0 14px 30px rgba(0,0,0,.5)}
html body .gal--feature:has(img[src*="sampling-setup"])>.shot:nth-child(2){width:84%!important;margin:-40px 0 0 auto!important;border:5px solid var(--bg,#0C0D0B)!important;aspect-ratio:16/10!important}
html body .gal--feature:has(img[src*="sampling-setup"])>.shot:nth-child(3){width:92%!important;margin:-40px auto 0 0!important;border:5px solid var(--bg,#0C0D0B)!important;aspect-ratio:4/3!important;grid-column:auto!important}
html body .gal--feature:has(img[src*="sampling-setup"]){display:block!important}
html body .gal--feature:has(img[src*="sampling-setup"])>.shot:first-child{aspect-ratio:4/3!important;width:100%!important}
}
@media (max-width:767px){
html body .gal--feature:not(:has(.shot:nth-child(3))){display:flex!important;flex-direction:column;gap:14px}
html body .gal--feature:not(:has(.shot:nth-child(3)))>.shot:first-child{width:88%!important;aspect-ratio:4/5!important;align-self:flex-start}
html body .gal--feature:not(:has(.shot:nth-child(3)))>.shot:nth-child(2){width:78%!important;aspect-ratio:1/1!important;margin:0!important;align-self:flex-end;border:0!important;box-shadow:none!important}
html body .gal--feature:has(img[src*="sampling-setup"]){display:flex!important;flex-direction:column;gap:14px}
html body .gal--feature:has(img[src*="sampling-setup"])>.shot:first-child{width:100%!important;aspect-ratio:4/3!important}
html body .gal--feature:has(img[src*="sampling-setup"])>.shot:nth-child(2){width:80%!important;margin:0!important;align-self:flex-end;border:0!important;aspect-ratio:16/10!important}
html body .gal--feature:has(img[src*="sampling-setup"])>.shot:nth-child(3){width:92%!important;margin:0!important;align-self:flex-start;border:0!important;aspect-ratio:4/3!important}
}

/* SERVICE HERO STATS, phones (v9): no grid lines at all. Free-standing figures, second column dropped for a stagger. */
@media (max-width:767px){
html body .phero .phero-band{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px 20px!important;margin:26px 0 30px!important;border:0!important;padding:0!important}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(odd),html body .phero .phero-band li:nth-child(n+3){border:0!important;padding:8px 0 10px!important;box-shadow:none!important}
html body .phero .phero-band li:nth-child(even){margin-top:26px!important;padding-left:0!important}
html body .phero .phero-band .pb-ico{margin-bottom:10px!important}
html body .phero .phero-band b{font-size:3rem!important;margin-bottom:4px!important}
html body .phero .phero-band span:not(.pb-ico){min-height:0!important;font-size:.92rem!important}
}

/* SERVICE HERO STATS (v10): four separate black bubbles with a blue outline. No rules, no dividers. */
html body .phero .phero-band{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:14px!important;margin:10px 0 34px!important;padding:0!important;border:0!important;background:none!important}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(odd),html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:0!important;margin:0!important;padding:20px 20px 18px!important;min-height:0!important;background:#0B0C0A!important;border:1.5px solid rgba(62,139,255,.75)!important;border-radius:26px!important;box-shadow:none!important}
html body .phero .phero-band li::before,html body .phero .phero-band li::after{display:none!important}
html body .phero .phero-band .pb-ico{display:grid!important;position:static!important;place-items:center;width:34px;height:34px;margin:0 0 14px!important;border-radius:50%;background:rgba(62,139,255,.14)!important;box-shadow:none!important}
html body .phero .phero-band .pb-ico svg{width:17px!important;height:17px!important;stroke:var(--blue-2)!important}
html body .phero .phero-band b{margin:0 0 6px!important;font:700 clamp(2.2rem,1.7rem + 1.8vw,3.2rem)/.95 var(--display)!important;color:#fff!important;white-space:nowrap}
html body .phero .phero-band b i{font-size:.85rem!important;margin-left:.3em;color:var(--blue-2)!important;font-style:normal}
html body .phero .phero-band span:not(.pb-ico){min-height:0!important;color:rgba(255,255,255,.75)!important;font:500 .92rem/1.3 var(--body)!important}
@media (max-width:767px){
html body .phero .phero-band{grid-template-columns:1fr 1fr!important;gap:12px!important;margin:24px 0 30px!important}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(odd),html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){padding:16px 16px 14px!important;margin:0!important;border-radius:24px!important}
html body .phero .phero-band b{font-size:2.5rem!important}
html body .phero .phero-band span:not(.pb-ico){font-size:.88rem!important;min-height:2.6em!important}
}

/* SERVICE HERO STATS (v11): green outline. Phones: flowing pills (number + label on one line), not squares. */
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(odd),html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){border-color:rgba(118,249,9,.8)!important}
html body .phero .phero-band .pb-ico{background:rgba(118,249,9,.12)!important}
html body .phero .phero-band .pb-ico svg{stroke:var(--lime)!important}
html body .phero .phero-band b i{color:var(--lime)!important}
@media (max-width:767px){
html body .phero .phero-band{display:flex!important;flex-wrap:wrap;gap:10px!important;margin:24px 0 30px!important}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(odd),html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){flex-direction:row!important;align-items:center!important;gap:10px!important;width:auto!important;padding:10px 18px 10px 12px!important;border-radius:999px!important}
html body .phero .phero-band .pb-ico{margin:0!important;width:30px;height:30px;flex:none}
html body .phero .phero-band b{margin:0!important;font-size:1.7rem!important;line-height:1!important}
html body .phero .phero-band b i{font-size:.7rem!important}
html body .phero .phero-band span:not(.pb-ico){min-height:0!important;font-size:.88rem!important;line-height:1.2!important;max-width:9.5em}
}
@media (max-width:767px){html body .phero .phero-band b i{font-size:.75rem!important}}

/* SERVICE PAGES: a few tiny blue accents */
html body:has(.phero) .crumb span{color:var(--blue-2)}
html body:has(.phero) .wy-txt::selection{background:var(--blue)}
html body:has(.phero) .sec .sec-head .eyebrow::before{background:var(--blue-2)!important}
html body:has(.phero) .gal--feature .cap small{color:var(--blue-2)}

/* PHOTO GALLERIES on phones (final): photo on top, caption underneath so nothing covers it. Clean widths, no offsets. */
@media (max-width:767px){
html body .gal--feature{display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px 12px!important;padding:0 0 8px!important;counter-reset:ph}
html body .gal--feature>.shot,html body .gal--feature>.shot:first-child,html body .gal--feature>.shot:nth-child(n){position:relative;display:flex!important;flex-direction:column;width:auto!important;height:auto!important;aspect-ratio:auto!important;margin:0!important;align-self:stretch!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:22px!important;box-shadow:none!important;background:var(--panel,#191C16)!important;overflow:hidden;grid-column:auto!important;grid-row:auto!important}
html body .gal--feature>.shot:first-child{grid-column:1/-1!important}
html body .gal--feature>.shot img{position:relative!important;inset:auto!important;display:block;width:100%!important;height:auto!important;aspect-ratio:1/1;object-fit:cover;transform:none!important;order:1}
html body .gal--feature>.shot:first-child img{aspect-ratio:4/3}
html body .gal--feature>.shot .cap{position:static!important;order:2;display:block;padding:12px 14px 14px!important;background:none!important;text-shadow:none!important;min-height:0!important}
html body .gal--feature>.shot .cap b{display:block;font-size:1rem!important;line-height:1.2;color:#fff!important}
html body .gal--feature>.shot .cap small{display:block!important;margin-top:4px;font-size:.75rem!important;line-height:1.35;letter-spacing:.06em}
html body .gal--feature>.shot::before{top:12px!important;left:12px!important}
/* two-photo pages and the asbestos page: every photo full width */
html body .gal--feature:not(:has(.shot:nth-child(3)))>.shot,html body .gal--feature:has(img[src*="sampling-setup"])>.shot{grid-column:1/-1!important}
html body .gal--feature:not(:has(.shot:nth-child(3)))>.shot img,html body .gal--feature:has(img[src*="sampling-setup"])>.shot img{aspect-ratio:4/3}
html body .gal--feature>.shot img[src*="sampling-setup"]{object-position:50% 100%}
}
@media (max-width:767px){
html body div.gal.gal--feature.gal--feature>div.shot.shot--photo.shot{width:100%!important;max-width:none!important;min-width:0!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;margin:0!important;transform:none!important}
html body div.gal.gal--feature.gal--feature>div.shot.shot--photo.shot>img{width:100%!important;height:auto!important;min-height:0!important;flex:none!important;margin:0!important}
html body div.gal.gal--feature.gal--feature>div.shot.shot--photo.shot>.cap{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;margin:0!important;padding:12px 14px 14px!important;text-align:left!important;transform:none!important;flex:none!important}
html body div.gal.gal--feature.gal--feature>div.shot.shot--photo.shot>.cap b,html body div.gal.gal--feature.gal--feature>div.shot.shot--photo.shot>.cap small{margin-left:0!important;padding-left:0!important;text-align:left!important}
}

/* WHEN TO CALL list: every row on the same grid */
html body .wtc .signal>div{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;column-gap:16px!important;align-items:center!important;justify-items:start!important;text-align:left!important;padding-left:0!important;margin-left:0!important}
html body .wtc .signal>div>svg{width:44px!important;height:44px!important;margin:0!important;justify-self:start!important}
html body .wtc .signal>div>p{margin:0!important;padding:0!important;text-align:left!important;max-width:none!important;width:100%}
html body .wtc .signal>div>p{text-wrap:wrap!important}
html body #who .who-often a{padding-left:0!important;padding-right:0!important}
@media (max-width:767px){
html body #who .who-cta-btns{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important}
html body #who .who-cta-btns .btn,html body #who .who-cta-btns a{width:100%!important;justify-content:center!important;text-align:center!important}
}

/* FOOTER (web): calmer. One bottom row: copyright and credentials left, legal links right. */
html body .foot-legal .fl-x{margin-left:.3em}
@media (min-width:900px){
html body .site-foot .foot-grid{align-items:start;padding-bottom:48px}
html body .site-foot .foot-logo{max-width:190px;height:auto}
html body .site-foot .foot-tag{margin-top:22px}
html body .site-foot .foot-col h3{border-bottom:0!important;padding-bottom:0!important;margin-bottom:18px}
html body .site-foot .foot-col a{padding:6px 0}
html body .site-foot .foot-bot{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 32px;padding:22px 0 0!important;border-top:1px solid rgba(255,255,255,.12)!important;border-bottom:0!important}
html body .site-foot .foot-bot>span{font-size:.75rem;letter-spacing:.1em;color:rgba(255,255,255,.55)}
html body .site-foot .foot-bot>span:nth-child(2){margin-right:auto}
html body .site-foot .foot-bot .foot-legal{display:flex!important;gap:6px 26px!important;margin:0!important;padding:0!important;border:0!important;justify-content:flex-end}
html body .site-foot .foot-bot .foot-legal a{font-size:.75rem;letter-spacing:.1em;color:rgba(255,255,255,.7)}
}
@media (min-width:900px){
html body .site-foot .foot-bot{display:grid!important;grid-template-columns:1fr auto;grid-template-areas:"c l" "q l";gap:6px 32px;align-items:center}
html body .site-foot .foot-bot>span:nth-child(1){grid-area:c}
html body .site-foot .foot-bot>span:nth-child(2){grid-area:q;margin:0}
html body .site-foot .foot-bot .foot-legal{grid-area:l;flex-wrap:nowrap;white-space:nowrap}
}

/* SERVICE HERO (v6): lab-sample specimen. Viewfinder brackets round the logo, a tilted sample tag, an outlined watermark word. */
html body .phero{background:radial-gradient(900px 500px at 85% 20%,rgba(118,249,9,.07),transparent 60%),radial-gradient(700px 400px at 0% 100%,rgba(62,139,255,.06),transparent 60%)!important}
html body .phero .phero-copy{position:relative}
html body .phero .phero-wm{position:absolute;left:-6px;top:-18px;z-index:0;pointer-events:none;user-select:none;font:700 clamp(7rem,28vw,17rem)/.8 var(--display);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07);white-space:nowrap}
html body .phero .phero-copy>*:not(.phero-wm){position:relative;z-index:1}
html body .phero .phero-mark{position:relative;overflow:visible!important;border:0!important;background:linear-gradient(160deg,#171a13,#0d0f0b)!important;border-radius:20px!important}
html body .phero .phero-mark .vf{position:absolute;width:34px;height:34px;border:3px solid var(--lime);z-index:2}
html body .phero .phero-mark .vf-a{left:-6px;top:-6px;border-right:0;border-bottom:0;border-top-left-radius:10px}
html body .phero .phero-mark .vf-b{right:-6px;top:-6px;border-left:0;border-bottom:0;border-top-right-radius:10px}
html body .phero .phero-mark .vf-c{left:-6px;bottom:-6px;border-right:0;border-top:0;border-bottom-left-radius:10px}
html body .phero .phero-mark .vf-d{right:-6px;bottom:-6px;border-left:0;border-top:0;border-bottom-right-radius:10px}
html body .phero .stag{position:absolute;z-index:3;right:-14px;bottom:26px;width:138px;padding:14px 14px 12px;background:#F1F2EC;color:#0B0C0A;border-radius:6px 6px 6px 22px;transform:rotate(5deg);box-shadow:0 14px 30px rgba(0,0,0,.5)}
html body .phero .stag p{margin:0}
html body .phero .stag-hole{position:absolute;right:12px;top:10px;width:10px;height:10px;border-radius:50%;background:#0d0f0b;box-shadow:inset 0 0 0 2px #bfc3b6}
html body .phero .stag-k{font:600 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#5a5f52}
html body .phero .stag-n{font:700 2.4rem/1 var(--display);margin-top:4px!important}
html body .phero .stag-s{font:700 1.05rem/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}
html body .phero .stag-t{font:500 .75rem/1.2 var(--mono);color:#5a5f52;margin-top:2px!important}
html body .phero .stag-bar{display:block;height:20px;margin-top:10px;background:repeating-linear-gradient(90deg,#0B0C0A 0 2px,transparent 2px 4px,#0B0C0A 4px 5px,transparent 5px 8px,#0B0C0A 8px 11px,transparent 11px 13px)}
@media (min-width:900px){html body .phero .phero-mark{max-width:420px}html body .phero .stag{right:-26px;width:156px;bottom:34px}}
@media (max-width:767px){
html body .phero .phero-wm{top:6px;font-size:7.5rem}
html body .phero .stag{width:112px;right:10px;bottom:-14px;padding:10px 10px 8px;transform:rotate(4deg)}
html body .phero .stag-n{font-size:1.7rem}
html body .phero .stag-s{font-size:.9rem}
html body .phero .stag-bar{height:12px;margin-top:6px}
html body .phero .phero-mark{margin-bottom:34px!important}
}
html body .phero .stag-k{padding-right:18px;white-space:nowrap}
@media (max-width:767px){
html body .phero .stag{right:4px;bottom:-24px;width:104px}
html body .phero .stag-k{font-size:.75rem;letter-spacing:.06em}
html body .phero .phero-mark .stage{margin-right:70px}
html body .phero .phero-mark{margin-bottom:42px!important}
}
@media (max-width:767px){html body .phero .stag-hole{display:none}html body .phero .stag-k{padding-right:0}}

/* ===== INDEX ON PHONES: polish pass ===== */
@media (max-width:767px){
/* who we work for: buttons fill the card */
html body #who .who-cta{display:block!important}
html body #who .who-cta-btns{width:100%!important}
html body #who .who-cta-btns .btn{flex:none!important;min-height:52px!important;font-size:.95rem!important}
/* contact form: one field per row so nothing is cramped */
html body #inquiry .row{display:grid!important;grid-template-columns:1fr!important;gap:14px!important}
html body #inquiry .f input,html body #inquiry .f select,html body #inquiry .f textarea{min-height:52px;font-size:1rem}
/* what you can check: stat labels readable */
html body #proof .pf-stats{gap:14px 10px}
html body #proof .pf-stats span{letter-spacing:.06em}
/* footer legal links: two even columns instead of an orphan */
html body .site-foot .foot-bot .foot-legal{display:grid!important;grid-template-columns:1fr 1fr;gap:6px 12px;justify-items:center;text-align:center;margin-top:12px}
html body .site-foot .foot-bot .foot-legal a{padding:8px 0}
}

/* ===== WHAT YOU'LL GET (v7): bolder rows, clearer numbers, roomier panel — web and mobile ===== */
html body .sec.wyg .wy2-steps li::before{color:rgba(118,249,9,.55)!important;font-weight:700}
html body .sec.wyg .wy2-steps li:hover::before{color:var(--lime)!important}
html body .sec.wyg .wy-txt{font-weight:700!important;letter-spacing:-.005em}
html body .sec.wyg .wy-node{width:40px!important;height:40px!important;box-shadow:0 0 0 6px rgba(118,249,9,.14)}
html body .sec.wyg .wy2-steps li{padding-top:24px!important;padding-bottom:24px!important}
html body .sec.wyg .wy2-intro h2{font-size:clamp(2.9rem,2.2rem + 3.2vw,4.6rem)!important}
html body .sec.wyg .wy2-intro .lede{font-size:1.05rem;line-height:1.55;color:rgba(11,12,10,.88)!important}
html body .sec.wyg .wy2-intro .btn{min-height:54px;font-size:1rem;padding-inline:26px}
html body .sec.wyg .wy2-facts{gap:20px!important}
html body .sec.wyg .wy2-facts dd{font-size:1.02rem!important;line-height:1.3}
html body .sec.wyg .wy2-facts dt{font-weight:600}
@media (max-width:899px){
html body .sec.wyg>.wrap.wy2{margin-inline:0!important;border-radius:30px!important}
html body .sec.wyg .wy2-intro{padding:30px 22px 26px!important}
html body .sec.wyg .wy2-steps{padding:4px 22px 6px!important}
html body .sec.wyg .wy2-steps li{grid-template-columns:48px 1fr 40px!important;padding:20px 0!important}
html body .sec.wyg .wy2-steps li::before{font-size:2.2rem!important}
html body .sec.wyg .wy-txt{font-size:1.12rem!important;line-height:1.3}
}
@media (max-width:899px){html body .sec.wyg>.wrap.wy2{width:calc(100% - 40px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}}

/* service hero: microbe pattern background (same as the home page hero); grey watermark word removed */
html body .phero .phero-wm{display:none!important}
html body .phero{isolation:isolate}
html body .phero>.field{opacity:.07;z-index:0}
html body .phero>.wrap{position:relative;z-index:1}

/* ===== SERVICE HERO STATS (v12): no bubbles. White figures, green labels, a short green tick. ===== */
html body .phero .phero-band{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:28px 32px!important;margin:14px 0 36px!important;padding:0!important;background:none!important;border:0!important}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(odd),html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){position:relative;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important;margin:0!important;padding:18px 0 0!important;min-height:0!important;width:auto!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
html body .phero .phero-band li::before,html body .phero .phero-band li+li::before,html body .phero .phero-band li:nth-child(even)::before,html body .phero .phero-band li:nth-child(n+3)::before{content:""!important;display:block!important;position:absolute;left:0!important;top:0!important;width:34px!important;height:4px!important;border-radius:2px;background:var(--lime)!important}
html body .phero .phero-band .pb-ico{display:none!important}
html body .phero .phero-band b{margin:0 0 6px!important;padding:0!important;color:#fff!important;font:700 clamp(2.6rem,2rem + 2vw,4rem)/.95 var(--display)!important;white-space:nowrap}
html body .phero .phero-band b i{margin-left:.25em;font-size:.9rem!important;font-style:normal;color:var(--lime)!important}
html body .phero .phero-band span:not(.pb-ico){min-height:0!important;max-width:none!important;color:var(--lime)!important;font:600 .78rem/1.35 var(--mono)!important;letter-spacing:.12em!important;text-transform:uppercase!important}
@media (max-width:767px){
html body .phero .phero-band{display:grid!important;grid-template-columns:1fr 1fr!important;gap:26px 22px!important;margin:26px 0 30px!important}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(odd),html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){flex-direction:column!important;align-items:flex-start!important;padding:16px 0 0!important;border:0!important;border-radius:0!important}
html body .phero .phero-band b{font-size:3rem!important}
html body .phero .phero-band span:not(.pb-ico){font-size:.75rem!important;min-height:0!important;max-width:none!important}
}

/* ===== PHOTOS (v3): not a list. Mosaic of tall cards, neutral captions. ===== */
html body .gal--feature .cap small,html body:has(.phero) .gal--feature .cap small{color:rgba(255,255,255,.62)!important}
@media (max-width:767px){
html body .gal--feature{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
html body div.gal.gal--feature.gal--feature>div.shot.shot--photo.shot{grid-column:auto!important}
html body div.gal.gal--feature.gal--feature>div.shot.shot--photo.shot>img{aspect-ratio:3/4!important}
/* mold: one wide lead photo, two tall ones under it */
html body div.gal.gal--feature.gal--feature>div.shot.shot--photo.shot:first-child:nth-last-child(3){grid-column:1/-1!important}
html body div.gal.gal--feature.gal--feature>div.shot.shot--photo.shot:first-child:nth-last-child(3)>img{aspect-ratio:4/3!important}
/* asbestos: two tall photos, then the wide one that shows the shirt and the table */
html body div.gal.gal--feature.gal--feature>div.shot.shot--photo.shot:nth-child(3):last-child{grid-column:1/-1!important}
html body div.gal.gal--feature.gal--feature>div.shot.shot--photo.shot:nth-child(3):last-child>img[src*="sampling-setup"]{aspect-ratio:4/3!important}
html body div.gal.gal--feature.gal--feature>div.shot.shot--photo.shot:first-child:nth-last-child(3):has(img[src*="asbestos-floor"]){grid-column:auto!important}
html body div.gal.gal--feature.gal--feature>div.shot.shot--photo.shot:first-child:nth-last-child(3):has(img[src*="asbestos-floor"])>img{aspect-ratio:3/4!important}
/* captions: tight, so two columns still fit */
html body .gal--feature>.shot .cap{padding:10px 12px 12px!important}
html body .gal--feature>.shot .cap b{font-size:.95rem!important}
html body .gal--feature>.shot .cap small{font-size:.75rem!important;letter-spacing:.04em!important;text-transform:none!important;font-family:var(--body)!important;line-height:1.3}
}
@media (max-width:767px){
/* two-photo pages: side by side */
html body div.gal.gal--feature.gal--feature:not(:has(.shot:nth-child(3)))>div.shot.shot--photo.shot{grid-column:auto!important}
html body div.gal.gal--feature.gal--feature:not(:has(.shot:nth-child(3)))>div.shot.shot--photo.shot>img{aspect-ratio:3/4!important}
/* asbestos: photos 1 and 2 side by side, photo 3 wide */
html body div.gal.gal--feature.gal--feature:has(img[src*="sampling-setup"])>div.shot.shot--photo.shot{grid-column:auto!important}
html body div.gal.gal--feature.gal--feature:has(img[src*="sampling-setup"])>div.shot.shot--photo.shot>img{aspect-ratio:3/4!important}
html body div.gal.gal--feature.gal--feature:has(img[src*="sampling-setup"])>div.shot.shot--photo.shot:nth-child(3){grid-column:1/-1!important}
html body div.gal.gal--feature.gal--feature:has(img[src*="sampling-setup"])>div.shot.shot--photo.shot:nth-child(3)>img{aspect-ratio:4/3!important}
/* mold (and any 3-photo page that is not asbestos): photo 3 is a normal half-width card */
html body div.gal.gal--feature.gal--feature:not(:has(img[src*="sampling-setup"]))>div.shot.shot--photo.shot:nth-child(3){grid-column:auto!important}
}
@media (max-width:767px){
html body div.gal.gal--feature.gal--feature.gal--feature:not(:has(.shot:nth-child(3))),html body div.gal.gal--feature.gal--feature.gal--feature:has(img[src*="sampling-setup"]){display:grid!important;grid-template-columns:1fr 1fr!important;flex-direction:row!important;gap:12px!important}
}
@media (max-width:767px){
html body div.gal.gal--feature.gal--feature.gal--feature>div.shot.shot--photo.shot>.cap b{font-size:.95rem!important;line-height:1.2!important}
html body div.gal.gal--feature.gal--feature.gal--feature>div.shot.shot--photo.shot>.cap small{font-size:.75rem!important}
html body div.gal.gal--feature.gal--feature.gal--feature{align-items:stretch!important}
html body div.gal.gal--feature.gal--feature.gal--feature>div.shot.shot--photo.shot{height:100%!important}
}

/* two-photo pages (phones): both cards identical, same outline, same caption strip */
@media (max-width:767px){
html body div.gal.gal--feature.gal--feature.gal--feature{align-items:start!important}
html body div.gal.gal--feature.gal--feature.gal--feature>div.shot.shot--photo.shot{height:auto!important;align-self:start!important;border:1px solid rgba(255,255,255,.16)!important;background:var(--panel,#191C16)!important;overflow:hidden!important}
html body div.gal.gal--feature.gal--feature.gal--feature>div.shot.shot--photo.shot>.cap{min-height:5.6em!important;background:var(--panel,#191C16)!important}
}

/* service hero stats (phones): not a box grid. Free-flowing, number beside its label. */
@media (max-width:767px){
html body .phero .phero-band{display:flex!important;flex-wrap:wrap!important;gap:22px 28px!important;margin:26px 0 30px!important}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(odd),html body .phero .phero-band li:nth-child(even),html body .phero .phero-band li:nth-child(n+3){flex-direction:row!important;align-items:baseline!important;gap:10px!important;padding:0 0 0 14px!important;border:0!important;border-left:3px solid var(--lime)!important;border-radius:0!important;width:auto!important}
html body .phero .phero-band li::before,html body .phero .phero-band li+li::before,html body .phero .phero-band li:nth-child(even)::before,html body .phero .phero-band li:nth-child(n+3)::before{display:none!important}
html body .phero .phero-band b{font-size:2.4rem!important;margin:0!important}
html body .phero .phero-band span:not(.pb-ico){max-width:7.5em;font-size:.75rem!important;line-height:1.3!important}
}
@media (max-width:767px){
html body div.gal.gal--feature.gal--feature.gal--feature{align-items:stretch!important;grid-auto-rows:auto}
html body div.gal.gal--feature.gal--feature.gal--feature>div.shot.shot--photo.shot{height:auto!important;align-self:stretch!important;display:flex!important;flex-direction:column!important}
html body div.gal.gal--feature.gal--feature.gal--feature>div.shot.shot--photo.shot>.cap{flex:1 1 auto!important}
}

/* SERVICE HERO STATS (v13): tilted lab stickers. Green, cream, outlined, dark. Smaller on phones. */
html body .phero .phero-band{display:flex!important;flex-wrap:wrap!important;justify-content:center;gap:0!important;margin:30px 0 40px!important;padding:0!important;border:0!important;background:none!important;height:auto!important}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(n){position:relative;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center;width:190px!important;height:190px!important;min-height:0!important;padding:0 16px!important;margin:0 -8px!important;border-radius:50%!important;gap:0!important;box-shadow:0 12px 26px rgba(0,0,0,.45)!important;border:0!important}
html body .phero .phero-band li::before,html body .phero .phero-band li+li::before,html body .phero .phero-band li:nth-child(n)::before,html body .phero .phero-band li::after{display:none!important;content:none!important}
html body .phero .phero-band .pb-ico{display:none!important}
html body .phero .phero-band b{margin:0 0 6px!important;padding:0!important;font:700 3rem/1 var(--display)!important;white-space:nowrap;width:auto!important;border:0!important}
html body .phero .phero-band b i{font-size:.9rem!important;font-style:normal;margin-left:.2em}
html body .phero .phero-band span:not(.pb-ico){max-width:9em;margin:0!important;font:600 .75rem/1.25 var(--mono)!important;letter-spacing:.08em!important;text-transform:uppercase!important;min-height:0!important}
html body .phero .phero-band li:nth-child(1){background:#76F909!important;transform:rotate(-8deg)}
html body .phero .phero-band li:nth-child(1) b,html body .phero .phero-band li:nth-child(1) span,html body .phero .phero-band li:nth-child(1) b i{color:#0B0C0A!important}
html body .phero .phero-band li:nth-child(2){background:#F1F2EC!important;transform:rotate(6deg) translateY(14px);width:210px!important;height:210px!important}
html body .phero .phero-band li:nth-child(2) b,html body .phero .phero-band li:nth-child(2) span,html body .phero .phero-band li:nth-child(2) b i{color:#0B0C0A!important}
html body .phero .phero-band li:nth-child(3){background:#0B0C0A!important;box-shadow:inset 0 0 0 2.5px #76F909,0 12px 26px rgba(0,0,0,.45)!important;transform:rotate(-5deg);width:200px!important;height:200px!important}
html body .phero .phero-band li:nth-child(3) b{color:#fff!important}html body .phero .phero-band li:nth-child(3) span{color:#76F909!important}
html body .phero .phero-band li:nth-child(4){background:#171a13!important;box-shadow:inset 0 0 0 1px #4a4e42,0 12px 26px rgba(0,0,0,.45)!important;transform:rotate(7deg) translateY(10px)}
html body .phero .phero-band li:nth-child(4) b{color:#fff!important}html body .phero .phero-band li:nth-child(4) span{color:#76F909!important}
@media (max-width:767px){
html body .phero .phero-band{display:block!important;position:relative;height:350px;margin:24px 0 20px!important}
html body .phero .phero-band li,html body .phero .phero-band li+li,html body .phero .phero-band li:nth-child(n){position:absolute!important;width:136px!important;height:136px!important;margin:0!important;padding:0 10px!important}
html body .phero .phero-band b{font-size:2.1rem!important;margin-bottom:4px!important}
html body .phero .phero-band span:not(.pb-ico){font-size:.75rem!important;max-width:7.5em;letter-spacing:.05em!important}
html body .phero .phero-band li:nth-child(1){left:6px;top:0;transform:rotate(-8deg)}
html body .phero .phero-band li:nth-child(2){right:6px;top:30px;width:152px!important;height:152px!important;transform:rotate(6deg)}
html body .phero .phero-band li:nth-child(3){left:18px;top:176px;width:150px!important;height:150px!important;transform:rotate(5deg)}
html body .phero .phero-band li:nth-child(4){right:14px;top:206px;transform:rotate(-6deg)}
}
@media (max-width:767px){html body .phero .phero-band{height:350px!important}}
/* stat stickers on phones: tighter cluster, overlapping slightly */
@media (max-width:767px){
html body .phero .phero-band{height:290px!important;margin:20px 0 14px!important}
html body .phero .phero-band li:nth-child(1){left:22px;top:0}
html body .phero .phero-band li:nth-child(2){right:20px;top:14px}
html body .phero .phero-band li:nth-child(3){left:30px;top:132px}
html body .phero .phero-band li:nth-child(4){right:32px;top:150px}
}

/* viewfinder brackets sit exactly on the edges of the logo panel */
html body .phero .phero-mark .vf-a{left:0;top:0;border-top-left-radius:20px}
html body .phero .phero-mark .vf-b{right:0;top:0;border-top-right-radius:20px}
html body .phero .phero-mark .vf-c{left:0;bottom:0;border-bottom-left-radius:20px}
html body .phero .phero-mark .vf-d{right:0;bottom:0;border-bottom-right-radius:20px}
html body .phero .phero-mark{border-radius:20px!important}
@media (max-width:767px){html body .phero .phero-mark{border-radius:24px!important}html body .phero .phero-mark .vf-a{border-top-left-radius:24px}html body .phero .phero-mark .vf-b{border-top-right-radius:24px}html body .phero .phero-mark .vf-c{border-bottom-left-radius:24px}html body .phero .phero-mark .vf-d{border-bottom-right-radius:24px}}
/* stat circles on phones: one tight overlapping cluster */
@media (max-width:767px){
html body .phero .phero-band{height:268px!important;margin:18px 0 10px!important}
html body .phero .phero-band li:nth-child(1){left:52px;top:0}
html body .phero .phero-band li:nth-child(2){right:30px;top:10px}
html body .phero .phero-band li:nth-child(3){left:40px;top:112px}
html body .phero .phero-band li:nth-child(4){right:52px;top:128px}
}
@media (max-width:767px){
html body .phero .phero-band{height:274px!important}
html body .phero .phero-band li:nth-child(1){left:34px;top:0}
html body .phero .phero-band li:nth-child(2){right:28px;top:10px}
html body .phero .phero-band li:nth-child(3){left:30px;top:118px}
html body .phero .phero-band li:nth-child(4){right:38px;top:132px}
}

/* footer social icons */
html body .foot-social{display:flex;gap:10px;margin-top:16px}
html body .foot-social a{display:grid;place-items:center;width:46px;height:46px;padding:0!important;border:1.5px solid rgba(255,255,255,.28);border-radius:50%;color:#fff;transition:background .15s,border-color .15s,color .15s}
html body .foot-social a:hover{background:var(--lime);border-color:var(--lime);color:#0B0C0A;padding-left:0!important}
html body .foot-social svg{width:22px;height:22px}
/* footer social icons: win over the phone/email chip styling that applies to every link in this column */
html body .foot-reach .foot-social{display:flex!important;flex-direction:row!important;gap:10px!important;margin:16px 0 0!important;padding:0!important;border:0!important}
html body .foot-reach .foot-social a,html body .foot-reach .foot-social a:hover{display:grid!important;place-items:center;width:46px!important;height:46px!important;min-height:0!important;padding:0!important;margin:0!important;border:1.5px solid rgba(255,255,255,.3)!important;border-radius:50%!important;background:transparent!important;color:#fff!important;font-size:0!important}
html body .foot-reach .foot-social a::before,html body .foot-reach .foot-social a::after{display:none!important;content:none!important;background:none!important}
html body .foot-reach .foot-social a:hover{background:var(--lime)!important;border-color:var(--lime)!important;color:#0B0C0A!important}
html body .foot-reach .foot-social svg{display:block!important;width:22px!important;height:22px!important;margin:0!important}