/* ==========================================================================
   face.css — the 2026-08-22 Fable redesign layer.
   Loads AFTER base.css and restyles the whole site through token overrides
   and selector refinements. base.css stays intact so 30+ generated pages
   keep working; this file is the new face. No AI imagery anywhere (O-049).
   ========================================================================== */

:root{
  /* Display type: bigger, tighter, more confident */
  --step-4:clamp(2.2rem,1.7rem + 2.6vw,4.4rem);
  --step-5:clamp(2.7rem,1.8rem + 4.4vw,6.4rem);
  --track-display:-.035em;

  /* Surfaces */
  --card:rgba(255,255,255,.028);
  --card-hi:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.18);
  --radius:18px;
  --shadow-card:0 1px 0 rgba(255,255,255,.06) inset, 0 20px 50px -24px rgba(0,0,0,.8);
  --ease-spring:cubic-bezier(.22,1.2,.36,1);
}

::selection{background:rgba(0,191,255,.28);color:#fff}

/* ---- Type ------------------------------------------------------------- */
h1{letter-spacing:var(--track-display);line-height:1.02}
h2{letter-spacing:-.028em;line-height:1.06}
.lede{font-size:var(--step-1);line-height:1.55;color:var(--text-dim)}
.eyebrow{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .55rem;
  font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);
}
.eyebrow::before{
  content:"";flex:none;width:22px;height:2px;border-radius:1px;
  background:linear-gradient(90deg,var(--blue),var(--purple));
}

/* ---- Header: glass, quiet until you scroll ---------------------------- */
.site-header{
  background:rgba(7,7,9,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
html.scrolled .site-header{
  background:rgba(7,7,9,.82);
  border-bottom-color:rgba(255,255,255,.12);
}
.site-header .wrap{min-height:72px}
.site-nav .nav-cta{
  margin-left:.6rem;padding:.55rem 1.05rem;border-radius:999px;
  font-size:.88rem;letter-spacing:-.01em;white-space:nowrap;
}

/* Scroll progress hairline — the site's pulse */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  background:linear-gradient(90deg,var(--blue),var(--purple));
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
}

/* ---- Cards: hairline gradient lid, tactile lift ------------------------ */
a.card,a.svc-card{text-decoration:none;color:inherit}
.card{
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease-spring),border-color .25s var(--ease),
             background .25s var(--ease),box-shadow .3s var(--ease);
}
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg,var(--blue),var(--purple));
  opacity:0;transition:opacity .25s var(--ease);
}
.card{position:relative;overflow:hidden}
.card:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 30px 60px -20px rgba(0,0,0,.9)}
.card:hover::before{opacity:.9}
@media (prefers-reduced-motion:reduce){
  .card,.card:hover{transform:none}
}

/* ---- Buttons ----------------------------------------------------------- */
.btn{border-radius:14px;font-weight:800}
.btn-primary{box-shadow:0 8px 30px -6px rgba(0,191,255,.45)}
.btn:active{transform:translateY(1px) scale(.99)}

/* ---- Containment: nothing stretches the page sideways ------------------ */
.hero-grid > *{min-width:0}
.scene3d__actions{flex-wrap:wrap}
.site-footer a{max-width:100%;min-width:0}
/* Jeff's 7/30 ruling stands: the email is ONE line, sized to fit — never broken.
   The only place it ever pinched was the 400–560px band where auto-fit squeezes
   two columns; below 560px the footer is a single column and everything fits. */
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
body{overflow-x:clip}

/* ---- Footer ------------------------------------------------------------ */
.site-footer{
  background:
    radial-gradient(70% 120% at 50% 130%,rgba(106,90,205,.10),transparent 60%),
    var(--bg-deep);
}

/* ==========================================================================
   HOMEPAGE — the console hero and the sections that follow it
   ========================================================================== */

.hero-home{
  position:relative;overflow:clip;
  padding:clamp(6.5rem,10vh,9rem) 0 clamp(3rem,6vh,5rem);
  min-height:92svh;display:flex;align-items:center;
}
.hero-home::before{ /* blueprint grid, barely there */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/100% 56px,
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/56px 100%;
  mask-image:radial-gradient(80% 80% at 50% 20%,#000 30%,transparent 100%);
}
.hero-home .glow{opacity:.8}
.hero-grid{
  display:grid;gap:clamp(2rem,4vw,4rem);align-items:center;position:relative;z-index:1;
}
@media (min-width:1020px){.hero-grid{grid-template-columns:1.15fr .85fr}}

.hero-copy h1{max-width:14ch}
.hero-copy h1 .grad-text{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-proof{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.6rem;
  font-size:var(--step--1);color:var(--muted);font-weight:600;
}
.hero-proof b{color:var(--text-dim);font-weight:700}
.hero-proof .star{color:#ffd166}

/* ==========================================================================
   HOMEPAGE v9 (2026-09-15) — Jeff's full redesign spec. Dark slate ground,
   glass cards, cyber-blue → purple gradient, centred hero, ribbon, rule of
   three over the curve, services matrix, device-framed work, pricing, town
   pills, final box. Plain CSS; every class is h9-* so nothing else moves.
   ========================================================================== */
:root{--h9-bg:#0F172A;--h9-bg2:#0B0F19;--h9-card:rgba(30,41,59,.8);--h9-line:#334155;--h9-body:#94A3B8;--h9-gold:#F59E0B;
  --h9-a:#00D2FF;--h9-b:#7928CA;--h9-grad:linear-gradient(135deg,#00D2FF,#7928CA)}
/* .doc's background lives in base.css now - the only stylesheet every page
   loads, which is what made /process need a special case in the first place. */
.h9-h2{font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:900;letter-spacing:-.02em;color:#fff}
.h9-sub{margin-top:.6rem;color:var(--h9-body);font-size:var(--step-0);max-width:60ch}
.h9-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;padding:.9rem 1.5rem;font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:all .3s var(--ease)}
.h9-btn--grad{background:var(--h9-grad);color:#fff;box-shadow:0 10px 30px rgba(0,210,255,.25)}
.h9-btn--grad:hover{box-shadow:0 0 0 1px rgba(0,210,255,.5),0 16px 44px rgba(121,40,202,.45);transform:translateY(-1px)}
.h9-btn--ghost{background:transparent;color:#fff;border:1px solid var(--h9-line)}
.h9-btn--ghost:hover{border-color:var(--h9-a);background:rgba(0,210,255,.06)}
.h9-more{display:inline-block;margin-top:.7rem;font-size:.8rem;font-weight:800;color:var(--h9-a)}

/* 1. hero */
.h9-hero{position:relative;background:var(--h9-bg);text-align:center;padding:clamp(6rem,14vh,9rem) var(--gutter) clamp(9rem,17vh,12rem);overflow:hidden}
.h9-hero__glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 45% at 50% 30%,rgba(0,210,255,.16),transparent 70%),radial-gradient(40% 40% at 70% 80%,rgba(121,40,202,.22),transparent 70%)}
.h9-hero__inner{position:relative;display:flex;flex-direction:column;align-items:center;margin-inline:auto;max-width:56rem}
.h9-hero h1{color:#fff;text-transform:uppercase;font-weight:900;letter-spacing:-.02em;line-height:1.05;max-width:56rem;font-size:var(--h1-hero)}
.h9-hero__sub{margin-top:1.1rem;max-width:42rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--h9-body);font-size:clamp(.78rem,1.1vw,.98rem);line-height:1.6}
.h9-hero__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:2rem}
.h9-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin-top:1.6rem;color:var(--h9-body);font-size:.9rem;font-weight:600}
.h9-trust b{color:#fff;font-size:1.05rem}
.h9-trust__g svg{width:20px;height:20px;display:block}
.h9-stars{color:var(--h9-gold);letter-spacing:.08em}
.h9-curve{position:absolute;left:0;right:0;bottom:-1px;height:clamp(80px,11vw,170px);line-height:0;pointer-events:none}
.h9-curve svg{display:block;width:100%;height:100%}
.h9-curve path{fill:var(--h9-bg2)}

/* 2. ribbon */
.h9-rib{background:var(--h9-bg);border-top:1px solid var(--h9-line);border-bottom:1px solid var(--h9-line)}
.h9-rib__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:1.2rem}
.h9-rib__item{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:.7rem;align-items:center;padding:.4rem .2rem}
.h9-rib__item .i{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(0,210,255,.08);color:var(--h9-a)}
.h9-rib__item .i svg{width:20px;height:20px}
.h9-rib__item b{color:#fff;font-size:.9rem;line-height:1.2}
.h9-rib__item span{color:var(--h9-body);font-size:.78rem}
@media (max-width:820px){.h9-rib__grid{grid-template-columns:1fr 1fr;gap:.6rem}}

/* 3. rule of three — the cards float over the ribbon/curve boundary */
.h9-rules{background:var(--h9-bg2);padding:0 var(--gutter) clamp(2.5rem,6vh,4rem)}
.h9-rules__grid{margin-top:-5.5rem}
.h9-rules__grid{position:relative;z-index:10;margin-top:-3.25rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.h9-rule{background:var(--h9-card);border:1px solid var(--h9-line);border-radius:18px;padding:1.5rem 1.4rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 18px 44px rgba(0,0,0,.35);transition:all .3s var(--ease)}
.h9-rule:hover{transform:translateY(-4px);border-color:rgba(0,210,255,.5)}
.h9-rule__ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--h9-grad);color:#fff;margin-bottom:.9rem}
.h9-rule__ico svg{width:24px;height:24px}
.h9-rule h2{font-size:1.1rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:#fff}
.h9-rule p{margin-top:.35rem;color:var(--h9-body);font-size:.95rem}
@media (max-width:820px){.h9-rules__grid{grid-template-columns:1fr;margin-top:-2rem}}

/* 4. services */
.h9-services{background:var(--h9-bg)}
.h9-svc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.h9-svc{position:relative;display:block;text-decoration:none;color:inherit;background:var(--h9-card);border:1px solid var(--h9-line);border-radius:18px;padding:1.5rem 1.4rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .3s var(--ease)}
.h9-svc::before{content:"";position:absolute;inset:-1px;border-radius:19px;padding:1px;background:var(--h9-grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.h9-svc:hover{transform:translateY(-4px)}
.h9-svc:hover::before{opacity:1}
.h9-svc__ico{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--h9-line);margin-bottom:1rem}
.h9-svc__ico img{width:54px;height:54px;object-fit:contain}
.h9-svc h3{font-size:1.1rem;font-weight:800;color:#fff}
.h9-svc p{margin-top:.45rem;color:var(--h9-body);font-size:.93rem;line-height:1.5}
@media (max-width:1019px){.h9-svc__grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.h9-svc__grid{grid-template-columns:1fr}}

/* 5. work — CSS device frames */
.h9-work{background:var(--h9-bg2)}
.h9-work__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem;align-items:start}
.h9-case{display:block;text-decoration:none;color:inherit;transition:transform .3s var(--ease)}
.h9-case:hover{transform:translateY(-5px)}
.h9-browser{display:block;border-radius:14px;overflow:hidden;background:#0a0f1c;border:1px solid var(--h9-line);box-shadow:0 30px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.03)}
.h9-browser__bar{display:flex;align-items:center;gap:6px;padding:.55rem .7rem;background:#111827;border-bottom:1px solid var(--h9-line)}
.h9-browser__bar i{width:9px;height:9px;border-radius:50%;background:#334155}
.h9-browser__bar i:nth-child(1){background:#ff5f57}.h9-browser__bar i:nth-child(2){background:#febc2e}.h9-browser__bar i:nth-child(3){background:#28c840}
.h9-browser__bar em{margin-left:.5rem;font-style:normal;font-size:.7rem;color:var(--h9-body);background:#0b1220;border-radius:6px;padding:.15rem .5rem;flex:1;text-align:center}
.h9-browser img{display:block;width:100%;height:auto;aspect-ratio:900/620;object-fit:cover;object-position:top}
.h9-phone{display:block;position:relative;width:min(100%,210px);margin:0 auto;aspect-ratio:9/19;border-radius:36px;padding:10px;background:#0a0f1c;border:1px solid var(--h9-line);box-shadow:0 30px 60px rgba(0,0,0,.45),inset 0 0 0 2px #1e293b}
.h9-phone__notch{position:absolute;left:50%;top:10px;translate:-50% 0;width:36%;height:22px;border-radius:0 0 14px 14px;background:#0a0f1c;z-index:2}
.h9-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:28px}
.h9-case__meta{display:block;margin-top:1rem}
.h9-case__meta h3{font-size:1.05rem;font-weight:800;color:#fff}
.h9-case__meta p{margin-top:.3rem;color:var(--h9-body);font-size:.9rem}
@media (max-width:1019px){.h9-work__grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.h9-work__grid{grid-template-columns:1fr}}

/* 6. pricing */
.h9-pricing{background:var(--h9-bg)}
.h9-price__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2rem;align-items:stretch}
.h9-price{position:relative;display:block;text-decoration:none;color:inherit;background:var(--h9-card);border:1px solid var(--h9-line);border-radius:20px;padding:1.7rem 1.5rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .3s var(--ease)}
.h9-price:hover{transform:translateY(-4px);border-color:rgba(0,210,255,.5)}
.h9-price--hot{border-color:transparent;background:linear-gradient(var(--h9-bg),var(--h9-bg)) padding-box,var(--h9-grad) border-box;border:1px solid transparent;box-shadow:0 0 0 1px rgba(0,210,255,.25),0 24px 60px rgba(121,40,202,.28)}
.h9-price__tag{position:absolute;top:-.8rem;left:1.4rem;background:var(--h9-grad);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px}
.h9-price h3{font-size:1rem;font-weight:800;color:#fff}
.h9-price__num{margin-top:.5rem;font-size:2.2rem;font-weight:900;letter-spacing:-.03em;color:#fff}
.h9-price__num small{font-size:.85rem;font-weight:700;color:var(--h9-a);letter-spacing:0}
.h9-price p:not(.h9-price__num){margin-top:.8rem;color:var(--h9-body);font-size:.93rem;line-height:1.5}
@media (max-width:820px){.h9-price__grid{grid-template-columns:1fr}}

/* 7. area */
.h9-area{background:var(--h9-bg2)}
.h9-pills{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.h9-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1.1rem;border-radius:999px;border:1px solid var(--h9-line);background:var(--h9-card);color:#fff;font-weight:700;font-size:.9rem;text-decoration:none;transition:all .3s var(--ease)}
.h9-pill:hover{border-color:var(--h9-a);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,210,255,.15)}
.h9-pill--home{background:var(--h9-grad);border-color:transparent}
.h9-pill small{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85}

/* 8. final */
.h9-final{background:var(--h9-bg)}
.h9-box{margin-top:1.8rem;background:var(--h9-card);border:1px solid var(--h9-line);border-radius:22px;padding:1.6rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(0,210,255,.18),0 30px 70px rgba(0,210,255,.10),0 30px 70px rgba(121,40,202,.16);display:grid;gap:1.2rem}
.h9-box p{color:var(--h9-body);line-height:1.55}
.h9-box b{color:#fff}
.h9-box__a{display:grid;gap:1rem}
.h9-box__b{border-top:1px solid var(--h9-line);padding-top:1.2rem}
.h9-box__b a{color:var(--h9-a);font-weight:800;text-decoration:none}
@media (min-width:640px){.h9-box__a{grid-template-columns:1fr auto;align-items:center}}

/* the white band styles of v3/v8 are retired on this page */
/* ---- Work: real sites in device frames --------------------------------- */
.work-row{display:grid;gap:1.4rem;margin-top:2rem}
@media (min-width:820px){.work-row{grid-template-columns:repeat(3,1fr)}}
.work-card{
  display:block;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .3s var(--ease-spring),border-color .25s;position:relative;
}
.work-card:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.work-card .shot{
  aspect-ratio:16/10.5;overflow:hidden;border-bottom:1px solid var(--line);
  background:#0a0a12;
}
.work-card .shot img{
  width:100%;height:100%;object-fit:cover;object-position:top;
  transition:transform 2.8s var(--ease);
}
.work-card:hover .shot img{transform:translateY(-14%)}
@media (prefers-reduced-motion:reduce){.work-card:hover .shot img{transform:none}}
.work-card .meta{padding:1rem 1.1rem 1.1rem}
.work-card .meta h3{font-size:var(--step-0)}
.work-card .meta p{font-size:var(--step--1);color:var(--muted);margin-top:.3rem}
.work-card .meta .go{
  display:inline-block;margin-top:.6rem;font-size:.8rem;font-weight:700;color:var(--blue);
}

/* ---- Pricing teaser ----------------------------------------------------- */
.price-strip{display:grid;gap:1.2rem;margin-top:2rem}
@media (min-width:820px){.price-strip{grid-template-columns:repeat(3,1fr)}}
.price-chip{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  padding:1.4rem 1.4rem 1.2rem;position:relative;overflow:hidden;
}
.price-chip b{display:block;font-size:var(--step-3);font-weight:900;letter-spacing:-.03em}
.price-chip b small{font-size:var(--step-0);color:var(--muted);font-weight:700}
.price-chip span{display:block;margin-top:.35rem;color:var(--text-dim);font-size:var(--step--1)}

/* ---- Review band -------------------------------------------------------- */
.rating{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.rating b{font-size:var(--step-4);font-weight:900;letter-spacing:-.04em}
.rating .stars{color:#ffd166;font-size:var(--step-1);letter-spacing:.1em}

/* ---- Reveal (scroll entrance, additive to effects.css) ------------------ */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;translate:0 26px;transition:opacity .7s var(--ease),translate .7s var(--ease)}
  .rise.in{opacity:1;translate:0 0}
}


/* ==========================================================================
   Added 2026-08-29 (the stand-out batch). ⚠️ DUPLICATED in effects.css on
   purpose — the homepage loads only fonts/base/face for speed, while the
   generated pages load effects.css. Change BOTH copies together (the
   shop.html-inline lesson, again).
   ========================================================================== */
.svc-card__shot{
  display:block;aspect-ratio:8/5;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);margin-bottom:.4rem;background:#0b0b10;
}
.svc-card__shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s var(--ease);
}
.svc-card:hover .svc-card__shot img{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){
  .svc-card:hover .svc-card__shot img{transform:none}
}
.kymap{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.2rem,1rem + 1vw,2rem);position:relative;overflow:hidden;
}
.kymap svg{width:100%;height:auto;display:block}
.kymap__roads path{stroke-width:1;opacity:.25;stroke-dasharray:3 5}
.kymap__t{cursor:pointer;outline:none}
.kymap__t circle{fill:#a9aab8;transition:fill .25s var(--ease)}
.kymap__t .ring{fill:none;stroke:var(--blue);stroke-width:1.5;opacity:.7}
.kymap__t text{
  fill:#c6c7d2;font-family:inherit;font-size:19px;font-weight:700;
  transition:fill .25s var(--ease);paint-order:stroke;stroke:#0b0b10;stroke-width:4px;
}
.kymap__t .tag{fill:var(--blue);font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.kymap__t--home text{fill:#ffffff;font-size:22px;font-weight:900}
.kymap__t:hover circle,.kymap__t:focus-visible circle{fill:var(--blue)}
.kymap__t:hover text,.kymap__t:focus-visible text{fill:#ffffff}
.kymap__t:focus-visible circle{stroke:var(--blue);stroke-width:3px}
.kymap__note{margin-top:.6rem;font-size:var(--step--1);color:var(--muted);text-align:center}
@media (max-width:640px){
  .kymap__t text{font-size:26px}
  .kymap__t--home text{font-size:30px}
}
html.has-lenis{scroll-behavior:auto}

/* -- The text-me rung (2026-08-30, GSC-informed) ------------------------------
   !! DEFINED IN BOTH face.css (hand-built pages) AND effects.css (generated
   pages) -- change BOTH copies or the homepage and the generated pages drift. */
.txtme{margin:1.6rem auto 0;max-width:560px;text-align:left;
  border:1px dashed rgba(0,191,255,.4);border-radius:12px;
  padding:.9rem 1.2rem;background:rgba(0,191,255,.05)}
.txtme p{font-size:var(--step--1);line-height:1.65;color:var(--text-dim);margin:0}
.txtme b{color:var(--white)}
.txtme a{color:var(--blue);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap}

/* ── The Kentucky map (2026-09-05, kymap.py) ─────────────────────────── */
.kmap{display:block;width:100%;height:auto;max-width:980px;margin-inline:auto;overflow:visible}
.kmap .km-state path{fill:#15151c;stroke:#2a2a36;stroke-width:1;vector-effect:non-scaling-stroke}
.kmap .km-central path{stroke:#00bfff;stroke-width:1.2;vector-effect:non-scaling-stroke}
.kmap .km-town{cursor:pointer;outline:none}
.kmap .km-dot{fill:#00bfff;stroke:#070709;stroke-width:2;transition:r .2s}
.kmap .km-dot--active{fill:#fff}
.kmap .km-home{fill:none;stroke:#00bfff;stroke-width:1.5;opacity:.6}
.kmap .km-label{fill:#fff;font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:17px;paint-order:stroke;stroke:#070709;stroke-width:4px;stroke-linejoin:round}
.kmap .km-label--active{font-size:19px;font-weight:800}
.kmap .km-town:hover .km-dot,.kmap .km-town:focus-visible .km-dot{fill:#fff}
.kmap .km-town:hover .km-label,.kmap .km-town:focus-visible .km-label{fill:#00bfff}
.kmap .km-town:focus-visible .km-dot{stroke:#00bfff;stroke-width:3}
.kymap-note{font-size:var(--step--1);color:var(--muted);text-align:center;margin-top:.8rem}
@media (max-width:640px){.kmap .km-label{font-size:22px}.kmap .km-label--active{font-size:24px}}



/* ---- v9.1 refinements (Jeff, 2026-09-15): hero pop, curve contrast, uniform cards ---- */
.h9-hero__grid{position:relative;display:grid;gap:2rem;align-items:center;max-width:1200px;margin-inline:auto}
@media (min-width:1024px){.h9-hero__grid{grid-template-columns:1.15fr .85fr;text-align:left}
  .h9-hero__inner{align-items:flex-start;margin-inline:0}
  .h9-hero__btns{justify-content:flex-start}
  .h9-trust{justify-content:flex-start}}
.h9-hero__inner{position:relative}
.h9-hero__halo{position:absolute;inset:-18% -12% auto -12%;height:130%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 60% at 40% 40%,rgba(0,210,255,.15),transparent 70%),radial-gradient(50% 55% at 65% 60%,rgba(121,40,202,.15),transparent 70%);filter:blur(20px)}
.h9-hero__horse{position:relative;aspect-ratio:813/573;width:100%;max-width:560px;justify-self:end;margin-inline:auto}
.h9-horse{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block;fill:url(#ig)}  /* flat, still — Jeff: no gallop, not 3D */
@media (max-width:1023px){.h9-hero__horse{max-width:340px;margin-top:.5rem}}

/* the band under the curve is a distinct tone so the curve reads */
:root{--h9-band:#162036}
.h9-curve path{fill:var(--h9-band)}
.h9-rules{background:var(--h9-band)}
.h9-rule{box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 0 1px rgba(0,210,255,.18),0 0 40px rgba(0,210,255,.22)}
.h9-rule:hover{box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 0 1px rgba(0,210,255,.45),0 0 60px rgba(0,210,255,.35)}

/* one border rule for every card: slate-700/60 → cyan-400/50, all .3s */
.h9-rule,.h9-svc,.h9-price,.h9-browser,.h9-phone,.h9-box,.h9-pill{border:1px solid rgba(51,65,85,.6);transition:all .3s var(--ease)}
.h9-rule:hover,.h9-svc:hover,.h9-price:hover,.h9-case:hover .h9-browser,.h9-case:hover .h9-phone,.h9-pill:hover{border-color:rgba(34,211,238,.5)}
.h9-price--hot{border:1px solid transparent}

/* ---- v9.3: floating glass metric badges around the horse (desktop only) ---- */
.h9-badge{display:none;position:absolute;z-index:2;align-items:center;gap:.45rem;white-space:nowrap;
  padding:.5rem 1rem;border-radius:999px;background:rgba(15,23,42,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(6,182,212,.3);box-shadow:0 0 15px rgba(0,210,255,.15),0 10px 30px rgba(0,0,0,.35);
  color:#fff;font-size:.8rem;font-weight:600;letter-spacing:.01em}
.h9-badge small{font-size:.66rem;font-weight:600;color:var(--h9-body);margin-left:.15rem}
.h9-badge__ico{font-style:normal;font-size:.95rem;filter:drop-shadow(0 0 6px rgba(0,210,255,.85))}
.h9-badge__ico--gold{filter:drop-shadow(0 0 6px rgba(245,158,11,.9))}
.h9-badge--tl{left:-6%;top:2%}
.h9-badge--bl{left:-4%;bottom:6%}
.h9-badge--br{right:-4%;bottom:-2%}
@media (min-width:1024px){.h9-badge{display:inline-flex}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:no-preference){
  .h9-float-1{animation:float 3.5s ease-in-out infinite}
  .h9-float-2{animation:float 4s ease-in-out infinite 1.2s}
  .h9-float-3{animation:float 3.8s ease-in-out infinite .6s}
}

/* ---- v9.5 polish (Jeff): SVG badge icons, tighter button glow, brighter review line, horse depth ---- */
.h9-badge__ico{display:inline-grid;place-items:center;width:16px;height:16px;color:#22d3ee;filter:none}
.h9-badge__ico svg{width:16px;height:16px;display:block}
.h9-btn--grad{box-shadow:0 0 20px rgba(0,210,255,.4)}
.h9-btn--grad:hover{box-shadow:0 0 26px rgba(0,210,255,.55);transform:translateY(-1px)}
.h9-trust{color:#cbd5e1;font-size:1rem;font-weight:600}
.h9-trust b{color:#fff;font-size:1.15rem}
.h9-horse{filter:drop-shadow(0 10px 15px rgba(0,0,0,.5))}
.h9-horse__ambient{position:absolute;inset:-18% -14%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 55%,rgba(0,210,255,.22),rgba(121,40,202,.14) 45%,transparent 72%);filter:blur(30px)}
.h9-hero__horse{isolation:isolate}

/* ---- v9.6 layout + contrast (Jeff) ---------------------------------------- */
/* 1. reveal the curve: the cards sit lower */
.h9-rules__grid{margin-top:-1.5rem}
.h9-rules{padding-top:.5rem}
@media (max-width:820px){.h9-rules__grid{margin-top:-.5rem}}
/* 2. ribbon legibility */
.h9-rib__grid{padding-block:1.6rem}
.h9-rib__item{grid-template-columns:40px 1fr}
.h9-rib__item .i{width:40px;height:40px}
.h9-rib__item .i svg{width:22px;height:22px}
.h9-rib__item b{color:#fff;font-weight:600;font-size:1.02rem}
.h9-rib__item span{color:#cbd5e1;font-size:.9rem}
/* 3. portfolio row: one fixed frame height, bottoms aligned */
.h9-work__grid{align-items:end}
.h9-case{display:flex;flex-direction:column;height:100%}
.h9-browser,.h9-phone{height:18rem;box-sizing:border-box}
.h9-browser{display:flex;flex-direction:column}
.h9-browser img{flex:1;min-height:0;height:auto;aspect-ratio:auto}
.h9-phone{width:min(100%,180px);aspect-ratio:auto}
.h9-case__meta{flex:1}
/* 4. bigger service icons */
.h9-svc__ico{width:72px;height:72px}
.h9-svc__ico img{width:64px;height:64px}
/* 5. glass town pills */
.h9-pill{background:rgba(30,41,59,.5);border:1px solid #334155;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .3s,transform .3s}
.h9-pill:hover{border-color:rgba(6,182,212,.5);box-shadow:none}
.h9-pill--home{background:rgba(30,41,59,.5);border:1px solid rgba(6,182,212,.5)}
.h9-pill--home small{color:#22d3ee}

/* ---- v9.7: the interactive Central Kentucky map (Jeff) -------------------- */
.hm{display:grid;gap:1.6rem;margin-top:1.8rem;align-items:center}
@media (min-width:900px){.hm{grid-template-columns:1.2fr .8fr}}
.hm__map{background:rgba(30,41,59,.35);border:1px solid rgba(51,65,85,.6);border-radius:22px;padding:1rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hm-svg{width:100%;height:auto;display:block;overflow:visible}
.hm-county{fill:#1e293b;stroke:#334155;stroke-width:.6;stroke-linejoin:round;transition:fill .3s var(--ease),stroke .3s var(--ease),filter .3s}
.hm-county:hover{fill:#263449}
.hm-town{cursor:pointer;outline:none;pointer-events:bounding-box}
.hm-dot{fill:#22d3ee;stroke:#0F172A;stroke-width:.8;transition:r .3s,fill .3s}
.hm-pulse{fill:rgba(34,211,238,.35);transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){.hm-pulse{animation:hm-pulse 2s cubic-bezier(.4,0,.6,1) infinite}}
@keyframes hm-pulse{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:.25;transform:scale(1.6)}}
.hm-label{fill:#cbd5e1;font-size:5.6px;font-weight:700;paint-order:stroke;stroke:#0F172A;stroke-width:1.2px;stroke-linejoin:round;transition:fill .3s}
.hm-town:hover .hm-label,.hm-town:focus-visible .hm-label{fill:#fff}
.hm-town:hover .hm-dot,.hm-town:focus-visible .hm-dot{fill:#fff;r:2.8}
/* the highlight: wrapper carries data-hi=<county fips>; the county with that fips lights up */
.hm[data-hi="21049"] [data-county="21049"],.hm[data-hi="21067"] [data-county="21067"],.hm[data-hi="21151"] [data-county="21151"],.hm[data-hi="21209"] [data-county="21209"],
.hm[data-hi="21173"] [data-county="21173"],.hm[data-hi="21113"] [data-county="21113"],.hm[data-hi="21017"] [data-county="21017"],.hm[data-hi="21239"] [data-county="21239"]{--lit:1}
.hm-county{fill:#1e293b}
.hm[data-hi] .hm-county[data-county]{fill:#1e293b}
.hm[data-hi="21049"] .hm-county[data-county="21049"],.hm[data-hi="21067"] .hm-county[data-county="21067"],.hm[data-hi="21151"] .hm-county[data-county="21151"],.hm[data-hi="21209"] .hm-county[data-county="21209"],
.hm[data-hi="21173"] .hm-county[data-county="21173"],.hm[data-hi="21113"] .hm-county[data-county="21113"],.hm[data-hi="21017"] .hm-county[data-county="21017"],.hm[data-hi="21239"] .hm-county[data-county="21239"]{
  fill:url(#hm-grad);stroke:#22d3ee;stroke-width:.9;filter:drop-shadow(0 0 4px rgba(0,210,255,.7))}
/* the button that matches the lit county glows too */
.hm[data-hi="21049"] .h9-pill[data-county="21049"],.hm[data-hi="21067"] .h9-pill[data-county="21067"],.hm[data-hi="21151"] .h9-pill[data-county="21151"],.hm[data-hi="21209"] .h9-pill[data-county="21209"],
.hm[data-hi="21173"] .h9-pill[data-county="21173"],.hm[data-hi="21113"] .h9-pill[data-county="21113"],.hm[data-hi="21017"] .h9-pill[data-county="21017"],.hm[data-hi="21239"] .h9-pill[data-county="21239"]{
  border-color:rgba(6,182,212,.7);box-shadow:0 0 18px rgba(0,210,255,.25)}
.hm__btns{margin-top:0}

/* ---- v9.8: full-state context, no box, strict button grid (Jeff) ---------- */
.hm__map{background:transparent;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.hm-state{fill:#0f172a;stroke:#1e293b;stroke-width:.7;stroke-linejoin:round}
.hm-county{stroke-width:.9}
.hm-label{font-size:9px;stroke-width:2px}
.hm-dot{stroke-width:1.2}
.hm-town:hover .hm-dot,.hm-town:focus-visible .hm-dot{r:4.5}
.hm[data-hi] .hm-county[data-county]{stroke-width:.9}
.hm__btns{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;align-content:center}
.hm__btns .h9-pill{justify-content:center;text-align:center}
@media (max-width:899px){.hm__btns{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.hm{grid-template-columns:1.35fr .65fr;gap:2.4rem}}

/* v9.8b: frame tightened around the service area; the state shows at the edges */
.hm-label{font-size:6.4px;stroke-width:1.4px}
.hm-dot{stroke-width:.9}
.hm-town:hover .hm-dot,.hm-town:focus-visible .hm-dot{r:3.3}
.hm-state{stroke-width:.6}
.hm-county{stroke-width:.7}

/* ---- v9.9: ribbon typography up; rule cards are h3 now (same look) ---------- */
.h9-rule__t{font-size:1.1rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:#fff}
.h9-rule__t+p{margin-top:.35rem}
.h9-rib__item b{font-size:1.125rem;font-weight:700;line-height:1.25}
.h9-rib__item span{font-size:1rem;color:#cbd5e1}
.h9-rib__grid{padding-block:1.9rem}
@media (max-width:820px){.h9-rib__item b{font-size:1.02rem}.h9-rib__item span{font-size:.9rem}}

/* ==========================================================================
   /web-design (2026-09-16) — the service page in the homepage system
   ========================================================================== */
.wd-hero{padding-bottom:clamp(3rem,8vh,5rem)}
.wd-hero__sub{margin-top:1.1rem;max-width:44rem;color:#cbd5e1;font-size:var(--step-0);line-height:1.6}
.wd-mock{position:relative;width:min(100%,640px);margin:2.6rem auto 0}
.wd-mock__frame{display:block;box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 60px rgba(0,210,255,.18)}
.wd-mock__screen{display:block;padding:1.6rem 1.4rem 1.8rem;background:linear-gradient(180deg,#0f172a,#0b1220);min-height:190px}
.wd-mock__line{display:block;height:10px;border-radius:6px;background:#1e293b;margin-top:.7rem;width:60%}
.wd-mock__line--h{height:22px;width:72%;background:linear-gradient(90deg,#334155,#1e293b);margin-top:0}
.wd-mock__line--s{width:44%}
.wd-mock__btn{display:block;width:150px;height:34px;border-radius:999px;background:var(--h9-grad);margin-top:1.1rem;box-shadow:0 0 20px rgba(0,210,255,.4)}
.wd-mock__badge{display:inline-flex;position:absolute;right:-10px;top:-16px;z-index:2;animation:float 3.5s ease-in-out infinite}
@media (max-width:640px){.wd-mock__badge{right:6px;top:-14px}}
.wd-sec{background:var(--h9-bg)}
.wd-sec--deep{background:var(--h9-bg2)}
.wd-vs{display:grid;gap:1.3rem;margin-top:2rem}
@media (min-width:820px){.wd-vs{grid-template-columns:1fr 1fr}}
.wd-vs__card{border-radius:20px;padding:1.6rem 1.5rem;border:1px solid rgba(51,65,85,.6);background:rgba(30,41,59,.35)}
.wd-vs__card--them{border-color:rgba(248,113,113,.25);background:rgba(69,26,32,.25)}
.wd-vs__card--us{background:var(--h9-card);border-color:rgba(6,182,212,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(0,210,255,.15),0 0 40px rgba(0,210,255,.18)}
.wd-vs__label{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--h9-body);margin-bottom:1rem}
.wd-vs__card--us .wd-vs__label{color:#22d3ee}
.wd-vs__card ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.wd-vs__card li{display:flex;align-items:center;gap:.7rem;color:#e2e8f0;font-weight:600}
.wd-li__x,.wd-li__ok{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:none}
.wd-li__x{background:rgba(248,113,113,.12);color:#f87171}
.wd-li__ok{background:rgba(34,211,238,.12);color:#22d3ee}
.wd-li__x svg,.wd-li__ok svg{width:15px;height:15px}
.wd-feats{display:grid;gap:1.2rem;margin-top:2rem}
@media (min-width:820px){.wd-feats{grid-template-columns:repeat(3,1fr)}}
.wd-feat{background:rgba(30,41,59,.5);border:1px solid #334155;border-radius:18px;padding:1.5rem 1.4rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .3s var(--ease)}
.wd-feat:hover{border-color:rgba(6,182,212,.5);transform:translateY(-4px)}
.wd-feat__ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(34,211,238,.12);color:#22d3ee;margin-bottom:.9rem}
.wd-feat__ico svg{width:24px;height:24px}
.wd-feat h3{font-size:1.05rem;font-weight:800;color:#fff}
.wd-feat p{margin-top:.4rem;color:var(--h9-body);font-size:.95rem;line-height:1.5}
.wd-steps{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1rem}
@media (min-width:820px){.wd-steps{grid-template-columns:repeat(3,1fr)}}
.wd-step{display:flex;gap:1rem;align-items:flex-start;background:var(--h9-card);border:1px solid rgba(51,65,85,.6);border-radius:18px;padding:1.4rem 1.3rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.wd-step__n{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--h9-grad);color:#fff;font-weight:900;letter-spacing:.04em}
.wd-step h3{font-size:1.05rem;font-weight:800;color:#fff}
.wd-step p{margin-top:.35rem;color:var(--h9-body);font-size:.95rem;line-height:1.5}
.wd-price__grid{grid-template-columns:repeat(2,1fr);max-width:860px}
@media (max-width:820px){.wd-price__grid{grid-template-columns:1fr}}
.wd-link{color:#22d3ee;font-weight:700;text-decoration:none}
.wd-link:hover{text-decoration:underline}
/* the retained article: one readable column, slate-300 body, real H2/H3 */
.wd-article__wrap{max-width:56rem;margin-inline:auto;padding-inline:var(--gutter)}
.wd-prose{color:#cbd5e1}
.wd-prose h2{color:#fff;font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-.015em;margin-top:2.4rem}
.wd-prose h2:first-child{margin-top:0}
.wd-prose h3{color:#fff;font-size:1.1rem;font-weight:800;margin-top:1.4rem}
.wd-prose p,.wd-prose li{color:#cbd5e1;line-height:1.7}
.wd-prose a{color:#22d3ee}
.wd-prose .svc-list li strong{color:#fff}
.wd-prose .numbers th{color:#fff}
.wd-prose .numbers td{color:#cbd5e1}
.wd-prose .figure{border-radius:18px;overflow:hidden;border:1px solid rgba(51,65,85,.6)}
.wd-prose .figure figcaption{color:var(--h9-body)}
.wd-prose .pull{color:#fff;border-left:3px solid #22d3ee}
.wd-prose .btn-ghost{border-color:#334155;color:#fff}
.wd-prose .also{color:var(--h9-body)}
/* FAQ accordions: glass bars, smooth reveal */
.wd-faqs{display:grid;gap:.8rem;margin-top:1.8rem}
.wd-faq{background:rgba(30,41,59,.5);border:1px solid #334155;border-radius:16px;transition:border-color .3s var(--ease),background .3s}
.wd-faq:hover,.wd-faq[open]{border-color:rgba(6,182,212,.5)}
.wd-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.2rem;color:#fff;font-weight:700}
.wd-faq summary::-webkit-details-marker{display:none}
.wd-faq summary i{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid #334155;position:relative;transition:transform .3s var(--ease),border-color .3s}
.wd-faq summary i::before,.wd-faq summary i::after{content:"";position:absolute;left:50%;top:50%;background:#22d3ee;translate:-50% -50%}
.wd-faq summary i::before{width:10px;height:2px}
.wd-faq summary i::after{width:2px;height:10px}
.wd-faq[open] summary i{transform:rotate(45deg);border-color:rgba(6,182,212,.5)}
.wd-faq__a{padding:0 1.2rem 1.15rem;color:#cbd5e1;line-height:1.65}
.wd-faq__a p{margin:0}
@media (prefers-reduced-motion:no-preference){.wd-faq[open] .wd-faq__a{animation:wd-reveal .35s var(--ease)}}
@keyframes wd-reveal{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}

/* wd v2: hero grid, article cards */
.wd-hero__grid{position:relative;display:grid;gap:2rem;align-items:center;max-width:1200px;margin-inline:auto}
@media (min-width:1024px){.wd-hero__grid{grid-template-columns:1.05fr .95fr;text-align:left}
  .wd-hero__copy{align-items:flex-start;margin-inline:0}
  .wd-hero__copy .h9-hero__btns{justify-content:flex-start}
  .wd-mock{margin:0;width:100%}}
.wd-mock__frame{box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 50px rgba(0,210,255,.2),0 0 90px rgba(121,40,202,.18)}
.wd-article__wrap{max-width:48rem}
.wd-card{background:rgba(15,23,42,.4);border:1px solid #1e293b;border-radius:16px;padding:2rem;margin-top:1.4rem}
.wd-card:first-child{margin-top:0}
.wd-card--cont{margin-top:1.4rem}
.wd-card>h2{margin-top:0}
.wd-prose .wd-card h2{margin-top:0}
.wd-callout{border-left:4px solid #22d3ee;background:rgba(30,41,59,.5);padding:1rem 1.1rem;border-radius:0 12px 12px 0;margin:1.2rem 0 .2rem;color:#e2e8f0}
.wd-callout p{color:#e2e8f0;margin:0}
.wd-grid{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.8rem 1.2rem}
@media (min-width:700px){.wd-grid{grid-template-columns:1fr 1fr}}
.wd-grid li{display:flex;gap:.6rem;align-items:flex-start;line-height:1.55}
.wd-ck{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;background:rgba(34,211,238,.12);color:#22d3ee;margin-top:.15rem}
.wd-ck svg{width:13px;height:13px}
.wd-fig{margin:1.6rem 0 0;border-radius:16px;border:1px solid rgba(51,65,85,.6);overflow:hidden;background:#0b1220;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.wd-fig img{display:block;width:100%;height:auto}
.wd-fig figcaption{padding:.7rem 1rem;color:var(--h9-body);font-size:.85rem}
.wd-prose .numbers{margin-top:1rem}

.wd-grid li{display:flex!important;grid-template-columns:none!important;padding:0!important;border:0!important;background:none!important}
.wd-grid .wd-li{display:block;flex:1;min-width:0}
.wd-grid .wd-li strong{display:inline;color:#fff}
.wd-prose .wd-grid li::before,.wd-prose .wd-grid li::marker{content:none;display:none}

.wd-b{color:#fff;font-weight:600}
.wd-callout .btn-ghost{margin-top:.8rem}
.wd-callout p+p{margin-top:.8rem}

/* wd v4: cards that actually read as cards on a slate-900 page; town grid */
.wd-card{background:linear-gradient(180deg,rgba(30,41,59,.55),rgba(30,41,59,.38));border:1px solid rgba(51,65,85,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px rgba(0,0,0,.28)}
.wd-callout{background:rgba(30,41,59,.6)}
.wd-towns{list-style:none;padding:0;margin:.8rem 0 1rem;display:grid;grid-template-columns:1fr 1fr;gap:.45rem 1.2rem}
.wd-towns li{display:flex;align-items:center;gap:.6rem;color:#e2e8f0}
.wd-towns li::before{content:"";width:8px;height:8px;border-radius:50%;background:#22d3ee;box-shadow:0 0 8px rgba(34,211,238,.6);flex:none}
.wd-towns a{color:#e2e8f0;text-decoration:none;font-weight:600}
.wd-towns a:hover{color:#22d3ee}

/* wd v5: hero depth + article rhythm */
.wd-grad{background:linear-gradient(90deg,#22d3ee,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (min-width:1024px){.wd-mock{transform:scale(1.05);transform-origin:center;align-self:center}.wd-hero__grid{align-items:center}}
.wd-mock__badge--bl{right:auto;top:auto;left:-14px;bottom:-16px;animation-delay:1.2s}
@media (max-width:640px){.wd-mock__badge--bl{left:6px;bottom:-14px}}
.h9-badge__ico--purple{color:#a855f7}
.h9-badge small{font-size:.66rem;color:var(--h9-body);font-weight:600;margin-left:.15rem}
.wd-card--b{background:rgba(30,41,59,.3);border:0;border-left:4px solid #a855f7;border-radius:0 18px 18px 0;box-shadow:none}
.wd-card--c{background:linear-gradient(90deg,rgba(15,23,42,.8),rgba(59,7,100,.3));border:1px solid rgba(6,182,212,.3);box-shadow:0 0 0 1px rgba(0,210,255,.08),0 14px 34px rgba(0,0,0,.28)}
.wd-split{display:grid;gap:1rem;margin-top:1rem}
@media (min-width:768px){.wd-split{grid-template-columns:1fr 1fr}}
.wd-split__item{background:rgba(15,23,42,.45);border:1px solid rgba(51,65,85,.6);border-radius:14px;padding:1.1rem 1.2rem}
.wd-split__item h3{margin-top:0;font-size:1rem}
.wd-split__item p{font-size:.95rem;margin-top:.4rem}
.wd-home{color:#22d3ee;font-weight:700;text-decoration:underline;text-decoration-color:rgba(6,182,212,.5);text-underline-offset:4px;transition:color .15s cubic-bezier(.4,0,.2,1),text-decoration-color .15s cubic-bezier(.4,0,.2,1)}
.wd-home:hover{color:#67e8f9}

/* wd v7: production spacing — my-12 / md:my-16 on every article container */
.wd-card,.wd-fig{margin-block:3rem}
.wd-card:first-child{margin-top:0}
.wd-callout{margin-block:1.5rem}
.wd-article{padding-block:clamp(2rem,5vh,3.5rem)}
@media (min-width:768px){.wd-card,.wd-fig{margin-block:4rem}}

/* the home backlink outranks the final box's generic link rule at every width */
.h9-box .h9-box__b a.wd-home,a.wd-home{color:#22d3ee;font-weight:700;text-decoration:underline;text-decoration-color:rgba(6,182,212,.5);text-underline-offset:4px;transition:color .15s cubic-bezier(.4,0,.2,1),text-decoration-color .15s cubic-bezier(.4,0,.2,1)}
.h9-box .h9-box__b a.wd-home:hover,a.wd-home:hover{color:#67e8f9}

/* ==========================================================================
   /local-seo (2026-09-16) — the map-pack mockup, the plan card, the add-ons
   ========================================================================== */
.ls-map{display:block;position:relative;height:250px;overflow:hidden;background:linear-gradient(180deg,#0f172a,#0b1220)}
.ls-map__grid{position:absolute;inset:0;background:
  linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/38px 38px,
  linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/38px 38px,
  radial-gradient(60% 60% at 60% 45%,rgba(0,210,255,.10),transparent 70%)}
.ls-map__grid::before,.ls-map__grid::after{content:"";position:absolute;background:rgba(51,65,85,.6);border-radius:2px}
.ls-map__grid::before{left:0;right:0;top:46%;height:10px;transform:rotate(-8deg)}
.ls-map__grid::after{top:0;bottom:0;left:38%;width:10px;transform:rotate(14deg)}
.ls-map__pin{position:absolute;width:12px;height:12px;border-radius:50%;background:#475569;border:2px solid #0f172a}
.ls-map__pin--a{left:22%;top:30%}.ls-map__pin--b{left:70%;top:68%}
.ls-map__pin--hot{left:56%;top:36%;width:auto;height:auto;background:none;border:0;color:#22d3ee;filter:drop-shadow(0 0 10px rgba(0,210,255,.9))}
.ls-map__pinico{display:block;width:34px;height:34px}
.ls-map__pinico svg{width:34px;height:34px}
@media (prefers-reduced-motion:no-preference){.ls-map__pin--hot{animation:float 3.5s ease-in-out infinite}}
.ls-card{position:absolute;left:6%;bottom:8%;display:flex;gap:.7rem;align-items:center;padding:.7rem .85rem;border-radius:14px;
  background:rgba(15,23,42,.85);border:1px solid rgba(6,182,212,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 24px rgba(0,210,255,.25),0 14px 30px rgba(0,0,0,.45)}
.ls-card__rank{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--h9-grad);color:#fff;font-weight:900;font-size:.9rem;flex:none}
.ls-card__body{display:grid;gap:.15rem}
.ls-card__name{color:#fff;font-weight:800;font-size:.86rem}
.ls-card__meta{display:flex;align-items:center;gap:.15rem;color:var(--h9-body);font-size:.7rem}
.ls-card__star{display:inline-grid;width:11px;height:11px;color:#F59E0B}
.ls-card__star svg{width:11px;height:11px}
.ls-card__btn{display:inline-block;margin-top:.2rem;padding:.25rem .6rem;border-radius:999px;background:var(--h9-grad);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;width:max-content}
.ls-mock .wd-mock__badge{font-size:.74rem}
.ls-plan{display:grid;margin-top:2rem;max-width:620px}
.ls-plan__card{display:block}
.ls-plan__terms{margin-top:.5rem;color:var(--h9-body);font-size:.9rem}
.ls-plan__list{margin-top:1rem;grid-template-columns:1fr}
.ls-plan__list li{color:#e2e8f0;font-size:.95rem}
.ls-addons__h{margin-top:2.6rem;font-size:1.05rem;font-weight:800;color:#fff}
.ls-addons{margin-top:1rem}
.ls-addon .h9-price__num{font-size:1.8rem}
.ls-addon .h9-price__num small{font-size:.8rem}
@media (max-width:820px){.ls-addons{grid-template-columns:1fr}}

/* ls lower-article pass */
.ls-inset{background:rgba(30,41,59,.8);border-left:4px solid #22d3ee;padding:1.25rem;border-radius:0 12px 12px 0;margin-block:1rem}
.wd-prose .ls-inset p{color:#fff;font-weight:500;margin:0;line-height:1.65}
.wd-prose .ls-inset .wd-b{font-weight:700}
.wd-prose .ls-intro{margin-top:1.4rem}
.wd-prose .ls-work{margin-top:.8rem}
.wd-prose .ls-split{margin-top:1.4rem;margin-bottom:1.4rem}
.wd-prose .ls-split .wd-split__item p{margin-top:0}
.ls-price{color:#22d3ee;font-weight:800;white-space:nowrap}
.wd-prose a.ls-link{color:#22d3ee;font-weight:700;text-decoration:underline;text-decoration-color:rgba(6,182,212,.5);text-underline-offset:4px;transition:color .15s cubic-bezier(.4,0,.2,1)}
.wd-prose a.ls-link:hover{color:#67e8f9}
.wd-prose .wd-callout p.ls-turn{color:#fff;font-weight:500}
.wd-prose .numbers td .wd-b{color:#fff;font-weight:600}
.wd-prose .ls-where__h{margin-top:1.8rem;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#22d3ee}
.wd-prose .ls-towns{margin-top:.8rem;gap:.7rem 1rem;grid-template-columns:1fr 1fr}
@media (min-width:700px){.wd-prose .ls-towns{grid-template-columns:repeat(4,1fr)}}
.wd-prose .ls-towns a{color:#e2e8f0;font-weight:600;text-decoration:none}
.wd-prose .ls-towns a:hover{color:#22d3ee}
.h9-box__b .wd-b{color:#fff;font-weight:600}
.wd-prose .ls-split .wd-split__item p{font-size:1rem;line-height:1.6}
.wd-prose .ls-split ~ p + p{margin-top:.9rem}

/* ls final polish */
.wd-prose .ls-split .wd-split__item h3{margin:0;font-size:1.05rem;line-height:1.35;letter-spacing:-.01em;color:#fff}
.wd-prose .ls-split .wd-split__item h3 + p{margin-top:.45rem}
.wd-vs__card h3.wd-vs__label{line-height:1.5;letter-spacing:.12em;text-wrap:initial}
@media (max-width:640px){.ls-mock .wd-mock__badge{white-space:normal;max-width:calc(100% - 12px);line-height:1.3}.ls-mock .wd-mock__badge:not(.wd-mock__badge--bl){left:auto;right:6px}}

/* ==========================================================================
   /google-business-profile (2026-09-16) — Maps listing mockup, centred plan, article rhythm
   ========================================================================== */
/* .gbp-eyebrow moved to base.css: /process is the one page that does not
   load face.css, and the eyebrow rendered at full title size there. */
.gbp-scr{display:grid;grid-template-columns:1.15fr 1fr;min-height:270px;background:linear-gradient(180deg,#0f172a,#0b1220)}
.gbp-card{display:flex;flex-direction:column;background:rgba(15,23,42,.92);border-right:1px solid rgba(51,65,85,.6)}
.gbp-card__photo{display:block;position:relative;height:86px;overflow:hidden;
  background:radial-gradient(70% 100% at 28% 100%,rgba(245,158,11,.5),transparent 70%),linear-gradient(135deg,#1e293b,#312e81 62%,#0e7490)}
.gbp-card__photo::before{content:"";position:absolute;left:16%;bottom:0;width:20%;height:64%;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,rgba(254,215,170,.95),rgba(245,158,11,.65));box-shadow:0 0 22px rgba(245,158,11,.45)}
.gbp-card__photo::after{content:"";position:absolute;left:48%;bottom:30%;width:26%;height:30%;border-radius:4px;
  background:rgba(254,215,170,.35);box-shadow:0 0 0 2px rgba(15,23,42,.5) inset}
.gbp-card__body{display:grid;gap:.32rem;padding:.8rem .9rem 1rem}
.gbp-card__name{color:#fff;font-weight:800;font-size:1rem}
.gbp-card__rating{display:flex;align-items:center;gap:.12rem;color:#e2e8f0;font-size:.78rem}
.gbp-card__rating b{margin-right:.3rem}
.gbp-star{display:inline-grid;width:12px;height:12px;color:#F59E0B}
.gbp-star svg{width:12px;height:12px}
.gbp-card__cat,.gbp-card__open{color:var(--h9-body);font-size:.74rem}
.gbp-card__open em{font-style:normal;font-weight:700;color:#34d399}
.gbp-card__acts{display:flex;gap:.7rem;margin-top:.5rem}
.gbp-act{display:grid;justify-items:center;gap:.25rem}
.gbp-act__ico{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(6,182,212,.45);color:#22d3ee}
.gbp-act__ico svg{width:14px;height:14px}
.gbp-act--hot .gbp-act__ico{background:var(--h9-grad);border-color:transparent;color:#fff;box-shadow:0 0 16px rgba(0,210,255,.45)}
.gbp-act small{color:#cbd5e1;font-size:.62rem}
.gbp-map{display:block;position:relative;overflow:hidden}
.gbp-map__pin{position:absolute;left:50%;top:44%;translate:-50% -50%;color:#22d3ee;filter:drop-shadow(0 0 10px rgba(0,210,255,.9))}
.gbp-map__pinico{display:block;width:36px;height:36px}
.gbp-map__pinico svg{width:36px;height:36px}
@media (prefers-reduced-motion:no-preference){.gbp-map__pin{animation:float 3.5s ease-in-out infinite}}
.gbp-mock .wd-mock__badge{font-size:.74rem}
@media (max-width:640px){.gbp-mock .wd-mock__badge{white-space:normal;max-width:calc(100% - 12px);line-height:1.3}.gbp-mock .wd-mock__badge:not(.wd-mock__badge--bl){left:auto;right:6px}}
@media (max-width:480px){.gbp-scr{grid-template-columns:1fr}.gbp-map{display:none}.gbp-card{border-right:0}}
/* pricing: one plan, centred */
.gbp-center{text-align:center;margin-inline:auto}
.gbp-plan{margin-inline:auto}
/* the article: p-6 md:p-8 cards, p-6 rounded-r-2xl callouts, gap-6 grids */
.gbp-prose .wd-card{padding:1.5rem}
@media (min-width:768px){.gbp-prose .wd-card{padding:2rem}}
.gbp-prose .wd-callout,.gbp-prose .ls-inset{padding:1.5rem;border-radius:0 16px 16px 0;margin-block:1.5rem}
.gbp-prose .wd-split{gap:1.5rem}
@media (min-width:768px){.gbp-prose .wd-split>.wd-split__item:last-child:nth-child(odd){grid-column:1/-1}}
.wd-prose .gbp-steps{margin-top:1rem;gap:1rem 1.5rem}
@media (min-width:700px) and (max-width:767px){.wd-prose .gbp-steps{grid-template-columns:1fr}}
.h9-box .h9-box__b a.gbp-link{text-decoration-line:underline !important}
.gbp-mock .wd-mock__frame{height:auto}
.h9-h2.gbp-center::after{margin-inline:auto}
.gbp-card__body{padding-bottom:2.3rem}
.gbp-prose .wd-split__item h3{margin:0;font-size:1.05rem;line-height:1.35;letter-spacing:-.01em;color:#fff}
.gbp-prose .wd-split__item p{font-size:1rem;line-height:1.6}
.gbp-prose .wd-split__item h3 + p{margin-top:.45rem}
.gbp-prose .wd-grid + p{margin-top:1.1rem}
.gbp-card{text-align:left}

/* gbp polish: slate-300 grid text */
.wd-prose.gbp-prose .wd-li,.wd-prose.gbp-prose .wd-split__item p,.wd-prose.gbp-prose .gbp-steps li{color:#cbd5e1}

/* ==========================================================================
   /contact (2026-09-16) — centred hero, direct access + Formspree form, FAQ
   ========================================================================== */
.h9-hero.ct-hero{padding:4rem var(--gutter)}
@media (min-width:768px){.h9-hero.ct-hero{padding-block:6rem}}
.ct-hero .h9-hero__inner{align-items:center;margin-inline:auto;text-align:center;max-width:52rem}
.ct-hero .wd-hero__sub{margin-inline:auto}
.ct-sec{background:var(--h9-bg)}
.ct-grid{display:grid;gap:3rem;max-width:72rem;margin-inline:auto;padding-inline:1rem}
@media (min-width:768px){.ct-grid{padding-inline:1.5rem}}
@media (min-width:1024px){.ct-grid{grid-template-columns:1fr 1fr;align-items:start}}
.ct-col{min-width:0}
/* glass cards, lifted so they read on the slate-900 page */
.ct-card,.ct-form-card{border-radius:16px;padding:1.5rem}
@media (min-width:768px){.ct-card,.ct-form-card{padding:2rem}}
.ct-card{margin-top:1.5rem;background:linear-gradient(180deg,rgba(30,41,59,.55),rgba(30,41,59,.38));border:1px solid rgba(51,65,85,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px rgba(0,0,0,.28)}
.ct-form-card{background:linear-gradient(180deg,rgba(30,41,59,.72),rgba(30,41,59,.52));border:1px solid rgba(71,85,105,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 25px -5px rgba(0,0,0,.45),0 0 40px rgba(0,210,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* direct access lines */
.ct-lines{list-style:none;padding:0;margin:0;display:grid;gap:1.1rem}
.ct-lines li{display:grid;grid-template-columns:44px 1fr;gap:.9rem;align-items:center}
.ct-lines li>span:last-child{display:grid;gap:.1rem;min-width:0}
.ct-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(34,211,238,.12);color:#22d3ee}
.ct-ico svg{width:20px;height:20px}
.ct-k{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#94a3b8}
.ct-v{color:#fff;font-weight:600;font-size:1.05rem;line-height:1.4}
.ct-email{overflow-wrap:break-word}
a.ct-link{color:#22d3ee;text-decoration:none;transition:color .15s cubic-bezier(.4,0,.2,1)}
a.ct-link:hover{color:#67e8f9}
a.ct-link:focus-visible{outline:2px solid #22d3ee;outline-offset:3px;border-radius:4px}
.ct-h3{margin-top:2rem;font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.ct-expect{margin-top:.9rem;grid-template-columns:1fr !important;gap:.75rem}
.ct-expect .wd-li{font-weight:500;color:#cbd5e1}
.ct-cal{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid rgba(51,65,85,.6);color:#94a3b8;font-size:.95rem}
.ct-cal a.ct-link{font-weight:700}
/* the form */
.ct-form{display:grid;gap:1.5rem;margin:0}
.ct-field label{display:block;font-size:.875rem;font-weight:500;color:#cbd5e1;margin-bottom:.25rem}
.ct-req{color:#22d3ee}
.ct-field input,.ct-field textarea{display:block;width:100%;box-sizing:border-box;background:#020617;border:1px solid #1e293b;color:#fff;border-radius:8px;padding:.75rem;font:inherit;font-size:1rem;outline:none;
  transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}
.ct-field textarea{min-height:7.5rem;resize:vertical}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#94a3b8;opacity:1}
.ct-field input:focus,.ct-field textarea:focus{border-color:#06b6d4;box-shadow:0 0 0 1px #06b6d4}
.ct-submit{width:100%;border:0;cursor:pointer;font-family:inherit;font-size:.9rem;padding-block:1rem}
.ct-submit:focus-visible{outline:2px solid #22d3ee;outline-offset:3px}
.ct-note{margin:-.6rem 0 0;text-align:center;font-size:.85rem;color:#94a3b8}
/* faq: max-w-3xl, my-20 */
.ct-faq{max-width:48rem}

.section.ct-sec{padding-top:1.5rem}
/* contact grid: two cards, the heading lives inside the left one, so the tops share a line by structure */
.ct-grid{row-gap:1.5rem}
.ct-card{margin-top:0}
.ct-form-card{margin-top:0;min-width:0}
@media (min-width:1024px){.ct-grid{column-gap:3rem}}
.ct-card__title{margin:0 0 1.5rem;color:#fff;font-weight:900;letter-spacing:-.02em;line-height:1.1;font-size:clamp(1.5rem,2.4vw,1.9rem)}
.ct-lines a.ct-v{display:inline-block;padding-block:.65rem;margin-block:-.65rem}
/* contact polish: equal-height cards, xs helper text, tighter FAQ band */
@media (min-width:1024px){.ct-grid{align-items:stretch}}
.ct-card,.ct-form-card{display:flex;flex-direction:column;justify-content:flex-start}
/* no dead zone: spare height (when the form card is taller) spreads evenly between the contact rows */
.ct-card .ct-lines{flex:1 0 auto;display:flex;flex-direction:column;justify-content:space-evenly;gap:1.1rem}
.ct-card .ct-expect{margin-bottom:0}
.ct-card .ct-cal{margin-top:1.5rem}
.ct-form{flex:1}
.ct-form .ct-note{margin:-.75rem 0 0;font-size:.75rem;line-height:1.5;color:#94a3b8;text-align:center}
.section.ct-sec{padding-bottom:2.5rem}
.section.ct-faq-sec{padding-block:2.5rem}
@media (min-width:768px){.section.ct-sec{padding-bottom:3.5rem}.section.ct-faq-sec{padding-block:3.5rem}}
/* contact: both cards p-8 at every width, so the helper text sits 32px above the form card's bottom border */
.ct-card,.ct-form-card{padding:2rem}

/* ==========================================================================
   /social-media-management (2026-09-17) — the feed-post mockup
   ========================================================================== */
.sm-mock .wd-mock__frame{height:auto}
.sm-mock .wd-mock__badge{font-size:.74rem}
@media (max-width:640px){.sm-mock .wd-mock__badge{white-space:normal;max-width:calc(100% - 12px);line-height:1.3}.sm-mock .wd-mock__badge:not(.wd-mock__badge--bl){left:auto;right:6px}}
.sm-feed{display:block;padding:1.1rem 1.1rem 2.4rem;background:linear-gradient(180deg,#0f172a,#0b1220)}
.sm-post{display:block;border-radius:14px;background:rgba(30,41,59,.72);border:1px solid rgba(51,65,85,.7);padding:.85rem .9rem .9rem;text-align:left}
.sm-post__head{display:flex;align-items:center;gap:.6rem}
.sm-avatar{display:block;flex:none;width:34px;height:34px;border-radius:50%;background:var(--btn-grad,linear-gradient(135deg,#00D2FF,#7928CA));box-shadow:0 0 12px rgba(0,210,255,.35)}
.sm-avatar--s{width:24px;height:24px}
.sm-post__who{display:grid;gap:.05rem;line-height:1.2}
.sm-post__who b{color:#fff;font-size:.86rem;font-weight:800}
.sm-post__who small{color:var(--h9-body);font-size:.68rem}
.sm-post__text{display:grid;gap:.35rem;margin-top:.7rem}
.sm-line{display:block;height:8px;border-radius:6px;background:#334155;width:92%}
.sm-line--m{width:70%}
.sm-line--s{width:46%}
.sm-post__photo{display:block;position:relative;height:118px;margin-top:.75rem;border-radius:10px;overflow:hidden;
  background:radial-gradient(60% 90% at 30% 100%,rgba(245,158,11,.55),transparent 70%),linear-gradient(135deg,#1e293b,#312e81 60%,#0e7490)}
.sm-post__photo::before{content:"";position:absolute;left:12%;bottom:0;width:30%;height:58%;border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,rgba(254,215,170,.9),rgba(245,158,11,.6));box-shadow:0 0 22px rgba(245,158,11,.45)}
.sm-post__photo::after{content:"";position:absolute;right:14%;bottom:18%;width:26%;height:34%;border-radius:50%;background:rgba(34,211,238,.25);filter:blur(2px)}
.sm-post__acts{display:flex;justify-content:space-between;gap:.5rem;margin-top:.7rem;padding-top:.6rem;border-top:1px solid rgba(51,65,85,.7)}
.sm-act{display:inline-flex;align-items:center;gap:.35rem;color:#cbd5e1;font-size:.7rem;font-weight:600}
.sm-act__ico{display:inline-grid;width:14px;height:14px;color:#22d3ee}
.sm-act__ico svg{width:14px;height:14px}
.sm-reply{display:flex;align-items:flex-start;gap:.5rem;margin-top:.75rem}
.sm-bubble{display:grid;gap:.3rem;flex:1;padding:.55rem .65rem;border-radius:12px;background:rgba(15,23,42,.8);border:1px solid rgba(6,182,212,.35)}
.sm-bubble .sm-line{background:#475569;height:7px}
.gbp-prose .wd-card > p + p{margin-top:.9rem}
/* article cards (GBP + social): nothing adds trailing space under the last element of a card, callout, inset or sub-card, and sub-cards hug their own content instead of stretching to their row partner */
.gbp-prose .wd-card > :last-child,.gbp-prose .wd-callout > :last-child,.gbp-prose .ls-inset > :last-child,.gbp-prose .wd-split__item > :last-child{margin-bottom:0}
.gbp-prose .wd-split{align-items:start}

/* ==========================================================================
   /website-care-plan (2026-09-17) — site-health mockup, two plan cards
   ========================================================================== */
.cp-mock .wd-mock__frame{height:auto}
.cp-mock .wd-mock__badge{font-size:.74rem}
@media (max-width:640px){.cp-mock .wd-mock__badge{white-space:normal;max-width:calc(100% - 12px);line-height:1.3}.cp-mock .wd-mock__badge:not(.wd-mock__badge--bl){left:auto;right:6px}}
.cp-panel{display:grid;gap:.55rem;padding:1.1rem 1.1rem 2.5rem;background:linear-gradient(180deg,#0f172a,#0b1220);text-align:left}
.cp-panel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.2rem}
.cp-panel__head b{color:#fff;font-size:.95rem;font-weight:800}
.cp-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .65rem;border-radius:999px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.35);color:#6ee7b7;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.cp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 10px rgba(52,211,153,.7)}
@media (prefers-reduced-motion:no-preference){.cp-pill .cp-dot{animation:cp-pulse 2.4s ease-in-out infinite}}
@keyframes cp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}50%{box-shadow:0 0 0 6px rgba(52,211,153,0)}}
.cp-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:.65rem;padding:.55rem .7rem;border-radius:12px;background:rgba(30,41,59,.72);border:1px solid rgba(51,65,85,.7)}
.cp-row__ico{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(34,211,238,.12);color:#22d3ee}
.cp-row__ico svg{width:15px;height:15px}
.cp-row__k{color:#e2e8f0;font-size:.78rem;font-weight:600}
.cp-row__v{display:inline-flex;align-items:center;gap:.4rem;color:#6ee7b7;font-size:.72rem;font-weight:700}
.cp-row__v .cp-dot{width:7px;height:7px}
.cp-spark{display:flex;align-items:flex-end;gap:5px;height:44px;margin-top:.3rem;padding:0 .2rem}
.cp-spark i{display:block;flex:1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,rgba(34,211,238,.85),rgba(121,40,202,.55))}
/* pricing: the two real plans side by side */
.cp-plans{display:grid;gap:1.3rem;margin:2rem auto 0;max-width:62rem}
@media (min-width:900px){.cp-plans{grid-template-columns:1.05fr .95fr;align-items:start}}
.cp-plan--b{background:rgba(30,41,59,.45);border:1px solid #334155}
.cp-turnaround{margin:1.6rem auto 0;max-width:46rem;text-align:center;color:var(--h9-body);font-size:.95rem}
.cp-turnaround b{color:#fff;font-weight:700}
.wd-prose .cp-related{grid-template-columns:1fr}
@media (min-width:700px){.wd-prose .cp-related{grid-template-columns:1fr 1fr}}
/* care pillars: three borderless glass columns */
.gbp-prose .wd-split.cp-pillars{gap:1.5rem;align-items:stretch}
@media (min-width:768px){.gbp-prose .wd-split.cp-pillars{grid-template-columns:repeat(3,1fr)}}
.gbp-prose .cp-pillars .wd-split__item{border:0;background:rgba(15,23,42,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);padding:1.2rem 1.15rem}
.gbp-prose .cp-pillars .wd-split__item h3{font-size:1rem}
.gbp-prose .cp-pillars .wd-split__item p{font-size:.95rem}
.gbp-prose .cp-pillars .wd-split__item{padding:1.1rem 1rem}
.gbp-prose .cp-pillars .wd-split__item h3{text-wrap:wrap;hyphens:manual}

/* /google-meta-ads: How it works as a numbered timeline */
.wd-prose ol.ga-steps{list-style:none;padding:0;margin:1.6rem 0 0;display:block}
.wd-prose .ga-step{position:relative;display:grid;grid-template-columns:3.5rem minmax(0,1fr);column-gap:1.1rem;padding-bottom:2rem}
.wd-prose .ga-step:last-child{padding-bottom:0}
.wd-prose .ga-step::marker{content:none}
.wd-prose .ga-step:not(:last-child)::before{content:"";position:absolute;left:1.75rem;top:2.75rem;bottom:.75rem;width:1px;background:linear-gradient(180deg,rgba(34,211,238,.5),rgba(121,40,202,.12))}
.wd-prose .ga-step__n{font-size:1.875rem;font-weight:900;line-height:1;letter-spacing:-.02em;color:#06b6d4;text-align:center;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(34,211,238,.55),0 0 2px rgba(34,211,238,.4)}
.wd-prose .ga-step__b h3{margin:0;padding-top:.2rem;font-size:1.1rem;line-height:1.35;letter-spacing:-.01em;color:#fff}
.wd-prose .ga-step__b > p{margin:.45rem 0 0;max-width:48rem;color:#cbd5e1;font-size:1rem;font-weight:400;line-height:1.7}
.wd-prose .ga-step__b .ls-inset{margin:.8rem 0 0;max-width:48rem}
@media (max-width:640px){
  .wd-prose .ga-step{grid-template-columns:2.4rem minmax(0,1fr);column-gap:.8rem}
  .wd-prose .ga-step__n{font-size:1.5rem}
  .wd-prose .ga-step:not(:last-child)::before{left:1.2rem;top:2.25rem}
}

/* /print-branded-materials: brand-guide mockup and price rows */
.pb-mock .wd-mock__frame{height:auto}
.pb-sheet{display:grid;gap:.65rem;padding:1.1rem 1.1rem 2.6rem;background:linear-gradient(180deg,#0f172a,#0b1220);text-align:left}
.pb-sheet__head{display:flex;align-items:center;gap:.7rem;margin-bottom:.15rem}
.pb-mark{position:relative;flex:none;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#00D2FF,#7928CA);box-shadow:0 0 18px rgba(0,210,255,.35)}
.pb-mark::after{content:"";position:absolute;inset:9px;border-radius:50%;border:3px solid rgba(255,255,255,.92)}
.pb-sheet__title{display:grid;flex:1;min-width:0;line-height:1.25}
.pb-sheet__title b{color:#fff;font-size:.95rem;font-weight:800}
.pb-sheet__title small{color:#94a3b8;font-size:.7rem;font-weight:600}
.pb-label{color:#22d3ee;font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.pb-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.pb-sw{display:grid;gap:.35rem;min-width:0}
.pb-sw i{display:block;height:46px;border-radius:10px;background:var(--c);border:1px solid rgba(255,255,255,.14)}
.pb-sw:first-child i{box-shadow:0 0 16px rgba(0,210,255,.45)}
.pb-sw:nth-child(3) i{box-shadow:0 0 16px rgba(121,40,202,.45)}
.pb-sw em{font-style:normal;color:#cbd5e1;font-size:.66rem;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;text-overflow:clip;white-space:nowrap}
.pb-type{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:center;padding:.7rem .85rem;border-radius:12px;background:rgba(30,41,59,.72);border:1px solid rgba(51,65,85,.7)}
.pb-type__aa{font-size:2.6rem;font-weight:900;line-height:1;letter-spacing:-.04em;background:linear-gradient(135deg,#00D2FF,#7928CA);-webkit-background-clip:text;background-clip:text;color:transparent}
.pb-type__rows{display:grid;gap:.4rem}
.pb-row{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.pb-row b{color:#fff;font-size:1rem;font-weight:800}
.pb-row--m b{font-size:.85rem;font-weight:600}
.pb-row--s b{font-size:.74rem;font-weight:400;color:#cbd5e1}
.pb-row em{font-style:normal;color:#94a3b8;font-size:.66rem;font-weight:600}
@media (max-width:420px){.pb-sw i{height:34px}.pb-sw em{font-size:.56rem}.pb-type__aa{font-size:2.1rem}}
.pb-prices{display:grid;margin-top:1rem;border-top:1px solid rgba(51,65,85,.7)}
.pb-prices__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.6rem 0;border-bottom:1px solid rgba(51,65,85,.7);color:#cbd5e1;font-size:.92rem;line-height:1.45}
.pb-prices__row b{color:#fff;font-weight:800;white-space:nowrap}
.pb-prices__row--quote b{color:#22d3ee}
.pb-plan-label{display:block;margin-top:1.2rem;color:#22d3ee;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}

/* /my-work: case studies */
.mw-hero{padding-bottom:clamp(2.5rem,6vh,4rem)}
.mw-hero__inner{max-width:52rem;margin-inline:auto;text-align:center;align-items:center}
.mw-hero__sub{margin-inline:auto;max-width:44rem}
.mw-hero__btns{justify-content:center;flex-wrap:wrap}
.mw-cases{display:grid;gap:clamp(2.5rem,6vw,4rem);margin-top:2.5rem}
.mw-case{display:grid;gap:1.6rem;align-items:start;padding:clamp(1.1rem,2.5vw,1.75rem);border-radius:22px;background:rgba(15,23,42,.4);border:1px solid rgba(51,65,85,.6);box-shadow:0 24px 60px rgba(0,0,0,.35)}
@media (min-width:960px){
  .mw-case{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:2.25rem}
  .mw-case--flip .mw-case__shot{order:2}
  .mw-case__shot{position:sticky;top:6rem}
}
.mw-frame{display:block;height:auto;overflow:hidden}
.mw-frame img{display:block;width:100%;aspect-ratio:900/620;height:auto;object-fit:cover}
.mw-case__tag{color:#22d3ee;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1.5}
.mw-case__name{margin-top:.45rem;color:#fff;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);font-weight:900;letter-spacing:-.02em;line-height:1.1}
.mw-case__kind{margin-top:.4rem;color:#94a3b8;font-size:.9rem;font-weight:600}
.mw-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem;padding:0;list-style:none}
.mw-chips li{padding:.3rem .7rem;border-radius:999px;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.3);color:#a5f3fc;font-size:.78rem;font-weight:700}
.mw-pfr{display:grid;gap:.85rem;margin-top:1.3rem}
.mw-pfr__b{padding:1rem 1.1rem;border-radius:14px;background:rgba(30,41,59,.55);border:1px solid rgba(51,65,85,.55)}
.mw-pfr__b h3{color:#fff;font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.mw-pfr__b p{margin-top:.4rem;color:#cbd5e1;font-size:1rem;line-height:1.65}
.mw-pfr__b--result{border:1px solid rgba(34,211,238,.45);box-shadow:0 0 0 1px rgba(34,211,238,.08),0 0 28px rgba(34,211,238,.12)}
.mw-pfr__b--result h3{color:#22d3ee}
.mw-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:.9rem}
@media (min-width:560px){.mw-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mw-stats div{padding:.6rem .7rem;border-radius:10px;background:rgba(15,23,42,.6);border:1px solid rgba(51,65,85,.6)}
.mw-stats dt{color:#94a3b8;font-size:.7rem;font-weight:700;line-height:1.3}
.mw-stats dd{margin:.2rem 0 0;color:#fff;font-size:1.35rem;font-weight:900;letter-spacing:-.02em}
.mw-stats dd small{margin-left:.1rem;color:#94a3b8;font-size:.72rem;font-weight:700}
.mw-src{margin-top:.6rem;color:#94a3b8;font-size:.8rem}
.mw-src a{color:#22d3ee;font-weight:700}
.mw-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
.mw-laws__sub{text-align:center;max-width:44rem;margin-inline:auto}
.mw-laws{display:grid;gap:1.2rem;margin-top:2rem}
@media (min-width:700px){.mw-laws{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.mw-laws{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mw-law{padding:1.3rem 1.2rem;border-radius:18px;background:rgba(15,23,42,.4);border:1px solid rgba(51,65,85,.6)}
.mw-law__n{display:block;color:#06b6d4;font-size:1.5rem;font-weight:900;line-height:1;text-shadow:0 0 16px rgba(34,211,238,.5)}
.mw-law h3{margin-top:.6rem;color:#fff;font-size:1.05rem;font-weight:800}
.mw-law p{margin-top:.45rem;color:#cbd5e1;font-size:.95rem;line-height:1.6}

/* /privacy and /terms */
.lg-updated{margin-top:1rem;color:#94a3b8;font-size:.85rem;font-weight:600}
.lg-wrap .wd-article__wrap{max-width:48rem}
.lg-toc{padding:1.1rem 1.25rem;border-radius:16px;background:rgba(15,23,42,.4);border:1px solid rgba(51,65,85,.6)}
.lg-toc__h{color:#22d3ee;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.lg-toc ol{margin:.6rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.35rem .5rem}
.lg-toc a{display:inline-flex;align-items:center;min-height:32px;padding:.2rem .65rem;border-radius:999px;background:rgba(30,41,59,.6);border:1px solid rgba(51,65,85,.6);color:#cbd5e1;font-size:.82rem;font-weight:600;text-decoration:none}
.lg-toc a:hover{color:#fff;border-color:rgba(34,211,238,.5)}
.lg-doc{margin-top:1.6rem;padding:clamp(1.25rem,3vw,2rem);border-radius:20px;background:rgba(15,23,42,.4);border:1px solid rgba(51,65,85,.6)}
.lg-sec{scroll-margin-top:6rem}
.lg-sec + .lg-sec{margin-top:1.9rem;padding-top:1.9rem;border-top:1px solid rgba(51,65,85,.5)}
.wd-prose.lg-doc h2{margin-top:0;font-size:clamp(1.15rem,1rem + .6vw,1.4rem)}
.wd-prose.lg-doc p,.wd-prose.lg-doc li{color:#cbd5e1;font-size:1rem;line-height:1.7}
.wd-prose.lg-doc h2 + p,.wd-prose.lg-doc h2 + ul,.wd-prose.lg-doc h2 + div{margin-top:.7rem}
.wd-prose.lg-doc p + p{margin-top:.8rem}
.wd-prose.lg-doc ul{padding-left:1.2em;display:grid;gap:.55rem}
.wd-prose.lg-doc li b{color:#fff}
.wd-prose.lg-doc a{color:#22d3ee;font-weight:600;text-underline-offset:3px}
.wd-prose.lg-doc .ls-inset{margin:.9rem 0}
.wd-prose.lg-doc .ls-inset p{color:#fff}

/* /contact: async submit states */
.ct-form{transition:opacity .25s ease}
.ct-form--sent{opacity:0}
.ct-form[hidden],.ct-success[hidden],.ct-error[hidden]{display:none}
.ct-submit[disabled]{opacity:.75;cursor:progress}
.ct-error{margin:-.5rem 0 0;color:#f87171;font-size:.875rem;line-height:1.55;text-align:center}
/* the fallback links read as links: cyan, medium weight, underlined (Jeff 2026-09-17) */
.ct-error__link{color:#22d3ee;font-weight:500;text-decoration:underline;text-decoration-color:rgba(34,211,238,.6);text-underline-offset:3px;overflow-wrap:anywhere;transition:color .15s cubic-bezier(.4,0,.2,1)}
.ct-error__link:hover{color:#67e8f9}
.ct-error__link[href^="tel:"]{white-space:nowrap}
.ct-error__link:focus-visible{outline:2px solid #22d3ee;outline-offset:2px;border-radius:2px}
/* 16px above (grid gap 24 - 8) and 16px below: the disclaimer's own -.75rem pull is eased while the error shows */
.ct-form .ct-error:not([hidden]) + .ct-note{margin-top:-.5rem}
.ct-success{padding:2rem;border-radius:16px;background:rgba(15,23,42,.4);border:1px solid rgba(6,182,212,.5);text-align:center;box-shadow:0 0 0 1px rgba(34,211,238,.08),0 0 36px rgba(34,211,238,.14)}
.ct-success:focus{outline:none}
.ct-success__ico{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 1rem;border-radius:50%;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.45);color:#22d3ee;box-shadow:0 0 26px rgba(34,211,238,.45)}
.ct-success__ico svg{width:32px;height:32px;filter:drop-shadow(0 0 6px rgba(34,211,238,.8))}
.ct-success__h{margin:0;color:#fff;font-size:1.5rem;font-weight:900;letter-spacing:-.02em}
.ct-success p{margin:.5rem 0 0;color:#cbd5e1;font-size:1rem;line-height:1.6}
@media (prefers-reduced-motion:no-preference){.ct-success:not([hidden]){animation:ct-in .35s ease-out}}
@keyframes ct-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* the form card keeps the height of the Direct-access card beside it; the success card fills it, content centred */
.ct-form-card:has(> .ct-success:not([hidden])){display:flex;flex-direction:column}
.ct-success:not([hidden]){flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}

/* keyword and niche pages (pages_niche.py): proof beside the hero */
.nl-hero__btns{align-items:center;flex-wrap:wrap;gap:.9rem 1.25rem}
.nl-textlink{color:#22d3ee;font-weight:700;font-size:.95rem;text-decoration:none}
.nl-textlink:hover{color:#67e8f9;text-decoration:underline;text-underline-offset:4px}
.nl-proof{position:relative;display:grid;gap:.8rem;align-self:center;padding:1.1rem;border-radius:20px;background:rgba(15,23,42,.4);border:1px solid rgba(51,65,85,.6);box-shadow:0 24px 60px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);min-width:0}
.nl-proof__k{color:#22d3ee;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.nl-proof__link{color:#cbd5e1;font-size:.85rem;font-weight:700;text-decoration:none}
.nl-proof__link:hover{color:#22d3ee}
.nl-proof__src{color:#94a3b8;font-size:.72rem}
.nl-duo{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.nl-mini,.nl-case{display:grid;gap:.55rem;min-width:0;text-decoration:none;color:inherit}
.nl-mini__frame,.nl-case__frame{display:block;height:auto;overflow:hidden}
.nl-mini__frame img{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover}
.nl-case__frame img{display:block;width:100%;aspect-ratio:900/620;height:auto;object-fit:cover}
.nl-mini__meta,.nl-case__meta{display:grid;line-height:1.3}
.nl-mini__meta b,.nl-case__meta b{color:#fff;font-size:.92rem;font-weight:800}
.nl-mini__meta small,.nl-case__meta small{color:#94a3b8;font-size:.75rem;font-weight:600}
.nl-mini:hover .h9-browser,.nl-case:hover .h9-browser{border-color:rgba(34,211,238,.5)}
.nl-case__stats{display:flex;flex-wrap:wrap;gap:.45rem}
.nl-case__stats span{padding:.3rem .6rem;border-radius:999px;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.3);color:#a5f3fc;font-size:.75rem;font-weight:600}
.nl-case__stats b{color:#fff;font-weight:800}
.nl-case__go{color:#22d3ee;font-size:.9rem;font-weight:700}
.nl-data__h{color:#fff;font-size:1.05rem;font-weight:800;line-height:1.3}
.nl-bar{display:grid;grid-template-columns:1fr auto;gap:.4rem .8rem;align-items:baseline;padding:.7rem .8rem;border-radius:12px;background:rgba(30,41,59,.6);border:1px solid rgba(51,65,85,.6)}
.nl-bar__t{color:#cbd5e1;font-size:.85rem;line-height:1.35}
.nl-bar b{color:#fff;font-size:1.05rem;font-weight:900;white-space:nowrap}
.nl-bar i{grid-column:1/-1;display:block;height:6px;border-radius:999px;background:linear-gradient(90deg,#00D2FF,#7928CA) 0 0/var(--w) 100% no-repeat,rgba(51,65,85,.7)}
.wd-prose .nl-more{margin-top:1rem}

/* /services: the hub grid */
.sv-hero{padding-bottom:clamp(2rem,5vh,3rem)}
/* seven cards: flex wrap so the last row centres (a grid would leave the seventh alone on the left) */
.sv-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.3rem;margin-top:2.2rem}
.sv-grid > .sv-card{flex:1 1 17rem;max-width:21rem}
@media (max-width:639px){.sv-grid > .sv-card{max-width:none}}
.sv-card{display:flex;flex-direction:column;padding:1.5rem;border-radius:18px;background:rgba(15,23,42,.4);border:1px solid rgba(51,65,85,.6);box-shadow:0 18px 44px rgba(0,0,0,.3);text-decoration:none;color:inherit;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.sv-card:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.5)}
.sv-card__shot{display:block;overflow:hidden;border-radius:12px;border:1px solid rgba(51,65,85,.7)}
.sv-card__shot img{display:block;width:100%;aspect-ratio:8/5;height:auto;object-fit:cover}
.sv-card h3{margin-top:1rem;color:#fff;font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.sv-card p{margin-top:.45rem;color:#cbd5e1;font-size:.95rem;line-height:1.6}
.sv-card__price{margin-top:.6rem !important;color:#a5f3fc;font-size:.85rem !important;font-weight:700}
.sv-card__more{margin-top:auto;padding-top:1rem;color:#22d3ee;font-size:.9rem;font-weight:700}
.sv-cases{display:grid;gap:1.3rem;margin-top:2rem;grid-template-columns:1fr}
@media (min-width:760px){.sv-cases{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sv-case{display:grid;gap:.7rem;align-content:start;padding:1.1rem;border-radius:18px;background:rgba(15,23,42,.4);border:1px solid rgba(51,65,85,.6);text-decoration:none;color:inherit;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.sv-case:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.5)}
.sv-case__frame{display:block;height:auto;overflow:hidden}
.sv-case__frame img{display:block;width:100%;aspect-ratio:900/620;height:auto;object-fit:cover}
.sv-case__meta{display:grid;gap:.25rem}
.sv-case__meta b{color:#fff;font-size:1.02rem;font-weight:800}
.sv-case__meta small{color:#22d3ee;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.sv-case__p{margin-top:.3rem;color:#cbd5e1;font-size:.92rem;line-height:1.55}
.sv-case__go{margin-top:.4rem;color:#22d3ee;font-size:.88rem;font-weight:700}

/* ---- the service-area map, stacked: /services and the homepage (Jeff 2026-09-17) --- */
/* The towns sit under the map rather than beside it, and a county lights on its own
   hover (CSS) as well as when one of its towns is hovered or focused (JS adds .is-lit). */
/* minmax(0,1fr), not 1fr: a grid item won't shrink below its min-content, and the
   map's max-width became exactly that floor — on a phone it held 640px and pushed
   the whole page sideways */
.hm--stack{grid-template-columns:minmax(0,1fr);gap:1.4rem;justify-items:center}
@media (min-width:900px){.hm--stack{grid-template-columns:minmax(0,1fr);gap:1.8rem}}
.hm--stack .hm__map,.hm--stack .hm-towns{min-width:0}
/* 40rem keeps the map the size it renders at on the homepage (its 1.35fr column),
   so stacking it doesn't blow it up to fill the whole viewport on a laptop */
.hm--stack .hm__map{width:100%;max-width:40rem}
/* the town chips under the map: the eight with pages are links, the rest are names */
.hm-towns{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;
  margin:0;padding:0;width:100%;max-width:52rem}
.hm-towns .h9-pill{cursor:default}
.hm-towns a.h9-pill{cursor:pointer}
.hm-chip{color:#cbd5e1;font-weight:600}
.hm-towns a.h9-pill:hover{transform:translateY(-2px)}
.hm--stack .h9-pill.is-lit{border-color:rgba(6,182,212,.7);box-shadow:0 0 18px rgba(0,210,255,.25);color:#fff}
.hm--stack .hm-county[data-county]{cursor:pointer}
.hm--stack .hm-county[data-county]:hover,
.hm--stack .hm-county[data-county].is-lit{
  fill:url(#hm-grad);stroke:#22d3ee;stroke-width:.9;filter:drop-shadow(0 0 4px rgba(0,210,255,.7))}

/* On a phone the map is ~336px wide, so its labels render near 5px — unreadable,
   and the dots become mis-tap hazards. The chips underneath name every town and are
   real tap targets, so the map goes back to being a picture of the area. */
@media (max-width:639px){
  .hm--stack .hm-label{display:none}
  .hm--stack .hm-town{pointer-events:none}
  .hm-towns{gap:.5rem}
  .hm-towns .h9-pill{padding:.55rem .85rem;font-size:.85rem}
}

/* ---- /pricing: glass cards in the h9 system (Jeff 2026-09-17) --------------- */
.pr-hero{padding-bottom:clamp(2rem,5vh,3rem)}
.pr-grid{display:grid;gap:1.3rem;margin-top:2rem;grid-template-columns:1fr}
.pr-grid+.pr-grid{margin-top:1.3rem}
@media (min-width:700px){
  .pr-grid--lead,.pr-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-grid--3,.pr-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1040px){
  .pr-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pr-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.pr-card{position:relative;display:flex;flex-direction:column;padding:1.5rem;border-radius:16px;
  background:rgba(15,23,42,.4);border:1px solid rgba(51,65,85,.7);
  box-shadow:0 18px 44px rgba(0,0,0,.28);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.pr-card:hover{border-color:rgba(34,211,238,.35);transform:translateY(-3px)}
.pr-card h3{color:#fff;font-size:1.1rem;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.pr-card--lead{padding:1.9rem}
.pr-card--lead h3{font-size:1.25rem}
/* the five-page build is the one most people are here for */
.pr-card--flag{border-color:rgba(34,211,238,.55);box-shadow:0 0 0 1px rgba(34,211,238,.12),0 0 46px rgba(34,211,238,.16),0 18px 44px rgba(0,0,0,.3)}
.pr-badge{position:absolute;top:-.7rem;left:1.9rem;padding:.3rem .7rem;border-radius:999px;
  background:var(--h9-grad,linear-gradient(135deg,#06b6d4,#7928CA));color:#fff;
  font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.pr-price{margin-top:.6rem;color:#fff;font-size:2.4rem;font-weight:900;letter-spacing:-.03em;line-height:1}
.pr-price--sm{font-size:1.75rem}
.pr-care{display:block;margin-top:.35rem;color:#22d3ee;font-size:.85rem;font-weight:700;letter-spacing:0}
.pr-per{color:#94a3b8;font-size:.9rem;font-weight:600}
.pr-tag{display:inline-block;margin-left:.15rem;color:#22d3ee;font-size:1rem;font-weight:800;white-space:nowrap}
.pr-when{margin-top:.7rem;color:#94a3b8;font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.pr-who{margin-top:.7rem;color:#cbd5e1;font-size:.9rem;line-height:1.55}
.pr-desc{margin-top:.8rem;color:#cbd5e1;font-size:.95rem;line-height:1.65}
.pr-list{margin-top:.9rem;display:grid;gap:.4rem;padding-left:1.1rem;list-style:disc;color:#cbd5e1;font-size:.92rem;line-height:1.55}
.pr-list li::marker{color:#22d3ee}
.pr-rows{margin-top:.9rem;display:grid;gap:.55rem;padding:0;list-style:none}
.pr-rows li{display:flex;gap:1rem;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid rgba(51,65,85,.6);padding-bottom:.5rem;color:#cbd5e1;font-size:.88rem;line-height:1.45}
.pr-rows li:last-child{border-bottom:0;padding-bottom:0}
.pr-rows b{color:#fff;white-space:nowrap;font-weight:800}
.pr-card--rule h3{display:flex;align-items:baseline;gap:.6rem}
.pr-n{color:#22d3ee;font-size:1.6rem;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;
  text-shadow:0 0 16px rgba(34,211,238,.5)}
.pr-cta{margin-top:2rem;display:flex;justify-content:center}
.pr-foot,.pr-note{margin-top:1.4rem;color:#94a3b8;font-size:.9rem;line-height:1.7;max-width:74ch}
.pr-foot a{color:#22d3ee}
.pr-legal{padding-block:0}
.pr-legal p{margin-inline:auto;max-width:74ch;padding-top:1.6rem;border-top:1px solid rgba(51,65,85,.6);
  color:#94a3b8;font-size:.85rem;line-height:1.7;text-align:center}

/* ---- /pricing refinements (Jeff 2026-09-17): five monthly cards, proof on the
   flagship, roomier add-ons ------------------------------------------------- */
/* five cards: flex wrap so the last row centres instead of stranding one card left */
/* five cards, symmetric: 1 up on a phone, 2 on a tablet, 3 on desktop so the last
   row holds 2 and centres (Jeff 2026-09-17). Explicit basis rather than flex-grow —
   growing items fill the line and leave the short row looking stranded. */
.pr-grid--5{display:flex;flex-wrap:wrap;justify-content:center;gap:1.3rem}
.pr-grid--5 > .pr-card{flex:0 1 100%;max-width:100%}
@media (min-width:700px){.pr-grid--5 > .pr-card{flex:0 1 calc(50% - .65rem);max-width:calc(50% - .65rem)}}
@media (min-width:1040px){.pr-grid--5 > .pr-card{flex:0 1 calc(33.333% - .867rem);max-width:calc(33.333% - .867rem)}}
.pr-card--social{border-color:rgba(34,211,238,.3)}
/* the mockup sits at the foot of the flagship card, so both lead cards stay aligned */
/* the two lead cards keep their tops aligned but take their own height: stretching
   them left ~400px of empty card beside the flagship once the mockup went in, which
   reads as a bug. A shorter card next to a taller featured one reads as intent. */
.pr-proof{margin-top:1.4rem;display:block;text-decoration:none;color:inherit}
/* no height cap: capping it sliced the client's headline through the middle of a
   word. The flagship is simply taller than the card beside it, which is the point. */
.pr-proof__frame{display:block;overflow:hidden;height:auto}
.pr-proof__frame img{display:block;width:100%;aspect-ratio:900/620;height:auto;object-fit:cover;object-position:50% 0}
.pr-proof__cap{display:block;margin-top:.6rem;color:#94a3b8;font-size:.82rem;line-height:1.5}
.pr-proof__cap b{color:#22d3ee;font-weight:700;white-space:nowrap}
.pr-proof:hover .pr-proof__cap b{text-decoration:underline}
.pr-proof:hover .pr-proof__frame{border-color:rgba(34,211,238,.5)}
/* add-ons: two up, with room to breathe on the long item names */
.pr-grid--roomy{gap:1.6rem}
.pr-card--wide{padding:1.8rem}
.pr-card--wide .pr-rows{gap:.85rem;margin-top:1.1rem}
.pr-card--wide .pr-rows li{gap:1.5rem;padding-bottom:.85rem;font-size:.92rem;line-height:1.6}

/* ---- /about: the solo-operator page in the h9 system (Jeff 2026-09-17) ------ */
/* the hero is short on this page (no big visual below the fold), so it doesn't
   need the full hero padding underneath - it left a void above the manifesto */
.ab-hero{padding-bottom:clamp(1rem,2.5vh,1.6rem)}
.ab-hero+.section{padding-top:clamp(1.6rem,4vh,2.6rem)}
/* Built like the homepage hero (Jeff 2026-09-18): .h9-hero__grid is capped at
   1200px and centred, so the text column and the photo sit side by side with the
   whole block centred on the page. Before this the hero used .h9-hero__inner on its
   own, which is margin-inline:0 at desktop - that is why it hugged the left edge
   with a void beside it. */
.ab-hero__grid{align-items:center}
.ab-hero__copy{text-align:center}
@media (min-width:1024px){
  .ab-hero__grid{grid-template-columns:1.15fr .85fr}
  .ab-hero__copy{align-items:flex-start;text-align:left;margin-inline:0}
  .ab-hero__copy .h9-hero__btns{justify-content:flex-start}
}
.ab-h1{max-width:22ch;margin:0}
@media (max-width:1023px){.ab-h1{margin-inline:auto}}
.ab-shot{margin:0;width:100%;max-width:21rem;justify-self:center}
.ab-shot img{display:block;width:100%;height:auto;border-radius:14px;padding:0;
  background:rgba(15,23,42,.6);border:1px solid rgba(51,65,85,.9)}
.ab-shot__frame{display:block;padding:.5rem;border-radius:18px;background:rgba(15,23,42,.6);
  border:1px solid rgba(51,65,85,.9);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.ab-shot figcaption{margin-top:.75rem;color:#94a3b8;font-size:.76rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;text-align:center}
/* the manifesto: one glass card, capped at a comfortable reading measure */
.ab-card{max-width:48rem;margin-inline:auto;padding:clamp(1.4rem,3vw,2.2rem);border-radius:18px;
  background:rgba(15,23,42,.4);border:1px solid rgba(51,65,85,.7);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.ab-card h2{font-size:clamp(1.25rem,1rem + 1vw,1.6rem)}
.ab-tag{color:#22d3ee;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 0 14px rgba(34,211,238,.45)}
.ab-tag+h2{margin-top:.4rem !important}
.ab-card h2+p{margin-top:.9rem}
.ab-card p{color:#cbd5e1;font-size:1rem;line-height:1.75;max-width:64ch}
.ab-card p+p{margin-top:1rem}
.ab-card .ab-tag:not(:first-child){margin-top:2rem;padding-top:1.7rem;border-top:1px solid rgba(51,65,85,.6)}
/* the four promises, one card each instead of a bullet list */
.ab-grid{display:grid;gap:1.1rem;margin-top:2rem;grid-template-columns:1fr;max-width:56rem;margin-inline:auto}
@media (min-width:640px){.ab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ab-no{position:relative;padding:1.3rem 1.3rem 1.3rem 3.1rem;border-radius:16px;background:rgba(15,23,42,.4);
  border:1px solid rgba(51,65,85,.7);transition:border-color .3s var(--ease)}
.ab-no:hover{border-color:rgba(34,211,238,.35)}
.ab-no::before{content:"";position:absolute;left:1.25rem;top:1.65rem;width:1rem;height:1rem;border-radius:50%;
  background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.55);
  box-shadow:0 0 12px rgba(34,211,238,.35)}
.ab-no::after{content:"";position:absolute;left:1.55rem;top:2.1rem;width:.42rem;height:1px;background:#22d3ee}
.ab-no h3{color:#fff;font-size:1rem;font-weight:800;line-height:1.35}
.ab-no p{margin-top:.35rem;color:#cbd5e1;font-size:.93rem;line-height:1.6}

/* ---- /blog index: the card grid (Jeff 2026-09-17) -------------------------- */
.bl-hero{padding-bottom:clamp(1rem,2.5vh,1.6rem)}
/* centred like every other text-only hero on the site. The bare .h9-hero__inner
   flips to flex-start at desktop, which is right for the homepage and /about -
   both pair the text with an image on the right - and wrong here, where there is
   nothing to pair with (Jeff spotted it 2026-09-17). */
.bl-hero .h9-hero__inner{align-items:center;margin-inline:auto;text-align:center;max-width:52rem}
.bl-count{margin-top:1.1rem;color:#94a3b8;font-size:.85rem;font-weight:700;letter-spacing:.06em}
.bl-sec{padding-top:clamp(1.6rem,4vh,2.6rem)}
.bl-grid{display:grid;gap:1.3rem;grid-template-columns:1fr}
@media (min-width:640px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.bl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bl-card{display:flex;flex-direction:column;padding:1.5rem;border-radius:16px;
  background:rgba(15,23,42,.4);border:1px solid rgba(51,65,85,.7);
  box-shadow:0 18px 44px rgba(0,0,0,.28);
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.bl-card:hover{border-color:rgba(34,211,238,.4);transform:translateY(-3px)}
.bl-card__cat{align-self:flex-start;padding:.3rem .65rem;border-radius:999px;
  background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.35);color:#67e8f9;
  font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.bl-card__meta{margin-top:.85rem;color:#94a3b8;font-size:.8rem;font-weight:600}
.bl-card__h{margin-top:.5rem;font-size:1.12rem;font-weight:800;line-height:1.35;letter-spacing:-.01em}
.bl-card__h a{color:#f1f5f9;text-decoration:none}
.bl-card:hover .bl-card__h a{color:#fff}
/* the whole card is the click target; the title anchor carries the real href */
.bl-card__h a::after{content:"";position:absolute;inset:0}
.bl-card{position:relative}
.bl-card__x{margin-top:.7rem;color:#cbd5e1;font-size:.93rem;line-height:1.6}
.bl-card__more{margin-top:auto;padding-top:1.1rem;color:#22d3ee;font-size:.88rem;font-weight:700}
.bl-card:hover .bl-card__more .arr{transform:translateX(3px)}
.bl-card__more .arr{display:inline-block;transition:transform .3s var(--ease)}

/* ---- town service-area pages (Jeff 2026-09-17) ----------------------------- */
.tw-hero{padding-bottom:clamp(1rem,2.5vh,1.8rem)}
/* the article in one glass card at a comfortable measure, like /about */
.tw-card{max-width:48rem;margin-inline:auto;padding:clamp(1.4rem,3vw,2.2rem);border-radius:18px;
  background:rgba(15,23,42,.4);border:1px solid rgba(51,65,85,.7);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.tw-card h2{color:#f1f5f9;font-size:clamp(1.25rem,1rem + 1vw,1.6rem);letter-spacing:-.015em}
.tw-card h2:not(:first-child){margin-top:2.1rem;padding-top:1.8rem;border-top:1px solid rgba(51,65,85,.6)}
.tw-card p,.tw-card li{color:#cbd5e1;line-height:1.8}
.tw-card b{color:#fff}
.tw-card a{color:#22d3ee}
.tw-card .figure{margin:2rem 0}
.tw-card .figure img{border-radius:14px;border:1px solid rgba(51,65,85,.7)}
.tw-card .svc-list{margin-top:1rem;display:grid;gap:.5rem;padding-left:1.1rem}
.tw-card .also{margin-top:2rem;padding-top:1.4rem;border-top:1px solid rgba(51,65,85,.6);
  color:#94a3b8;font-size:.9rem;line-height:1.7}
/* the county map, boxed like everything else on these pages */
.tw-map{max-width:56rem;margin:1.8rem auto 0;padding:clamp(1rem,2.5vw,1.6rem);border-radius:18px;
  background:rgba(15,23,42,.4);border:1px solid rgba(51,65,85,.7)}
.tw-card .svc-more{margin-top:1rem;color:#94a3b8;font-size:.92rem;line-height:1.7}

/* ---- /pricing alignment + the proof strip (Jeff 2026-09-18) ---------------- */
.pr-eyebrow{justify-content:center}
.pr-h2{margin-inline:auto;max-width:26ch}
.pr-sub{margin-inline:auto;max-width:70ch;text-align:center}
/* The flagship mockup used to live inside the $2,600 card, which made that card
   ~400px taller than the $850 beside it - and a grid row is as tall as its tallest
   item, so the next row waited and left a visible void. Out here it proves the same
   point and costs the grid no height. */
.pr-proof--strip{max-width:44rem;margin:1.6rem auto 0;padding-top:0}
.pr-proof--strip .pr-proof__cap{text-align:center}

/* ---- /pricing: a visual in every build tier (Jeff 2026-09-18) --------------- */
/* Three are real sites of mine. The single-page tier has no live example, so it
   gets a drawn one for a fictional business, captioned as an example. */
.pr-shot{display:block;margin-top:auto;padding-top:1.2rem;text-decoration:none;color:inherit}
.pr-shot__frame{display:block;overflow:hidden}
.pr-shot__frame img{display:block;width:100%;aspect-ratio:900/620;height:auto;object-fit:cover}
.pr-shot__cap{display:block;margin-top:.7rem;color:#94a3b8;font-size:.8rem;line-height:1.55}
.pr-shot__cap b{color:#e2e8f0;font-weight:700}
.pr-shot__go{color:#22d3ee !important;white-space:nowrap}
a.pr-shot:hover .pr-shot__frame{border-color:rgba(34,211,238,.5)}
a.pr-shot:hover .pr-shot__go{text-decoration:underline}
/* the drawn example, built to the same aspect so all four cards match height */
.pr-draw{display:flex;flex-direction:column;aspect-ratio:900/620;
  background:linear-gradient(180deg,#0f172a,#0b1220);padding:.55rem .6rem;gap:.4rem}
.pr-draw__nav{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:.4rem;border-bottom:1px solid rgba(51,65,85,.7)}
.pr-draw__nav b{color:#e2e8f0;font-size:.6rem;font-weight:800;letter-spacing:.02em}
.pr-draw__nav i{width:14px;height:3px;border-radius:2px;background:#334155;box-shadow:0 5px 0 #334155,0 -5px 0 #334155}
.pr-draw__hero{display:grid;gap:.3rem;justify-items:center;text-align:center;padding:.5rem .3rem .45rem;
  background:radial-gradient(60% 80% at 50% 0%,rgba(34,211,238,.14),transparent 70%);border-radius:8px}
.pr-draw__eyebrow{color:#67e8f9;font-size:.44rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.pr-draw__h{color:#fff;font-size:.78rem;font-weight:900;line-height:1.15;letter-spacing:-.01em;max-width:16ch}
.pr-draw__cta{margin-top:.15rem;padding:.24rem .6rem;border-radius:999px;background:var(--h9-grad,linear-gradient(135deg,#06b6d4,#7928CA));
  color:#fff;font-size:.5rem;font-weight:800;box-shadow:0 0 14px rgba(34,211,238,.35)}
.pr-draw__row{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem}
.pr-draw__row i{padding:.3rem .2rem;border-radius:6px;background:rgba(30,41,59,.85);border:1px solid rgba(51,65,85,.7);
  color:#cbd5e1;font-size:.46rem;font-style:normal;font-weight:700;text-align:center}
.pr-draw__strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;flex:1}
.pr-draw__strip i{border-radius:6px;background:linear-gradient(135deg,#1e293b,#131c2e);border:1px solid rgba(51,65,85,.6)}
.pr-draw__foot{margin-top:auto;padding:.3rem;border-radius:6px;background:rgba(34,211,238,.1);
  border:1px solid rgba(34,211,238,.3);color:#a5f3fc;font-size:.46rem;font-weight:700;text-align:center}
/* all four tiers are equal height again now that each one carries a visual */
.pr-grid--lead{align-items:stretch}
/* the FAQ heading keeps its old 22ch measure everywhere; on /pricing it centres
   with the rest of that page's section headings (Jeff 2026-09-18) */
.faq-h{max-width:22ch}
.pr-faq .faq-h{margin-inline:auto;text-align:center;max-width:26ch}