/* ── HERO (artboard y 0 → 850) ───────────────────────────────── */

.hero {
  position: relative;
  /* 850 at the 1280 artboard, growing with the viewport and capped so it
     never eats a tall monitor */
  height: clamp(700px, 66.4vw, 980px);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: 85.06%;              /* 723 / 850 */
  z-index: 0;
  isolation: isolate;          /* keep the glow blending inside the hero */
}

/* ── the tower's neon, lifted out of the photograph so it can breathe ──
   Two layers pulled from the hero's own pixels: a tight core and a wide
   bloom, screened back over the plate on slightly different cycles so the
   light reads as alive rather than as a loop. */

/* ── the tubes fill with light ─────────────────────────────────
   `--fill` is a registered custom property, so it can be animated:
   it drives a soft-edged mask that travels up the frame. Below the
   edge the glow layer is revealed and the unlit layer is masked
   away, so the light appears to run up the tubes and fill them
   rather than switching on. */
@property --fill {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.hero__unlit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  --fill: 0%;
  -webkit-mask-image: linear-gradient(to top, transparent calc(var(--fill) - 13%), #000 var(--fill));
  mask-image: linear-gradient(to top, transparent calc(var(--fill) - 13%), #000 var(--fill));
  animation: neon-fill 3s cubic-bezier(.42, .04, .24, 1) .35s forwards;
}

.hero__glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  will-change: opacity;
  --fill: 0%;
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--fill) - 13%),
                      rgba(0, 0, 0, .5) calc(var(--fill) - 4%), transparent var(--fill));
  mask-image: linear-gradient(to top, #000 calc(var(--fill) - 13%),
              rgba(0, 0, 0, .5) calc(var(--fill) - 4%), transparent var(--fill));
}
.hero__glow--wide {
  opacity: .34;
  animation: neon-fill 3.2s cubic-bezier(.42, .04, .24, 1) .35s forwards,
             neon-bloom 9s ease-in-out 3.6s infinite alternate;
}
.hero__glow--core {
  opacity: .58;
  animation: neon-fill 3s cubic-bezier(.42, .04, .24, 1) .45s forwards,
             neon-core 7.5s ease-in-out 3.5s infinite alternate;
}

@keyframes neon-fill {
  from { --fill: 0%; }
  to   { --fill: 116%; }
}



@keyframes neon-bloom {
  from { opacity: .30; }
  to   { opacity: .42; }
}
@keyframes neon-core {
  from { opacity: .52; }
  to   { opacity: .66; }
}

/* frozen for screenshots and for anyone who asked for less motion */
.is-flat .hero__glow,
.is-flat .hero__unlit { animation: none; --fill: 116%; }
.is-flat .hero__glow--core { opacity: .58; }
.is-flat .hero__glow--wide { opacity: .34; }
.is-flat .hero__unlit { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero__glow { animation: none; --fill: 116%; }
  .hero__unlit { animation: none; opacity: 0; }
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* the artboard fades the photo into the page background */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--scrim), 0)     0%,
    rgba(var(--scrim), 0)     46.25%,
    rgba(var(--scrim), .242)  55.3%,
    rgba(var(--scrim), .413)  62.2%,
    rgba(var(--scrim), .508)  66.4%,
    rgba(var(--scrim), .627)  71.9%,
    rgba(var(--scrim), .735)  77.4%,
    rgba(var(--scrim), .831)  83%,
    rgba(var(--scrim), .912)  88.5%,
    rgba(var(--scrim), .980)  94.7%,
    rgba(var(--scrim), 1)     98.2%
  );
}

.hero__stage {
  position: relative;
  height: 100%;
  z-index: 1;
}

/* ── partner logo lockup, top right (y 39–108, right edge x 1220) ──
   The artboard parked these at the column edge; they now run out into the
   gutter so the group sits closer to the frame edge, and the marks are up
   about a fifth on the drawn size. */
.hero__partners {
  position: absolute;
  right: calc(-1 * min(48px, var(--gutter) * .45));
  top: 4.54%;                  /* 38.6 / 850 */
  display: flex;
  align-items: center;
  gap: 16px;
}
.p-sinopec { width: 84px;    height: 84px; }
.p-aramco  { width: 146.3px; height: 55.62px; }
.p-yasref  { width: 96.3px;  height: 39.47px; }
.p-sep { width: 1px; height: 48.7px; background: var(--white); flex: none; }

/* ── YCSF wordmark lockup — vector, box (99,201) 605×86.7 ───── */
.hero__lockup {
  position: absolute;
  left: 0;
  top: 23.67%;                 /* 201.22 / 850 */
  width: min(604.97px, 47%);
  aspect-ratio: 604.97 / 86.74;
  height: auto;
  /* the artboard's blurred raster copy read as a smudge at render size;
     a drop-shadow follows the letterforms and stays crisp */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .42))
          drop-shadow(0 0 26px rgba(243, 238, 226, .18));
  color: var(--ink);
  --m: url('../assets/icons/ycsf-lockup.svg');
}

/* ── headline (x 100, line tops 399.6 / 459.6, 50px Conthrax) ── */
.hero__title {
  position: absolute;
  left: 0;
  top: 48.12%;                 /* 409 / 850 */
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  /* decoupled from --t-display on request — that token also drives every
     section heading, and only the hero headline was to come down. The
     artboard's own value is 50px at 1280; this reads ~43px there. */
  font-size: clamp(30px, 3.35vw, 53px);
  line-height: 1.18;
  color: var(--ink);
  text-transform: uppercase;
  text-shadow: 0 2px 18px var(--shadow);
}

/* ── date + location row (y 548–585) ─────────────────────────── */
.hero__meta {
  position: absolute;
  left: 6px;
  top: 66.24%;                 /* 563 / 850 */
  display: flex;
  align-items: flex-start;
  gap: 30.5px;
}
.hero__meta .i { margin-top: -5px; transition: color .3s ease, transform .3s cubic-bezier(.34,1.3,.5,1); }
a.meta { transition: color .3s ease; }
a.meta::after {
  content: '';
  position: absolute;
  left: 42px;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.3,.7,.35,1);
}
a.meta:hover::after,
a.meta:focus-visible::after { transform: scaleX(1); }
a.meta:hover .i,
a.meta:focus-visible .i { color: var(--red); transform: scale(1.12); }
.hero__meta .meta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-label);
  line-height: 1.4;
  color: var(--ink);
  white-space: nowrap;
}

.i {
  display: inline-block;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
  flex: none;
}
.i--calendar { width: 24px; height: 25px; --m: url('../assets/icons/ui-calendar.svg'); }
.i--pin      { width: 24px; height: 24px; --m: url('../assets/icons/ui-pin.svg'); }

/* ── CTAs, right side (pills 1005→1176) ──────────────────────── */
.hero__cta {
  position: absolute;
  right: 4px;
  top: 61.4%;                  /* 521.84 / 850 */
  width: auto;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: clamp(9px, .8vw, 14px);
}
.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* the artboard's 26.66px box was drawn for 17px type; the height now comes
     from the type so it can never crowd, and it clears the 44px touch target */
  min-height: clamp(46px, 3.6vw, 60px);
  padding: .6em 1.7em .68em;
  border-radius: clamp(9px, .72vw, 13px);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  /* the hero plate is busy and mid-toned; without a cast shadow the buttons
     sit in it rather than on it */
  box-shadow: 0 10px 30px rgba(0, 0, 0, .48), 0 2px 6px rgba(0, 0, 0, .34);
  transition: transform .3s cubic-bezier(.34, 1.25, .5, 1),
              box-shadow .3s ease, filter .3s ease;
}

/* a light sweeps across on hover, echoing the divider rules */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%);
  transform: translateX(-105%);
  transition: transform .62s cubic-bezier(.3, .7, .35, 1);
  pointer-events: none;
  z-index: 1;
}
.btn:hover::after,
.btn:focus-visible::after { transform: translateX(105%); }

.btn:hover,
.btn:focus-visible { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .08s; }
.btn--grad {
  /* the old olive mid-stop was the same tone as the pipework behind it;
     holding green and red as blocks separates the button by saturation */
  /* stops are placed for the 160% background-size used by the hover slide:
     the visible window at rest is the first 62.5% of the ramp */
  background: linear-gradient(95deg, #0e8f45 0%, #0e8f45 18%, #d13a33 50%, #d13a33 100%);
  background-size: 160% 100%;
  color: var(--cream);
  border: 1px solid rgba(243, 238, 226, .30);
  transition: transform .3s cubic-bezier(.34, 1.25, .5, 1),
              box-shadow .3s ease, background-position .5s ease;
}
.btn--grad:hover,
.btn--grad:focus-visible {
  background-position: 100% 0;
  box-shadow: 0 10px 26px var(--shadow-strong), 0 0 0 1px var(--line-soft) inset;
}
.btn--cream {
  background: var(--cream);
  color: var(--red);
  border: 1px solid rgba(177, 42, 40, .28);
}
.btn--cream:hover,
.btn--cream:focus-visible {
  box-shadow: 0 10px 26px var(--shadow), 0 0 0 2px rgba(177, 42, 40, .35) inset;
}

/* ── countdown ────────────────────────────────────────────────
   The artboard's 4-ring group is 497 wide inside a 1080 column —
   46 % of it. Driving the ring off --col keeps that proportion, so
   the countdown grows with the page instead of sitting in a puddle
   of space on a wide screen. */
.countdown {
  --cd: clamp(97.23px, calc(var(--col) * .098), 152px);
  position: absolute;
  left: 0;
  right: 0;
  top: 80.79%;                 /* 686.71 / 850 */
  display: flex;
  justify-content: center;
  gap: calc(var(--cd) * .371);  /* 36.07 / 97.23 */
}
.cd {
  width: var(--cd);
  text-align: center;
}
.cd__ring {
  position: relative;
  width: var(--cd);
  height: var(--cd);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: calc(var(--cd) * .4114);   /* 40 / 97.23 */
  line-height: 1;
  color: var(--ink);
  padding-top: calc(var(--cd) * .041);
}
/* one #1a6b3c → #b12a28 axial ramp runs across the whole row (x 391.4 → 888.6),
   so each ring carries its own slice of it */
.cd__ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ring-grad);
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(circle closest-side at 50% 50%, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
.cd:nth-child(1) .cd__ring { --ring-grad: linear-gradient(90deg, #1a6b3c, #375e38); }
.cd:nth-child(2) .cd__ring { --ring-grad: linear-gradient(90deg, #425a37, #604d33); }
.cd:nth-child(3) .cd__ring { --ring-grad: linear-gradient(90deg, #6b4831, #883b2d); }
.cd:nth-child(4) .cd__ring { --ring-grad: linear-gradient(90deg, #93372c, #b12a28); }
.cd__label {
  margin-top: calc(var(--cd) * .103);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(14px, calc(var(--cd) * .144), 19px);
  line-height: 1.3;
  color: var(--ink);
}