/* The Extensionist · "After Hours" neon concept (2026-10-18)
   Layered on top of site.css. The look of her new Hair Bibles and the Top Secret neon carousel:
     night bands  = deep plum, softened photo behind, glowing pink arch, cream Cormorant, a neon Homemade Apple word,
                    a glowing divider with a dot, italic pink lede, pink glowing pill buttons
     salon pages  = her blush pages as they are, with every arched photo window edged in neon and the black cards glowing
   Same words, same pages, same addresses as the live site. Only the look changes. */
:root{
  --neon:255,79,160;      /* the glow (rgb, used with alpha) */
  --core:#ffc2da;         /* the bright tube line */
  --edge:#ffb3d1;         /* neon edge on photo windows (Bible salon pages) */
  --night:#1b0a0e;        /* plum night */
  --night-2:#240d14;
  --ink:#f7ede9;          /* cream type on night */
  --soft:#f6c4d3;         /* italic pink on night */
  --glow-sm:0 0 5px rgba(var(--neon),.95),0 0 16px rgba(var(--neon),.7),0 0 38px rgba(var(--neon),.4);
  --glow-in:inset 0 0 5px rgba(var(--neon),.9),inset 0 0 18px rgba(var(--neon),.35);
  --text-glow:0 0 3px #fff,0 0 10px rgba(var(--neon),1),0 0 22px rgba(var(--neon),.9),0 0 44px rgba(var(--neon),.6),0 0 80px rgba(var(--neon),.35);
}

/* ---------- the neon script word (Homemade Apple, glowing) ---------- */
.neon,.dark .script,.nband .script,.nhero .script{font-family:var(--script);color:#fff2f7;font-weight:400;display:inline-block;transform:rotate(-4deg);
  line-height:1;white-space:nowrap;text-shadow:var(--text-glow)}
@media (prefers-reduced-motion:no-preference){
  .neon[data-flicker]{animation:flickOn 1.6s steps(1,end) .35s both}
  @keyframes flickOn{0%{opacity:.08;text-shadow:none}8%{opacity:1;text-shadow:var(--text-glow)}12%{opacity:.15;text-shadow:none}20%{opacity:1;text-shadow:var(--text-glow)}
    26%{opacity:.3;text-shadow:none}30%,100%{opacity:1;text-shadow:var(--text-glow)}}
}

/* ---------- header: plum glass, neon underline, glowing Book pill ---------- */
.top{background:rgba(27,10,14,.9);border-bottom:1px solid rgba(var(--neon),.45);box-shadow:0 1px 14px rgba(var(--neon),.22)}
.top .brand span{color:var(--ink)}
.brand img{filter:drop-shadow(0 0 5px rgba(var(--neon),.65))}
.nav a{color:rgba(247,237,233,.72)}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;border-color:var(--core);text-shadow:0 0 10px rgba(var(--neon),.7)}
.top .btn,.sheet .btns .btn:not(.ghost){color:#3a1120;border:0;background:linear-gradient(180deg,#ffd8e7,#f6a0c1);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),0 0 14px rgba(var(--neon),.6),0 0 34px rgba(var(--neon),.3)}
.top .btn:hover,.sheet .btns .btn:not(.ghost):hover{background:linear-gradient(180deg,#ffe6f0,#f8b3cd);color:#3a1120}
.menu-btn{background:transparent;border-color:rgba(var(--neon),.55);color:var(--ink)}
.menu-btn i::before,.menu-btn i::after{background:var(--ink)}
.sheet{background:radial-gradient(120% 70% at 50% 0%,#3a1320,var(--night) 70%);color:var(--ink)}
.sheet nav a{border-color:rgba(var(--neon),.2)}
.sheet nav a small{color:var(--soft)}
.sheet .brand span{color:var(--ink)}
.close-btn{background:transparent;border-color:rgba(var(--neon),.55);color:var(--ink)}
.sheet .btns .btn.ghost{color:var(--ink);border-color:var(--core);box-shadow:0 0 10px rgba(var(--neon),.35)}

/* ---------- light (salon) pages: neon-edged arches, glowing black cards ---------- */
.arch,.vid-col .vid{border:3px solid var(--edge);box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 14px rgba(var(--neon),.5),0 0 36px rgba(var(--neon),.22)}
.round{box-shadow:0 0 0 2px var(--edge),0 0 14px rgba(var(--neon),.32)}
.door:hover .arch{box-shadow:0 0 0 1px rgba(255,255,255,.6),0 0 18px rgba(var(--neon),.8),0 0 48px rgba(var(--neon),.4)}
.btn:not(.ghost):hover{background:var(--black);border-color:var(--black);color:#fff;box-shadow:0 0 0 2px var(--core),0 0 16px rgba(var(--neon),.6)}
.price.feature-price,.incl-card,.fit-result,.plan-line li.key,.tabs button[aria-selected="true"]{background:var(--black);
  border:2px solid var(--core);box-shadow:0 0 6px rgba(var(--neon),.8),0 0 22px rgba(var(--neon),.38),inset 0 0 14px rgba(var(--neon),.22)}
.tabs button[aria-selected="true"]{border-width:1.5px;box-shadow:0 0 6px rgba(var(--neon),.7),0 0 16px rgba(var(--neon),.3)}
.fit-result{color:var(--ink)}
.fit-result .fit-name{color:#fff}
.fit-result .fit-why,.fit-result .fit-note{color:rgba(247,237,233,.78)}
.fit-result .fit-facts li::before{background:var(--core);box-shadow:0 0 6px rgba(var(--neon),.9)}
.fit-result .fit-eyebrow{color:#fff2f7;text-shadow:var(--text-glow);font-size:22px;transform:rotate(-3deg);transform-origin:left;display:inline-block}
.fit-result .btn:not(.ghost){color:#3a1120;border:0;background:linear-gradient(180deg,#ffd8e7,#f6a0c1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),0 0 16px rgba(var(--neon),.6)}
.fit-result .btn.ghost{color:var(--ink);border-color:var(--core)}
.fit-result .fit-restart{color:rgba(247,237,233,.7)}
.fit-opt:hover{border-color:var(--edge);box-shadow:0 0 0 1px var(--edge),0 0 14px rgba(var(--neon),.35)}
.bible-card{border-color:transparent;box-shadow:0 0 0 2px var(--edge),0 0 16px rgba(var(--neon),.3)}
.bible-card .ph{aspect-ratio:4/5}

/* ---------- night bands (every black band on the site, plus the ones the concept adds) ---------- */
.dark,.nband{position:relative;isolation:isolate;color:var(--ink);
  background:radial-gradient(90% 70% at 50% 20%,#5c1c30 0%,transparent 70%),radial-gradient(80% 60% at 85% 100%,#3d1221 0%,transparent 70%),linear-gradient(180deg,#2a0d16,var(--night))}
.nband .nbg{position:absolute;inset:-60px;z-index:-2;background:var(--img) center/cover no-repeat;filter:blur(30px) saturate(1.15);opacity:.42}
.nband .nbg+.ntint{position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 85% at 50% 40%,rgba(92,24,38,.4),rgba(27,8,13,.9))}
.dark .eyebrow,.nband .eyebrow{color:rgba(247,237,233,.82);letter-spacing:.34em}
.dark h1,.dark h2,.dark h3,.nband h1,.nband h2,.nband h3{color:#fff7f3}
.dark .lede,.nband .lede{font-family:var(--disp);font-style:italic;font-weight:500;font-size:22px;line-height:1.4;color:var(--soft)}
.dark .mute,.nband .mute,.dark .prose p,.nband .prose p{color:rgba(247,237,233,.84)}
.dark .head .h2::after,.nband .head .h2::after,.ndiv{content:"";display:block;width:120px;height:9px;margin:22px 0 0;
  background:radial-gradient(circle,#ffe6f0 0 3px,transparent 4px) center/9px 9px no-repeat,
    linear-gradient(90deg,transparent,rgba(var(--neon),.95) 35%,rgba(var(--neon),.95) 65%,transparent) center/100% 2px no-repeat;
  filter:drop-shadow(0 0 5px rgba(var(--neon),.9))}
.head.center .h2::after{margin-inline:auto}
/* buttons on night */
.dark .btn,.nband .btn,.nhero .btn{color:#3a1120;border:0;background:linear-gradient(180deg,#ffd8e7,#f6a0c1);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),0 0 18px rgba(var(--neon),.6),0 0 44px rgba(var(--neon),.3)}
.dark .btn:hover,.nband .btn:hover,.nhero .btn:hover{background:linear-gradient(180deg,#ffe6f0,#f8b3cd);color:#3a1120;transform:translateY(-1px)}
.dark .btn.ghost,.nband .btn.ghost,.nhero .btn.ghost{background:rgba(14,12,12,.4);color:#fff2f7;border:1.5px solid var(--core);
  box-shadow:0 0 8px rgba(var(--neon),.75),0 0 20px rgba(var(--neon),.3),inset 0 0 8px rgba(var(--neon),.25)}
.dark .btn.ghost:hover,.nband .btn.ghost:hover,.nhero .btn.ghost:hover{background:rgba(var(--neon),.14)}
.dark .link,.nband .link{color:var(--soft)}
/* photo windows on night: the tube itself */
.dark .arch,.nband .arch,.nband .vid-col .vid,.dark .vid-col .vid{border:2.5px solid var(--core);box-shadow:var(--glow-sm),var(--glow-in)}
.nband .round,.dark .round{box-shadow:0 0 0 2px var(--core),0 0 14px rgba(var(--neon),.7),0 0 34px rgba(var(--neon),.3)}
.dark .pillar img,.nband .pillar img{filter:invert(1) brightness(1.7) drop-shadow(0 0 5px rgba(var(--neon),.85))}
.dark .pillar p,.nband .pillar p{color:rgba(247,237,233,.76)}
.dark .bullets li::before,.nband .bullets li::before{background:var(--core);box-shadow:0 0 6px rgba(var(--neon),.9)}
.dark .chips li,.nband .chips li{background:rgba(14,12,12,.45);border-color:rgba(var(--neon),.5);color:var(--ink)}
.dark .arrows button,.nband .arrows button,.dark .rnav,.nband .rnav{background:transparent;color:#fff2f7;border:1.5px solid var(--core);box-shadow:0 0 8px rgba(var(--neon),.55)}
.dark .arrows button:hover,.nband .arrows button:hover{background:rgba(var(--neon),.18)}
.nband .ba-item .labels{color:var(--soft);letter-spacing:.3em}
.nband .ba-item p{color:#fff7f3;font-style:italic}
.nband .ba-ctrls .count{color:rgba(247,237,233,.7)}
.dark .quote,.nband .quote{background:rgba(14,12,12,.5);border:1.5px solid rgba(var(--neon),.45);box-shadow:0 0 16px rgba(var(--neon),.2)}
.dark .quote .who,.nband .quote .who{color:var(--soft)}
.dark .price,.nband .price{background:rgba(14,12,12,.5);border-color:rgba(var(--neon),.4);color:var(--ink)}
.dark .incl li::before,.nband .incl li::before{border-color:var(--core)}

/* ---------- the free-consult band = the Bible's last page: a full neon arch ---------- */
.dark .wrap.cta{max-width:780px;margin-inline:auto;position:relative;padding:150px 36px 70px}
.dark .wrap.cta::before{content:"";position:absolute;inset:0 var(--gutter);border:2.5px solid var(--core);
  border-radius:50% 50% 28px 28px / 260px 260px 28px 28px;background:rgba(22,6,11,.45);box-shadow:var(--glow-sm),var(--glow-in);z-index:-1}
.dark .wrap.cta::after{content:"";position:absolute;inset:12px calc(var(--gutter) + 12px);border:1.5px solid rgba(var(--neon),.26);
  border-radius:50% 50% 18px 18px / 250px 250px 18px 18px;z-index:-1;pointer-events:none}
.dark .cta img.crown{width:70px;filter:drop-shadow(0 0 8px rgba(var(--neon),.8))}
.dark .cta h2{font-size:clamp(40px,6vw,64px)}
.dark .cta .script{font-size:.8em;margin-left:.08em}
.dark .cta h2::after{content:"";display:block;width:120px;height:9px;margin:26px auto 0;
  background:radial-gradient(circle,#ffe6f0 0 3px,transparent 4px) center/9px 9px no-repeat,
    linear-gradient(90deg,transparent,rgba(var(--neon),.95) 35%,rgba(var(--neon),.95) 65%,transparent) center/100% 2px no-repeat;
  filter:drop-shadow(0 0 5px rgba(var(--neon),.9))}
.dark .cta .btns{justify-content:center}
.dark .cta .lede{max-width:34ch}
@media (max-width:600px){.dark .wrap.cta{padding:110px 34px 54px}.dark .wrap.cta::before{border-radius:50% 50% 24px 24px / 170px 170px 24px 24px}
  .dark .wrap.cta::after{border-radius:50% 50% 14px 14px / 160px 160px 14px 14px}}

/* ---------- page heroes: every page opens on a night band ---------- */
.nhero{position:relative;isolation:isolate;overflow:hidden;color:var(--ink);background:var(--night)}
.nhero .nbg{position:absolute;inset:-60px;z-index:-2;background:var(--img) center/cover no-repeat;filter:blur(30px) saturate(1.15);opacity:.5}
.nhero .ntint{position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 50% 35%,rgba(92,24,38,.42),rgba(27,8,13,.9))}
.nhero .eyebrow{color:rgba(247,237,233,.82);letter-spacing:.34em}
.nhero .eyebrow .link{color:var(--soft)}
.nhero h1{color:#fff7f3}
.nhero h1 .script,.nhero h1 .neon{font-size:.78em;margin-left:.1em}
.nhero .lede{font-family:var(--disp);font-style:italic;font-weight:500;font-size:23px;line-height:1.4;color:var(--soft)}
.nhero .facts{color:rgba(247,237,233,.75)}
.nhero .facts li::before{background:var(--core);box-shadow:0 0 6px rgba(var(--neon),1)}
.nhero .arch{border:2.5px solid var(--core);box-shadow:var(--glow-sm),var(--glow-in)}
.nhero .hero .copy::after{display:none}
.nhero .hero .h1::after,.nhero .hero .h2::after{content:"";display:block;width:120px;height:9px;margin:24px 0 2px;
  background:radial-gradient(circle,#ffe6f0 0 3px,transparent 4px) center/9px 9px no-repeat,
    linear-gradient(90deg,transparent,rgba(var(--neon),.95) 35%,rgba(var(--neon),.95) 65%,transparent) center/100% 2px no-repeat;
  filter:drop-shadow(0 0 5px rgba(var(--neon),.9))}
.nhero .badge{background:linear-gradient(180deg,#ffd8e7,#f6a0c1);border:0;color:#3a1120;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),0 0 18px rgba(var(--neon),.6)}
.nhero .badge b{color:#3a1120}
.nhero .float{border-color:var(--night);box-shadow:0 0 0 2px var(--core),0 0 16px rgba(var(--neon),.6)}
.nhero .vid .play span{box-shadow:0 0 14px rgba(var(--neon),.6)}

/* the home hero: her Bible cover, as a web page */
.nh .nframe{position:relative;aspect-ratio:4/5;border:2.5px solid var(--core);border-radius:50% 50% 26px 26px / 40% 40% 26px 26px;
  background:rgba(22,6,11,.5);box-shadow:var(--glow-sm),var(--glow-in)}
.nh .nframe::after{content:"";position:absolute;inset:10px;border:1.5px solid rgba(var(--neon),.26);
  border-radius:50% 50% 18px 18px / 40% 40% 18px 18px;pointer-events:none}
.nh .nwin{position:absolute;left:16px;right:16px;top:16px;bottom:16px;border-radius:50% 50% 0 0 / 40% 40% 0 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 92%);mask-image:linear-gradient(180deg,#000 62%,transparent 92%)}
.nh .nwin video{width:100%;height:100%;object-fit:cover}
.nh .nfoot{position:absolute;left:0;right:0;bottom:30px;display:grid;justify-items:center;gap:18px}
.nh .npill{display:inline-block;color:#3a1120;white-space:nowrap;line-height:1;padding:.85em 1.4em .8em;font-size:14.5px;letter-spacing:.06em;font-weight:500;
  border-radius:999px;background:linear-gradient(180deg,#ffd8e7,#f6a0c1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),0 0 18px rgba(var(--neon),.7),0 0 44px rgba(var(--neon),.35)}
.nh .nbrand{display:flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:rgba(247,237,233,.82)}
.nh .nbrand img{width:26px;height:auto;filter:drop-shadow(0 0 5px rgba(var(--neon),.7))}
.nh .copy{position:relative;z-index:1}
.nh h1{font-size:clamp(46px,7.4vw,84px)}
.nh h1 .neon{font-size:.8em;margin-left:.06em}
@media (max-width:859px){
  .nh{padding-top:18px}
  .nh .media{order:-1;max-width:430px}
  .nh .nframe{border-bottom:0;-webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,#000 66%,transparent 100%)}
  .nh .nframe::after{bottom:0;border-bottom:0}
  .nh .nfoot{display:none}
  .nh .copy{margin-top:-120px;text-align:center;justify-items:center}
  .nh .copy .lede{margin-inline:auto}
  .nh .btns,.nh .facts{justify-content:center}
  .nhero .nh .h1::after{margin-inline:auto}
}
@media (min-width:860px){.nh .media{max-width:470px;justify-self:end}}

/* inner-page heroes with no photo: the carousel's text arch */
.nhero .hero.solo{justify-items:center;text-align:center;padding-block:44px 64px}
.nhero .hero.solo .copy{position:relative;justify-items:center;max-width:720px;width:100%;padding:110px 40px 56px}
.nhero .hero.solo .copy::before{content:"";position:absolute;inset:0;z-index:-1;border:2.5px solid var(--core);border-radius:50% 50% 26px 26px / 200px 200px 26px 26px;
  background:rgba(22,6,11,.45);box-shadow:var(--glow-sm),var(--glow-in)}
.nhero .hero.solo .lede{margin-inline:auto}
.nhero .hero.solo .h1::after,.nhero .hero.solo .h2::after{margin-inline:auto}
@media (max-width:600px){.nhero .hero.solo .copy{padding:80px 26px 44px}.nhero .hero.solo .copy::before{border-radius:50% 50% 22px 22px / 130px 130px 22px 22px}}

/* ---------- Hair Bible viewers: her new neon pages (4:5) ---------- */
.viewer{max-width:600px;margin-inline:auto}
.viewer-track{background:var(--night);border:0;box-shadow:0 0 0 2px var(--edge),0 0 22px rgba(var(--neon),.35)}
.viewer-track figure{aspect-ratio:4/5}
.viewer-track img{object-fit:cover}

/* ---------- footer: the salon's neon sign ---------- */
.foot{background:radial-gradient(90% 120% at 15% 0%,#3a1320,var(--night) 60%);border-top:2px solid var(--core);
  box-shadow:0 -1px 0 rgba(var(--neon),.6),0 -8px 26px -6px rgba(var(--neon),.45)}
.foot .brandline{font-family:var(--script);font-size:32px;line-height:1.5;color:#fff2f7;text-shadow:var(--text-glow);transform:rotate(-4deg);transform-origin:left center;display:inline-block;margin:6px 0 4px}
.foot h4{color:var(--soft);letter-spacing:.3em}
.foot a:hover{text-shadow:0 0 10px rgba(var(--neon),.8)}
.foot .small{border-top-color:rgba(var(--neon),.22)}
.open-now[data-state="soon"] i{background:var(--core);box-shadow:0 0 8px rgba(var(--neon),.9)}
html{background:var(--night)}

/* four Hair Bibles now (wigs added) */
@media (min-width:600px){.bibles.four{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.bibles.four{grid-template-columns:repeat(4,1fr)}}

/* the ™ stays in plain type next to a neon script word */
.tm{font-family:var(--body);font-size:.28em;vertical-align:super;margin-left:.15em;color:var(--soft);letter-spacing:0}
/* breathing room between a page's night band and the Bible viewer under it */
.nhero + section[style*="padding-top:0"]{padding-top:34px!important}
/* only a page's first lede is the italic pink line; a second paragraph reads in plain type */
.nhero .lede + .lede{font-family:var(--body);font-style:normal;font-size:17px;line-height:1.65;color:rgba(247,237,233,.82)}
/* phone menu: the little labels no longer run into the page names */
.sheet nav a{gap:14px}
.sheet nav a small{text-align:right;max-width:52%;line-height:1.4}

/* Bible pages: the printed buttons are real links (positions from her PDFs) */
.viewer-track figure{position:relative}
.viewer-track .hot{position:absolute;border-radius:999px;-webkit-tap-highlight-color:rgba(255,79,160,.25);transition:box-shadow .2s}
.viewer-track .hot:hover{box-shadow:0 0 0 2px var(--core),0 0 16px rgba(var(--neon),.75)}
.viewer-track .hot:focus-visible{outline:2px solid var(--core);outline-offset:3px}
/* before + after rows scroll sideways, and a scroll box trims anything past its edge: room inside it for the neon outline */
.ba-track{padding:14px 14px 20px;margin:-14px -14px -14px;scroll-padding-inline:14px}
/* desktop: three before + afters across, with enough space between that the 4th card's glow stays hidden until you swipe */
@media (min-width:700px){.ba-track{gap:36px;grid-auto-columns:calc((100% - 72px)/3)}}