/* ==========================================================================
   Spark — Sponsorship Opportunities  (sponsorship.html)
   Layout recreated from PSD/spark web 1.psd (1366 x 2584).
   Loaded after css/tokens.css and css/base.css.

   Coordinates in comments are the comp's absolute pixel positions, so any
   value here can be traced back to a layer in reference/spark-web-1-layers.json.

   One deliberate deviation: the comp's section edges wander by a few pixels
   (the featured card starts at x=60, the opportunity cards at x=50, the footer
   panel at x=57). Everything here is normalised to a single 1258px column, so
   edges line up down the page. Nothing moves by more than 8px.
   ========================================================================== */

/* ==========================================================================
   Hero — one 1366x518 band

   The comp draws the nav on top of this photograph. It is the shared sticky
   bar above it now (base.css), on instruction: a bar that follows you down the
   page has to have a background, and a translucent one over a photograph is
   the worst of both. So the band is unchanged and the header is new height
   above it.
   ========================================================================== */

.hero {
  position: relative;
  height: 518px;
  overflow: hidden;
}

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

/* The nav used to sit inside this band, and everything below it is registered
   to the photograph rather than to the nav — so the 87px the nav occupied is
   given straight back as padding: 20px above a logo that sat 16px down and
   stood 51px tall. Without it the headline climbs to the top of the photo. */
.hero__inner {
  position: relative;
  height: 100%;
  padding-top: 87px;
}

/* 1px rule closing the band — comp y=493. It is not flat: the comp fades it
   from invisible on the left to #4C4C4C on the right. */
.hero__inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-hero-end));
}

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

/* Comp ink top y=121 */
.hero__title {
  margin-top: 19px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-hero);
  line-height: var(--lh-display-hero);
  letter-spacing: var(--ls-display-hero);
  text-transform: uppercase;
}

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

/* Comp ink top y=319, line pitch 37 measured off the render */
.hero__lede {
  margin-top: 23px;
  font-size: var(--fs-hero-sub);
  line-height: var(--lh-hero-sub);
  color: var(--text);
}

/* Comp: icons y=412-445, labels y=424-438 */
.categories {
  display: flex;
  align-items: center;
  margin-top: 30px;
  padding-left: 3px;
  height: 33px;
}

.categories__item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-category);
  line-height: 1;
  color: var(--text);
}

.categories__item + .categories__item {
  margin-left: 13px;
  border-left: 1px solid var(--rule-faint);
  padding-left: 6px;
  height: 32px;
}

/* Icon boxes are the comp's own layer sizes */
.categories__item .icon--music   { width: 27px; height: 29px; }
.categories__item .icon--running { width: 31px; height: 29px; }
.categories__item .icon--shopper { width: 28px; height: 26px; }
.categories__item .icon--public  { width: 33px; height: 27px; }

/* ==========================================================================
   Sections
   ========================================================================== */

.section--featured { padding-top: 36px; }  /* eyebrow ink y=556 */
.section--more     { padding-top: 54px; }  /* heading ink y=1090 */
.section--next     { padding-top: 53px; }  /* heading ink y=1956 */
.section--cta      { padding-top: 63px; padding-bottom: 63px; }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: var(--orange);
}

/* Shared date / location line */
.meta {
  display: flex;
  align-items: center;
  font-size: var(--fs-meta);
  line-height: 1;
  color: var(--text);
}

.meta__date, .meta__place {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meta__sep {
  width: 1px;
  height: 26px;
  margin: 0 15px;
  background: var(--rule-mid);
}

.meta .icon--location { width: 16px; height: 22px; }
.meta .icon--calendar { width: 17px; height: 17px; }

/* ==========================================================================
   Featured opportunity — comp card 597..1033 (436 tall)
   ========================================================================== */

.featured {
  position: relative;
  display: flex;
  height: 436px;
  overflow: hidden;
  margin-top: 24px;
}

/* The banner stops 11px short of the card's bottom edge in the comp. */
.featured__media {
  flex: none;
  width: 757px;
  height: 425px;
  object-fit: cover;
}

.featured__body {
  flex: 1;
  min-width: 0;
  padding: 67px 0 0 68px;
}

/* Comp: white pill, orange 1px stroke, orange text — 878..959 x 662..694 */
.pill {
  display: inline-grid;
  place-items: center;
  width: 81px;
  height: 32px;
  border: 1px solid var(--orange);
  border-radius: 16px;
  background: var(--text);
  color: var(--orange);
  font-size: var(--fs-pill);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.featured .meta { margin-top: 7px; }

/* Comp ink top y=765, block width 328 -> wraps to four lines */
.featured__text {
  max-width: 329px;
  margin-top: 31px;
  font-size: var(--fs-featured-body);
  line-height: var(--lh-featured-body);
  color: var(--text);
}

/* --- Featured stats ------------------------------------------------------ */

/* Comp: rule at y=865 spanning 880..1209 (329px), then three columns whose
   widths (100 / 126 / 103) are taken from the comp's divider positions. */
.stats {
  display: grid;
  grid-template-columns: 100px 126px 103px;
  width: 329px;
  margin-top: 21px;
  /* The comp's rule fades left-to-right, which a border cannot do. */
  background-image: linear-gradient(90deg, var(--rule-inset), transparent);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  padding-top: 15px;
}

.stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stats__item + .stats__item {
  background-image: linear-gradient(180deg, var(--rule-mid), transparent);
  background-size: 1px 48px;
  background-repeat: no-repeat;
}

/* The comp does not centre these in their columns: the measured centres are
   40 / 160 / 281 from the block's left edge, so each is nudged into place. */
.stats__item:nth-child(1) { padding-right: 20px; }
.stats__item:nth-child(2) { padding-right: 6px; }
.stats__item:nth-child(3) { padding-left: 7px; }

/* Icons bottom-align on a shared baseline at comp y=917 */
.stats__icon {
  align-self: center;
  margin-bottom: 9px;
}

.stats__item:nth-child(1) .stats__icon { width: 45px; height: 37px; }
.stats__item:nth-child(2) .stats__icon { width: 49px; height: 29px; margin-top: 8px; }
.stats__item:nth-child(3) .stats__icon { width: 36px; height: 34px; margin-top: 3px; }

/* Fixed-height box so the big number and the two words share a bottom edge,
   as they do in the comp. */
.stats__value {
  display: flex;
  align-items: flex-end;
  height: 22px;
  font-size: var(--fs-stat-value);
  font-weight: 600;
  line-height: 1;
  color: var(--text);
}

.stats__value--word { font-size: var(--fs-stat-word); }

.stats__label {
  margin-top: 1px;
  font-size: var(--fs-stat-label);
  line-height: 18px;
  color: var(--text);
}

/* --- Ribbon — comp 1156..1272 x 596..689 -------------------------------- */

.ribbon {
  position: absolute;
  top: 0;
  right: 39px;
  width: 116px;
  padding: 13px 11px 26px;
  background: var(--orange);
  color: var(--text);
  font-size: var(--fs-ribbon);
  font-weight: 500;
  line-height: 19px;
  text-align: center;
  text-transform: uppercase;
  /* pennant notch at the foot */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}

/* ==========================================================================
   More opportunities — the comp draws three cards, 243 tall and ~12px
   apart. Two of them ship: Bali Market Fest was dropped on instruction, and
   the list is a flex column, so nothing else moves.
   ========================================================================== */

.opps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 21px;
}

.opp {
  display: flex;
  height: 243px;
  overflow: hidden;
}

.opp__media {
  flex: none;
  align-self: center;
  width: 575px;
  height: 239px;
}

.opp__body {
  flex: 1;
  min-width: 0;
  padding: 23px 0 0 30px;
}

.opp__eyebrow {
  font-size: var(--fs-card-eyebrow);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: var(--orange);
}

.opp__title {
  margin-top: 9px;
  font-size: var(--fs-card-title);
  font-weight: 500;
  line-height: var(--lh-card-title);
  color: var(--text);
}

.opp .meta { margin-top: 10px; gap: 9px; }
.opp .meta__place { gap: 6px; }
.opp .meta__date { gap: 6px; }
.opp .meta .icon--location { width: 14px; height: 18px; }

.opp__text {
  max-width: 330px;
  margin-top: 13px;
  font-size: var(--fs-card-body);
  line-height: var(--lh-card-body);
  color: var(--text);
}

/* --- Card stats column — comp divider at x=1027, content at x=1065 ------- */

.opp__aside {
  flex: none;
  width: 285px;
  /* Divider fades downwards and stops short of the card edges (comp: it runs
     from 26px below the card top for 184px). */
  background-image: linear-gradient(180deg, var(--rule-mid), transparent);
  background-size: 1px 184px;
  background-repeat: no-repeat;
  background-position: 0 26px;
  padding: 24px 0 0 39px;
}

.facts__key {
  font-size: var(--fs-stat-key);
  line-height: 16px;
  color: var(--text-2);
}

.facts__val {
  margin: 0 0 14px;
  font-size: var(--fs-stat-val);
  line-height: 19px;
  color: var(--text);
}

.facts__val:last-child { margin-bottom: 0; }
.facts__val--open { color: var(--orange); }

.enter {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 28px;
  font-size: var(--fs-cta);
  line-height: 1;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--orange);
}

/* Shape comes from .arrow in base.css; this is only the comp's size. */
.enter__arrow { width: 23px; height: 11px; }

/* ==========================================================================
   What's coming next
   ========================================================================== */

/* Segments grow in proportion to the comp's own widths, so the dates sit where
   they do at 1366px and the rail still reflows below that. */
.rail {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-top: 27px;
  height: 9px;
}

.rail__seg {
  position: relative;
  flex-basis: 0;
  height: 1px;
  background: var(--timeline-line);
}

.rail__seg::before,
.rail__seg::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
  transform: translateY(-50%);
}

.rail__seg::before { left: -3px; }
.rail__seg::after  { right: -3px; }

/* The comp draws this one dot crimson rather than orange. Kept as drawn. */
.rail__seg--alt::before { background: var(--crimson); }

.rail__date {
  flex: none;
  font-size: var(--fs-timeline-date);
  line-height: 1;
  text-transform: uppercase;
  color: var(--orange);
}

/* The per-card dot and date exist for the phone rail only; the desktop layout
   has one continuous .rail above the row instead. */
.next__when { display: none; }

.next {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 17px;
}

/* The comp's 307x105. Every image supplied for this band is the event's own
   square key visual, and they are cropped to this ratio on export rather than
   letterboxed or reshaped here — the crop centre is chosen per poster, since
   the useful part of a poster is almost never its middle. See README.
   `cover` still guards the phone layout, which draws the same thumb at a
   different ratio again. */
.next__thumb {
  height: 105px;
  border-radius: var(--radius-thumb);
  overflow: hidden;
  background: var(--surface);
}

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

/* The comp's four titles all fit one line. The real event names do not — three
   of the four wrap — so the row reserves two lines and the location strings
   stay on one baseline across the four columns instead of stepping. It is a
   floor, not a cap: a third line still grows the item. */
.next__title {
  min-height: 2em;
  margin-top: 1px;
  padding-left: 9px;
  font-size: var(--fs-next-title);
  font-weight: 500;
  line-height: 1;
  color: var(--text);
}

.next__place {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-left: 9px;
  font-size: var(--fs-next-location);
  line-height: 1;
  color: var(--text);
}

.next__place .icon--location { width: 9px; height: 13px; }

/* ==========================================================================
   Closing CTA — comp panel 2251..2498 (247 tall)
   ========================================================================== */

/* This panel is the one block that cannot simply reflow: the rounded plate, the
   darkened photo AND the inset "Talk To Our Team" card are all one flattened
   layer in the PSD, so the copy has to stay registered to the artwork. It is
   therefore sized by aspect ratio and everything inside it is expressed in cqw
   (percent of the panel's own width), so panel and copy scale as one unit.
   At the comp's 1258px these all evaluate to the comp's exact pixel values. */
.cta {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1258 / 247;
  border-radius: var(--radius-panel);
  overflow: hidden;
}

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

/* Comp sets the copy only ~7px in from the panel edge. */
.cta__copy {
  position: absolute;
  left: 0.636cqw;   /* 8px */
  top: 2.385cqw;    /* 30px */
  width: 44.52cqw;  /* 560px */
}

/* Every size below is in cqw, so these rules are scoped under .cta on purpose:
   outside a `container-type` ancestor cqw resolves against the viewport and a
   234px button would silently become 18.6vw. */
.cta .display--footer {
  font-size: 3.076cqw;   /* 38.7px */
  line-height: 4.134cqw; /* 52px */
}

.cta__lede {
  margin-top: 1.51cqw;    /* 19px */
  font-size: 1.908cqw;    /* 24px */
  line-height: 2.623cqw;  /* 33px */
  color: var(--text);
}

/* Comp: chat icon at x=818 y=2294 -> 761,43 inside the panel. */
.cta__card {
  position: absolute;
  left: 60.49cqw;   /* 761px */
  top: 3.418cqw;    /* 43px */
  width: 31.8cqw;   /* 400px */
}

.cta__icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 4.054cqw;  /* 51px */
  height: 4.054cqw;
}

.cta__title {
  margin-top: 1.669cqw;   /* 21px */
  padding-left: 5.723cqw; /* 72px */
  font-size: 1.757cqw;    /* 22.1px */
  font-weight: 500;
  line-height: 1;
  color: var(--text);
}

.cta__text {
  margin-top: 0.715cqw;   /* 9px */
  padding-left: 5.962cqw; /* 75px */
  font-size: 1.256cqw;    /* 15.8px */
  line-height: 1.749cqw;  /* 22px */
  color: var(--text);
}

.cta .button {
  display: inline-flex;
  align-items: center;
  gap: 1.192cqw;          /* 15px */
  width: 18.6cqw;         /* 234px */
  height: 3.736cqw;       /* 47px */
  margin-top: 1.51cqw;    /* 19px */
  margin-left: 6.2cqw;    /* 78px */
  padding-left: 3.657cqw; /* 46px */
  border-radius: 0.636cqw;
  background: var(--orange);
  color: var(--text);
  font-size: 1.192cqw;    /* 15px */
  line-height: 1;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.cta .button__arrow { width: 2.226cqw; height: 0.954cqw; }

/* ==========================================================================
   Narrower desktops. The comp only exists at 1366, so below that the column
   shrinks on its 54px gutters and the fixed-height bands are released to grow
   with their content. The closing CTA needs nothing here — it scales itself.
   Mobile is deliberately out of scope until the mobile comps land; when they
   do, it goes in as a new breakpoint rather than as edits to the above.
   ========================================================================== */

@media (max-width: 1365px) {
  .hero { height: auto; min-height: 518px; padding-bottom: 26px; }

  .featured { height: auto; }
  .featured__media { width: 58%; height: auto; align-self: flex-start; }
  .featured__body { flex: 1; padding: 44px 32px 44px 40px; }
  .featured__text { max-width: none; }
  .stats { width: 100%; max-width: 329px; }

  .opp { height: auto; }
  .opp__media { width: 45%; height: auto; align-self: stretch; object-fit: cover; }
  .opp__body { padding: 24px 20px 24px 28px; }
  .opp__text { max-width: none; }
  .opp__aside {
    width: 30%;
    padding: 24px 16px 24px 30px;
    background-size: 1px 76%;
    background-position: 0 11%;
  }
}

@media (max-width: 1200px) {
  :root { --gutter: 32px; }
}

/* This page's own CTAs go gold in base.css (.button) and in the shared header
   block; it has none of its own left to style here.
   */

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

   1023 and not the more usual 767, for the same reason the homepage uses it:
   the desktop layout above is fluid down to about 1024 and no further, so
   ending here means the two layouts meet exactly where the desktop one stops
   working rather than leaving 768..1023 broken between them. Keep this equal
   to the block at the foot of home.css, to the shared header block in
   base.css, and to PHONE in spark.js.

   The header, the toggle and the drawer are not here — they are the shared
   component in base.css, and this page gets them by carrying the markup.
   ========================================================================== */

@media (max-width: 1023px) {

  /* The shared column goes: every band below sets its own 16 or 20px inset,
     and leaving .shell in would add its gutter on top and inset twice. */
  .page-sponsor .shell {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  /* Desktop breaks these lines by hand, at the widths the comp breaks them.
     None of those widths exist here, so the breaks are released and the copy
     wraps where the design wraps it — on its own. The hero headline keeps its
     <br>, which is a two-line lockup rather than a wrap. */
  .hero__lede br,
  .featured__text br,
  .opp__title br,
  .cta__lede br,
  .cta__text br,
  .cta .display--footer br { display: none; }

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

  .hero { height: auto; min-height: 0; padding-bottom: 0; }
  .hero__bg { object-position: 60% 30%; }

  /* The desktop band is a photograph with copy on it and a fixed 518px height.
     Here the photo is the backdrop to a band that grows with its content, so
     the gradient does the work the black lower half of the photo used to. */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.35) 40%,
                                        rgb(0 0 0 / 0.9) 88%, var(--bg) 100%);
  }

  .hero__inner {
    z-index: 1;                    /* over the gradient */
    padding: 36px 20px 26px;
  }

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

  .hero__lede { margin-top: 16px; font-size: 17px; line-height: 23px; }

  /* The closing rule is absolute on desktop because the band has a fixed
     height to hang it from. Here it is simply the last thing in the band. */
  .hero__inner::after {
    position: static;
    display: block;
    margin-top: 20px;
  }

  /* Four categories need 470px and there are 350 — so they become a rail that
     breaks out of the band's inset and scrolls, rather than four items
     squeezed or wrapped onto two lines. */
  .categories {
    height: auto;
    margin: 24px -20px 0;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }

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

  /* The design rules *every* item on its left, including the first, so the row
     reads as a set of columns rather than as three separators. */
  .categories__item {
    flex: none;
    gap: 8px;
    height: 26px;
    padding: 0 16px;
    border-left: 1px solid var(--rule-faint);
    font-size: 13.5px;
    white-space: nowrap;
  }

  .categories__item + .categories__item {
    margin-left: 0;
    padding-left: 16px;
    height: 26px;
  }

  .categories__item .icon--music,
  .categories__item .icon--running,
  .categories__item .icon--shopper,
  .categories__item .icon--public { width: 18px; height: 18px; }

  /* --- Sections --------------------------------------------------------- */

  .section--featured { padding: 30px 16px 8px; }
  .section--more     { padding: 32px 16px 8px; }
  .section--next     { padding: 34px 0 8px; }
  .section--cta      { padding: 34px 16px 40px; }

  .eyebrow { margin: 0 0 14px 4px; font-size: 12px; letter-spacing: 0.1em; }

  .display--section { margin: 0 0 16px 4px; font-size: 30px; }
  .section--next .display--section { margin: 0 0 18px; padding: 0 20px; }

  /* --- Featured opportunity --------------------------------------------- */

  .featured {
    display: block;
    height: auto;
    margin-top: 0;
    border-radius: var(--radius-panel);
  }

  .featured__media { width: 100%; height: auto; }
  .featured__body { padding: 18px 18px 20px; }

  /* Desktop draws this as a solid white lozenge, which is the comp. The design
     inverts it to an orange outline on black — the same treatment the tag
     pills on create-event got, and the reason is the same: a white plate is a
     button here, and this is a category label. */
  .pill {
    width: auto;
    height: 28px;
    padding: 0 16px;
    border-radius: 999px;
    background: none;
    font-size: 12.5px;
  }

  .featured .meta { margin-top: 14px; }

  .meta { flex-wrap: wrap; column-gap: 10px; row-gap: 6px; font-size: 12.5px; line-height: 17px; }
  .meta .icon--location { width: 11px; height: 15px; }
  .meta__sep { height: 14px; }

  .featured__text {
    max-width: none;
    margin-top: 14px;
    font-size: 14.5px;
    line-height: 20px;
  }

  /* Three columns of equal width, each icon over its own value — the desktop
     version is one row of nudged columns registered to the comp's dividers,
     and none of those measurements mean anything at 314px. */
  .stats {
    grid-template-columns: repeat(3, 1fr);
    width: auto;
    max-width: none;
    margin-top: 18px;
    padding-top: 18px;
    background-image: none;
    border-top: 1px solid var(--rule-faint);
  }

  .stats__item { gap: 8px; padding: 0 6px; }

  /* The fading vertical dividers go. Written with the sibling combinator
     because that is how the desktop rule is written, and a plain .stats__item
     here loses to it on specificity from inside this media block. */
  .stats__item + .stats__item { background-image: none; }

  .stats__item:nth-child(1),
  .stats__item:nth-child(2),
  .stats__item:nth-child(3) { padding-left: 6px; padding-right: 6px; }

  .stats__icon { margin-bottom: 0; }

  .stats__item:nth-child(1) .stats__icon,
  .stats__item:nth-child(2) .stats__icon,
  .stats__item:nth-child(3) .stats__icon {
    width: 26px;
    height: 24px;
    margin-top: 0;
  }

  .stats__value {
    height: auto;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
  }

  .stats__value--word { font-size: 16px; }

  .stats__label { margin-top: 0; font-size: 11px; line-height: 1.25; color: var(--text-2); }

  .ribbon {
    right: 14px;
    width: 100px;
    padding: 9px 6px 16px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  }

  /* --- More opportunities ------------------------------------------------ */

  .opps { gap: 16px; margin-top: 0; }

  .opp {
    display: block;
    height: auto;
    border-radius: var(--radius-panel);
  }

  .opp__media { width: 100%; height: 158px; object-fit: cover; }
  .opp__body { padding: 16px 18px 0; }

  .opp__eyebrow { font-size: 12px; letter-spacing: 0.06em; }
  .opp__title { margin-top: 8px; font-size: 22px; line-height: 26px; }

  .opp .meta { margin-top: 10px; column-gap: 14px; font-size: 12px; line-height: 16px; }
  .opp .meta .icon--location { width: 10px; height: 14px; }

  .opp__text { margin-top: 12px; font-size: 13.5px; line-height: 18px; }

  /* The aside stops being a column beside the copy and becomes the foot of the
     card. Its fading vertical divider was the thing separating the two
     columns, so with them stacked it has nothing left to separate. */
  .opp__aside {
    width: auto;
    margin: 16px 18px 18px;
    padding: 14px 0 0;
    background-image: none;
    border-top: 1px solid var(--rule-faint);
  }

  /* Audience and Reach share a row; Status takes its own, full width. The
     terms and definitions alternate in one <dl>, so each is placed
     explicitly rather than wrapped in a div per pair. */
  /* row-gap is 0 on purpose. A key and its value are one unit, and a uniform
     row gap would put *more* space inside each pair (gap + the value's own
     3px) than between pairs, which reads as four loose lines rather than
     three labelled facts. The 12px that separates the pairs is therefore
     carried by the Status key, the only one that starts a new row. */
  .facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 10px;
  }

  .facts__key:nth-of-type(3) { margin-top: 12px; }

  .facts__key:nth-of-type(1) { grid-area: 1 / 1; }
  .facts__val:nth-of-type(1) { grid-area: 2 / 1; }
  .facts__key:nth-of-type(2) { grid-area: 1 / 2; }
  .facts__val:nth-of-type(2) { grid-area: 2 / 2; }
  .facts__key:nth-of-type(3) { grid-area: 3 / 1 / 4 / -1; }
  .facts__val:nth-of-type(3) { grid-area: 4 / 1 / 5 / -1; }

  .facts__key { font-size: 11.5px; line-height: 1; color: var(--text-3); }

  .facts__val {
    margin: 3px 0 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
  }

  /* A text link with an arrow on desktop; a full-width bordered control here,
     because it is the only thing to press on the card and a tap target has to
     look like one. */
  .enter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    height: 46px;
    margin-top: 16px;
    padding: 0 16px;
    border: 1px solid var(--orange);
    border-radius: 6px;
    font-size: 12px;
  }

  .enter__arrow { width: 26px; height: 11px; }

  /* --- What's coming next ------------------------------------------------ */

  /* One rule behind four cards cannot stay in step with a rail you scroll, so
     it goes and each card carries its own dot and date instead. */
  .rail { display: none; }

  .next {
    display: flex;
    gap: 14px;
    margin-top: 0;
    padding: 0 20px 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

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

  .next__item {
    flex: none;
    scroll-snap-align: center;
    width: 230px;
  }

  .next__when {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
  }

  .next__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
  }

  /* The comp draws the second dot crimson rather than orange; kept as drawn,
     the same way the desktop rail keeps it. */
  .next__dot--alt { background: var(--crimson); }

  .next__date {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--orange);
    white-space: nowrap;
  }

  .next__line { flex: 1; height: 1px; background: var(--timeline-line); }

  .next__thumb { height: 112px; border-radius: 6px; }

  .next__title { margin-top: 12px; padding-left: 0; font-size: 18px; line-height: 1.15; }

  .next__place {
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding-left: 0;
    font-size: 11px;
    line-height: 15px;
    color: var(--text-2);
  }

  .next__place .icon--location { width: 9px; height: 12px; margin-top: 2px; }

  /* --- Closing CTA ------------------------------------------------------- */

  /* Every length inside this panel is in cqw, because on desktop the artwork
     and the copy have to scale as one unit. The container stays — releasing it
     would send all of those to the *viewport* rather than removing them — so
     each one is restated here in px instead. Miss one and it silently becomes
     a fraction of 350px. */
  .cta {
    aspect-ratio: auto;
    border-radius: var(--radius-panel);
    padding: 28px 20px 24px;
  }

  /* The desktop artwork is not a photograph — it is the whole flattened panel,
     and the "Talk To Our Team" card is *drawn into it* from x760 of 1257. On
     desktop that is the point; here the card is real CSS, so the baked one
     must not appear beside it.
     Plain `cover` cannot avoid it. The visible slice of the source is
     panelW x 247/panelH, which at the top of this range (1023px, a 991x311
     panel) is 787px of a 1257px image — and 787 + 760 > 1257, so *no*
     object-position exists that clears the card. The image is therefore
     over-scaled: at 140% height it crops to 562px at 1023 and 144px at 390,
     both comfortably left of x760, and stays height-dominated across the whole
     range so it never falls back to showing the full width.
     Horizontally it sits at 25% rather than centred: the artwork's own
     luminance runs from 4 at the left edge to 67 around x600 and back to 8
     behind the baked card, because the desktop panel is pre-darkened exactly
     where its copy sits. Further left is a black rectangle; further right hits
     the card. 25% is the rightmost position that still clears x760 at 1023. */
  .cta__bg {
    top: -20%;
    height: 140%;
    max-width: none;
    object-fit: cover;
    object-position: 25% 50%;
  }

  /* The design darkens the photo by half, which suits the bright middle of the
     image it was cropping. This crop is already the pre-darkened part, so half
     again leaves a near-black panel. */
  .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.32);
  }

  .cta__copy {
    position: relative;
    z-index: 1;
    left: auto;
    top: auto;
    width: auto;
  }

  .cta .display--footer { font-size: 30px; line-height: 34px; }

  .cta__lede { margin-top: 14px; font-size: 14.5px; line-height: 20px; }

  /* The inset card is drawn into the desktop artwork; here it is a real
     bordered box below the copy, because the photograph is no longer wide
     enough to hold both side by side. */
  .cta__card {
    position: relative;
    z-index: 1;
    left: auto;
    top: auto;
    width: auto;
    margin-top: 22px;
    padding: 20px 18px;
    border: 1px solid rgb(244 105 2 / 0.5);
    border-radius: 14px;
    background: rgb(0 0 0 / 0.72);
  }

  .cta__icon {
    position: absolute;
    left: 18px;
    top: 20px;
    width: 30px;
    height: 28px;
  }

  .cta__title {
    margin-top: 0;
    padding-left: 42px;
    min-height: 28px;
    display: flex;
    align-items: center;
    font-size: 21px;
  }

  .cta__text {
    margin-top: 12px;
    padding-left: 0;
    font-size: 13.5px;
    line-height: 19px;
    color: var(--text-2);
  }

  .cta .button {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 50px;
    margin: 18px 0 0;
    padding-left: 0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
  }

  .cta .button__arrow { width: 26px; height: 11px; }
}