/* ══════════ LOOK GROSS — POP LAYER ══════════
   Loaded last on every page, after each page's inline <style>.
   Same look as the product portfolio: bright full-bleed color bands,
   Archivo Expanded Black display type, Space Mono labels, photos as
   hard-shadow "prints". Delete the <link> to pop.css to go back. */

:root{
  --ink:#141210;
  --paper:#fbfaf6;
  --red:#ee3424;
  --lime:#c8f13a;
  --hotpink:#ff4f9a;
  --cobalt:#1f2fd8;
  --marigold:#f6a400;
  --grape:#4a2a8f;
  --magenta:#b3115e;
  /* remap the site's original tokens so every old rule picks up the new palette */
  --cream:var(--paper);
  --cream-deep:var(--paper);
  --charcoal:var(--ink);
  --charcoal-soft:#2e2a25;
  --eggplant:var(--red);
  --eggplant-light:#ff4a39;
  --eggplant-pale:#ffe2dc;
  --border:var(--ink);
  --ink-green:var(--cobalt);
  --pop-display:"Archivo","Arial Black",Impact,sans-serif;
  --pop-mono:"Space Mono",ui-monospace,Menlo,monospace;
}
body{background:var(--paper);color:var(--charcoal-soft)}
body::after{display:none}

/* full-bleed band: paints a color edge to edge without changing markup */
.features,.services,.intro-text,.strip,.quote-section,.cta-strip,.pitch,.split,
.videos,.mini-promo,.blog-hero,.post-head,.gallery-label,.hero-statement,
.faq .hero,.jump-links{
  position:relative;
  box-shadow:0 0 0 100vmax var(--band,transparent);
  clip-path:inset(0 -100vmax);
  background:var(--band,transparent);
}

/* ---------- type ---------- */
h1,h2,.hero h1,.hero-h1,.intro h1,.section-title,.gallery-label .title,
.intro-text h2,.services-head h2,.split-text h2,.strip-head h2,.cta-strip h2,
.pitch h2,.confirmation h2,.form-card h2,.tile-title{
  font-family:var(--pop-display);font-weight:900;font-stretch:125%;
  text-transform:uppercase;letter-spacing:-.02em;line-height:.88;text-wrap:balance;
  color:var(--ink);font-style:normal;
}
.hero h1,.hero-h1,.intro h1{font-size:clamp(44px,7.4vw,104px)}
h1 em,h2 em,.hero h1 em{font-style:normal;color:var(--red);font-weight:900}
.intro-text h2,.services-head h2,.split-text h2,.strip-head h2,.section-title,
.gallery-label .title{font-size:clamp(34px,5.4vw,72px)}
.cta-strip h2,.pitch h2{font-size:clamp(40px,6.6vw,92px)}
.tile-title{font-size:26px;line-height:.95}
h3{font-family:var(--pop-display);font-weight:900;font-stretch:112%;text-transform:uppercase;letter-spacing:-.005em;color:var(--ink)}
blockquote{font-family:var(--pop-display);font-weight:900;font-stretch:112%;font-style:normal;text-transform:uppercase;line-height:1;letter-spacing:-.015em}
.eyebrow,.tile-num,.section-sub,.role,.video-label,.section-num{
  display:inline-block;color:var(--ink);background:var(--lime);border:2px solid var(--ink);
  border-radius:99px;padding:4px 12px;font-size:10.5px;letter-spacing:.14em;
}

/* ---------- nav + footer ---------- */
nav{background:var(--paper);border-bottom:3px solid var(--ink);backdrop-filter:none}
.nav-links a{color:var(--ink)}
.nav-links a:hover,.nav-links a.active{color:var(--ink);background:var(--lime);box-shadow:0 0 0 4px var(--lime)}
.nav-book,.nav-book:hover{background:var(--lime);color:var(--ink);border:2px solid var(--ink);
  border-radius:99px;box-shadow:3px 3px 0 var(--ink);padding:8px 16px}
.nav-book:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.mobile-menu{background:var(--paper);border-bottom:3px solid var(--ink)}
.mobile-menu a{border-bottom:2px solid var(--ink);color:var(--ink)}
.mobile-menu a.book,.mobile-menu a.book-link{background:var(--lime);color:var(--ink)}
.promo-strip{background:var(--hotpink);color:var(--ink);border-bottom:3px solid var(--ink)}
.promo-strip .ps-hot{color:var(--paper);-webkit-text-stroke:0}
.promo-strip .ps-cta{background:var(--ink);color:var(--lime)}
footer{background:var(--ink);border-top:3px solid var(--ink);color:var(--paper)}
footer .footer-logo,footer .footer-links a,footer .footer-bottom,footer a{color:var(--paper)}
footer .footer-links a:hover{color:var(--lime)}
.footer-bottom{border-top:2px solid #3a352f}
.footer-logo{font-family:var(--pop-display)!important;font-weight:900;font-stretch:125%;font-size:20px!important;letter-spacing:-.01em!important}

/* ---------- buttons ---------- */
.btn-primary,button[type="submit"],.pitch-cta,.cta-actions a.primary,.hero-cta{
  background:var(--red);color:var(--paper);border:3px solid var(--ink);border-radius:0;
  box-shadow:6px 6px 0 var(--ink);
}
.btn-primary:hover,button[type="submit"]:hover,.pitch-cta:hover,.cta-actions a.primary:hover,.hero-cta:hover{
  background:var(--red);transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.btn-secondary,.cta-actions a.secondary{
  background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  padding:15px 26px;display:inline-block;text-decoration:none}
.btn-secondary:hover,.cta-actions a.secondary:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink);color:var(--ink)}
.jump-link{border:2px solid var(--ink);border-radius:99px;background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.jump-link:hover{background:var(--hotpink);color:var(--ink)}

/* ---------- photos as prints ---------- */
.hero-photo,.tile-photo,.gallery-item,.featured-img,.split-media,.strip-grid figure,
.video-embed,.mini-photo,.pcard .ph,.fig,.fig-solo img,.fig-pair img,.fig-trio img{
  border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:var(--paper);
  border-radius:0;overflow:hidden;transition:transform .2s,box-shadow .2s;
}
.gallery-item:hover,.tile:hover .tile-photo,.strip-grid figure:hover{transform:translate(-4px,-4px) rotate(-1deg);box-shadow:12px 12px 0 var(--ink)}
.tile:hover .tile-photo img{transform:none}
.hero-photo{transform:rotate(2deg);overflow:visible}
.hero-photo img{display:block}
.hero-photo .photo-tag{background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:99px;bottom:14px;left:14px}
.gallery-item:nth-child(4n+2){transform:rotate(1.2deg)}
.gallery-item:nth-child(4n+3){transform:rotate(-1.2deg)}

/* sticker */
.pop-sticker{position:absolute;z-index:3;top:-26px;right:-22px;width:112px;height:112px;border-radius:50%;
  display:grid;place-items:center;text-align:center;background:var(--hotpink);color:var(--paper);
  border:3px solid var(--ink);transform:rotate(-14deg);font-family:var(--pop-display);font-weight:900;
  font-stretch:100%;text-transform:uppercase;font-size:14px;line-height:1}

/* marquee */
.pop-marquee{background:var(--ink);color:var(--paper);overflow:hidden;border-block:3px solid var(--ink)}
.pop-marquee .track{display:flex;width:max-content;animation:pop-roll 30s linear infinite}
.pop-marquee span{font-family:var(--pop-display);font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(22px,3.4vw,40px);padding:14px 0;white-space:nowrap}
.pop-marquee i{font-style:normal;color:var(--lime);padding:0 .6em}
@keyframes pop-roll{to{transform:translateX(-50%)}}

/* ---------- HOME ---------- */
.features{--band:var(--lime);padding-top:28px;padding-bottom:28px;border-block:3px solid var(--ink)}
.feature .dot{background:var(--ink);color:var(--lime);border-radius:50%}
.feature p,.feature p strong{color:var(--ink)}
.services{--band:var(--cobalt);padding-bottom:88px}
.services .eyebrow{background:var(--lime)}
.services-head h2{color:var(--lime)}
.services .tile-title{color:var(--paper)}
.services .tile-desc{color:#dfe3ff}
.services .tile-price{color:var(--lime)}
.services .tile-arrow{color:var(--lime);font-size:12px}
/* stagger the middle card as a whole so its photo never covers its own label */
@media (min-width:901px){.services .tile:nth-child(2){margin-top:32px}}
.intro-text{--band:var(--marigold);max-width:none;padding-bottom:72px}
.intro-text > *{max-width:680px;margin-left:auto;margin-right:auto}
.intro-text p{color:var(--ink)}
.intro-text h2{color:var(--cobalt)}
.intro-text a.more{color:var(--ink);border-bottom:3px solid var(--ink)}
.strip{--band:var(--hotpink);padding-top:72px}
.strip-grid figcaption{color:var(--ink);background:var(--paper);margin:0;padding:8px 10px;border-top:3px solid var(--ink)}
.quote-section{--band:var(--grape);max-width:none}
.quote-section blockquote{color:var(--lime);font-size:clamp(28px,4.6vw,56px)}
.quote-section .quote-tag,.quote-section .quote-sub,.quote-section .quote-tag strong{color:#efe6ff}
.cta-strip{--band:var(--lime);border-top:3px solid var(--ink)}
.cta-strip h2{color:var(--ink)}
.divider{display:none}

/* ---------- PORTRAITS / BOUDOIR ---------- */
.hero-statement{--band:var(--paper)}
.hero-tagline{color:var(--ink)}
.gallery-label{--band:var(--cobalt);padding-top:40px!important;padding-bottom:40px!important;margin-bottom:40px;border-block:3px solid var(--ink)}
.gallery-label .title{color:var(--lime)}
.gallery-label .sub{color:var(--paper)}
.gallery-label ~ .gallery-label{--band:var(--hotpink)}
.gallery-label ~ .gallery-label .title{color:var(--paper);-webkit-text-stroke:2px var(--ink)}
.gallery-label ~ .gallery-label .sub{color:var(--ink)}
.gallery-label ~ .gallery-label ~ .gallery-label{--band:var(--marigold)}
.gallery-label ~ .gallery-label ~ .gallery-label .title{color:var(--cobalt);-webkit-text-stroke:0}
.gallery{gap:22px!important}
.note-block,.intro-block{color:var(--ink)}
.note-block{border:3px solid var(--ink);background:var(--lime);box-shadow:6px 6px 0 var(--ink)}

/* ---------- ARTISTS ---------- */
.hero-services li{border:2px solid var(--ink);border-radius:99px;background:var(--lime);color:var(--ink);box-shadow:3px 3px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 14px}
.section-head{border-bottom:3px solid var(--ink)}
.pitch{--band:var(--hotpink);border-block:3px solid var(--ink)}
.pitch h2{color:var(--paper);-webkit-text-stroke:2px var(--ink)}
.pitch p,.pitch-right p{color:var(--ink)}

/* ---------- ABOUT ---------- */
.split{--band:var(--marigold);border-block:3px solid var(--ink)}
.split-text h2{color:var(--cobalt)}
.split-text p{color:var(--ink)}
.videos{--band:var(--grape)}
.videos .strip-head h2{color:var(--lime)}
.videos .video-label{background:var(--lime)}

/* ---------- FAQ / PRIVACY ---------- */
.jump-links{--band:var(--lime);padding-top:22px;padding-bottom:22px;border-block:3px solid var(--ink)}
.faq-group .section-head,.policy .section-head{border-bottom:none;margin-bottom:18px}
.faq-item{border:3px solid var(--ink);background:var(--paper);box-shadow:5px 5px 0 var(--ink);margin-bottom:14px}
.faq-item.open,.faq-item[open]{background:#fff6c8}
.faq-q{padding-left:18px;padding-right:18px}
.faq-q-text{font-weight:700;color:var(--ink)}
.faq-icon{color:var(--red)}
.faq-a{padding-left:18px;padding-right:18px}
.faq-highlight{border:3px solid var(--ink);border-left:10px solid var(--red);background:var(--paper)}
.include-col{border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:var(--paper);padding:18px}
.include-col.yes{background:var(--lime)}
.party{border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:16px}

/* ---------- BOOKING ---------- */
.mini-promo{--band:var(--cobalt);border-block:3px solid var(--ink)}
.mini-promo h2,.mini-promo .mini-body h2{color:var(--lime)}
.mini-promo p,.mini-promo li,.mini-stats,.mini-stats *{color:var(--paper)}
.mini-promo .eyebrow{background:var(--hotpink)}
.mini-promo .btn-primary{background:var(--lime);color:var(--ink)}
.rate{border:3px solid var(--ink);background:var(--lime);box-shadow:6px 6px 0 var(--ink)}
.rate .amount{font-family:var(--pop-display);font-weight:900;font-stretch:125%;color:var(--ink)}
.form-card{border:3px solid var(--ink);box-shadow:10px 10px 0 var(--hotpink);background:var(--paper)}
input,select,textarea{border-bottom:3px solid var(--ink)}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--red)}
.mini-check{border:3px solid var(--ink);background:var(--lime)}

/* ---------- BLOG ---------- */
.blog-hero{--band:var(--marigold);border-bottom:3px solid var(--ink)}
.post-head{--band:var(--cobalt);border-bottom:3px solid var(--ink);padding-bottom:40px}
.post-head h1{color:var(--lime)}
.post-head .post-lead,.post-head .post-meta,.post-head p,.post-head .crumbs,.post-head .crumbs a{color:var(--paper)}
.blog-hero h1{color:var(--ink)}
.topic{border:2px solid var(--ink);border-radius:99px;background:var(--paper);box-shadow:3px 3px 0 var(--ink);color:var(--ink)}
.topic:hover{background:var(--hotpink)}
.pcard{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:var(--paper);transition:transform .2s,box-shadow .2s}
.pcard:hover{transform:translate(-4px,-4px) rotate(-.6deg);box-shadow:12px 12px 0 var(--ink)}
.pcard .ph{border:0;box-shadow:none;border-bottom:3px solid var(--ink)}
.pcard .cat{background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:99px;padding:2px 10px;display:inline-block}
.pcard:nth-child(3n+2) .cat{background:var(--hotpink)}
.pcard:nth-child(3n) .cat{background:var(--marigold)}
.callout,.author-box,.toc{border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:var(--lime)}
.author-box{background:var(--paper)}
.toc{background:#fff6c8}
.rate-table{border:3px solid var(--ink)}
.post-body a{color:var(--red);text-decoration-thickness:2px}
.fig{box-shadow:6px 6px 0 var(--ink)}
.fig img{border:0;box-shadow:none}
.post-body h2{font-size:clamp(28px,3.6vw,42px)}

/* ---------- hero fit fixes ---------- */
/* the expanded display face is wide: let grid columns shrink below their content */
@media (min-width:901px){
  .hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .hero-statement{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
}
/* Headlines are sized to their own column (cqi = 1% of the container's width),
   not the window. PROFESSIONAL / PERFORMANCE. are ~10.2em wide in this face,
   so 9cqi always fits the column with a little room to spare. */
.hero > div:first-child:has(> h1){container-type:inline-size}
.hero-statement{container-type:inline-size}
/* every other page headline (FAQ, About, Artists, Booking, Privacy) gets the same treatment */
.page .hero,.page .intro{container-type:inline-size}
@media (min-width:641px){
  .hero h1,.intro h1{font-size:clamp(30px,10cqi,104px)}
  .hero > div:first-child:has(> h1) h1{font-size:clamp(30px,9cqi,80px)}
  .hero-h1{font-size:clamp(30px,calc((60cqi - 20px) * .09),72px)}
}
@media (max-width:640px){
  h1,.hero h1,.hero-h1,.intro h1,.hero > div:first-child h1{font-size:clamp(30px,9.6vw,44px);font-stretch:100%;overflow-wrap:break-word}
  h2,.intro-text h2,.services-head h2,.split-text h2,.strip-head h2,.section-title,.gallery-label .title,.cta-strip h2,.pitch h2{font-stretch:100%;font-size:clamp(28px,8.6vw,40px)}
}

@media (max-width:640px){
  .hero-photo,.tile-photo,.gallery-item,.featured-img,.split-media,.strip-grid figure,.video-embed,.pcard{box-shadow:5px 5px 0 var(--ink)}
  .rate-table{display:block;overflow-x:auto;max-width:100%}
  .pop-sticker{width:86px;height:86px;font-size:11px;top:-14px;right:-6px}
  .gallery-label ~ .gallery-label .title,.pitch h2{-webkit-text-stroke:1.5px var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .pop-marquee .track{animation:none}
  .gallery-item,.pcard,.tile-photo,.strip-grid figure{transition:none}
}

/* Nav carries seven links now (Product added): switch to the menu button
   below 1180px so the bar never crowds on small laptops. */
@media (max-width:1180px){
  nav{height:64px;padding:0 22px}
  .nav-logo img{height:21px}
  .nav-links,.nav-book{display:none}
  .hamburger{display:flex}
}

/* ══════════ COLOR BANDS EVERYWHERE ══════════
   Same treatment as the Product page: every content section is a full-bleed
   color band. Pages wrap their sections in <section class="pop-band band-*">.
   --bh = headline ink, --bt = text ink for that band. */
.pop-band{position:relative;box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);background:var(--band);
  padding-block:60px 76px;border-bottom:3px solid var(--ink);color:var(--bt)}
.band-cobalt{--band:var(--cobalt);--bh:var(--lime);--bt:var(--paper)}
.band-hotpink{--band:var(--hotpink);--bh:var(--paper);--bt:var(--ink)}
.band-marigold{--band:var(--marigold);--bh:var(--cobalt);--bt:var(--ink)}
.band-grape{--band:var(--grape);--bh:var(--lime);--bt:#efe6ff}
.band-magenta{--band:var(--magenta);--bh:var(--marigold);--bt:#ffe0ef}

.pop-band :is(h1,h2,h3,.title,.section-title){color:var(--bh)}
.band-hotpink :is(h1,h2,.title,.section-title){-webkit-text-stroke:2px var(--ink)}
.pop-band :is(p,li,.sub,.intro-block,.hero-tagline,.intro-lead,.section-sub-text,.post-body){color:var(--bt)}
.pop-band :is(p,li) :is(strong,b){color:inherit}
.pop-band :is(p,li) a:not([class]){color:var(--bh);text-decoration-thickness:2px}
.band-hotpink :is(p,li) a:not([class]){color:var(--ink)}
/* cards stay paper with ink text so they pop off the color */
.pop-band :is(.faq-item,.party,.form-card,.note-block,.pcard,.include-col,.rate,.faq-highlight,.callout,.toc){color:var(--ink)}
.pop-band :is(.faq-item,.party,.form-card,.note-block,.pcard,.include-col,.rate,.faq-highlight,.callout,.toc) :is(p,li,h2,h3,span,div,label,.sub){color:var(--ink);-webkit-text-stroke:0}
.pop-band :is(.faq-item,.party,.form-card,.pcard,.include-col,.faq-highlight) a:not([class]){color:var(--red)}
.pop-band .faq-item,.pop-band .party{background:var(--paper)}
.pop-band .faq-icon{color:var(--red)}
/* sections that used to be their own band become plain headers inside the new one */
.pop-band .gallery-label{--band:transparent;box-shadow:none;background:none;border:0;padding:0!important;margin-bottom:30px;clip-path:none}
.pop-band .gallery-label .sub{color:var(--bt)}
.pop-band .section-head{border-bottom:0}
.pop-band .section-rule{border:0;padding-top:0;margin-top:0}
.pop-band .section-rule :is(h2,h3,.title){color:var(--bh)}
.pop-band .divider{display:none}
.pop-band .eyebrow,.pop-band .section-num,.pop-band .section-sub{color:var(--ink)}
.pop-band .featured-img,.pop-band .gallery-item{background:var(--paper)}
/* the band's top padding replaces each section's own top spacing */
.pop-band > :first-child{margin-top:0!important;padding-top:0!important}
.pop-band > :last-child{margin-bottom:0!important}
@media (max-width:640px){.pop-band{padding-block:40px 52px}.band-hotpink :is(h1,h2,.title,.section-title){-webkit-text-stroke:1.5px var(--ink)}}
.pop-band hr{display:none}

/* band polish: edge-to-edge divider lines, no paper peeking between bands */
html,body{overflow-x:clip}
.pop-band{border-bottom:0}
.pop-band::after{content:"";position:absolute;left:-100vmax;right:-100vmax;bottom:0;height:3px;background:var(--ink);pointer-events:none}
.cta-strip{margin-top:0!important;margin-bottom:0!important}
.page:has(.pop-band){padding-bottom:0!important}
.page:has(> .mini-promo:first-child){padding-top:0!important}
.mini-promo{margin-top:0!important}
.mini-promo{margin-bottom:0!important}
.policy{padding-bottom:0!important;margin-bottom:0!important}
/* same edge-to-edge rule lines on the older bands that used borders */
.features,.split,.pitch,.mini-promo,.jump-links,.blog-hero,.gallery-label{border-top:0!important;border-bottom:0!important}
.features::after,.split::after,.pitch::after,.mini-promo::after,.jump-links::after,.blog-hero::after,.services::after,.strip::after,.videos::after{
  content:"";position:absolute;left:-100vmax;right:-100vmax;bottom:0;height:3px;background:var(--ink);pointer-events:none}
