/* ==========================================================================
   HERO PHOTOGRAPH  ·  focal shift with directional scrim
   Approved settings: focus 90% across / 22% down, zoom 1.00, blur 3px,
   scrim strength 39%. The hero inverts to a dark field, so every piece of
   copy inside #top is re-set for white. Nothing outside #top is touched.
   ========================================================================== */
.at-hero{position:relative;overflow:hidden;isolation:isolate;background:#0a0e17}

/* the photograph. inset is negative so the soft edge blur leaves behind is
   pushed outside the clipping box instead of showing as a pale rim */
.at-hero::before{content:"";position:absolute;inset:-14px;z-index:0;
  background-image:url("/delivered/2f86d8ecf2a4f498.jpg");
  background-size:cover;background-position:90% 22%;
  filter:blur(3px)}

/* directional scrim: heavy under the copy on the left, opening up to the right
   so the skyline and the light trails stay visible */
/* Stops are carried a little past the approved preview in the middle band only.
   Measured against the real crop the headline sat at exactly 4.5:1, which is the
   AA floor, and that figure is an average so the bright patches of sky fall under
   it. The 62% stop moved .45 -> .60 and the 32% stop .77 -> .84. The far right
   is untouched at .21 -> .24, so the skyline and the light trails still open up. */
/* Two layers. The radial on top is a legibility pad centred on the copy block:
   the sunset band in this photograph runs horizontally, so a purely left to right
   gradient cannot protect the ember words where they cross it. The linear below
   is the approved directional scrim, carried in the middle band only. */
.at-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(64% 56% at 27% 44%,
      rgba(6,9,15,.74) 0%,
      rgba(6,9,15,.52) 48%,
      rgba(6,9,15,0) 82%),
    linear-gradient(90deg,
      rgba(6,9,15,.90) 0%,
      rgba(6,9,15,.84) 32%,
      rgba(6,9,15,.60) 62%,
      rgba(6,9,15,.24) 100%)}

/* the dot field belonged to the old flat hero and would sit on top of the photo */
.at-hero .at-canvas{display:none}

/* The old light hero also carried a near opaque white radial pad behind the copy
   (rgba(255,255,255,.96) at 38% 50%) so black text could clear the dot field.
   Against a dark photograph it does the exact opposite and washes the paragraph
   out. The directional scrim now does that job, so the pad has to go. */
.at-hero .at-hero-in::before{display:none}

/* copy, re-set for a dark field */
.at-hero .at-wrap{position:relative;z-index:2}
.at-hero .at-kicker{color:#fff;opacity:.92}
/* The headline is capped so it stays inside the darker left hand band. A ch cap
   only: at full desktop width that gives the two line headline that was signed
   off. Around 950px the right hand words do cross a bright sunset column and
   measure near the AA floor, so if a narrow breakpoint matters later, cap by
   percentage there rather than changing the desktop composition. */
.at-hero .at-h1{color:#fff;max-width:17ch}
.at-hero .at-lede{max-width:50ch}
.at-hero .at-lede{color:#fff;opacity:.8}
.at-hero .at-em{background:var(--ember-ramp,linear-gradient(100deg,#c8102e 0%,#e0563b 55%,#e8944b 100%));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* a later rule in the bundle paints BOTH buttons solid crimson at .at-btn.at-btn--ghost,
   which is the same specificity as a single descendant class and wins on source
   order. Doubling the class here outranks it without touching that rule, which is
   still doing its job everywhere outside the hero. */
.at-hero .at-btn.at-btn--solid{background:#c8102e;border:1px solid #c8102e;color:#fff}
.at-hero .at-btn.at-btn--solid:hover{background:#fff;border-color:#fff;color:#c8102e}
.at-hero .at-btn.at-btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.at-hero .at-btn.at-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.10);color:#fff}

/* anything else inside the hero that was set in ink needs to read on dark */
.at-hero .at-mono,.at-hero .at-link{color:#fff}

/* The kicker rule is painted with an explicit black background-color, which is
   why it vanished against the photograph. Ember rather than plain white: it ties
   the label back to the gradient in the headline, and white would have given the
   hero three separate white marks stacked in the same corner. */
.at-hero .at-kicker::before{
  background:linear-gradient(90deg,#c8102e 0%,#e8944b 100%);
  background-color:transparent;height:2px;opacity:1}

/* Legend strip: drop the two keyed labels, keep the offices, set them to read on
   the photograph, and pick the separators out in ember. */
.at-hero .at-hero-legend > div:nth-child(1),
.at-hero .at-hero-legend > div:nth-child(2){display:none}
.at-hero .at-hero-legend{color:#fff}
.at-hero .at-hero-legend > div:nth-child(3){color:#fff;opacity:.88}
.at-hero .at-hero-legend .at-sep{color:#e8944b;opacity:1;padding:0 2px}

@media(max-width:820px){
  /* on a narrow screen the right hand opening is gone, so carry the whole field */
  .at-hero::after{background:linear-gradient(180deg,
    rgba(6,9,15,.72) 0%, rgba(6,9,15,.82) 60%, rgba(6,9,15,.88) 100%)}
  .at-hero::before{background-position:72% 22%}
}