/* ss8-pill.css (themefx 2026-10-01): ONE premium 3D pill button system + gold cursor ring.
   JS (ss8-pill.js) tags buttons .ss8p/.ss8p-pri/.ss8p-sec and injects a liquid layer <i class="ss8p-liq">. */
.ss8p.ss8p.ss8p{
  border-radius:999px;position:relative;isolation:isolate;overflow:hidden;-webkit-tap-highlight-color:transparent;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,color .25s,border-color .25s;
}
.ss8p-pri.ss8p-pri.ss8p-pri{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 6px rgba(120,80,0,.28),0 1px 2px rgba(0,0,0,.35),0 8px 18px -6px rgba(212,164,42,.55),0 16px 30px -14px rgba(0,0,0,.5);
}
.ss8p-sec.ss8p-sec.ss8p-sec{
  color:#FAF8F5;background-color:rgba(250,248,245,.10);
  border:1px solid rgba(250,248,245,.38);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 5px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.3),0 8px 18px -8px rgba(0,0,0,.55);
}
html[data-theme="light"] .ss8p-sec.ss8p-sec.ss8p-sec{
  color:#FAF8F5;background-color:#1D1B18;border-color:rgba(0,0,0,.55);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 5px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35),0 8px 18px -8px rgba(29,27,24,.55);
}
/* header Book: a primary CTA, so gold-filled */
.topbar-cta.ss8p-pri.ss8p-pri.ss8p-pri{background:linear-gradient(115deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));color:#1A1405;border-color:transparent}
.ss8p-pri.is-fill.topbar-cta{color:#1A1405!important}
/* liquid layer: gold pool that grows from the side the pointer entered, drains toward the side it left */
.ss8p-liq{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  clip-path:circle(0% at var(--lx,50%) var(--ly,50%));
  transition:clip-path .55s cubic-bezier(.22,1,.36,1);
  background:radial-gradient(120% 160% at var(--lx,50%) var(--ly,50%),#FFF6D6 0%,#FFD965 38%,#F5BD02 100%)}
.ss8p-sec .ss8p-liq{background:radial-gradient(120% 160% at var(--lx,50%) var(--ly,50%),#FFFFFF 0%,#FAF8F5 45%,#EFE9DC 100%)}
.ss8p-pri .ss8p-liq{background:radial-gradient(120% 160% at var(--lx,50%) var(--ly,50%),rgba(255,251,235,.98) 0%,rgba(255,232,150,.9) 45%,rgba(255,205,74,.85) 100%)}
.ss8p.is-fill .ss8p-liq{clip-path:circle(150% at var(--lx,50%) var(--ly,50%))}
.ss8p-sec.is-fill{color:#1A1A1A!important;border-color:#FAF8F5}
.ss8p-pri.is-fill{color:#1A1405!important}
@media (hover:hover) and (pointer:fine){
  .ss8p.ss8p.ss8p:hover{transform:translateY(-2px)}
}
.ss8p.ss8p.ss8p:active{transform:scale(.96);transition-duration:.1s}
.ss8p:focus{outline:none}.ss8p:focus-visible{outline:2px solid var(--gold,#F5BD02);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ss8p,.ss8p-liq{transition:none}}
/* cursor: liquid-glass lens + 5px ivory dot (fine pointer only; hidden until first move and when the mouse leaves the window) */
.ss8c{position:fixed;left:0;top:0;pointer-events:none;z-index:99998;opacity:0;transition:opacity .25s;display:none}
@media (pointer:fine) and (hover:hover){.ss8c{display:block}}
.ss8c.on{opacity:1}
.ss8c-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#FAF8F5;box-shadow:0 0 0 1px rgba(20,20,20,.25)}
.ss8c-ring{width:42px;height:42px;margin:-21px 0 0 -21px;display:none;align-items:center;justify-content:center;will-change:transform}
@media (pointer:fine) and (hover:hover){.ss8c-ring{display:flex}}
.ss8c-ring i{position:absolute;inset:0;border-radius:50%;
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(6px) saturate(1.6) brightness(1.08);backdrop-filter:blur(6px) saturate(1.6) brightness(1.08);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),0 6px 18px rgba(0,0,0,.18);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
html[data-theme="light"] .ss8c-ring i{border-color:rgba(20,20,20,.18);background:rgba(255,255,255,.18)}
.ss8c-ring.hot i{transform:scale(1.6)}
.ss8c-ring b{position:absolute;font:600 9px/1 var(--mono,monospace);letter-spacing:.28em;color:#FAF8F5;background:rgba(20,20,20,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);padding:14px 15px 13px 19px;border-radius:99px;opacity:0;transform:scale(.5);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.ss8c-ring.view b{opacity:1;transform:scale(1)}.ss8c-ring.view i{opacity:0}
@media (prefers-reduced-motion:reduce){.ss8c{display:none!important}}
/* nav stays on the RIGHT (owner 2026-10-01): brand far left, links + account + Book + theme grouped right, normal and scrolled */
@media (min-width:861px){
  #nav{top:0;left:0;right:0;width:auto;border-radius:0;border-width:0 0 1px 0;padding:10px var(--pad-x,32px);padding-top:max(10px,env(safe-area-inset-top));transform:translateY(-130%)}
  #nav.on{transform:none}
  #nav .links{margin-left:auto}
}
.header-exact .tb-links{margin-left:auto}
.header-exact .tb-links a.ss8p{margin-left:0}
.v7-tb-links{margin-left:auto;margin-right:6px}
/* premium big marquee: solid gold italics, dot separators, edge-faded, blended into the next section */
.bigmarq{padding-bottom:clamp(20px,3vw,44px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,#000 0,#000 80%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,#000 0,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.bigmarq .row span em{color:var(--gold);-webkit-text-stroke:0;text-shadow:0 0 28px rgba(245,189,2,.22)}
html[data-theme="light"] .bigmarq .row span em{color:var(--gold-text);text-shadow:none}
.bigmarq .row span{padding-right:0}
.bigmarq .mq-dot{display:inline-block;width:.1em;height:.1em;border-radius:50%;background:var(--gold);margin:0 .38em;vertical-align:.34em;box-shadow:0 0 14px rgba(245,189,2,.6)}
html[data-theme="light"] .bigmarq .mq-dot{background:var(--gold-text);box-shadow:none}
#services{background-image:linear-gradient(180deg,var(--s0,#070B10) 0,transparent clamp(120px,16vw,220px))}
/* services hover-image scrim only exists while an image is showing (it tinted the idle section grey in light mode) */
#svc-bg::after{opacity:0;transition:opacity .45s}
#svc-bg:has(img.show)::after{opacity:1}
/* wordmark: "8" follows the token; ONE shine sweep per hover/tap (base = --wm-gold, highlight #FFF4D2) */
.wm-ss8 b,#topbar .brand .wm-ss8 b,#nav .brand .wm-ss8 b{color:inherit}
@keyframes wmshine{from{background-position:100% 0}to{background-position:0 0}}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  @media (prefers-reduced-motion:no-preference){
    a:hover .wm-ss8,a:hover .wm-prod,a:active .wm-ss8,a:active .wm-prod,.brand:hover .wm-ss8,.brand:hover .wm-prod{
      background-image:linear-gradient(100deg,var(--wm-gold) 0%,var(--wm-gold) 40%,#FFF4D2 50%,var(--wm-gold) 60%,var(--wm-gold) 100%);
      background-size:250% 100%;background-position:0 0;
      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;
      animation:wmshine .9s ease both}
  }
}
.header-exact .topbar-cta.ss8p.ss8p{height:40px;min-width:0;padding:0 22px;color:#1A1405;border:0}
#nav .brand .wm-ss8 b,#topbar .brand .wm-ss8 b{font-weight:700}

/* ===================================================================
   CONTRAST LAYER (2026-10-05, owner: "much text is unreadable")
   Root causes fixed here, in ONE place (loaded by index.html + V7Layout):
   1. text-on-gold used var(--s0) (the PAGE colour): cream on gold in light.
   2. gold #F5BD02 used as TEXT on cream surfaces: use --gold-text.
   3. light-theme ink tokens used over always-dark photo heroes / footer.
   4. .btn-dark got the dark-theme glass style on the cream "approach" island.
   5. faint decorative greys over photos / inactive drum lines.
   Brand stays charcoal + royal gold #F5BD02, no blue.
   =================================================================== */
:root{--on-gold:#1A1405}
/* 1. text on gold fills (any theme) */
:root:root :is(.sd-card-cta,.sd-cta-btn,.pd-cta-btn,.town-cta-btn,.bk-cta-btn,.niche-hero-btn,.niche-cta-btn,.legal-cta-btn,.eq-submit,.eq-submit span,.bp-cta-btn,.vid-cta-btn,.e404-btn-primary,.e404-cta-btn,.pr-cta-btn,.svc-cta-btn,.ae-btn,.about-cta-btn,.gl-chip.active,.pr-card-badge .mono,#bbar .bb-book,.cta-pill,.v7-cta-pill){color:var(--on-gold)!important}
/* 2. gold text on cream (light theme) */
html[data-theme="light"] :is(.sd-card-price,.svc-price,.pd-meta-chip,.legal-link,.vid-cta-btn-secondary,.bp-author-initial,.svc .idx,.svc .price,.work-counter .cur,#wcur,.cyl .li.on em,.pr-feature-dot,.pr-card-link,.sd-section-num,.town-ctx-label,.town-sec-label,.eq-req,.eq-opt){color:var(--gold-text)!important}
html[data-theme="light"] .svc .go::after{color:var(--gold-text)}
html[data-theme="light"] :is(.eq-opt,.cl-footer,.exifline){color:var(--ink-2)}
/* 3a. photo heroes are always dark: re-scope the dark palette (both themes) */
:root:root :is(.town-hero,.bp-hero,.niche-hero){--ink:#F2EDE4;--ink-lift:#F7F4EE;--ink-2:#E6E0D4;--ink-dim:#DAD3C5;--gold-text:#F5BD02;--ss-text:#F2EDE4;--ss-text-2:#E6E0D4;--ss-text-3:#DAD3C5;--ss-text-ghost:#DAD3C5;color:#F2EDE4}
:root:root :is(.town-hero-img,.bp-hero-img,.niche-hero-img,.pd-hero-img){filter:brightness(.78) saturate(.95)}
/* 3b. footer is always dark: dark-palette tokens in light theme too */
html[data-theme="light"] #v7-footer{--ink:#F2EDE4;--ink-lift:#F7F4EE;--ink-2:#CFC8B8;--ink-dim:#B3AC9B;--gold-text:#F5BD02;--ss-text:#F2EDE4;--ss-text-2:#CFC8B8;--ss-text-3:#B3AC9B}
html[data-theme="light"] #v7-footer a:hover{color:#F7F4EE}
/* 4. dark pill on the cream island: solid in BOTH themes */
:root:root .btn-dark.ss8p-sec{color:#FAF8F5;background-color:#1D1B18;border-color:rgba(0,0,0,.55);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 5px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35),0 8px 18px -8px rgba(29,27,24,.55)}
/* scroll nav floats over the cream island in dark theme: keep it dark enough for its white links */
/* nav-glass 2026-10-07: scrolled bar sits flush at top:0 as real liquid glass (same recipe as the phone #topbar.off). Public site is dark only. */
@media (min-width:861px){
  #nav{background:rgba(7,11,16,.66);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-color:transparent;box-shadow:0 10px 30px -12px rgba(0,0,0,.45)}
  /* round 2: hairline fading at both ends (gold ~12%), scroll fill inside it, gliding underline, edge fade, magnetic BOOK */
  #nav::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(239,191,4,.12) 50%,transparent);pointer-events:none}
  #nav .nav-fill{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--gold-deep),var(--gold));transform-origin:0 50%;transform:scaleX(var(--sp,0));pointer-events:none}
  #nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:24px;background:linear-gradient(180deg,rgba(7,11,16,.5),transparent);pointer-events:none;opacity:0;transition:opacity .3s}
  #nav.on::after{opacity:1}
  html:has(#nav.on) #progress{opacity:0}
  #progress{transition:opacity .3s}
  #nav .links{position:relative}
  #nav .links a.act::after{display:none}
  #nav .nav-ind{position:absolute;left:0;bottom:-7px;width:100px;height:2px;border-radius:2px;background:var(--gold);box-shadow:0 0 10px rgba(239,191,4,.55);transform-origin:0 50%;opacity:0;pointer-events:none}
  #nav .nav-ind.rdy{transition:transform 350ms cubic-bezier(.22,.61,.36,1),opacity .25s}
  #nav .cta-book{translate:var(--mx,0) var(--my,0);transition:transform 300ms cubic-bezier(.34,1.6,.5,1),box-shadow 300ms cubic-bezier(.34,1.6,.5,1),translate 350ms cubic-bezier(.34,1.56,.64,1)}
}
@media (min-width:861px){@supports not (backdrop-filter:blur(1px)){#nav{background:rgba(7,11,16,.92)}}}
@media (min-width:861px) and (prefers-reduced-motion:reduce){#nav .nav-ind.rdy,#nav::after,#progress{transition:none}#nav .cta-book{translate:none}}
@media (min-width:861px) and (prefers-reduced-transparency:reduce),(min-width:861px) and (prefers-contrast:more){#nav{background:rgba(7,11,16,.98);-webkit-backdrop-filter:none;backdrop-filter:none}#nav::after{display:none}}
/* dark-only public site (owner 2026-10-07): the Appearance switch exists only on portal pages (ss8-theme.js sets data-ss8-portal there); hidden by default so no-JS stays clean */
html:not([data-ss8-portal]) .v7-theme-btn,html:not([data-ss8-portal]) .menu-theme{display:none!important}
/* 5. home page: work cards, drum lines, hero small print */
.frame .cap h3,.frame .fnum{color:#F7F4EE!important}
:root:root .card .exifline{color:rgba(239,233,220,.66)}
:root:root .card .exifline.cur{color:rgba(239,233,220,.86)}
html:root[data-theme="light"]:root .card .exifline{color:var(--ink-2)}
html:root[data-theme="light"]:root .card .exifline.cur{color:var(--ink)}
:root:root .cyl .li{color:rgba(239,233,220,.42)}
:root:root .cyl .li:nth-child(odd){color:rgba(239,233,220,.46)}
html:root[data-theme="light"]:root .cyl .li{color:rgba(43,38,32,.55)}
html:root[data-theme="light"]:root .cyl .li:nth-child(odd){color:rgba(43,38,32,.6)}
:root:root .cyl .li.on{color:var(--ink)}
.hero-exact .he-info-card small{color:rgba(255,255,255,.88)}
.hero-exact .he-location .he-towns{color:rgba(255,255,255,.92)}
.hero-exact .hrail-num{color:rgba(255,255,255,.88)}
.hero-exact .hrail-num.on{color:var(--he-yellow)}
.hero-exact .he-bottom-rail{background:rgba(3,15,23,.72)}
.hero-exact .hero-imgs::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,12,20,.46),rgba(3,12,20,.2) 55%,transparent);pointer-events:none;z-index:2}
.hero-exact .he-desc{max-width:560px}
/* ---- round 2 (after first scan) ---- */
/* blog index (Journal) used cream tokens that do not exist in light theme: invisible */
html[data-theme="light"] .jr{--jr-ink:var(--ink);--jr-dim:var(--ink-2);--jr-gold:var(--gold-text)}
/* more text-on-gold buttons + gold links on cream */
:root:root :is(.cp-cta-btn,.faq-btn-primary,.gl-cta-btn,.bk2-btn:not(:disabled)){color:var(--on-gold)!important}
html[data-theme="light"] :is(.faq-link,.gl-cta-btn-secondary,.bp-prose a,.town-ctx-label,label i,legend i,#corridor .tn){color:var(--gold-text)!important}
html[data-theme="light"] #corridor .dist b{color:#2F6B1A}
html[data-theme="light"] .bp-prose a{text-decoration:underline;text-underline-offset:3px}
/* breadcrumbs, chips and captions that sit on photos: light text, darker photo */
:root:root :is(.town-hero,.bp-hero,.niche-hero) :is(.town-crumb,.bp-breadcrumb,.niche-breadcrumb,nav) a{color:rgba(247,244,238,.94)!important}
:root:root :is(.town-hero,.bp-hero,.niche-hero) :is(.bp-breadcrumb,.niche-breadcrumb,nav) span{color:rgba(247,244,238,.8)!important}
:root:root :is(.town-hero-img,.bp-hero-img,.niche-hero-img,.pd-hero-img){filter:brightness(.66) saturate(.95)}
:root:root .town-frame-cap{background:rgba(2,5,8,.62);color:#F7F4EE!important;padding:5px 9px;border-radius:5px}
:root:root :is(.town-chip,.town-chapter){text-shadow:0 1px 6px rgba(0,0,0,.6)}
.frame .fnum{background:rgba(2,5,8,.5);padding:3px 8px;margin-left:-8px;border-radius:4px}
/* always-dark home islands in light theme: stats strip, book CTA, footer */
html[data-theme="light"] :is(#services .stats,#book,#footer){--ink:#F2EDE4;--ink-lift:#F7F4EE;--ink-2:#D9D2C3;--ink-dim:#B9B2A1;--gold-text:#F5BD02;color:#F2EDE4}
html[data-theme="light"] #book :is(h2,.mono,.display){color:#F2EDE4}
/* cream "approach" island small print */
#approach .step .sn{color:#7A5C10}
:root:root #approach .mono.dim,:root:root #approach .chapter .dim{color:rgba(11,15,18,.66)}
:root:root #approach .pcap .mono{color:rgba(11,15,18,.68)}
:root:root #approach .chapter .mono{color:#7A5C10}
/* hero bottom rail: scrim must beat the later inline rule */
:root:root .hero-exact .he-bottom-rail{background:rgba(3,15,23,.78)}
/* client login helper text */
.cl-footer{color:#4F5878}
/* ---- round 3: token-level nudges ---- */
html:root[data-theme="light"]{--gold-text:#725305}
html:root:not([data-theme="light"]){--ink-dim:#A39D8C}
:root:root .niche-hero-img{filter:brightness(.55) saturate(.95)}
:root:root .eq-opt{color:var(--ink-2)!important}
.hero-exact .he-rail-label,.hero-exact .he-rail-right{color:rgba(255,255,255,.92)}
:root:root #approach :is(.mono.dim,.chapter .dim){color:rgba(11,15,18,.68)!important}
:root:root #approach .sig .mono{color:#7A5C10!important}
html[data-theme="light"] .corridor-note i{color:var(--gold-text)!important}
:root:root .jr{--jr-dim:rgba(239,233,220,.74)}
html:root[data-theme="light"]:root .jr{--jr-dim:var(--ink-2)}
.eq-opt{opacity:1}
/* ---- round 4: hover/focus states ---- */
/* home services: hovering a row swaps in a dark photo behind the whole list; flip the palette with it */
html[data-theme="light"] #services:has(#svc-bg img.show){--ink:#F2EDE4;--ink-lift:#F7F4EE;--ink-2:#E4DDCF;--ink-dim:#C9C2B1;--gold-text:#F5BD02;color:#F2EDE4}
html[data-theme="light"] #services:has(#svc-bg img.show) :is(.svc .go,.svc .anchor-note,.chapter .mono,.chapter .dim){color:#E4DDCF!important}
html[data-theme="light"] :is(.town-ghost-btn,.pr-card-link,.faq-link,.cta-enquire,.eq-cancel):hover{color:var(--gold-text)!important;border-color:var(--gold-text)}
:root:root #hside a:hover,:root:root .he-towns a:hover{color:var(--he-yellow,#F5BD02);text-shadow:0 1px 8px rgba(0,0,0,.7)}
/* hover/focus: in light theme the royal-gold TEXT on hover is re-pointed to the text-safe gold, scoped to the hovered control */
html[data-theme="light"] :is(.v7-tb-links a,#nav .links a,.svc-row-link,.town-svc-card,.cp-row,.faq-btn-secondary,.gl-chip:not(.active),.gl-route-link,.about-fact-link,.pr-card-link,.town-ghost-btn,.faq-link,.legal-link,.bp-prose a,.jr-row-a,.jr-chip,.sd-card,.pd-link):is(:hover,:focus-visible){--gold:var(--gold-text);--gold-2:var(--gold-text)}
html[data-theme="light"] :is([class*="crumb"] a,nav[aria-label*="readcrumb"] a):not(:is(.town-hero,.bp-hero,.niche-hero) *):is(:hover,:focus-visible){--gold:var(--gold-text);--gold-2:var(--gold-text)}