/* ContentBude site-wide additions to Max's design (cd.css): navigation, sub-page hero,
   package/price/prose/location/legal blocks and the voice-message phone. */

.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ink);color:#0A0A09;padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a:focus-visible,button:focus-visible,summary:focus-visible,[role=button]:focus-visible{outline:2px solid var(--warm);outline-offset:3px}

/* Header: six links + phone + button, mobile menu */
.nav ul a[aria-current=page]{color:var(--ink)}
.menu-btn{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.04);cursor:pointer;position:relative;flex:none}
.menu-btn i{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),top .3s var(--ease)}
.menu-btn i:nth-child(2){top:16px}.menu-btn i:nth-child(3){top:24px}
body.menu-open .menu-btn i:nth-child(2){top:20px;transform:rotate(45deg)}
body.menu-open .menu-btn i:nth-child(3){top:20px;transform:rotate(-45deg)}
@media (max-width:1240px){.nav ul{gap:20px}.nav .navtel{display:none}}
@media (max-width:980px){
  .menu-btn{display:block}
  /* The header has backdrop-filter, which would make a fixed child as small as the header; absolute + full height works everywhere */
  .nav ul{display:none;position:absolute;left:0;right:0;top:100%;height:calc(100vh - 68px);height:calc(100dvh - 68px);flex-direction:column;gap:0;padding:12px var(--gutter) 40px;background:rgba(10,10,9,.98);overflow:auto;z-index:39}
  body.menu-open .nav ul{display:flex}
  body.menu-open{overflow:hidden}
  .nav ul li{border-bottom:1px solid var(--line)}
  .nav ul a{display:block;padding:20px 0;font-size:1.3rem;font-weight:600;color:var(--ink)}
}

/* Sub-page hero: shorter than the Content Day hero */
.frame.short{min-height:min(74vh,700px)}
.frame.short .lettering{display:none}
@media (max-width:600px){.frame.short{min-height:640px}}
.hero h1{max-width:15ch;font-size:clamp(2.4rem,1rem + 4.3vw,5.2rem)}
.hero-in .eyebrow.kw{display:flex}

/* Cards (Max's "sets") with fewer columns */
.sets.c3{grid-template-columns:repeat(3,1fr)}
.sets.c4{grid-template-columns:repeat(4,1fr)}
.sets.c2{grid-template-columns:repeat(2,1fr)}
.sets.c2 .set .pic{aspect-ratio:16/10}
a.setlink{display:block;text-decoration:none;color:inherit}
@media (max-width:1100px){.sets.c4,.sets.c3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.sets.c4,.sets.c3,.sets.c2{grid-template-columns:1fr 1fr}.sets.c2{grid-template-columns:1fr}}

/* Package cards: 1 to 4 columns */
.pkgs.n3{grid-template-columns:repeat(3,1fr)}
.pkgs.n2{grid-template-columns:repeat(2,1fr);max-width:900px}
.pkgs.n1{grid-template-columns:1fr;max-width:520px}
@media (max-width:1100px){.pkgs.n4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.pkgs.n3,.pkgs.n2{grid-template-columns:1fr;max-width:520px}}
@media (max-width:600px){.pkgs.n4{grid-template-columns:1fr}}

/* Big picture offers: button row and highlighted card */
.offer .offer-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.offer.top{border-color:rgba(232,184,115,.55);box-shadow:0 30px 80px -40px rgba(232,184,115,.4)}
.offer.top .lbl{background:var(--warm);color:#1a1206;border-color:var(--warm)}
.offer .rows div{align-items:baseline}
.offer .rows span{min-width:0}

/* Reviews with 2 to 5 cards */
.reviews.n2{grid-template-columns:1fr 1fr}
.reviews.n4{grid-template-columns:repeat(2,1fr)}
.reviews.n5{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.reviews.n2,.reviews.n4,.reviews.n5{grid-template-columns:1fr}}

/* Prose: heading left, text right */
.prose{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,6vw,96px);align-items:start}
.prose-body p{color:var(--muted);font-size:1.06rem;line-height:1.65;max-width:680px}
.prose-body p+p{margin-top:18px}
.prose-body a{color:var(--ink);text-underline-offset:3px}
.prose h2{font-size:clamp(2rem,1rem + 3.4vw,4rem)}
@media (max-width:860px){.prose{grid-template-columns:1fr}}

/* Price tables (equipment, hourly prices) */
.pt{margin-top:48px}
.pt h3,.pt h2{font-size:clamp(1.4rem,1rem + 1vw,2rem);letter-spacing:-.03em;line-height:1.1;font-weight:700;margin-bottom:8px}
.pt-intro{color:var(--muted);max-width:720px;margin-bottom:18px}
.ptable{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:table}
.ptable th,.ptable td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.ptable thead th{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:500;background:rgba(255,255,255,.02)}
.ptable tbody th{font-weight:600}
.ptable small{display:block;margin-top:3px;font-weight:400;color:var(--muted);font-size:.86rem}
.ptable td{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.ptable tr:last-child th,.ptable tr:last-child td{border-bottom:0}
.ptable.two td{width:18%;text-align:right}.ptable.two thead th:not(:first-child){text-align:right}
@media (max-width:640px){
  .ptable,.ptable thead,.ptable tbody,.ptable tr,.ptable th,.ptable td{display:block;width:auto!important}
  .ptable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ptable{background:none;border:0}
  .ptable tr{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:10px}
  .ptable th,.ptable td{border:0!important;padding:0!important;text-align:left!important}
  .ptable tbody th{padding-bottom:8px!important}
  .ptable td{display:flex;justify-content:space-between;gap:12px;padding:6px 0!important;border-top:1px solid var(--line)!important;font-weight:700}
  .ptable td::before{content:attr(data-label);color:var(--muted);font-weight:500}
}

/* Locations */
.places{display:grid;gap:14px;margin-top:40px}
.places.n2{grid-template-columns:1fr 1fr}
.place{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.place .addr{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.place p{color:var(--muted)}
.place .sticker{margin-top:auto}
@media (max-width:860px){.places.n2{grid-template-columns:1fr}}

/* Footer */
.faddr{font-size:.85rem;line-height:1.7;color:var(--dim)}
.faddr a{color:var(--muted);text-decoration:none}
footer .wrap{align-items:flex-start}

/* Legal pages */
.legal-toc{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.legal-doc{max-width:820px;margin:0 0 70px}
.legal-doc h2{font-size:clamp(2rem,1rem + 3vw,3.4rem);margin-bottom:24px}
.legal-doc h3{font-size:1.1rem;margin:28px 0 8px}
.legal-doc p,.legal-doc li{color:#cfcbc2;line-height:1.65;margin-bottom:10px}
.legal-doc a{color:var(--ink)}
.legal-doc ul{padding-left:20px}
.legal-doc{scroll-margin-top:90px}


/* Home: two studio blocks with a lead card */
.studio-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:56px}
@media (max-width:860px){.studio-pair{grid-template-columns:1fr}}

/* Voice-message phone (Make your Song) */
.voice-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,100px);align-items:center}
.phone{width:min(390px,92vw);margin:0 auto;background:#0b0b0a;border:1px solid var(--line2);border-radius:36px;padding:16px 14px 18px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 8px rgba(255,255,255,.03)}
.phone-top{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;border-bottom:1px solid var(--line)}
.phone-top .av{width:34px;height:34px;border-radius:50%;background:#fff url('/cd-logo.png') center/78% no-repeat;position:relative;flex:none}
.phone-top .av::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#34c759;border:2px solid #0b0b0a}
.phone-top b{font-size:.95rem;display:block}
.phone-top span{font-size:.74rem;color:#34c759}
.chat{display:flex;flex-direction:column;gap:10px;padding:18px 4px 6px;min-height:430px}
.msg{max-width:84%;padding:10px 14px;border-radius:18px;font-size:.95rem;line-height:1.4;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.chat.armed .msg{opacity:0;transform:translateY(10px)}
.chat.armed.go .msg{opacity:1;transform:none}
.msg.me{align-self:flex-end;background:#25D366;color:#06210f;border-bottom-right-radius:6px}
.msg.them{align-self:flex-start;background:var(--card2);border-bottom-left-radius:6px}
.msg time{display:block;font-family:var(--mono);font-size:.64rem;opacity:.6;margin-top:4px;text-align:right}
.msg.voice{display:flex;align-items:center;gap:10px;min-width:230px;padding:10px 14px 10px 10px}
.msg.voice .play{width:36px;height:36px;border-radius:50%;border:0;background:#06210f;color:#25D366;display:grid;place-items:center;cursor:pointer;flex:none}
.msg.voice .play svg{width:14px;height:14px;fill:currentColor;margin-left:2px}
.msg.voice.playing .play svg{margin-left:0}
.wave{display:flex;align-items:center;gap:3px;height:30px;flex:1}
.wave i{display:block;width:3px;border-radius:2px;background:#06210f;opacity:.55;height:var(--h,40%)}
.msg.voice.playing .wave i{animation:wv .9s ease-in-out infinite alternate;opacity:.9}
.msg.voice.playing .wave i:nth-child(odd){animation-delay:-.4s}
@keyframes wv{from{transform:scaleY(.35)}to{transform:scaleY(1.15)}}
.msg.voice .len{font-family:var(--mono);font-size:.7rem;opacity:.75}
.phone-foot{display:flex;gap:10px;align-items:center;margin-top:10px;padding:10px 12px;border:1px solid var(--line2);border-radius:999px;color:var(--dim);font-size:.86rem}
.phone-foot svg{width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:2;margin-left:auto}
@media (max-width:860px){.voice-grid{grid-template-columns:1fr}.chat{min-height:0}}
@media (prefers-reduced-motion:reduce){.chat.armed .msg{opacity:1;transform:none}.msg.voice.playing .wave i{animation:none}}

/* Plain title (legal pages) */
.plain-h1{font-size:clamp(2.6rem,1rem + 5vw,5.4rem);font-weight:700;letter-spacing:-.045em;line-height:.96}

/* Big picture cards: room for label, long headings and price rows */
.offer{min-height:560px;padding-top:84px}
@media (max-width:600px){.offer{min-height:520px;padding:78px 20px 22px}}
.offer h3{max-width:20ch}
.offer .ob{filter:brightness(.42) saturate(.7) contrast(1.08)}
.offer p{color:rgba(255,255,255,.85)}
.ptable:not(.two) td{text-align:right;width:22%}.ptable:not(.two) thead th:last-child{text-align:right}
@media (max-width:640px){.ptable:not(.two) td{text-align:left!important;width:auto!important}}

/* Story pause button */
.player .pp{position:absolute;z-index:7;top:20px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.35);cursor:pointer;display:grid;place-items:center;padding:0}
.player .pp svg{width:16px;height:16px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round}
.player .pp .i-play{display:none;fill:#fff;stroke:none}
.player.stopped .pp .i-pause{display:none}.player.stopped .pp .i-play{display:block}
.player.stopped .bars i.run::after{animation-play-state:paused}

/* Hero text must never run into the top bar (progress bars, "contentbude", REC) */
.hero .frame{padding-top:clamp(104px,13vh,128px)}
.hero .frame.short{min-height:min(74vh,700px)}
@media (max-width:600px){.hero .frame{padding-top:108px}}

/* Fact boxes: long words wrap instead of leaving the box (320 px phones) */
.facts>.fact{min-width:0}
.fact b,.fact span{overflow-wrap:anywhere;hyphens:auto}
@media (max-width:480px){.fact{padding:16px 14px}.fact b{font-size:clamp(1.35rem,7vw,1.9rem)}.fact span{font-size:.64rem;letter-spacing:.06em}}

/* Hero on very narrow phones: the label above the heading wraps instead of widening the column */
.hero-in{grid-template-columns:minmax(0,1fr) auto}
.hero-in>div{min-width:0}
.hero h1 .kw{width:auto;max-width:100%}
@media (max-width:380px){.hero-in .eyebrow{font-size:.6rem;letter-spacing:.07em}}
@media (max-width:860px){.hero-in{grid-template-columns:minmax(0,1fr)}}

.msg time{opacity:.85}

.pt-fold{margin-top:40px}
.pt-fold>summary{font-size:1.2rem}