/* ==========================================================================
   Spark — create-your-own-event page (PSD/spark web 2.psd, 1366 x 2886)

   Coordinates in comments are the comp's own: "comp" is a position in the PSD,
   "ink" is the first painted pixel of a glyph as measured off the flattened
   render. Sizes come from css/tokens.css, where every display size is solved
   against the comp's measured ink width.

   This comp is structurally simpler than the other two — no carousels, no
   inverted colour band, one body weight — but it introduces two things neither
   of the others has: an italic display cut, and a real contact form.
   ========================================================================== */

/* --- Shared helpers ------------------------------------------------------- */

/* Every Bebas cut in this comp is caps-only, so the source copy is written in
   sentence case (which is what a CMS would hold) and capitalised here. That
   also quietly absorbs the comp's stray lowercase in "TALENT & eNTERTAINMENT",
   which is invisible in a font with no lowercase. */
:root { --head-inset: 16px; }

.caps {
  font-family: var(--font-caps);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--text);
}

.accent { color: var(--orange); }

/* The comp's `BebasNeuePro-BoldItalic`. There is no free Bebas italic — and
   `font-style: italic` would only trigger a synthetic oblique on top of
   whatever else is applied — so the slant is drawn as a transform instead.
   Measured off the tile labels' ink at 7.59 degrees. `transform-origin: 0 100%`
   pivots on the baseline so the glyphs lean without drifting off it; the
   default centre origin shifts the whole line left by half the slant. Used by
   .tile__label and .step__num. */

/* font-weight is stated because two of these are `h2` elements — the comp gives
   the section its eyebrow as the only heading — and the UA default would set
   those bold, which measured 7% wide against the comp. */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--orange);
}

/* "See all capabilities" / "Explore our works" — a small caps link with a
   trailing arrow, used once per section head. */
.link-small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-link-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.link-small .arrow {
  width: 22px;
  height: 12px;
  color: var(--orange);
}

/* A section head that puts a heading and a link on one baseline. */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 32px 0 var(--head-inset);
}

/* Every section title and eyebrow sits about 16px inside the column the rules
   define — the comp puts them on x70-75 against rules that start at 55. */
.objectives > .shell > .eyebrow,
.tiles > .shell > .eyebrow,
.objectives__title { margin-left: var(--head-inset); }

/* The five full-width section rules. Flat #222121, 1px, and inset on the right
   only: the comp runs them x55..1265 inside a column that ends at 1311.

   Every band ends on one of these, so they double as the page's vertical
   skeleton: each shell is a flex column with a min-height taken from the comp's
   own band, and `margin-top: auto` drops the rule onto the band's bottom edge.
   That way a band's height is stated once, in one place, instead of being the
   accumulated sum of its children's margins. */
.rule {
  align-self: stretch;        /* the hero column packs to flex-start */
  height: 1px;
  margin-top: auto;
  margin-right: var(--rule-inset-right);
  background: var(--rule-h);
}

.hero__inner,
.objectives .shell,
.tiles .shell,
.process .shell,
.cases .shell {
  display: flex;
  flex-direction: column;
}

/* Comp band heights, rule to rule. */
.objectives    .shell { min-height: 269px; }   /* 604 -> 873 */
.tiles         .shell { min-height: 394px; }   /* 873 -> 1267 */
.process       .shell { min-height: 361px; }   /* 1267 -> 1628 */
.cases         .shell { min-height: 387px; }   /* 1628 -> 2015 */

/* ==========================================================================
   Header — comp band 30..81
   ========================================================================== */

/* Nothing here. The header is the shared sticky bar in base.css, the same one
   the other two pages use, on instruction.

   It used to be this page's own: absolute, transparent, sitting *over* the hero
   photograph the way the comp draws it. That is gone, and with it the argument
   for it — a bar that follows you down the page needs a background, and a
   translucent one over a photo is the worst of both. So the bar is 95px of flat
   black above the picture, and the hero band below is unchanged: the photo
   still starts at the band's own top edge, the composition inside it still has
   the comp's spacing, and the page is simply 95px taller. Same trade as
   sponsorship, same reasoning. */

/* ==========================================================================
   Hero — comp band 150..650
   ========================================================================== */

/* The band runs to the rule at comp y604, not to the photo's own y650: the
   photo has already faded to solid black by y640, so clipping it at the rule
   loses nothing and keeps the rule where the comp puts it. */
.hero {
  position: relative;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 650px;
  object-fit: cover;
  object-position: right top;
}

.hero__inner {
  position: relative;
  align-items: flex-start;    /* the CTA is a flex item and would stretch */
  min-height: 605px;
  padding-top: 132px;         /* puts the first cap top on comp y150 */
}

.hero__title {
  margin-left: 6px;           /* comp 61 */
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
}

.hero__body {
  width: 530px;
  margin: 20px 0 0 7px;       /* comp: body ink top 406 */
  font-size: var(--fs-hero-body);
  line-height: var(--lh-hero-body);
}

/* The hero button and the header pill are the same component at two sizes:
   an r2 orange plate with caps set at tracking 100. */
.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--r-pill);
  background: var(--orange);
  color: var(--text);
  font-size: var(--fs-button);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.button .arrow {
  width: 26px;
  height: 12px;
}

.hero__cta {
  margin: 57px 0 0 5px;       /* comp: button top 543 */
  padding: 11px 21px;         /* comp box 268x36 */
}

/* ==========================================================================
   Every great event — comp band 636..876
   ========================================================================== */

.objectives .shell { padding-top: 27px; }   /* comp: rule 604 -> eyebrow ink 636 */

.objectives__title {
  margin-top: 6px;
  font-size: var(--fs-h2-lg);
  line-height: 1;
}

/* Six columns, and the comp's dividers are not evenly spaced: they sit at
   x225/435/670/880/1091 inside a 55..1265 band, so the segments run
   170/210/235/210/211/174. Those proportions are reproduced as `fr` rather
   than normalised to six equal columns — normalising moved the outer icons by
   up to 36px, which is a bigger lie than the uneven spacing is. */
.objectives__grid {
  display: grid;
  grid-template-columns: 170fr 210fr 235fr 210fr 211fr 174fr;
  margin-top: 20px;
  margin-right: var(--rule-inset-right);
}

.objective {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 8px 10px;
}

/* The dividers are the cells' own left edges, so they cannot drift out of
   register with the columns they divide. */
.objective + .objective { border-left: 1px solid var(--rule-v); }

.objective:last-child { transform: translateX(19px); }

.objective__icon {
  width: 52px;
  height: 52px;
}

.objective__label {
  margin-top: 17px;
  font-size: var(--fs-obj-label);
  line-height: var(--lh-obj-label);
  text-align: center;
}

/* ==========================================================================
   Build for every kind of moments — comp band 894..1269
   ========================================================================== */

.tiles .shell { padding-top: 16px; }

/* Same treatment as the case row: the gutters are tracks, so the tiles land on
   the comp's own edges. Seven of the eight are 146 wide, the fifth is 145, and
   one gutter is 5px where the rest are 7 — eight equal columns rounded all of
   that away and left every tile fractionally scaled. */
.tiles__grid {
  display: grid;
  grid-template-columns:
    146fr 7fr 146fr 7fr 146fr 5fr 146fr 7fr 145fr 7fr 146fr 7fr 146fr 7fr 146fr;
  aspect-ratio: 1214 / 320;
  margin: 23px 28px 0 14px;   /* comp: tiles run x69..1283 */
}

.tile:nth-child(2) { grid-column: 3; }
.tile:nth-child(3) { grid-column: 5; }
.tile:nth-child(4) { grid-column: 7; }
.tile:nth-child(5) { grid-column: 9; }
.tile:nth-child(6) { grid-column: 11; }
.tile:nth-child(7) { grid-column: 13; }
.tile:nth-child(8) { grid-column: 15; }

.tile { position: relative; }

.tile__art {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Labels are bottom-aligned rather than top-aligned. The comp starts six of
   the eight at y1187, the three-line one at 1165 and two more at 1194 — but
   all of them finish within 7px of each other, so the bottom is the edge the
   designer was actually working to. */
.tile__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;               /* comp: labels end 1240, tile ends 1252 */
  padding: 0 6px;
  text-align: center;
  font-family: var(--font-caps);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-tile-label);
  line-height: var(--lh-tile-label);
}

/* Each line carries its own skew, rather than the block carrying one for all
   of them. Skewing the block pivots every line about a single baseline, so the
   top line drifts right of the bottom one by the full line height times the
   slant — about 4px on a two-line label, which reads as a stagger the comp does
   not have. Per line, each leans about its own baseline, as a real italic
   would. */
.tile__line {
  display: block;
  transform: skewX(var(--ital-slant));
  transform-origin: 0 100%;
}

/* ==========================================================================
   From start to blast off — comp band 1290..1631
   ========================================================================== */

.process .shell { padding-top: 22px; }

.process__grid {
  padding: 0;                 /* base.css resets ul, not ol — and an
                                 ordered list also needs its markers off */
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 21px;                  /* comp: 286-wide cards on 21px gutters */
  margin: 7px 32px 0 18px;   /* comp: cards run x73..1279 */
}

/* Unlike the other two comps' cards, these are a flat fill with a flat border:
   #222121 inside a 1px #A2A2A2 stroke, no gradient anywhere. */
/* A column, so the capability rows can be pinned to the foot with margin-top:
   auto. Grid stretches all four to the tallest, so that is what lines the rows
   up across the row of cards.

   The 42px right inset used to be the card's, to make the body wrap where the
   comp wraps it. It is the body's own now: the capability labels below need the
   full width, and "Ticketing & Audience Access" does not fit without it. */
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 276px;
  padding: 24px 11px 0;
  background: var(--panel);
  border: 1px solid var(--rule-v);
}

.step__num {
  display: block;
  font-family: var(--font-caps);
  font-weight: 400;
  font-size: var(--fs-numeral);
  line-height: 0.72;
  color: var(--orange);
  transform: skewX(var(--ital-slant));
  transform-origin: 0 100%;
}

.step__title {
  margin-top: 15px;
  font-size: var(--fs-process-title);
  line-height: var(--lh-process-title);
}

.step__body {
  margin-top: 9px;
  padding-right: 42px;         /* comp: body wraps at ~215, not at 247 */
  font-size: var(--fs-process-body);
  line-height: var(--lh-process-body);
}

/* --- The two capabilities each step owns -------------------------------

   The comp puts one decorative icon in the corner of each card and lists all
   eight capabilities separately, in a row of its own further down the page.
   On instruction that row is gone and its eight items live here, two per card,
   as labelled rows rather than decoration.

   Anchored to the card's foot rather than following the body copy, because the
   four bodies wrap to two, two, two and three lines and the rows would
   otherwise sit at four different heights across one row of cards. */
.step__caps {
  margin-top: auto;
  padding: 0 0 4px;
  list-style: none;
}

.step__cap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
}

/* Between the two, not above the first or below the last. */
.step__cap + .step__cap { border-top: 1px solid var(--rule-v); }

.step__cap-icon {
  flex: none;
  width: 34px;
  height: 34px;
}

.step__cap-label {
  font-size: var(--fs-caps-label);
  line-height: var(--lh-caps-label);
}

/* ==========================================================================
   real moments. real impact. — comp band 1656..2018
   ========================================================================== */

.cases .shell { padding-top: 23px; }

.cases__title {
  font-size: var(--fs-h2-lg);
  line-height: 1;
}

/* The three cards are not equal thirds: the comp draws them 382 / 378 / 378
   wide with 35px and 31px between them. Splitting the row evenly instead put
   the middle card 4px off and cost more on the diff than every other
   normalisation on this page combined, so the gutters are tracks of their own
   and the proportions are the comp's. */
.cases__grid {
  display: grid;
  grid-template-columns: 382fr 35fr 378fr 31fr 378fr;
  aspect-ratio: 1204 / 266;
  margin: 23px 33px 0 19px;   /* comp: cards run x74..1278 */
}

.case:nth-child(2) { grid-column: 3; }
.case:nth-child(3) { grid-column: 5; }

.case { position: relative; }

.case__link {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border: 1px solid var(--rule-v);
  border-radius: var(--r-case);
}

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

/* The comp's three cards were flattened artwork that already went dark under
   the copy. The real event photography that replaced them does not, so the
   plate the copy needs is drawn here rather than baked into each JPEG — one
   rule instead of three exports to redo, and it holds when the phone layout
   changes the card's proportions.

   It starts at 38%, above .case__body's 46%, so the title lands on a wash that
   has already begun rather than on an edge. Transparent -> 0.72 -> 0.9 rather
   than a straight ramp: a linear gradient over a photograph greys the midtones
   long before it darkens the shadows, and the middle stop keeps the picture
   readable through the top half of the fade. */
.case__link::after {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  background: linear-gradient(180deg,
    rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.72) 46%, rgb(0 0 0 / 0.9) 100%);
  pointer-events: none;
}

.case__body { z-index: 1; }

.case__body {
  position: absolute;
  left: 23px;                 /* comp: card x74, title ink x98 */
  right: 20px;
  top: 123px;                 /* comp: card y1727, title ink y1853 */
}

.case__name {
  font-size: var(--fs-case-title);
  line-height: 1;
}

/* Narrower than the card, so the copy breaks where the comp breaks it: the
   comp wraps these at 215-239px inside a 380px card, which no full-width text
   box would reproduce. Expressed as a fraction so it survives reflow. */
.case__text {
  width: 72%;
  margin-top: 3px;
  font-size: var(--fs-case-body);
  line-height: var(--lh-case-body);
}

.case__tags {
  display: flex;
  gap: 7px;
  margin-top: 14px;
}

/* The comp draws these six pills as white text on a white fill, so every label
   is invisible in the source — verified pixel by pixel, zero luminance
   variation across all six. Rendered as an orange outline with white text
   instead: the smallest change that makes them readable, and it matches the
   outline-pill idiom the rest of the site already uses. Flagged in README. */
.tag {
  display: inline-flex;
  align-items: center;
  height: 19px;               /* comp box 90x19 on 8px side padding */
  padding: 0 8px;
  border: 1px solid var(--orange);
  border-radius: 3px;
  font-size: var(--fs-case-tag);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   one team. end-to-end — comp band 2037..2266
   ========================================================================== */

/* ==========================================================================
   Closing CTA and contact form — comp band 2295..2783
   ========================================================================== */

/* The band's own top edge is the rule at comp y2264; everything inside is
   offset from there rather than from a shared padding, because the photo, the
   headline column and the form all start at different heights. */
.closing {
  position: relative;
  padding-bottom: 100px;      /* comp: last ink 2783, canvas 2886 */
}

/* The photo covers only the left half of the band and is not a backdrop for
   the form, so it is placed rather than stretched. */
.closing__bg {
  position: absolute;
  left: 37px;
  top: 10px;                  /* comp: band 2265, photo 2275 */
  width: 712px;
  height: 510px;
  object-fit: cover;
}

.closing__inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.closing__copy { padding-top: 79px; }   /* comp: "READY TO" ink 2350 */

.closing__eyebrow {
  margin-left: 18px;
  font-size: var(--fs-ready);
  line-height: 1;
  letter-spacing: var(--ls-wide);
  color: var(--orange);
}

.closing__title {
  margin: 12px 0 0 14px;
  font-size: var(--fs-footer-head);
  line-height: var(--lh-footer-head);
}

.closing__lede {
  margin: 45px 0 0 14px;
  font-size: var(--fs-footer-body);
  line-height: var(--lh-footer-body);
  letter-spacing: var(--ls-wide);
}

/* --- The enquiry form ---------------------------------------------------- */

.enquiry {
  width: 495px;               /* comp: fields run x778..1273 */
  margin-right: 38px;         /* comp: shell ends 1311, fields end 1273 */
  flex: none;
  padding-top: 70px;          /* comp: eyebrow ink 2339 */
}

.enquiry__eyebrow { margin-left: 1px; }

/* The comp's four fields and its submit button are gone: the form is a Tally
   embed now, and everything inside the frame is styled at tally.so rather than
   here. `.field`, `.field--half`, `.field--area`, `.enquiry__grid` and
   `.enquiry__submit` went with them, in this block, the hover block and the
   phone block.

   The frame is given a floor rather than a fixed height. The embed is loaded
   with `dynamicHeight=1`, so Tally's script sets the real height once it knows
   the content; 579 is the value their snippet ships with and is what shows
   until then, or permanently if their script never arrives. */
.enquiry__embed {
  margin-top: 6px;
  min-height: 579px;
}

.enquiry__embed iframe {
  display: block;             /* an inline iframe sits on the text baseline and
                                 leaves a few px of descender gap under it */
  width: 100%;
  border: 0;
}

.enquiry__alt {
  margin-top: 10px;
  font-size: var(--fs-field);
  letter-spacing: var(--ls-wide);
  color: var(--text-3);
}

.enquiry__alt a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--orange);
}

.enquiry__alt .arrow {
  width: 15px;
  height: 9px;
}

/* ==========================================================================
   The portfolio download gate

   "Explore our works" used to hand over the credentials deck on click. It now
   asks for a name and a company email first.

   The design arrived as a phone mockup only — a bottom sheet — so everything
   below 1023px is its numbers, and the desktop dialog is built from the same
   set: a centred card rather than a sheet, because there is no bottom edge to
   rise from on a desktop and a full-width sheet at 1366px would be a banner.

   It is a native <dialog>, which is doing more work than it looks: the focus
   trap, Esc-to-close, making the page behind it inert and the backdrop are all
   the element's own, and every one of them is a thing hand-rolled overlays get
   wrong.
   ========================================================================== */

.gate {
  width: min(440px, calc(100vw - 40px));
  padding: 0;                    /* the UA gives dialog 1em; the panel owns it */
  border: 1px solid var(--gate-edge);
  border-radius: 20px;
  background: var(--gate-bg);
  color: var(--text);
}

/* Not a child element — ::backdrop is the element's own layer, so it cannot be
   scrolled away from or land under anything. */
.gate::backdrop {
  background: var(--gate-scrim);
  backdrop-filter: blur(3px);
}

.gate__panel {
  position: relative;
  padding: 30px 30px 26px;
}

/* Phone only: the sheet rises from the bottom edge and gets a grab handle to
   say so. There is nothing to drag on the desktop dialog. */
.gate__grip { display: none; }

.gate__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.gate__eyebrow { font-size: 12px; letter-spacing: 0.1em; }

.gate__title {
  margin-top: 12px;
  font-size: 32px;
  line-height: 31px;
}

.gate__lede {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 19px;
  color: var(--text-2);
}

/* The two fields and the CTA are a Tally embed, so .gate__label, .gate__req,
   .gate__field and .gate__submit are gone with them — everything inside the
   frame is styled at tally.so and nothing here can reach it. What is left of
   this component is the chrome the design draws around the form.

   314 is the height Tally's snippet ships with, and the frame is loaded with
   `dynamicHeight=1`, so their script replaces it once it knows the content. It
   is a floor rather than a fixed height: if that script never arrives, the
   frame keeps 314 and scrolls internally instead of collapsing. */
.gate__embed {
  margin-top: 20px;
  min-height: 314px;
}

.gate__embed iframe {
  display: block;             /* an inline iframe sits on the text baseline and
                                 leaves a few px of descender gap under it */
  width: 100%;
  border: 0;
}

.gate__note {
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 16px;
  color: var(--placeholder);
}

/* ==========================================================================
   Reflow
   The comp is a 1366 design and mobile is a separate pass, so this only has to
   hold the desktop range together. Two things break first: the eight-column
   rows get too tight to read, and the closing band's fixed-width form stops
   fitting beside the headline.
   ========================================================================== */

@media (max-width: 1200px) {
  .closing__bg { width: 55%; }

  .enquiry { width: 420px; }

  .tiles__grid,
  .process__grid,
  .cases__grid,
  .objectives__grid { margin-right: 0; }

  .rule { margin-right: 0; }
}

/* The tile row keeps all eight columns rather than folding. Folding to four
   made each one 220px wide against 146px of source artwork — a 1.5x upscale of
   eight photographs, which is a worse outcome than tighter columns. Staying
   eight-across scales them *down* instead, so they stay sharp, and only the
   labels need to come with the column. Both label sizes are therefore fluid
   between the comp's value at 1366 and a floor that still fits the longest
   string ("EXPERIENCES", "AMPLIFICATION") in the narrowed column.

   The capability labels used to be here too, in a row of eight. They live
   inside the process cards now, four columns rather than eight, so they have
   room and need no fluid step. */
@media (max-width: 1200px) {
  .tile__label      { font-size: clamp(16px, 1.70vw, 23.2px); line-height: 1.25; }
  .objective__label { font-size: clamp(17px, 1.79vw, 24.5px); line-height: 1.15; }
}

@media (max-width: 1080px) {
  .process__grid { grid-template-columns: repeat(2, 1fr); }

  /* The form is a fixed 495px beside a headline that needs about 500 of its
     own, so below this width they stack rather than both being squeezed. */
  .closing__inner { flex-direction: column; }
  .closing__bg { width: 70%; }
  .enquiry { width: 100%; max-width: 495px; margin-right: 0; padding-top: 24px; }
}

/* ==========================================================================
   Phase 2 — hover and focus

   The solid-orange CTAs (.button, .topnav__pill) are handled in base.css,
   which all three pages share. These are this page's own text links.
   ========================================================================== */

.link-small,
.enquiry__alt a,
.gate__close {
  transition: color var(--dur) var(--ease);
}

.gate__close:hover,
.gate__close:focus-visible { color: var(--gold); }

.link-small:hover,
.link-small:focus-visible,
.enquiry__alt a:hover,
.enquiry__alt a:focus-visible {
  color: var(--gold);
}

/* The arrows are drawn in currentColor but pinned to orange by their own
   rules, so inheriting the gold is not enough. */
.link-small:hover .arrow,
.link-small:focus-visible .arrow {
  color: var(--gold);
}


/* The case cards became real links when they were pointed at their case-study
   decks, and nothing about them said so — a whole card that is clickable needs
   to admit it. Same gold as every other call to action, on the edge and the
   name; the photograph is left alone. */
.case__link {
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.case__name { transition: color var(--dur) var(--ease); }

.case__link:hover,
.case__link:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 18px var(--gold-dim);
}

.case__link:hover .case__name,
.case__link:focus-visible .case__name { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .link-small,
  .enquiry__alt a,
  .gate__close,
  .case__link,
  .case__name { transition: none; }
}

/* ==========================================================================
   The phone layout — from `Spark Create Event Mobile.dc.html`, drawn at 390px

   Same 1023px breakpoint as the other two pages, for the same reason: the
   desktop layout is fluid to about 1024 and no further, so the two layouts
   meet where the desktop one stops working. Keep this equal to the blocks at
   the foot of home.css and sponsorship.css, to the shared header block in
   base.css, and to PHONE in spark.js.

   The header, toggle and drawer are not here — they are the shared component
   in base.css, and this page now carries the markup that switches them on.
   ========================================================================== */

@media (max-width: 1023px) {

  /* The shared column goes; every band sets its own 20px inset. */
  .page-create .shell {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  /* Each band is a flex column with a comp band height, and .rule rides
     `margin-top: auto` down to its foot. None of those heights mean anything
     here, so the bands grow with their contents and the rules become ordinary
     flow. */
  .hero__inner,
  .objectives .shell,
  .tiles .shell,
  .process .shell,
  .cases .shell { min-height: 0; }

  .rule {
    margin-top: 32px;
    margin-right: 0;
    background: linear-gradient(90deg, transparent, var(--rule-hero-end));
  }

  /* The hero's rule goes entirely: its gradient already lands on solid black,
     so a hairline under it would be drawing a line on a line. */
  .hero .rule { display: none; }

  .objectives > .shell > .eyebrow,
  .tiles > .shell > .eyebrow,
  .objectives__title { margin-left: 0; }

  /* --- Hero ------------------------------------------------------------- */

  .hero { height: 520px; }

  .hero__bg {
    height: 100%;
    object-position: 58% 35%;
  }

  /* Desktop leans on the photograph's own baked fade, which is composed for a
     1366-wide crop. At 390 the crop is a narrow slice of it, so the fade is
     drawn instead. */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0.28) 34%,
                                        rgb(0 0 0 / 0.86) 80%, var(--bg) 100%);
  }

  .hero__inner {
    z-index: 1;                    /* over the fade */
    height: 100%;
    justify-content: flex-end;     /* the copy sits on the band's foot */
    align-items: stretch;          /* desktop packs left so the CTA can shrink */
    padding: 0 20px 34px;
  }

  .hero__title { margin-left: 0; font-size: 52px; line-height: 47px; }

  .hero__body {
    width: auto;
    margin: 18px 0 0;
    font-size: 15px;
    line-height: 21px;
  }

  /* The one CTA on the site that is not a solid orange plate. Over a
     photograph a filled button would have to fight the picture for the eye;
     the design outlines it in the photo's own warm brown and lets the glow do
     the work. Its hover has to be overridden with it, or base.css fills it
     gold on the way past. */
  .hero__cta {
    justify-content: center;
    height: 54px;
    margin: 22px 0 0;
    padding: 0;
    border: 2px solid var(--hero-cta-edge);
    border-radius: 7px;
    background: rgb(0 0 0 / 0.4);
    box-shadow: 0 0 18px rgb(244 105 2 / 0.34);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
  }

  .hero__cta:hover,
  .hero__cta:focus-visible {
    border-color: var(--gold);
    background: rgb(0 0 0 / 0.4);
    color: var(--gold);
  }

  /* --- Every great event ------------------------------------------------ */

  .objectives .shell { padding: 36px 20px 0; }

  .objectives__title { margin-top: 14px; font-size: 38px; line-height: 36px; }

  /* Six columns become three rows of two. The comp's uneven `fr` tracks were
     its dividers' own spacing; with two columns there is nothing left for them
     to divide, so they go with the dividers. */
  .objectives__grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px 14px;
    margin: 28px 0 0;
  }

  .objective { gap: 12px; padding: 0; }
  .objective + .objective { border-left: 0; }
  .objective:last-child { transform: none; }

  .objective__icon { width: 46px; height: 46px; }

  .objective__label { margin-top: 0; font-size: 19px; line-height: 20px; }

  /* --- Build for every kind of moments ---------------------------------- */

  .tiles .shell { padding: 6px 0 0; }
  .tiles > .shell > .eyebrow { padding: 0 20px; }

  /* Eight tiles need 1152px and there are 350, so the row becomes a rail.
     Proximity snapping rather than mandatory: these are a browsable strip, not
     a set of pages, and mandatory would fight a flick that means to travel. */
  .tiles__grid {
    display: flex;
    gap: 12px;
    aspect-ratio: auto;
    margin: 18px 0 0;
    padding: 0 20px 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Without this the rail loads already scrolled 20px. A `start` snap aligns
       the tile's leading edge to the *scrollport* edge, which sits inside the
       padding, so the browser immediately scrolls the inset away and the first
       tile ends up flush against the screen. scroll-padding moves the snap
       line back out to where the inset actually is. The case rail below snaps
       to `center` and is not affected. */
    scroll-padding-left: 20px;
    scrollbar-width: none;
  }

  .tiles__grid::-webkit-scrollbar { display: none; }

  .tile {
    flex: none;
    scroll-snap-align: start;
    width: 132px;
    height: 266px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--tile-plate);
  }

  /* Desktop centres these under a full-width tile; at 132px the centred
     setting leaves ragged holes on both sides of every two-word label. */
  .tile__label {
    left: 12px;
    right: 10px;
    bottom: 14px;
    padding: 0;
    text-align: left;
    font-size: 22px;
    line-height: 21px;
  }

  .tiles .rule { margin: 26px 20px 0; }

  /* --- From start to blast off ------------------------------------------ */

  .process .shell { padding: 8px 20px 0; }
  .process > .shell > .section-head { margin: 0; }

  .process__grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 20px 0 0;
  }

  /* The comp's flat #A2A2A2 stroke is a 1366px value: at 350px wide the card
     is a third of the size and the same solid grey reads as the loudest thing
     on the band. The design drops both card borders to a fraction of it. */
  .step {
    min-height: 0;
    padding: 20px 18px 18px;
    border-color: rgb(162 162 162 / 0.55);
    border-radius: 14px;
  }

  /* Desktop sets the numeral in orange at the top of the card, in flow. At
     350px that costs a whole line above a title that needs the room, so it
     becomes a watermark in the corner and the title starts at the top. */
  .step__num {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 36px;
    line-height: 1;
    color: rgb(255 255 255 / 0.14);
  }

  /* Clear of the numeral, which is out of flow and would otherwise be overrun
     by a long title. */
  .step__title {
    max-width: 220px;
    margin-top: 0;
    font-size: 28px;
    line-height: 27px;
  }

  .step__body {
    margin-top: 10px;
    padding-right: 0;
    font-size: 13.5px;
    line-height: 19px;
    color: var(--text-2);
  }

  /* Two columns rather than two stacked rows: side by side they fit, and the
     card is short enough that the divider between them would be longer than
     either label. */
  .step__caps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 0 0;
    border-top: 1px solid var(--rule-hairline);
  }

  .step__cap { gap: 10px; padding: 0; }
  .step__cap + .step__cap { border-top: 0; }

  .step__cap-icon { width: 26px; height: 26px; }
  .step__cap-label { font-size: 15px; line-height: 16px; }

  .process .rule { margin-top: 30px; }

  /* --- Real moments. Real impact. --------------------------------------- */

  .cases .shell { padding: 8px 0 0; }

  /* Title and link sit on one line at 1366 and cannot at 390. */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0 20px;
  }

  .cases__title { font-size: 34px; line-height: 32px; }

  .cases__grid {
    display: flex;
    gap: 14px;
    aspect-ratio: auto;
    margin: 0;
    padding: 20px 20px 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .cases__grid::-webkit-scrollbar { display: none; }

  /* Desktop stacks the card's parts absolutely over a fixed-ratio cell, so the
     copy can sit at the comp's own offsets. Here the card is as tall as its
     contents and everything goes back into flow. */
  .case {
    flex: none;
    scroll-snap-align: center;
    position: static;
    width: 262px;
  }

  .case__link {
    position: static;
    border-color: rgb(162 162 162 / 0.32);
  }

  /* The copy is below the photo here rather than over it, so there is nothing
     to scrim. It has to go rather than merely being redundant: the link is
     static at this width, so an absolutely positioned ::after would resolve
     against whatever ancestor happens to be positioned — or the viewport. */
  .case__link::after { content: none; }

  .case__art {
    position: static;
    display: block;
    height: 170px;
  }

  .case__body {
    position: static;
    padding: 16px 16px 18px;
  }

  .case__name { font-size: 24px; line-height: 24px; }

  .case__text {
    width: auto;
    margin-top: 9px;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-2);
  }

  .case__tags { flex-wrap: wrap; gap: 8px; margin-top: 14px; }

  .tag {
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 11px;
    color: var(--orange);
  }

  .cases .rule { margin: 26px 20px 0; }

  /* --- Closing CTA and the enquiry form --------------------------------- */

  /* Desktop places the photo as an object on the left half of the band, beside
     the form. Stacked, there is no "beside", so it becomes the band's
     backdrop and the copy sits on it. */
  .closing {
    overflow: hidden;
    padding-bottom: 0;
  }

  .closing__bg {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 40%;
  }

  .closing::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.9));
  }

  .closing__inner {
    z-index: 1;                    /* over the overlay */
    flex-direction: column;
    gap: 0;
    padding: 38px 20px 44px;
  }

  .closing__copy { padding-top: 0; }

  .closing__eyebrow { margin-left: 0; font-size: 20px; }

  .closing__title { margin: 8px 0 0; font-size: 44px; line-height: 41px; }

  .closing__lede {
    margin: 14px 0 0;
    font-size: 14.5px;
    line-height: 20px;
    letter-spacing: normal;
  }

  /* On desktop the form is a bare column of fields beside the headline. Here it
     sits on the photograph, so it needs an edge of its own to read as a panel
     rather than as controls floating on a picture. */
  .enquiry {
    width: auto;
    max-width: none;
    margin: 24px 0 0;
    padding: 22px 18px 20px;
    border: 1px solid rgb(244 105 2 / 0.5);
    border-radius: 16px;
    background: rgb(0 0 0 / 0.72);
  }

  /* The embed is one element at any width, so the phone layout has nothing to
     restack — only a little more room above it than the desktop 6px. */
  .enquiry__embed { margin-top: 16px; }

  .enquiry__alt {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    letter-spacing: normal;
    color: var(--text-2);
  }

  /* --- The portfolio gate, as the design draws it: a bottom sheet -------- */

  /* A modal <dialog> is `position: fixed` with `margin: auto` and its insets
     zeroed, which is what centres it. Releasing the top inset and dropping the
     bottom margin is the whole of the change from card to sheet — and it has
     to be `inset: auto 0 0`, not `top: auto`, because `margin: auto` against a
     zeroed top would still pull it back to the middle. */
  .gate {
    inset: auto 0 0;
    width: 100%;
    /* The design is drawn at 390 and the sheet is full-width there, which this
       keeps — the cap only bites above 560. It exists because this breakpoint
       runs to 1023: a landscape tablet would otherwise get a 900px-wide sheet
       with a 44px grab handle floating in the middle of it, which reads as a
       banner rather than something you pulled up. */
    max-width: 560px;
    margin: 0 auto;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
  }

  .gate__panel {
    /* The home indicator on a modern phone sits over the last 34px of the
       viewport, and a sheet is the one component that reaches it. */
    padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
  }

  .gate__grip {
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto 18px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.22);
  }

  .gate__close { top: 14px; right: 14px; }

  .gate__embed { margin-top: 18px; }
}