/* ============================================================================================
   Double Impact Events - rebuild
   Palette MEASURED off Danny's own video, not invented: the near-black warm ground of the
   room, the burnt gold of the sequin wall, the violet uplighting and the blue laser beams.
   See RECON-FINDINGS.md.
============================================================================================ */

:root{
  --ink:#0C0809;              /* the room, a shade under the measured #1A1213 for contrast */
  --ink-2:#140F11;
  --ink-3:#1E1619;
  --gold:#D08A33;             /* from the sequin wall, lifted to pass contrast on dark */
  --gold-hi:#F0B45C;
  --violet:#5B4BD4;           /* the uplighting */
  --violet-hi:#8F80FF;
  --laser:#B4B4E4;            /* the beam highlights */
  --paper:#F6F1EC;
  --muted:#A99E9A;
  --line:rgba(246,241,236,.14);

  --head:'Bebas Neue',Impact,'Haettenschweiler',sans-serif;
  --body:'Poppins',-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* the browser's OWN controls - the date picker, the select arrow, scrollbars - follow this.
     Without it the date field draws a black calendar icon on a near-black field. */
  color-scheme:dark;
}

@font-face{font-family:'Bebas Neue';src:url('../fonts/bebas-neue-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-300-normal.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-weight:300;line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:var(--head);font-weight:400;letter-spacing:.02em;line-height:.96;margin:0}
/* ⚠️ The body is Poppins 300, and the browser's own rule for <b> is font-weight:BOLDER, which
   is RELATIVE: from 300 it lands on 400. So bold looked like nothing at all. Poppins 700 is
   already loaded, it simply was never asked for. The places that want a lighter <b> on purpose
   (.pcard, .badge) are more specific, so they still win. */
b,strong{font-weight:700}
h1{font-size:clamp(3.2rem,9vw,7.5rem)}
h2{font-size:clamp(2.2rem,5vw,4rem)}
h3{font-size:clamp(1.4rem,2.4vw,2rem)}
.eyebrow{
  font-family:var(--body);font-weight:400;font-size:.72rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);margin:0 0 18px
}
.lede{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--muted)}
/* A body paragraph runs the FULL width of the row of pictures under it, not the width of
   the heading. Harry's call, and he is right: the narrow centred column is the tell. */
.band .lede{max-width:none}

/* ---------- the bar ---------------------------------------------------------------------- */
.bar{
  position:fixed;inset:0 0 auto 0;z-index:90;display:flex;align-items:center;gap:28px;
  padding:14px 26px;transition:background .4s var(--ease),backdrop-filter .4s var(--ease);
}
.bar.solid{background:rgba(12,8,9,.86);backdrop-filter:saturate(1.4) blur(14px);
           border-bottom:1px solid var(--line)}
.bar .mark{height:42px;width:auto;flex:0 0 auto}
.bar nav{margin-left:auto;display:flex;gap:26px;align-items:center}
.bar nav a{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);
           opacity:.86;transition:opacity .25s,color .25s}
.bar nav a:hover{opacity:1;color:var(--gold-hi)}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:999px;
  font-family:var(--body);font-weight:400;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;border:1px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s,background .25s,color .25s;
}
.btn-gold{background:var(--gold);color:#140C04;box-shadow:0 10px 30px rgba(208,138,51,.26)}
.btn-gold:hover{background:var(--gold-hi);transform:translateY(-2px);
                box-shadow:0 16px 40px rgba(208,138,51,.4)}
.btn-ghost{border-color:var(--line);color:var(--paper)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-hi);transform:translateY(-2px)}

/* ---------- hero: the Apple move ---------------------------------------------------------- */
/* The video is PINNED while the page scrolls past it, and the type lifts and fades out as it
   goes. Driven by one scroll handler writing two CSS variables - no library.                 */
.hero{height:190vh;position:relative}
.hero-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.hero-pin video,.hero-pin img.fallback{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(var(--heroScale,1));transition:transform .1s linear;
}
.hero-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(12,8,9,0) 0%, rgba(12,8,9,.42) 58%, rgba(12,8,9,.9) 100%),
    linear-gradient(180deg, rgba(12,8,9,.72) 0%, rgba(12,8,9,.1) 34%, rgba(12,8,9,.92) 100%);
}
.hero-mid{
  position:relative;text-align:center;padding:0 24px;
  opacity:var(--heroFade,1);transform:translateY(var(--heroLift,0px));
}
.hero-mid h1{
  /* the headline's two lines come from HERE, not from a <br> in the markup - see the note in
     df_hero_video(). 17ch breaks it after "Amazing Events." and still reads well longer. */
  max-width:17ch;margin-inline:auto;
  text-shadow:0 6px 40px rgba(0,0,0,.6);
  background:linear-gradient(180deg,#fff 0%,#F2DCBE 58%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-mid .lede{margin:22px auto 34px;color:#E6DCD4;max-width:46ch;
                text-shadow:0 2px 14px rgba(0,0,0,.75)}
/* The eyebrow sits on whatever the video is showing at that second, which can be a bright
   sequin wall. Gold alone disappears into it, so it gets its own small dark plate and a pair
   of hairlines - legible over every frame, and it reads as a label rather than a stray line. */
.hero-mid .eyebrow{
  display:inline-flex;align-items:center;gap:14px;color:var(--gold-hi);
  padding:8px 18px;border-radius:999px;
  background:rgba(12,8,9,.46);border:1px solid rgba(240,180,92,.3);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  text-shadow:0 1px 10px rgba(0,0,0,.8)
}
.hero-mid .eyebrow::before,.hero-mid .eyebrow::after{
  content:'';width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.hero-mid .eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.scroll-cue{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  opacity:var(--heroFade,1);display:flex;flex-direction:column;align-items:center;gap:10px
}
.scroll-cue i{display:block;width:1px;height:46px;background:linear-gradient(var(--gold),transparent);
              animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}
               50%{transform:scaleY(1);transform-origin:top}
               51%{transform:scaleY(1);transform-origin:bottom}
               100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- sections ---------------------------------------------------------------------- */
section{position:relative}
.band{padding:clamp(80px,11vw,150px) 0}
.band--ink2{background:var(--ink-2)}

/* the animated background: slow-drifting light, the room's own colours */
.glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  /* without this the blurred light is cut off dead straight at the top and bottom of the
     band, which draws a hard line across the page. Fade it out instead. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.glow b{
  position:absolute;border-radius:50%;filter:blur(110px);opacity:.26;
  animation:drift 26s var(--ease) infinite alternate;
}
.glow b:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-12vw;background:var(--violet)}
.glow b:nth-child(2){width:36vw;height:36vw;right:-8vw;bottom:-10vw;background:var(--gold);
                     animation-duration:32s;animation-delay:-8s}
@keyframes drift{to{transform:translate3d(6vw,4vw,0) scale(1.16)}}
.band > .wrap{position:relative;z-index:1}

/* scroll reveal */
.rise{opacity:0;transform:translateY(42px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rise.in{opacity:1;transform:none}

/* two big panels */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px;margin-top:52px}
.panel{
  position:relative;border-radius:20px;overflow:hidden;min-height:440px;display:flex;
  align-items:flex-end;isolation:isolate;border:1px solid var(--line)
}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
           transition:transform 1.1s var(--ease)}
.panel::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,8,9,.1) 10%,rgba(12,8,9,.9) 92%)}
.panel:hover img{transform:scale(1.07)}
.panel .inner{padding:34px}
.panel p{color:#D8CEC8;margin:10px 0 0;max-width:40ch}

/* the service grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:20px;margin-top:52px}
.card{
  position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;display:flex;
  align-items:flex-end;border:1px solid var(--line);isolation:isolate
}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
          transition:transform .9s var(--ease),filter .9s var(--ease);filter:saturate(.84)}
.card::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,8,9,0) 36%,rgba(12,8,9,.92) 100%)}
.card:hover img{transform:scale(1.08);filter:saturate(1.12)}
.card .inner{padding:20px 22px;width:100%}
.card h3{font-size:1.45rem}
.card span{display:inline-block;margin-top:6px;font-size:.68rem;letter-spacing:.24em;
           text-transform:uppercase;color:var(--gold);opacity:0;transform:translateY(8px);
           transition:opacity .4s var(--ease),transform .4s var(--ease)}
.card:hover span{opacity:1;transform:none}

/* why us */
.reasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:28px;margin-top:52px}
.reason{padding:28px;border:1px solid var(--line);border-radius:16px;background:rgba(246,241,236,.025)}
.reason .n{font-family:var(--head);font-size:2.6rem;color:var(--gold);line-height:1}
.reason h3{font-size:1.15rem;font-family:var(--body);font-weight:700;margin:12px 0 8px;
           letter-spacing:0;line-height:1.35}
.reason p{color:var(--muted);font-size:.94rem;margin:0}

/* contact band */
.callout{text-align:center;padding:clamp(80px,11vw,140px) 0;
  background:linear-gradient(180deg,var(--ink) 0%,#1A1026 52%,var(--ink) 100%)}
.phone{font-family:var(--head);font-size:clamp(2.6rem,7vw,5rem);color:var(--gold-hi);
       display:inline-block;margin:14px 0 6px;letter-spacing:.03em}
.phone:hover{color:#fff}

footer{border-top:1px solid var(--line);padding:56px 0 40px;background:var(--ink-2)}
/* six columns now the Booking and About lists are in, so the brand block gets more room
   and the link columns get less. At 190px they wrapped and left Contact on its own. */
.fgrid{display:grid;grid-template-columns:1.4fr repeat(5,minmax(0,1fr));gap:28px}
@media (max-width:1100px){
  .fgrid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
}
footer h4{font-family:var(--body);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
          color:var(--gold);margin:0 0 14px;font-weight:400}
footer a{display:block;color:var(--muted);font-size:.92rem;padding:4px 0;transition:color .25s}
footer a:hover{color:var(--paper)}
.legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);
       color:var(--muted);font-size:.8rem;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}

@media (max-width:760px){
  .bar nav a:not(.btn){display:none}
  .hero{height:150vh}
  .panel{min-height:340px}
}
/* someone who asked for less movement gets less movement */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                       transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
}