/* ============================================================================================
   Double Impact Events - the BLOCKS.

   site.css holds the brand: colours, type, buttons, the home hero, the bands. This file holds
   everything rendered by site/render.php from content/*.json. Two files because they change
   for different reasons: the brand settles, the blocks keep growing.
============================================================================================ */

/* ---------- menu ---------------------------------------------------------------------------
   His live menu is 28 items on one level, which is hard work on a phone. Same pages, two
   groups, opening as a panel. The panel keeps a short delay on the way OUT, or the pointer
   loses it travelling from the word to the links - the exact fault fixed on dafinchy.com.   */
.bar .brand{display:flex;align-items:center}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--paper);margin:5px 0;
             transition:transform .3s var(--ease),opacity .25s}
body.navopen .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.navopen .burger span:nth-child(2){opacity:0}
body.navopen .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drop{position:relative}
.droptop{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);
  opacity:.86;padding:6px 0;transition:opacity .25s,color .25s}
.drop:hover .droptop,.drop.open .droptop{opacity:1;color:var(--gold-hi)}
.droptop svg{transition:transform .3s var(--ease)}
.drop.open .droptop svg{transform:rotate(180deg)}
.dropmenu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  min-width:430px;padding:18px;border-radius:16px;border:1px solid var(--line);
  background:rgba(18,12,14,.96);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 26px 60px rgba(0,0,0,.6);opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease);z-index:95}
.drop.open .dropmenu{opacity:1;pointer-events:auto}
.dropgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dropgrid a{display:block;padding:9px 12px;border-radius:9px;font-size:.84rem;
  letter-spacing:.02em;text-transform:none;color:var(--paper);opacity:.84;
  transition:background .2s,color .2s,opacity .2s}
.dropgrid a:hover{background:rgba(240,180,92,.12);color:var(--gold-hi);opacity:1}
.dropgrid a.on{color:var(--gold-hi);opacity:1}

/* ---------- inner-page hero ----------------------------------------------------------------- */
.phero{position:relative;min-height:62vh;display:flex;align-items:flex-end;padding:140px 0 64px;
       overflow:hidden;isolation:isolate}
.pheroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
          animation:slowzoom 26s var(--ease) infinite alternate}
@keyframes slowzoom{to{transform:scale(1.08)}}
.phero .hero-veil{z-index:-1}
/* .phero is a flex container, so .wrap becomes a flex ITEM and shrinks to its content -
   which, with margin:0 auto, quietly centred the whole hero instead of leaving it left. */
.phero > .wrap{width:100%}
.phero h1{font-size:clamp(2.6rem,6.4vw,5.4rem);max-width:17ch;
  background:linear-gradient(180deg,#fff 0%,#F2DCBE 62%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.phero .lede{margin:20px 0 28px;color:#E6DCD4}
.phero .hero-cta{justify-content:flex-start}
.phero .eyebrow{color:var(--gold-hi)}

/* ---------- prose, points, pictures ----------------------------------------------------------
   A paragraph runs the FULL width of the row below it, never a narrow centred column under a
   wide heading. See memory no-ai-tells-in-copy.                                              */
main .band h2{margin-bottom:10px}
.prose p{margin:0 0 18px;color:var(--muted);font-size:clamp(1rem,1.25vw,1.12rem)}
.prose p.lede{color:#E2D9D4;font-size:clamp(1.08rem,1.5vw,1.3rem)}
.prose p:last-child{margin-bottom:0}

.points{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:14px;
        grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.points li{position:relative;padding:18px 20px 18px 50px;border:1px solid var(--line);
           border-radius:14px;background:rgba(246,241,236,.025);color:var(--muted);
           font-size:.97rem;line-height:1.6}
.points li::before{content:"";position:absolute;left:20px;top:26px;width:12px;height:12px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(208,138,51,.16)}
.points li b{display:block;color:var(--paper);font-weight:700;margin-bottom:3px}

.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.shots figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);
              aspect-ratio:4/3}
.shots img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.shots figure:hover img{transform:scale(1.06)}

/* ---------- prices -----------------------------------------------------------------------
   A size-and-price list is a TABLE. Run together as a sentence nobody can scan it.         */
.pricewrap{display:grid;grid-template-columns:1.4fr .9fr;gap:34px;margin-top:34px;
           align-items:start}
.prices{width:100%;border-collapse:collapse}
.prices th,.prices td{padding:15px 4px;border-bottom:1px solid var(--line);font-weight:400}
.prices th{text-align:left;color:var(--paper);font-family:var(--body);font-size:1rem}
.prices td{text-align:right;font-family:var(--head);font-size:1.6rem;color:var(--gold-hi);
           letter-spacing:.02em}
.priceside{display:grid;gap:16px}
.pcard{padding:26px;border:1px solid rgba(240,180,92,.3);border-radius:18px;text-align:center;
  background:linear-gradient(180deg,rgba(240,180,92,.1),rgba(240,180,92,.02))}
.pcard span{display:block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
            color:var(--muted)}
.pcard b{display:block;font-family:var(--head);font-weight:400;font-size:3rem;
         color:var(--gold-hi);line-height:1.1;margin:6px 0 16px}
.pnote{color:var(--muted);font-size:.92rem;margin:0}

/* ---------- reviews --------------------------------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px;
        margin-top:44px}
.quote{margin:0;padding:28px;border:1px solid var(--line);border-radius:18px;
       background:rgba(246,241,236,.03);display:flex;flex-direction:column;gap:14px}
.stars{color:var(--gold-hi);display:flex;gap:3px}
.quote blockquote{margin:0;color:#E2D9D4;font-size:.99rem;line-height:1.62}
.quote figcaption{margin-top:auto;color:var(--paper);font-weight:700;font-size:.92rem}
.quote figcaption span{display:block;color:var(--muted);font-weight:400;font-size:.8rem;
                       letter-spacing:.12em;text-transform:uppercase;margin-top:4px}

.badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.badge{display:block;padding:24px;border:1px solid var(--line);border-radius:16px;
       background:rgba(246,241,236,.025);transition:border-color .3s,transform .3s var(--ease)}
a.badge:hover{border-color:var(--gold);transform:translateY(-3px)}
.badge b{display:block;font-family:var(--head);font-weight:400;font-size:1.5rem;
         color:var(--gold-hi);letter-spacing:.02em}
.badge span{display:block;color:var(--muted);font-size:.86rem;margin-top:6px}

/* ---------- the enquiry form ----------------------------------------------------------------
   Nothing typed here is ever stored. The honeypot is hidden from people but not from a bot,
   which fills it in every time.                                                              */
.form-wrap{max-width:860px;margin:0 auto}
.enquiry{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px;text-align:left}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fld{margin:0;display:flex;flex-direction:column;gap:8px}
.fld-wide{grid-column:1/-1}
.fld label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.fld label i{font-style:normal;color:var(--gold)}
.fld input,.fld select,.fld textarea{
  width:100%;padding:14px 16px;border-radius:12px;background:rgba(246,241,236,.05);
  border:1px solid var(--line);color:var(--paper);font:inherit;font-size:1rem;
  transition:border-color .25s,background .25s}
.fld textarea{resize:vertical;min-height:130px}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(246,241,236,.08)}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:#E0574F}
.consent label{display:flex;gap:12px;align-items:flex-start;text-transform:none;
  letter-spacing:0;font-size:.9rem;color:var(--muted);line-height:1.55}
.consent input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--gold)}

.callout-in{text-align:center}
.callout-in .lede{margin-left:auto;margin-right:auto;max-width:54ch}
.fnote{color:var(--muted);font-size:.88rem;margin-top:14px;line-height:1.6}

@media (max-width:900px){
  .pricewrap{grid-template-columns:1fr}
}
@media (max-width:760px){
  .burger{display:block}
  /* ⚠️ VISIBILITY, not just pointer-events. The closed menu is a fixed panel lying over the
     top of the page, and `pointer-events:none` on it is NOT enough: a descendant that sets
     `pointer-events:auto` re-enables itself regardless of its parent, so the invisible
     dropdown links were still catching taps. On the karaoke list that meant tapping a song
     near the top of the screen opened a service page. `visibility:hidden` is inherited and
     takes the whole subtree out of hit-testing. */
  .bar nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;padding:18px;margin:0;background:rgba(12,8,9,.98);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);max-height:calc(100vh - 64px);overflow:auto;
    transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
  body.navopen .bar nav{opacity:1;transform:none;visibility:visible;pointer-events:auto;
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s}
  .bar nav a:not(.btn){display:block;padding:12px 4px}
  .drop{width:100%}
  .droptop{width:100%;justify-content:space-between;padding:12px 4px}
  .dropmenu{position:static;transform:none;min-width:0;padding:0 0 10px;border:0;
            background:none;box-shadow:none;opacity:1;
            max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
  body.navopen .drop.open .dropmenu{pointer-events:auto}
  .drop.open .dropmenu{max-height:720px}
  .dropgrid{grid-template-columns:1fr}
  .enquiry{grid-template-columns:1fr}
  .phero{min-height:54vh;padding:120px 0 48px}
}

/* ---------- the pinned video panel -----------------------------------------------------------
   A second Apple-style panel partway down the page: Danny's own footage held still while the
   page moves past it. The video PLAYS; it is never scrubbed frame by frame, because iOS will
   not hand over frames from a video it has not played through.                              */
.vband{height:180vh;position:relative}
.vpin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.vpin video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vpin .hero-veil{position:absolute;inset:0}
.vmid{position:relative;text-align:center;opacity:var(--vFade,1);
      transform:translateY(var(--vLift,0px))}
.vmid h2{font-size:clamp(2.4rem,6vw,5rem);max-width:18ch;margin:0 auto;
  background:linear-gradient(180deg,#fff 0%,#F2DCBE 60%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.vmid .lede{margin:22px auto 0;max-width:56ch;color:#E6DCD4;
            text-shadow:0 2px 14px rgba(0,0,0,.7)}
.vmid .eyebrow{color:var(--gold-hi);text-shadow:0 1px 10px rgba(0,0,0,.8)}
@media (max-width:760px){ .vband{height:150vh} }
.formwarn{margin:28px 0 0;padding:16px 20px;border-radius:12px;color:#FFD9D6;
  border:1px solid rgba(224,87,79,.5);background:rgba(224,87,79,.12);font-size:.95rem}

/* what a package includes, listed under its price */
.includes{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:11px}
.includes li{position:relative;padding-left:30px;color:var(--muted);font-size:1rem;line-height:1.6}
.includes li::before{content:"";position:absolute;left:4px;top:10px;width:9px;height:9px;
  border-radius:50%;background:var(--gold)}

/* type pushed to the bottom, for footage whose subject is in the middle of frame */
.vpin:has(.vmid-low){place-items:end center}
.vmid-low{padding-bottom:9vh}
.vmid-low h2{max-width:22ch}

/* a short line standing alone is a sub-heading on his pages, not a stray paragraph */
.prose p.sub{color:var(--paper);font-weight:700;font-size:1.05rem;letter-spacing:.01em;
  margin:34px 0 10px}
.prose p.sub:first-child{margin-top:0}
/* the small print under a price */
.pcard em{display:block;font-style:normal;color:var(--muted);font-size:.9rem;
  line-height:1.55;margin:-6px 0 18px}

/* his privacy policy and terms, set to be read */
.legal-text h2{font-family:var(--body);font-weight:700;font-size:1.05rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-hi);margin:46px 0 14px;line-height:1.4}
.legal-text h2:first-child{margin-top:0}
.legal-text p{color:var(--muted);margin:0 0 16px;line-height:1.75}
.legal-text ul{margin:0 0 20px;padding-left:22px;color:var(--muted)}
.legal-text li{margin:0 0 9px;line-height:1.7}

/* the towns he actually covers */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:40px}
.area{padding:30px;border:1px solid var(--line);border-radius:18px;background:rgba(246,241,236,.03)}
.area h3{font-size:1.9rem;color:var(--paper)}
.area p{color:var(--muted);margin:10px 0 16px;font-size:.98rem}
.area a{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);
  border-bottom:1px solid rgba(240,180,92,.4);padding-bottom:3px}
.area a:hover{color:#fff;border-color:#fff}

/* his About pages: an interview, questions and all */
.story-text h2{font-family:var(--head);font-weight:400;font-size:clamp(1.7rem,3vw,2.4rem);
  color:var(--gold-hi);letter-spacing:.02em;margin:54px 0 16px;line-height:1.05}
.story-text h2:first-child{margin-top:0}
.story-text p{color:var(--muted);margin:0 0 18px;font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.75}
.story-text ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:10px}
.story-text li{position:relative;padding-left:28px;color:var(--muted);line-height:1.7}
.story-text li::before{content:"";position:absolute;left:3px;top:11px;width:8px;height:8px;
  border-radius:50%;background:var(--gold)}

/* the line he leads his own page with */
.story-text blockquote{margin:40px 0;padding:28px 32px;border-left:3px solid var(--gold);
  background:rgba(240,180,92,.06);border-radius:0 16px 16px 0;color:#E8DFD8;
  font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.5;font-family:var(--body)}

/* a film sitting in the page where a photograph would be */
.clip{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);position:relative}
.clip video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.clip figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 28px 20px;
  color:#E8DFD8;font-size:.95rem;
  background:linear-gradient(180deg,rgba(12,8,9,0),rgba(12,8,9,.85))}

.clips{display:grid;gap:18px}
.clips-2{grid-template-columns:1fr 1fr}
@media (max-width:760px){ .clips-2{grid-template-columns:1fr} }

/* the real button in place of his "Click to ENQUIRE or BOOK" text */
.prose-cta{margin:30px 0 0}

/* ---------- his own accounts ----------------------------------------------------------
   Small, quiet, and the same gold as everything else. They are NOT the loud coloured badges
   that make a site look like a 2012 template, and they open in a new tab so somebody on the
   way to booking is never taken off the page that was selling it to them. */
.social{display:flex;align-items:center;gap:8px}
.social a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  color:var(--paper);opacity:.72;border:1px solid transparent;
  transition:opacity .25s,color .25s,border-color .3s var(--ease),transform .25s var(--ease)}
.social a:hover{opacity:1;color:var(--gold-hi);border-color:rgba(240,180,92,.42);
  transform:translateY(-2px)}
.social a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.social-foot{margin-top:18px;justify-content:flex-start}
.social-foot a{width:40px;height:40px;border-color:var(--line)}
@media (max-width:760px){
  .bar .social{order:9;justify-content:center;gap:14px;padding:14px 0 4px;
    border-top:1px solid var(--line);margin-top:10px}
  .bar .social a{width:44px;height:44px;border-color:var(--line)}
}

/* ---------- the karaoke catalogue -----------------------------------------------------------
   15,922 songs. Only what is on screen is drawn, and more appear as they are asked for.
   His live page prints the raw shortcode [wpdatatable id=2] where this should be.          */
.ktools{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;margin:34px 0 26px}
.kcount{color:var(--gold-hi);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 16px}
.klist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ksong{display:grid;grid-template-columns:1fr auto;gap:2px 18px;align-items:baseline;
  padding:14px 18px;border-radius:10px;background:rgba(246,241,236,.025);
  border:1px solid transparent;transition:background .2s,border-color .2s}
.ksong:hover{background:rgba(240,180,92,.07);border-color:rgba(240,180,92,.22)}
.ksong b{color:var(--paper);font-weight:700;font-size:1rem}
.ksong span{grid-row:2;color:var(--muted);font-size:.9rem}
.ksong em{grid-column:2;grid-row:1/3;font-style:normal;color:var(--muted);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;text-align:right;white-space:nowrap}
.ksong .kx{grid-column:2;font-style:normal;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:#E0574F;text-align:right}
.kmorewrap{margin:26px 0 0;text-align:center}
.knote{margin:26px 0 0;color:var(--muted);font-size:.92rem}
@media (max-width:760px){
  .ktools{grid-template-columns:1fr}
  .ksong em{display:none}
}

/* ---------- the gap under a hero -------------------------------------------------------
   A page hero already carries 64px of its own bottom padding, and the first band then added
   its full 150px on top: 192px of empty dark before the first word. The FIRST section after
   a hero gets a smaller top padding; every section after it keeps the full rhythm. */
main > section:first-child{padding-top:clamp(40px,4.5vw,64px)}