/* ==========================================================================
   Raptor Drone Shows
   Palette sampled from the brand's own material: the red is the wordmark's
   #D80102, the white is the measured colour of the drone light in the film,
   the black is the sky it flies in.
   ========================================================================== */

:root{
  --void:      #07070B;   /* night sky, page ground */
  --carbon:    #0C0C12;   /* raised surface */
  --ember:     #D80102;   /* brand red, sampled from the wordmark */
  --ember-lt:  #FF4042;   /* the same red, lifted for small type to clear AA */
  --ember-dim: #8E0102;
  --beacon:    #E3E3F0;   /* drone light, sampled from the swarm */
  --haze:      #8C90A3;   /* secondary text */
  --dim:       #767B8C;   /* micro text */
  --rule:      rgba(227,227,240,.13);
  --rule-lit:  rgba(227,227,240,.34);

  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --nav-h: 100px;
  --gutter: clamp(20px, 5vw, 76px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  background:var(--void);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  color-scheme:dark;
  scrollbar-color:#23242E var(--void);
  scrollbar-width:thin;
  /* Reserved in both states, so releasing the page shifts nothing sideways. */
  scrollbar-gutter:stable;
}

/* While the intro waits and while it plays, the page underneath holds still. */
html[data-intro]{overflow:hidden;overscroll-behavior:none}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:#23242E;border-radius:0}
::-webkit-scrollbar-thumb:hover{background:#343642}

body{
  background:var(--void);
  color:var(--beacon);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{display:block;max-width:100%;height:auto}

::selection{background:var(--ember);color:#fff}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:fixed;top:-100px;left:var(--gutter);z-index:200;
  background:var(--ember);color:#fff;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:12px 18px;text-decoration:none;
  transition:top .2s var(--ease);
}
.skip:focus{top:14px}

:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
}

/* --------------------------------------------------------------------------
   Curtain: one red drone light, sitting exactly where the show's first
   beacon appears, so the handoff to frame one is invisible.
   -------------------------------------------------------------------------- */

/* The curtain and the intro exist only for scripted visitors. Without
   JavaScript nothing would ever lift them, so they must not cover the page. */
.curtain,.intro{display:none}

html[data-js] .curtain{
  position:fixed;inset:0;z-index:150;
  background:var(--void);
  display:grid;place-items:center;
  transition:opacity .9s var(--ease);
}
html[data-js] .curtain[data-done]{opacity:0;pointer-events:none}
html[data-js] .curtain[hidden]{display:none}

.curtain__beacon{
  position:absolute;
  left:50%;top:58%;
  width:9px;height:9px;border-radius:50%;
  background:#ff5a5c;
  box-shadow:0 0 14px 3px rgba(216,1,2,.85), 0 0 46px 12px rgba(216,1,2,.35);
  transform:translate(-50%,-50%);
  animation:pulse 1.9s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.82)}
  50%    {opacity:1;  transform:translate(-50%,-50%) scale(1.12)}
}

.curtain__read{
  position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);
  display:flex;align-items:baseline;gap:6px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;
}
.curtain__unit{color:var(--dim);opacity:.5}
.curtain__label{margin-left:14px;color:var(--dim);opacity:.65}

/* --------------------------------------------------------------------------
   Menu. Book a show is there from the start; the logo arrives by flight.
   -------------------------------------------------------------------------- */

/* The nav is always present because the flying lockup lives inside it. It
   sits above the loading curtain so Book a show is there from the first
   frame; everything else in it is invisible until the flight lands. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:160;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
  pointer-events:none;
}

/* No bar and no edge. The scrim is the page colour, solid at the very top and
   fading to fully transparent below the nav, so against the page it cannot
   be seen at all. It only reveals itself by softly dimming content that
   scrolls up beneath the lockup. */
.nav__bg{
  position:absolute;left:0;right:0;top:0;
  height:calc(var(--nav-h) + 56px);
  background:linear-gradient(to bottom,
    rgba(7,7,11,.94) 0%,
    rgba(7,7,11,.78) 45%,
    rgba(7,7,11,.32) 75%,
    rgba(7,7,11,0) 100%);
  opacity:0;
}

/* The logo is one image, the drone eagle and the wordmark baked together, so
   the flight moves a single element and nothing can drift apart. The file
   carries about 1.5% transparent margin, which is why the mark looks a hair
   smaller than the box. The scroll flight drives its transform. */
.nav__lockup{
  position:relative;
  flex:0 0 auto;
  width:118px;height:79px;
  text-decoration:none;
  pointer-events:none;
}
.nav__logo{
  position:absolute;left:0;top:0;
  width:118px;height:auto;
  max-width:none;
  opacity:0;
  transform-origin:left center;
  will-change:transform,opacity;
}

/* The bloom's white, from the preview: a flat white core with the faintest
   falloff. Fixed to the viewport but living in the menu, painted above the
   logo and below Book a show. */
.nav__flash{
  position:fixed;inset:0;
  background:radial-gradient(circle at 50% 44%, #fff 0%, #fff 45%, rgba(255,255,255,.97) 100%);
  opacity:0;
  pointer-events:none;
}

/* Always visible and always clickable, from the moment the page opens. */
.nav__links{
  position:relative;
  display:flex;align-items:center;gap:clamp(18px,3vw,38px);
  pointer-events:auto;
}

.nav__cta{
  display:inline-block;
  background:var(--ember);color:#fff;
  font-family:var(--display);font-weight:800;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
  padding:13px 20px 11px;
  text-decoration:none;
  border-radius:2px;
  transition:background .22s var(--ease), color .22s var(--ease);
}
.nav__cta:hover,.nav__cta:focus-visible{background:var(--beacon);color:var(--void)}

/* --------------------------------------------------------------------------
   Intro. A layer over the page rather than a section in it: the page itself
   begins with the reel, and the intro lifts off it as the flight lands.
   -------------------------------------------------------------------------- */

html[data-js] .intro{
  position:fixed;inset:0;z-index:140;
  display:block;
  background:var(--void);
  overflow:hidden;
}
html[data-js] .intro[hidden]{display:none}

.intro__film{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  transform-origin:50% 50%;
  will-change:filter,transform,opacity;   /* the bloom drives all three */
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--ember-lt);
  display:flex;align-items:center;gap:14px;
  margin-bottom:26px;
}
.eyebrow::after{
  content:"";height:1px;flex:0 0 46px;background:var(--ember);opacity:.55;
}
.eyebrow--light{color:var(--haze)}
.eyebrow--light::after{background:var(--haze)}

.display{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.7rem,5.3vw,4.9rem);
  line-height:.88;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--beacon);
}
.display__accent{color:var(--ember)}

/* A second headline inside a section that already has a big one. Two classes,
   so the phone type scale further down cannot outrank it. */
.display.display--sub{font-size:clamp(1.9rem,3.3vw,3.1rem)}

.body-lg{
  font-size:clamp(15px,1.15vw,17.5px);
  line-height:1.62;
  color:var(--haze);
  max-width:44ch;
}

/* --------------------------------------------------------------------------
   Reel
   -------------------------------------------------------------------------- */

/* The page's first screen: the loop full bleed with the line directly under
   it. 16:9 wherever the window allows, so desktop never crops the footage, and
   taller on a phone so it is not reduced to a letterbox strip. */
.reel{
  position:relative;
  background:var(--void);
}

.reel__frame{
  position:relative;
  height:clamp(420px,56.25vw,100svh);
  overflow:hidden;
}

.reel__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* The bottom edge lands on the page's own black so the line below joins the
   footage with no seam. The top veil keeps the menu readable. */
.reel__shade{
  position:absolute;inset:0;
  pointer-events:none;
  background:
    linear-gradient(to top,
      var(--void) 0%,
      rgba(7,7,11,.4) 12%,
      rgba(7,7,11,0) 30%),
    linear-gradient(to bottom,
      rgba(7,7,11,.5) 0%,
      rgba(7,7,11,0) 24%);
}

.reel__caption{
  padding:clamp(22px,3vw,44px) var(--gutter) 0;
  text-align:center;
}

/* The caption mirrors the booking headline: a white line, then a red one.
   Two classes, so the phone type scale further down cannot outrank it. */
.display.reel__title{
  font-size:clamp(2.5rem,6.2vw,6.4rem);
}

/* --------------------------------------------------------------------------
   Story
   -------------------------------------------------------------------------- */

.story{
  position:relative;
  scroll-margin-top:var(--nav-h);
  background:var(--void);
  padding:clamp(74px,11vh,132px) var(--gutter) clamp(26px,4vh,54px);
}

/* The same measure and columns as the booking grid below it. */
.story__inner{
  max-width:1220px;margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(40px,7vw,110px);
  align-items:start;
}

/* Drops the copy level with the headline rather than the eyebrow above it. */
.story__body{padding-top:clamp(0px,3vw,44px)}

.story__lead{
  font-size:clamp(17.5px,1.5vw,22px);
  line-height:1.55;
  color:var(--beacon);
  max-width:40ch;
}
.story__body p + p{margin-top:22px}

/* The second block has no eyebrow above it, so both columns start level. */
.story__inner--next{margin-top:clamp(58px,8vh,112px)}
.story__inner--next .story__body{padding-top:0}

/* What you get, each line marked by a single drone light. One hairline holds
   the whole group to the copy above; a rule per item made the rows lurch
   whenever one wrapped and its neighbour did not, and mono uppercase turned
   six readable phrases into a parts list. */
.spec{
  list-style:none;
  display:grid;
  gap:17px;
}
.spec li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  font-size:clamp(15.5px,1.1vw,16.8px);
  line-height:1.5;
  color:var(--beacon);
}
.spec li::before{
  content:"";
  flex:0 0 auto;
  width:6px;height:6px;
  margin-top:.58em;            /* sits on the first line, not above it */
  border-radius:50%;
  background:var(--beacon);
  box-shadow:0 0 9px 2px rgba(227,227,240,.3);
}

/* --------------------------------------------------------------------------
   Booking
   -------------------------------------------------------------------------- */

.booking{
  position:relative;
  scroll-margin-top:var(--nav-h);
  background:var(--void);
  padding:clamp(88px,13vh,150px) var(--gutter) clamp(72px,10vh,120px);
  /* A single dim glow on the horizon line. The only decoration on the page. */
  background-image:radial-gradient(72% 38% at 50% 0%, rgba(216,1,2,.075) 0%, rgba(7,7,11,0) 70%);
}

.booking__inner{
  max-width:1220px;margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(48px,7vw,110px);
  align-items:start;
}

.booking__lede{padding-top:6px}

.booking__note{
  margin-top:34px;padding-top:22px;
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;
  line-height:1.9;
  color:var(--dim);
  max-width:32ch;
}

/* The tagline, lifted out of the note it sits in. */
.booking__tag{
  display:block;
  margin-top:10px;
  color:var(--beacon);
  letter-spacing:.2em;
}

.display + .body-lg{margin-top:30px}

/* --------------------------------------------------------------------------
   Form. Read as a manifest: a mono label, a rule, and the answer.
   -------------------------------------------------------------------------- */

.panel{
  position:relative;
  background:var(--carbon);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:clamp(28px,3.4vw,48px);
}

.field{margin-bottom:30px}

/* Fields that belong to one another share a line, and stack on a narrow
   panel. The rows carry the spacing so the fields inside them do not
   double it up. */
.field-row{
  display:grid;
  gap:0 clamp(18px,2.2vw,30px);
}
.field-row--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.field-row--3{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:760px){
  .field-row--2,.field-row--3{grid-template-columns:1fr}
}

.field__label{
  display:block;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--haze);
  margin-bottom:11px;
  transition:color .2s var(--ease);
}

/* The one required mark, in the brand's red. */
.field__req{margin-left:4px;color:var(--ember-lt)}

.field__input{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--rule-lit);
  border-radius:0;
  padding:9px 0 13px;
  font-family:var(--body);font-size:16.5px;
  color:var(--beacon);
  transition:border-color .22s var(--ease);
}
.field__input::placeholder{color:var(--dim);opacity:1}
.field__input:focus{outline:none;border-bottom-color:var(--ember)}
.field:focus-within .field__label{color:var(--beacon)}

.field__input--area{
  resize:vertical;
  min-height:118px;
  line-height:1.6;
}

/* Native date picker, restyled to sit in the manifest. color-scheme:dark on
   <html> already gives it a dark calendar and a light icon. */
.field__input--date{
  -webkit-appearance:none;appearance:none;
  display:block;
  min-height:48px;          /* iOS collapses an empty date input without this */
  text-align:left;
  cursor:pointer;
}
.field__input--date::-webkit-date-and-time-value{text-align:left}
/* Empty reads like a placeholder, full reads like an answer. */
.field__input--date[data-empty]:not(:focus){color:var(--dim)}
.field__input--date::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.55;
  padding:4px;
  transition:opacity .2s var(--ease);
}
.field__input--date:hover::-webkit-calendar-picker-indicator,
.field__input--date:focus::-webkit-calendar-picker-indicator{opacity:1}

.field[data-invalid] .field__input{border-bottom-color:var(--ember)}
.field__error{
  margin-top:9px;
  font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;
  color:var(--ember-lt);
}

/* Honeypot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;
  margin-top:10px;
  padding:19px 30px 16px;
  background:var(--ember);
  border:0;border-radius:2px;
  color:#fff;
  font-family:var(--display);font-weight:800;font-size:19px;
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
  cursor:pointer;
  transition:background .24s var(--ease), color .24s var(--ease);
}
.btn:hover:not(:disabled),
.btn:focus-visible:not(:disabled){background:var(--beacon);color:var(--void)}
.btn:disabled{background:var(--ember-dim);cursor:progress;color:rgba(255,255,255,.72)}
.btn__label{position:relative}

.form__status{
  margin-top:18px;
  font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;line-height:1.7;
  color:var(--ember-lt);
}

.sent{padding:14px 0 6px}
.sent__title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.7rem,2.8vw,2.4rem);
  line-height:1;text-transform:uppercase;
  color:var(--beacon);
  margin-bottom:20px;
}
.link-btn{
  margin-top:28px;
  background:none;border:0;padding:0;
  font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--haze);
  cursor:pointer;
  border-bottom:1px solid var(--rule-lit);
  padding-bottom:4px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.link-btn:hover{color:var(--beacon);border-bottom-color:var(--ember)}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot{
  border-top:1px solid var(--rule);
  padding:34px var(--gutter);
  display:flex;flex-wrap:wrap;gap:12px 28px;
  align-items:baseline;justify-content:space-between;
}
.foot__mark{
  font-family:var(--display);font-weight:800;font-size:17px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--haze);
}
.foot__meta{
  font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width:1000px){
  .booking__inner{grid-template-columns:1fr;gap:52px}
  .story__inner{grid-template-columns:1fr;gap:26px}
  .story__body{padding-top:0}
  .spec{gap:15px}
  .body-lg{max-width:52ch}
}

@media (max-width:640px){
  :root{--nav-h:84px}
  .reel__frame{height:62svh}
  .nav__lockup{width:96px;height:65px}
  .nav__logo{width:96px}
  .nav__cta{font-size:13px;padding:11px 14px 9px;letter-spacing:.1em}
  .nav__links{gap:14px}
  .display{font-size:clamp(2.6rem,12vw,4rem)}
  .panel{padding:26px 20px 30px}
  .curtain__read{bottom:6vh}
}

/* --------------------------------------------------------------------------
   Reduced motion: no intro at all. The menu has its logo from the start and
   the reel waits on its poster for someone to press Play.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .curtain__beacon{animation:none;opacity:.9}
  .nav__cta,.btn,.field__input,.link-btn{transition:none}
}

html[data-static] .nav__lockup{pointer-events:auto}
html[data-js][data-static] .curtain,
html[data-js][data-static] .intro{display:none}