/* ============================================================
   FLORIDA SOUND MAN — Joe Giannotti
   v5 "Fable" — cinematic broadcast design system
   ============================================================ */

:root{
  --bg:#070809;
  --bg-1:#0b0d11;
  --bg-2:#10131a;
  --bg-3:#161b24;
  --ink:#f5f7fa;
  --muted:#97a3b2;
  --muted-2:#5d6877;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.05);
  --accent:#3ba7f5;
  --accent-2:#82d4ff;
  --accent-deep:#1d8be0;
  --accent-soft:rgba(59,167,245,.12);
  --rec:#ff3b30;
  --maxw:1380px;
  --pad:clamp(20px,4.5vw,64px);
  --r:18px;
  --shadow:0 40px 90px -30px rgba(0,0,0,.9);
  --f-display:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  --f-serif:"Instrument Serif",Georgia,serif;
  --f-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--f-sans);background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
button{font:inherit}
::selection{background:var(--accent);color:#03121f}

/* film grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- helpers ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(80px,10vw,150px)}
.section--tight{padding-block:clamp(52px,6vw,90px)}
.bg-1{background:var(--bg-1)}.bg-2{background:var(--bg-2)}
.center{text-align:center}
.muted{color:var(--muted)}
p{max-width:66ch}
strong{font-weight:700;color:#fff}

/* mono labels */
.label{display:inline-flex;align-items:center;gap:.8em;font:700 .7rem/1 var(--f-mono);letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.label .idx{display:none}
.label.center{justify-content:center}
.label::before{content:"";width:26px;height:1px;background:var(--accent);flex:0 0 auto}
.label--bare::before{display:none}
.dot-rec{width:8px;height:8px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 0 rgba(255,59,48,.6);animation:rec 1.8s infinite;flex:0 0 auto}
@keyframes rec{0%{box-shadow:0 0 0 0 rgba(255,59,48,.55)}70%{box-shadow:0 0 0 8px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}

/* ---------- type ---------- */
h1,h2,h3,h4{line-height:1;font-weight:400}
.d-hero,.d1,.d2,.d3{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.005em}
.d-hero{font-size:clamp(3.4rem,13.5vw,11.5rem);line-height:.85}
.d1{font-size:clamp(2.7rem,7.5vw,6.4rem);line-height:.9}
.d2{font-size:clamp(2rem,5vw,4rem);line-height:.94}
.d3{font-size:clamp(1.35rem,2.6vw,2.1rem);line-height:1.02}
.serif-i{font-family:var(--f-serif);font-style:italic;text-transform:none;letter-spacing:0;font-weight:400}
.outline{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);text-stroke:1.5px rgba(255,255,255,.55)}
.outline-accent{color:transparent;-webkit-text-stroke:1.5px var(--accent)}
.lead{font-size:clamp(1.06rem,1.5vw,1.32rem);color:var(--muted);max-width:58ch;line-height:1.7}
.lead strong{color:#e8edf3}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65em;font:800 .98rem/1 var(--f-sans);letter-spacing:.01em;padding:18px 30px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .18s var(--ease),background .22s,color .22s,border-color .22s,box-shadow .22s;white-space:nowrap;position:relative}
.btn svg{width:1.05em;height:1.05em;transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--accent);color:#03121f;border-color:var(--accent);box-shadow:0 12px 38px -12px rgba(59,167,245,.65)}
.btn--primary:hover{background:#fff;border-color:#fff;color:#06090d}
.btn--ghost{background:rgba(255,255,255,.03);color:#fff;border-color:rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--lg{padding:21px 38px;font-size:1.06rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn-row.center{justify-content:center}
.textlink{display:inline-flex;align-items:center;gap:.5em;font-weight:700;color:#fff;border-bottom:1.5px solid var(--accent);padding-bottom:3px;transition:gap .2s,color .2s}
.textlink:hover{gap:.85em;color:var(--accent)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px var(--pad);transition:border-color .35s,padding .35s;border-bottom:1px solid transparent;background:transparent}
/* The frosted blur lives on a pseudo-element, NOT on .nav itself. A
   backdrop-filter or transform on .nav would make it the containing block for
   the position:fixed mobile-menu overlay (a child of .nav) and trap the menu
   inside the thin bar. Keeping .nav filter/transform-free lets the overlay
   cover the full viewport. */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(7,8,9,.62);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);transition:background .35s}
.nav.scrolled{border-bottom-color:var(--line-2);padding-block:10px}
.nav.scrolled::before{background:rgba(7,8,9,.92)}
.brand{display:flex;align-items:center;gap:16px;line-height:1}
.brand .mark{width:46px;height:46px;flex:0 0 auto}
.brand-word{display:flex;flex-direction:column;gap:6px}
.brand-word b{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:1.04rem;letter-spacing:.12em;line-height:1.05}
.brand-word small{font:700 .56rem/1 var(--f-mono);letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
@media (max-width:420px){.brand-word small{display:none}}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font:700 .8rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:#dfe5ec;position:relative;padding-block:8px}
.nav-links a sup{display:none}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--accent);transition:width .25s var(--ease)}
.nav-links a:not(.btn):hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:18px}
.nav-phone{display:inline-flex;align-items:center;gap:.55em;font:700 .82rem/1 var(--f-mono);letter-spacing:.06em;color:#fff;border:1px solid var(--line);padding:11px 16px;border-radius:999px;transition:border-color .2s,background .2s}
.nav-phone:hover{border-color:var(--accent);background:var(--accent-soft)}
.nav-phone svg{width:.95em;height:.95em;color:var(--accent)}
.menu-btn{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:8px}
.menu-btn svg{width:30px;height:30px}
/* No mobile hamburger — the three nav links stay inline and compact on
   phones, and the phone pill drops away to make room. */
@media (max-width:960px){
  .nav-links{gap:clamp(16px,3.4vw,28px)}
  .nav-phone{display:none}
}
/* On phones the homepage drops the bar entirely (the hero starts at the top);
   every other page keeps a compact bar with inline links. */
@media (max-width:600px){
  body.home .nav{display:none}
  .phero{padding-top:clamp(74px,18vw,104px)}
  .nav-links{gap:14px}
  .nav-links a{font-size:.72rem;letter-spacing:.08em}
}

/* floating text fab */
.fab{position:fixed;right:20px;bottom:20px;z-index:65;display:inline-flex;align-items:center;gap:.6em;background:var(--accent);color:#03121f;font-weight:800;font-size:.95rem;padding:15px 22px;border-radius:999px;box-shadow:0 16px 44px -12px rgba(59,167,245,.8);transition:transform .2s var(--ease),background .2s,opacity .3s}
.fab:hover{transform:translateY(-3px);background:#fff}
.fab svg{width:1.1em;height:1.1em}
@media (max-width:520px){.fab span{display:none}.fab{padding:16px}}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;isolation:isolate;overflow:hidden}
.hero__slides{position:absolute;inset:0;z-index:-3}
.hero__slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:0;animation:heroFade 48s linear infinite;will-change:opacity,transform}
.hero__slides img:nth-child(1){animation-delay:0s;object-position:center 25%}
.hero__slides img:nth-child(2){animation-delay:6s;object-position:right top}
.hero__slides img:nth-child(3){animation-delay:12s}
.hero__slides img:nth-child(4){animation-delay:18s}
.hero__slides img:nth-child(5){animation-delay:24s;object-position:60% center}
.hero__slides img:nth-child(6){animation-delay:30s}
.hero__slides img:nth-child(7){animation-delay:36s}
.hero__slides img:nth-child(8){animation-delay:42s}
@keyframes heroFade{0%{opacity:0;transform:scale(1.14)}2%{opacity:1}12%{opacity:1}14%{opacity:0;transform:scale(1.02)}100%{opacity:0}}
/* hero slideshow is a brand signature — keep it running even when the OS
   has "reduce motion" / Windows animation effects turned off */
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(7,8,9,.55) 0%,rgba(7,8,9,.08) 32%,rgba(7,8,9,.12) 58%,rgba(7,8,9,.88) 100%)}
.hero__meta{position:absolute;top:calc(70px + 2vw);left:0;right:0;display:flex;justify-content:space-between;gap:14px;padding:0 var(--pad);font:700 .68rem/1.5 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.hero__meta span{display:inline-flex;align-items:center;gap:.7em}
.hero__meta .tc{color:#fff}
@media (max-width:720px){.hero__meta{top:calc(78px + 4vw)}.hero__meta > span:nth-child(2){display:none}}
/* phones have no top bar, so lift the REC / 48kHz meta to the very top (this
   rule comes AFTER the 720px rule so it wins on small screens) */
@media (max-width:600px){.hero__meta{top:clamp(14px,4vw,24px)}}
.hero__inner{flex:1;width:100%;max-width:var(--maxw);margin-inline:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(80px + 4vh) var(--pad) clamp(100px,13svh,150px);position:relative}
.hero__title{margin:0 0 6px -.04em}
.hero__title .serif-i{font-size:.88em;color:var(--accent-2);text-shadow:0 4px 50px rgba(59,167,245,.35)}
/* visually hidden but available to screen readers & search engines */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero__sub{margin-top:auto;font-size:clamp(.98rem,1.4vw,1.3rem);color:#eef2f6;max-width:58ch;line-height:1.65;text-shadow:0 2px 22px rgba(0,0,0,.85)}
.hero__sub strong{color:#fff}

/* CTA strip directly under the hero (below the fold) */
.cta-strip{background:var(--bg)}
.cta-strip .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding-block:clamp(30px,5vw,52px)}
/* hire-me buttons split by the scrolling network names — one borderless band,
   no divider line above or below */
.cta-credits{background:var(--bg);overflow:hidden;padding-block:clamp(26px,4vw,46px)}
.cta-credits__row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding-block:clamp(18px,2.6vw,30px)}
.cta-credits .marquee + .marquee{margin-top:clamp(2px,.6vw,8px)}
.hero__wave{position:absolute;left:0;right:0;bottom:0;height:clamp(110px,15vh,180px);z-index:-1;width:100%;display:block;opacity:.33}
.hero__scroll{position:absolute;right:var(--pad);bottom:26px;display:flex;align-items:center;gap:.8em;font:700 .62rem/1 var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6);writing-mode:vertical-rl}
.hero__scroll::after{content:"";width:1px;height:44px;background:linear-gradient(180deg,var(--accent),transparent);animation:drip 2s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:720px){.hero__scroll{display:none}}

/* ---------- credits / networks ---------- */
.credits{background:#050607;border-block:1px solid var(--line);padding-block:clamp(44px,6vw,84px);overflow:hidden}
.credits .label{margin-bottom:8px}
.credits__intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:clamp(28px,4vw,52px)}
.credits__intro p{color:var(--muted);font-size:1rem;max-width:46ch}
.marquee{overflow:hidden;display:flex;width:100%}
.marquee__track{display:flex;width:max-content;flex:0 0 auto;animation:scrollx var(--mq-dur,40s) linear infinite}
.marquee--rev .marquee__track{animation-direction:reverse}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-family:var(--f-display);text-transform:uppercase;white-space:nowrap;font-size:clamp(2.6rem,7vw,5.8rem);line-height:1.05;color:#fff;padding-inline:clamp(18px,2.6vw,40px);display:inline-flex;align-items:center;gap:clamp(18px,2.6vw,40px)}
.marquee__track span::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.marquee--ghost .marquee__track span{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.3)}
.marquee--ghost .marquee__track span::after{background:var(--muted-2)}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ---------- image reel ---------- */
.reel{padding-block:clamp(12px,2vw,20px);overflow:hidden;background:var(--bg)}
.reel__track{display:flex;gap:14px;width:max-content;animation:scrollx 55s linear infinite}
.reel:hover .reel__track{animation-play-state:paused}
.reel__track img{height:clamp(180px,25vw,320px);width:auto;border-radius:14px;object-fit:cover;filter:saturate(.92) contrast(1.04)}

/* ---------- statement ---------- */
.statement{position:relative}
.statement .d1{max-width:24ch}
.statement .d1 .serif-i{color:var(--accent-2)}
.statement__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(36px,6vw,90px);align-items:end}
@media (max-width:880px){.statement__grid{grid-template-columns:1fr}}
.statement__copy{margin-top:28px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:clamp(40px,5vw,64px)}
@media (max-width:680px){.stats{grid-template-columns:1fr}}
.stat{background:var(--bg-1);padding:clamp(24px,3vw,40px)}
.stat b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(2.4rem,4.5vw,3.8rem);line-height:1;color:#fff}
.stat b i{font-style:normal;color:var(--accent)}
.stat span{display:block;margin-top:10px;font:700 .68rem/1.6 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* ---------- services ---------- */
.svc-list{border-top:1px solid var(--line);margin-top:clamp(34px,4vw,56px)}
.svc{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(18px,3vw,44px);padding:clamp(28px,4vw,52px) 0;border-bottom:1px solid var(--line);transition:padding-left .35s var(--ease)}
.svc:hover{padding-left:clamp(8px,1.5vw,22px)}
.svc__num{display:none}
.svc__main h3{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1;color:#fff;transition:color .25s}
.svc:hover .svc__main h3{color:var(--accent-2)}
.svc__main p{margin-top:12px;color:var(--muted);max-width:56ch;font-size:1rem}
.svc__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.svc__tags span{font:700 .64rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#c4cedb;border:1px solid var(--line);padding:7px 12px;border-radius:999px}
.svc__media{width:clamp(150px,17vw,260px);aspect-ratio:4/3;border-radius:14px;overflow:hidden;align-self:center;transform:rotate(2deg) scale(.96);opacity:.85;transition:transform .45s var(--ease),opacity .3s;box-shadow:var(--shadow)}
.svc:hover .svc__media{transform:rotate(0deg) scale(1.04);opacity:1}
.svc__media img{width:100%;height:100%;object-fit:cover}
@media (max-width:740px){
  .svc{grid-template-columns:1fr}
  .svc__media{grid-column:1;width:100%;max-width:420px;margin-top:6px;transform:none;opacity:1}
}
/* services become a swipeable carousel on phones */
@media (max-width:600px){
  .svc-list{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;border-top:none;margin-top:clamp(24px,5vw,40px);padding-bottom:6px;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
  .svc-list::-webkit-scrollbar{display:none}
  .svc{flex:0 0 84%;scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;
    padding:16px;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
  .svc:hover{padding-left:16px}
  .svc__media{order:-1;width:100%;max-width:none;aspect-ratio:16/10;margin-top:0}
  /* anchor service photos to the top so faces/heads aren't cropped on mobile */
  .svc__media img{object-position:top}
  /* off-screen cards never intersect the viewport, so keep them shown */
  html.js .svc-list > .svc.reveal{opacity:1;transform:none}
}

/* ---------- spec strip (the package) ---------- */
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (max-width:900px){.specs{grid-template-columns:repeat(2,1fr)}}
/* equipment package becomes a swipeable carousel on phones */
@media (max-width:560px){
  .specs{display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;border-radius:var(--r)}
  .specs::-webkit-scrollbar{display:none}
  .specs > .spec{flex:0 0 80%;scroll-snap-align:start}
}
.spec{background:var(--bg-2);padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:8px;transition:background .25s}
.spec:hover{background:var(--bg-3)}
.spec i{font:700 .66rem/1 var(--f-mono);letter-spacing:.2em;color:var(--accent);font-style:normal}
.spec b{font-size:1.06rem;font-weight:700;color:#fff;letter-spacing:.01em}
.spec p{font-size:.9rem;color:var(--muted);line-height:1.6}

/* ---------- filmstrip collage (credits section) ---------- */
.filmstrip{margin-top:clamp(44px,6vw,76px)}
.filmstrip img{width:min(1080px,100%);height:auto;margin-inline:auto;filter:drop-shadow(0 30px 70px rgba(0,0,0,.55))}
.filmstrip figcaption{margin-top:22px;text-align:center;font:700 .66rem/1.6 var(--f-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- FSM banner band ---------- */
.banner-band{position:relative;background:#050607}
.banner-band img{display:block;width:100%;height:auto}
/* fade the banner top & bottom into the dark page so it doesn't feel pasted-on */
.banner-band::before,.banner-band::after{content:"";position:absolute;left:0;right:0;height:clamp(55px,10vh,150px);pointer-events:none;z-index:2}
.banner-band::before{top:0;background:linear-gradient(180deg,var(--bg) 0%,rgba(7,8,9,0) 100%)}
.banner-band::after{bottom:0;background:linear-gradient(0deg,var(--bg) 0%,rgba(7,8,9,0) 100%)}
/* the banner image is short on phones — a tall scrim swallows it, so taper the
   blend way down on mobile */
@media (max-width:720px){.banner-band::before,.banner-band::after{height:26px}}
/* marquee strips overlaid on the banner image, top & bottom, with a dark gradient backdrop */
.banner-band--overlay{position:relative;overflow:hidden}
.bmq{position:absolute;left:0;right:0;display:flex;width:100%;overflow:hidden;pointer-events:none;padding-block:clamp(8px,1.4vw,18px)}
.bmq--top{top:0;background:linear-gradient(180deg,rgba(3,4,5,.85) 0%,rgba(3,4,5,.45) 52%,transparent 100%)}
.bmq--bottom{bottom:0;background:linear-gradient(0deg,rgba(3,4,5,.85) 0%,rgba(3,4,5,.45) 52%,transparent 100%)}
.bmq .marquee__track{display:flex;width:max-content;flex:0 0 auto;animation:scrollx var(--mq-dur,40s) linear infinite}
.bmq--bottom .marquee__track{animation-direction:reverse}
.bmq .marquee__track span{font-family:var(--f-display);text-transform:uppercase;white-space:nowrap;font-size:clamp(1.5rem,3.2vw,2.9rem);line-height:1.1;color:#fff;padding-inline:clamp(14px,2vw,30px);display:inline-flex;align-items:center;gap:clamp(14px,2vw,30px);text-shadow:0 2px 16px rgba(0,0,0,.7)}
.bmq .marquee__track span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.bmq--ghost .marquee__track span{color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.9);text-shadow:none}
.bmq--ghost .marquee__track span::after{background:var(--accent-2)}

/* ---------- instagram feed (post cards) ---------- */
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
@media (max-width:1100px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.ig-grid{grid-template-columns:repeat(2,1fr)}}
.ig-post{background:#0b0d11;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s,transform .3s var(--ease)}
.ig-post:hover{border-color:rgba(255,255,255,.18);transform:translateY(-3px)}
.ig-post__hd{display:flex;align-items:center;gap:10px;padding:11px 12px}
.ig-post__ava{width:34px;height:34px;flex:0 0 auto;border-radius:50%;padding:2px;background:conic-gradient(from 30deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888,#f09433)}
.ig-post__ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #0b0d11;background:#0b0d11}
.ig-post__name{flex:1;font-weight:700;font-size:.85rem;color:#fff;letter-spacing:.01em}
.ig-post__dots{width:20px;height:20px;color:#fff;fill:currentColor}
.ig-post__media{display:block;aspect-ratio:1;overflow:hidden;background:var(--bg-3)}
.ig-post__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ig-post:hover .ig-post__media img{transform:scale(1.04)}
.ig-post__acts{display:flex;align-items:center;gap:14px;padding:11px 12px 4px;color:#fff}
.ig-post__acts svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;cursor:pointer;transition:opacity .2s,color .2s}
.ig-post__acts svg:first-child:hover{color:var(--rec);opacity:1}
.ig-post__acts svg:hover{opacity:.55}
.ig-post__acts .ig-post__save{margin-left:auto}
.ig-post__likes{padding:2px 12px 0;font-weight:700;font-size:.83rem;color:#fff}
.ig-post__cap{padding:5px 12px 0;font-size:.85rem;line-height:1.45;color:#cdd6e0;max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ig-post__cap b{color:#fff;font-weight:700;margin-right:.42em}
.ig-post__cap .tag{color:var(--accent-2)}
.ig-post__time{display:block;padding:7px 12px 13px;font:600 .62rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- gallery + lightbox ---------- */
.gallery{columns:4;column-gap:14px}
.gallery img{width:100%;margin-bottom:14px;border-radius:12px;cursor:zoom-in;transition:opacity .25s,transform .3s var(--ease),outline-color .2s;outline:1px solid transparent;background:var(--bg-3)}
.gallery img:hover{opacity:.9;transform:translateY(-4px);outline-color:var(--accent)}
@media (max-width:1000px){.gallery{columns:3}}@media (max-width:680px){.gallery{columns:2}}
.lb{position:fixed;inset:0;z-index:100;background:rgba(4,5,6,.96);display:none;align-items:center;justify-content:center;padding:30px}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:88vh;border-radius:8px;box-shadow:var(--shadow)}
.lb__x{position:absolute;top:20px;right:24px;background:none;border:0;color:#fff;cursor:pointer}.lb__x svg{width:34px;height:34px}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.07);border:1px solid var(--line);color:#fff;width:54px;height:54px;border-radius:999px;cursor:pointer;display:grid;place-items:center;transition:.2s}
.lb__nav:hover{background:var(--accent);border-color:var(--accent);color:#03121f}.lb__nav svg{width:24px;height:24px}
.lb__prev{left:18px}.lb__next{right:18px}
@media (max-width:600px){.lb__nav{width:44px;height:44px}}

/* ---------- products ---------- */
.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
/* products become a swipeable horizontal carousel on phones so they don't
   stack into a tall column */
@media (max-width:600px){
  .grid.prod-carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:6px;
    /* bleed to the screen edges so cards can peek in from the side */
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
  .grid.prod-carousel::-webkit-scrollbar{display:none}
  .grid.prod-carousel > .prod{flex:0 0 82%;scroll-snap-align:start}
  /* cards off the right edge never intersect the viewport, so the scroll-reveal
     would leave them invisible — keep carousel cards always shown */
  html.js .grid.prod-carousel > .prod.reveal{opacity:1;transform:none}
}

.prod{position:relative;display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.prod:hover{border-color:rgba(59,167,245,.55);transform:translateY(-6px);box-shadow:var(--shadow)}
.prod__img{position:relative;aspect-ratio:1;background:#fff;overflow:hidden}
.prod__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.prod:hover .prod__img img{transform:scale(1.06)}
.prod__num{position:absolute;top:14px;left:14px;z-index:2;font:700 .68rem/1 var(--f-mono);letter-spacing:.12em;color:#fff;background:rgba(7,8,9,.78);backdrop-filter:blur(8px);padding:8px 12px;border-radius:999px}
.prod__price-chip{position:absolute;top:14px;right:14px;z-index:2;font-family:var(--f-display);font-size:1.06rem;letter-spacing:.03em;color:#03121f;background:var(--accent);padding:8px 14px;border-radius:999px}
.prod__body{padding:clamp(22px,2.5vw,30px);display:flex;flex-direction:column;gap:10px;flex:1}
.prod__body h3{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.25rem,1.8vw,1.6rem);color:#fff}
.prod__body p{font-size:.95rem;color:var(--muted);flex:1}
.prod__go{display:inline-flex;align-items:center;gap:.6em;font:700 .76rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-top:6px}
.prod__go svg{width:1.2em;height:1.2em;color:var(--accent);transition:transform .25s var(--ease)}
.prod:hover .prod__go svg{transform:translateX(5px)}
.badge{display:inline-flex;align-items:center;gap:.5em;font:700 .64rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2);background:var(--accent-soft);border:1px solid rgba(59,167,245,.3);padding:7px 11px;border-radius:999px;width:fit-content}
.prod__price{font-family:var(--f-display);font-size:1.9rem;color:var(--accent);letter-spacing:.02em}
.notebar{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--bg-1);border-radius:12px;padding:20px 24px;color:#d6dde6;font-size:.97rem}

/* ---------- product detail ---------- */
.pd{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:880px){.pd{grid-template-columns:1fr}}
.pd__gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pd__gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;background:#fff;cursor:zoom-in;transition:transform .3s var(--ease)}
.pd__gallery img:hover{transform:scale(1.015)}
.pd__gallery img:first-child{grid-column:1/-1;aspect-ratio:16/11}
.pd__buy{position:sticky;top:96px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,38px)}
.pd__buy .d2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
.pd__buy .pd__price{display:flex;align-items:baseline;gap:12px;margin:10px 0 4px}
.pd__buy .pd__price b{font-family:var(--f-display);font-weight:400;font-size:2.5rem;color:var(--accent);letter-spacing:.02em}
.pd__buy .pd__price s{color:var(--muted-2);font-weight:600;font-size:1.05rem}
.pd__buy ul{display:flex;flex-direction:column;gap:12px;margin:20px 0}
.pd__buy li{display:flex;gap:12px;align-items:flex-start;color:#dde3ea;font-size:.97rem;line-height:1.55}
.pd__buy li svg{flex:0 0 auto;width:20px;height:20px;color:var(--accent);margin-top:2px}
.divider-or{display:flex;align-items:center;gap:14px;color:var(--muted-2);font:700 .68rem/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;margin:18px 0}
.divider-or::before,.divider-or::after{content:"";flex:1;height:1px;background:var(--line)}
.retailers{display:flex;flex-wrap:wrap;gap:12px}
.retailers a{border:1px solid var(--line);border-radius:999px;padding:12px 20px;font-weight:700;font-size:.9rem;transition:.2s}
.retailers a:hover{border-color:var(--accent);color:var(--accent-2);transform:translateY(-2px)}

/* ---------- Quiet Please product page ---------- */
.qp-shots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qp-shot{background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1;display:block}
.qp-shots .qp-shot--wide{grid-column:1/-1;aspect-ratio:16/10}
.qp-shot img,.qp-shot video{width:100%;height:100%;object-fit:contain;background:#fff;display:block}
.qp-shot img[data-lb]{cursor:zoom-in}
.qp-pitch .serif-i{color:var(--accent-2)}
.spec-bullets{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:clamp(28px,4vw,44px)}
@media(max-width:680px){.spec-bullets{grid-template-columns:1fr}}
.spec-bullets li{display:flex;gap:14px;align-items:flex-start;background:var(--bg-1);border:1px solid var(--line);border-radius:14px;padding:20px 22px;font-size:1.02rem;color:#e8edf3;line-height:1.5}
.spec-bullets li svg{flex:0 0 auto;width:22px;height:22px;color:var(--accent);margin-top:1px}
.spec-bullets b{color:#fff;font-weight:700}
.ship-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;text-align:center}
.ship-band .ship-pill{display:inline-flex;align-items:center;gap:.6em;font:700 .9rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#fff;border:1px solid var(--line);border-radius:999px;padding:14px 22px}
.ship-band .ship-pill svg{width:1.1em;height:1.1em;color:var(--accent)}
.logos{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center}
.logo-chip{background:#fff;border-radius:14px;padding:16px 24px;display:flex;align-items:center;justify-content:center;min-width:150px;height:92px;transition:transform .2s var(--ease),box-shadow .2s}
.logo-chip:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.logo-chip img{max-height:54px;max-width:170px;width:auto;object-fit:contain}
.say{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.say{grid-template-columns:1fr}}
.say--pair{grid-template-columns:1fr 1fr;max-width:780px;margin-inline:auto}
@media(max-width:680px){.say--pair{grid-template-columns:1fr}}
.say__card{display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 22px;transition:border-color .25s,transform .25s var(--ease)}
.say__card:hover{border-color:rgba(59,167,245,.5);transform:translateY(-4px)}
.say__card p{color:#e8edf3;font-size:1rem;line-height:1.6;flex:1}
.say__card .igtag{margin-top:6px}
.say__card cite{display:block;margin-top:16px;font:700 .72rem/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--accent)}
.amz-fulfill{display:grid;grid-template-columns:300px 1fr;gap:clamp(24px,4vw,48px);align-items:center}
@media(max-width:720px){.amz-fulfill{grid-template-columns:1fr;text-align:center;justify-items:center}}
.amz-fulfill .qp-shot{width:100%;max-width:300px}

/* ---------- quote ---------- */
.quote{position:relative;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);padding:clamp(30px,4vw,48px)}
.quote::before{content:"\201C";position:absolute;top:-6px;left:22px;font-family:var(--f-serif);font-size:5.5rem;line-height:1;color:var(--accent);opacity:.85}
.quote p{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.5;color:#eef2f6;max-width:none}
.quote cite{display:block;margin-top:18px;font:700 .74rem/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--accent)}

/* ---------- contact cards ---------- */
.contact-card{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:760px){.contact-card{grid-template-columns:1fr}}
.cc{display:flex;flex-direction:column;gap:7px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3vw,36px);transition:border-color .25s,transform .25s var(--ease)}
.cc:hover{border-color:var(--accent);transform:translateY(-5px)}
.cc__ico{width:52px;height:52px;border-radius:14px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent);margin-bottom:10px}
.cc__ico svg{width:25px;height:25px}
.cc small{color:var(--muted);font:700 .66rem/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase}
.cc b{font-size:1.25rem;color:#fff}
.cc .hint{color:var(--muted);font-size:.88rem}

/* ---------- CTA band ---------- */
.cta-band{position:relative;isolation:isolate;text-align:center;padding-block:clamp(90px,12vw,170px);overflow:hidden}
.cta-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.04)}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,8,9,.88),rgba(7,8,9,.72) 50%,rgba(7,8,9,.92))}
.cta-band .d1{margin:18px 0 14px}
.cta-band .d1 .serif-i{color:var(--accent-2)}
.cta-band .lead{margin-inline:auto;color:#dbe3ec}

/* ---------- podcast ---------- */
.pod-frame{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#000}
.socials{display:flex;gap:12px;margin-top:18px}
.socials a{width:46px;height:46px;border:1px solid var(--line);border-radius:13px;display:grid;place-items:center;color:#fff;transition:.22s}
.socials a:hover{background:var(--accent);border-color:var(--accent);color:#03121f;transform:translateY(-3px)}
.socials svg{width:20px;height:20px}

/* ---------- footer ---------- */
.footer{background:#050607;border-top:1px solid var(--line);overflow:hidden}
.footer__word{display:block;width:fit-content;margin-inline:auto;text-align:center;font-family:var(--f-display);text-transform:uppercase;font-size:clamp(2.2rem,8vw,8rem);line-height:.95;letter-spacing:.01em;padding:clamp(48px,6vw,90px) 16px 0;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22);transition:color .5s,-webkit-text-stroke-color .5s;white-space:nowrap;max-width:100%}
.footer__word:hover{color:rgba(255,255,255,.06);-webkit-text-stroke-color:var(--accent)}
.footer__top{display:grid;grid-template-columns:auto 1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(48px,6vw,72px) 0}
@media (max-width:780px){.footer__top{grid-template-columns:1fr;gap:34px;justify-items:start}}
.footer__logo{display:inline-flex;align-items:center}
.footer__logo img{width:clamp(150px,16vw,210px);height:auto;display:block}
.footer h4{font:700 .68rem/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px}
.footer a{color:#cfd6df;display:inline-block;padding-block:5px}.footer a:hover{color:var(--accent-2)}
.footer__brand p{color:var(--muted);font-size:.95rem;max-width:36ch;margin-top:14px}
.footer__bottom{margin-top:48px;padding-block:24px 28px;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;color:var(--muted-2);font:.78rem/1.6 var(--f-mono)}

/* ---------- interior page hero ---------- */
.phero{padding:clamp(140px,17vw,210px) 0 clamp(44px,6vw,76px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phero .crumb{font:700 .7rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.phero .crumb a:hover{color:var(--accent-2)}
.phero .d1 .serif-i{color:var(--accent-2)}
.phero .lead{margin-top:20px}
.phero__bgword{position:absolute;right:-2vw;bottom:-4vw;z-index:-1;font-family:var(--f-display);text-transform:uppercase;font-size:clamp(8rem,22vw,20rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06);pointer-events:none;user-select:none;white-space:nowrap}

/* ---------- reveal ---------- */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .reveal{opacity:0;transform:translateY(30px)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal.in[data-delay="1"]{transition-delay:.08s}
html.js .reveal.in[data-delay="2"]{transition-delay:.16s}
html.js .reveal.in[data-delay="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none}}

/* full-bleed background image treatment for statement/break sections */
.has-bg{position:relative;isolation:isolate;overflow:hidden}
.section-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.42;transform:scale(1.03)}
.has-bg::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,8,9,.9) 0%,rgba(7,8,9,.8) 45%,rgba(7,8,9,.93) 100%)}

/* Tentacle Sync octopus mascot — playful peek on the Products section */
#products{position:relative}
.octo-peek{position:absolute;top:clamp(6px,2vw,26px);right:clamp(10px,4vw,56px);width:clamp(96px,12vw,164px);z-index:4;
  display:block;transform:rotate(6deg);transition:transform .4s var(--ease);filter:drop-shadow(0 16px 26px rgba(0,0,0,.55));
  animation:octobob 5.5s ease-in-out infinite}
.octo-peek img{width:100%;height:auto;display:block}
.octo-peek:hover{transform:rotate(0deg) scale(1.06)}
@keyframes octobob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (max-width:600px){.octo-peek{width:78px;top:2px;right:8px;transform:rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.octo-peek{animation:none}}

/* Quiet Please — Tentacle Sync sticker-pack feature */
.qp-tentacle{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.qp-tentacle__media{background:#fff;border-radius:var(--r);padding:clamp(14px,2vw,26px);box-shadow:var(--shadow)}
.qp-tentacle__media img{width:100%;height:auto;border-radius:10px;cursor:zoom-in}
@media (max-width:760px){.qp-tentacle{grid-template-columns:1fr}}

/* Instagram feed becomes a swipeable carousel on phones */
@media (max-width:600px){
  .ig-grid{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad);padding-bottom:6px}
  .ig-grid::-webkit-scrollbar{display:none}
  .ig-grid > .ig-post{flex:0 0 78%;scroll-snap-align:start}
}

/* Live Instagram embeds (official embed.js renders white post cards) —
   swipeable carousel on every screen size */
.ig-embeds{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:10px;
  margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
.ig-embeds::-webkit-scrollbar{display:none}
.ig-embeds > .instagram-media{flex:0 0 clamp(326px,82vw,360px);scroll-snap-align:start;min-width:0 !important;width:100% !important;margin:0 !important}
@media (min-width:681px){.ig-embeds > .instagram-media{flex-basis:340px}}

/* ============================================================
   LIGHT / BLUE THEME — preview only (add ?theme=light to any URL)
   Dark photo bands (hero, the package, hire-me) stay dark by design.
   ============================================================ */
body.theme-light{
  --bg:#f5f8fc; --bg-1:#eaf0f8; --bg-2:#e4ecf6; --bg-3:#d6e0ee;
  --ink:#0d1626; --muted:#51607a; --muted-2:#8593a8;
  --line:rgba(13,22,38,.12); --line-2:rgba(13,22,38,.06);
  --accent:#2f8fe6; --accent-2:#1664c4; --accent-deep:#0f55ad; --accent-soft:rgba(47,143,230,.12);
  --shadow:0 30px 70px -34px rgba(20,45,90,.30);
  background:#f5f8fc;color:#0d1626;
}
body.theme-light strong,body.theme-light .lead strong{color:var(--ink)}
/* the hero sits over dark photos — its network names stay white */
body.theme-light .hero__sub strong{color:#fff}
/* nav */
body.theme-light .nav::before{background:rgba(255,255,255,.5)}
body.theme-light .nav.scrolled::before{background:rgba(255,255,255,.8)}
body.theme-light .nav.scrolled{border-bottom-color:var(--line)}
body.theme-light .nav-links a{color:#26303f}
body.theme-light .nav-phone,body.theme-light .menu-btn{color:var(--ink)}
/* buttons & links */
body.theme-light .btn--ghost{color:var(--ink);border-color:rgba(13,22,38,.22);background:rgba(13,22,38,.02)}
body.theme-light .btn--ghost:hover{border-color:var(--ink);background:rgba(13,22,38,.06)}
body.theme-light .textlink{color:var(--ink)}
/* network marquees */
body.theme-light .marquee__track span{color:var(--ink)}
body.theme-light .marquee--ghost .marquee__track span{color:transparent;-webkit-text-stroke:1.5px rgba(13,22,38,.30)}
/* services / specs / products / stats */
body.theme-light .svc__main h3,body.theme-light .spec b,body.theme-light .stat b,body.theme-light .prod__body h3,body.theme-light .prod__go,body.theme-light .cc b,body.theme-light .spec-bullets b,body.theme-light .ship-band .ship-pill{color:var(--ink)}
/* photo bands (THE PACKAGE, the Hire-me CTAs) become LIGHT bands too:
   swap their dark scrim for a light veil so the faint photo shows through,
   then keep their text dark like the rest of the light theme */
body.theme-light .has-bg::after{background:linear-gradient(180deg,rgba(245,248,252,.9),rgba(245,248,252,.82) 45%,rgba(245,248,252,.93))}
body.theme-light .cta-band::after{background:linear-gradient(180deg,rgba(245,248,252,.88),rgba(245,248,252,.74) 50%,rgba(245,248,252,.92))}
body.theme-light .cta-band .lead{color:var(--muted)}
body.theme-light .cta-band .d1,body.theme-light .cta-band .d1 .serif-i{color:var(--ink)}
body.theme-light .cta-band .d1 .serif-i{color:var(--accent-2)}
/* footer → light */
body.theme-light .footer{background:#eaf0f8;border-top-color:var(--line)}
body.theme-light .footer a{color:#3a4658}
body.theme-light .footer a:hover{color:var(--accent-2)}
body.theme-light .footer__word{-webkit-text-stroke-color:rgba(13,22,38,.18)}
body.theme-light .footer__word:hover{color:rgba(13,22,38,.05)}
body.theme-light .socials a{color:var(--ink)}
body.theme-light .say__card p{color:var(--ink)}
/* purchase boxes & bullet lists hardcoded light gray text — darken on light theme */
body.theme-light .pd__buy li{color:var(--ink)}
body.theme-light .spec-bullets li{color:var(--ink)}
body.theme-light .svc__tags span{color:var(--muted)}
body.theme-light .notebar{color:var(--muted)}
body.theme-light .ig-post__cap{color:var(--ink)}
body.theme-light .phero__bgword{-webkit-text-stroke-color:rgba(13,22,38,.06)}
body.theme-light select{color:var(--ink)}
/* On every page EXCEPT the homepage, the top bar's only destination is the
   homepage (the brand logo links to "/"). Removing the section links funnels
   anyone who clicks away from a product page into the hero, where they meet Joe. */
body:not(.home) .nav-links,
body:not(.home) .nav-cta{display:none}
body:not(.home) .nav{justify-content:flex-start}
body:not(.home) .brand{transition:opacity .2s}
body:not(.home) .brand:hover{opacity:.72}
/* "what people are saying" — real IG embed beside a text testimonial */
.say--ig{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:920px;margin-inline:auto;align-items:center}
.say--ig .instagram-media{min-width:0 !important;width:100% !important;margin:0 !important}
@media(max-width:820px){.say--ig{grid-template-columns:1fr;max-width:480px}}
/* Amazon accessory thumbnails */
.acc-img{display:block;aspect-ratio:1;background:#fff;border-radius:12px 12px 0 0;overflow:hidden}
.acc-img img{width:100%;height:100%;object-fit:contain;padding:14px;background:#fff}
/* misc light-theme fixes for secondary-page components */
body.theme-light .notebar{color:var(--muted);background:var(--bg-1)}
body.theme-light .banner-band{background:var(--bg)}
body.theme-light .checkout .co-card,body.theme-light .co-card{background:#fff}

/* ---------- FAQ accordion ---------- */
.faq{display:flex;flex-direction:column;gap:12px}
.faq__item{border:1px solid var(--line);border-radius:14px;background:var(--bg-2);overflow:hidden;transition:border-color .25s}
.faq__item[open]{border-color:rgba(47,143,230,.4)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(16px,2.4vw,22px) clamp(18px,2.6vw,26px);font-weight:700;font-size:clamp(1rem,1.3vw,1.12rem);color:var(--ink)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";flex:0 0 auto;width:12px;height:12px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .25s var(--ease);margin-right:4px}
.faq__item[open] summary::after{transform:rotate(-135deg)}
.faq__item summary:hover{color:var(--accent-2)}
.faq__a{padding:0 clamp(18px,2.6vw,26px) clamp(18px,2.4vw,24px)}
.faq__a p{color:var(--muted);max-width:70ch;font-size:1rem;line-height:1.65}