/* Homepage hero, replacing Slider Revolution.

   Every value here comes from the slider's own config, which the plugin serves
   publicly at /wp-json/sliderrevolution/sliders/1?srengine=7&slideid=<n> (saved to
   _source-mirror/slider/). That is the reference, not screenshots.

   sr7 keeps five breakpoint levels over three design grids, and scales the chosen
   grid by viewport/grid-width:

     level 0-2   grid 1240 x 657   vw >= 778, scale = vw/1240 capped at 1
     level 3     grid  778 x 560   480..777,  scale = vw/778
     level 4     grid  480 x 460   vw <  480, scale = vw/480

   which is what makes the module 657 at 1440, 543 at 1024, back up to 553 at 768 and
   374 at 390. Lengths are written in grid units against `--u`, one grid pixel at the
   current scale, because CSS cannot divide a length by a length and `scale()` will
   not take vw/1240 as a factor.

   Layers are positioned the way the config states them: `v: middle` means offset from
   the vertical centre, `h: center` from the horizontal centre, `h: left` from the
   grid's left edge. */

.abc-hero { position: relative; width: 100%; overflow: hidden; }

.abc-hero__viewport {
  --gw: 1240;
  --gh: 657;
  --u: min(1px, calc(100vw / 1240));
  position: relative;
  width: 100%;
  height: calc(var(--gh) * var(--u));
}

.abc-hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.abc-hero__slide.is-active { opacity: 1; visibility: visible; }
/* the incoming slide sits above the outgoing one while its columns sweep in */
.abc-hero__slide.is-entering { z-index: 2; }
.abc-hero__slide.is-entering > .abc-hero__bg { visibility: hidden; }

/* ---------------------------------------------------------------------------
   Slide transition: `slotslide-horizontal`.

   From the slide background layer's `tl.in.bg` in the config:

     temp.p "slotslide-horizontal", temp.m "columns", temp.t "*west* Uniform"
     ms 1000, in.col 5, in.x "(100%)", in.m true, f "nodelay"

   Five equal columns, each a mask, all moving at once over one second. The mask
   sweeps in from the east while the slice inside counter-moves, so the photograph
   appears to stand still and fill in behind five advancing edges rather than sliding
   across. Mid-transition that reads as vertical slats with gaps between them.

   No library: the whole effect is two transforms and a nested overflow, and none of
   the slice-slider plugins on offer implement this particular one.
   --------------------------------------------------------------------------- */
.abc-hero__wipe {
  position: absolute; inset: 0;
  display: flex;
  z-index: 1;
}
/* Three levels, and the order matters. The column is a fixed window; the panel
   sweeps into it from the east; the photograph counter-moves by the same amount so it
   stays put while the panel's edge travels across it. Translating the columns
   themselves instead just slides all five the same way and they butt together into
   one moving block. */
.abc-hero__wipe-col {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
}
.abc-hero__wipe-panel {
  position: absolute; inset: 0;
  overflow: hidden;
  animation: abc-slot-mask var(--wipe-ms) cubic-bezier(.645,.045,.355,1) both;
}
.abc-hero__wipe-img {
  position: absolute; top: 0; height: 100%;
  width: calc(100% * var(--cols));
  left: calc(var(--i) * -100%);
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  animation: abc-slot-img var(--wipe-ms) cubic-bezier(.645,.045,.355,1) both;
}
@keyframes abc-slot-mask { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes abc-slot-img  { from { transform: translateX(-100%); } to { transform: translateX(0); } }

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

.abc-hero__grid {
  position: absolute; top: 0; left: 50%;
  width: calc(var(--gw) * var(--u));
  height: calc(var(--gh) * var(--u));
  margin-left: calc(var(--gw) * var(--u) / -2);
}

/* Every layer is `v: middle`: centred vertically, then offset by --y.
   Horizontally the default is `h: left`, an offset from the grid's left edge. */
.abc-hero__l {
  position: absolute;
  top: calc(50% + var(--y) * var(--u));
  left: calc(var(--x, 0) * var(--u));
  transform: translateY(-50%);
  margin: 0;
  white-space: nowrap;
  color: #fff;
}

/* `h: center`. Kept at the same specificity as the rule above and placed after it, so
   ordering decides rather than a more specific selector: an earlier version used a
   :not() pair here that outranked the per-layer rules and dragged the centred lede
   half its own width off the left edge. */
.abc-hero__grid--centred > .abc-hero__l,
.abc-hero__l--centred {
  left: calc(50% + var(--x, 0) * var(--u));
  transform: translate(-50%, -50%);
}

/* ---- slide 2 ---- */
.s2-l1 { --y: -145; font: 600 calc(20 * var(--u)) / calc(22 * var(--u)) "Open Sans", sans-serif; }
.s2-l2 { --y:  -91; font: 800 calc(55 * var(--u)) / calc(58 * var(--u)) "Open Sans", sans-serif; }
.s2-l3 { --y:  -30; font: 700 calc(30 * var(--u)) / calc(32 * var(--u)) "Open Sans", sans-serif; color: #e2a946; }
.s2-l4 { --y:   31; width: calc(454 * var(--u)); white-space: normal; text-align: center;
         font: 400 calc(20 * var(--u)) / calc(26 * var(--u)) Lato, sans-serif; }
.s2-l5 { --y:  125; }

/* ---- slide 1: these sit against the grid's left edge, not its centre ---- */
.s1-l1 { --y: -175; --x: 370; font: 600 calc(30 * var(--u)) / calc(35 * var(--u)) "Open Sans", sans-serif; }
.s1-l2 { --y: -121; --x: 220; font: 400 calc(55 * var(--u)) / calc(58 * var(--u)) "Open Sans", sans-serif; }
.s1-l7 { --y:  -53; --x: 300; font: 400 calc(55 * var(--u)) / calc(58 * var(--u)) "Open Sans", sans-serif; }
/* Only the inner emphasis span, not the animation wrapper that also sits in here:
   a bare `.s1-l2 span` matches both and turns the whole line gold. */
.s1-l2 .abc-hero__i > span,
.s1-l7 .abc-hero__i > span { font-weight: 800; color: #FCC85E; }
.s1-l4 { --y:   16; --x: 14; width: calc(639 * var(--u)); white-space: normal; text-align: center;
         font: 400 calc(22 * var(--u)) / calc(26 * var(--u)) Lato, sans-serif; }
.s1-l5 { --y:   97; --x: 513; }

/* The button.

   Type size is fixed at 14px/24px across all five breakpoint levels in the config and
   does not scale; the padding is stated once (12/35) but sr7 scales it with the grid
   like any other length, which is what makes the box 48px tall at 1440 and 44px at
   390.

   `:link` and `:visited` are spelled out because the theme ships
   `a:visited { color: #ad4f10; }`, and a bare `.abc-hero__btn` loses to it: an element
   plus a pseudo-class outranks a single class. Once a visitor had been to
   /our-services/ the label turned brown on the orange ground and was unreadable. */
.abc-hero__btn,
.abc-hero__btn:link,
.abc-hero__btn:visited {
  background: #a93d20;
  color: #fff;
  font: 700 14px/24px "Open Sans", sans-serif;
  padding: calc(12 * var(--u)) calc(35 * var(--u));
  border: 0; border-radius: 0;
  text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
.abc-hero__btn:hover,
.abc-hero__btn:focus,
.abc-hero__btn:visited:hover,
.abc-hero__btn:visited:focus {
  background: #fff;
  color: #000;
  text-decoration: none;
}

/* Below 778 the config flips slide 1's layers from `h: left` to `h: center`; its lede
   is centred at every level and carries the class instead. */
@media (max-width: 777.98px) {
  .abc-hero__slide[data-key="1"] .abc-hero__l {
    left: calc(50% + var(--x, 0) * var(--u));
    transform: translate(-50%, -50%);
  }
}


/* ---------------------------------------------------------------------------
   Entrance animations.

   Straight from the slider config's `tl.in` for each layer: start time, duration,
   easing, and the transform it comes in on. No animation library: RevSlider drives
   these with GSAP, but the whole sequence is five keyframe animations and one
   masked wipe, and GSAP is ~70KB with a licence that is not MIT.

   GSAP's power eases are polynomial, so they map onto cubic-bezier exactly:
     power2.inOut -> cubic-bezier(.645,.045,.355,1)
     power3.inOut -> cubic-bezier(.77,0,.175,1)
     power4.out   -> cubic-bezier(.23,1,.32,1)
     power4.inOut -> cubic-bezier(.86,0,.07,1)

   The animation lives on an inner element: the layer box's own transform is doing
   the centring, and animating it would fight that.
   --------------------------------------------------------------------------- */
.abc-hero__i { display: inline-block; }

/* nothing shows until its layer's start time */
.abc-hero__slide .abc-hero__i,
.abc-hero__slide .abc-hero__btn { opacity: 0; }

@keyframes abc-in-rise {      /* fade up from 80%, the `sX/sY 0.8` layers */
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}
/* The config's from-state equals its to-state for these layers, so GSAP tweens
   nothing and they simply become visible at their start time. Reproduced as a cut,
   with fill: forwards so the layer keeps its base opacity 0 through the delay rather
   than filling backwards to the from-frame and showing immediately. */
@keyframes abc-in-appear {
  from { opacity: 1; }
  to   { opacity: 1; }
}
@keyframes abc-in-char {      /* per character: up 50px and in */
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes abc-in-wipe {      /* the button, revealed from its mask's bottom edge */
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

.abc-hero__slide.is-active .abc-hero__i,
.abc-hero__slide.is-active .abc-hero__btn {
  animation-name: var(--anim, abc-in-rise);
  animation-duration: var(--dur);
  animation-delay: var(--at);
  animation-timing-function: var(--ease);
  animation-fill-mode: var(--fill, both);
}
/* a split headline animates its characters, not itself */
.abc-hero__slide.is-active .abc-hero__i[data-abc-split] { animation: none; opacity: 1; }
.abc-hero__slide.is-active .abc-hero__i[data-abc-split] > span {
  display: inline-block;
  white-space: pre;
  animation: abc-in-char var(--dur) var(--ease) both;
  animation-delay: calc(var(--at) + var(--i) * 5ms);
}

/* the mask the buttons wipe out of */
.abc-hero__mask { overflow: hidden; }
.abc-hero__mask .abc-hero__btn { display: inline-block; }

/* slide 2 */
.s2-l1 { --at: 500ms;  --dur: 1500ms; --ease: cubic-bezier(.23,1,.32,1); }
.s2-l2 { --at: 1400ms; --dur: 2000ms; --ease: cubic-bezier(.86,0,.07,1); }
.s2-l3 { --at: 2980ms; --dur: 2000ms; --ease: cubic-bezier(.86,0,.07,1); --anim: abc-in-appear; --fill: forwards; }
.s2-l4 { --at: 4610ms; --dur: 1200ms; --ease: cubic-bezier(.23,1,.32,1); }
.s2-l5 { --at: 5520ms; --dur: 1000ms; --ease: cubic-bezier(.645,.045,.355,1); --anim: abc-in-wipe; }

/* slide 1 */
.s1-l1 { --at: 500ms;  --dur: 1500ms; --ease: cubic-bezier(.23,1,.32,1); }
.s1-l2 { --at: 1650ms; --dur: 2900ms; --ease: cubic-bezier(.86,0,.07,1); --anim: abc-in-appear; --fill: forwards; }
.s1-l7 { --at: 2670ms; --dur: 2950ms; --ease: cubic-bezier(.86,0,.07,1); --anim: abc-in-appear; --fill: forwards; }
.s1-l4 { --at: 4830ms; --dur: 1200ms; --ease: cubic-bezier(.23,1,.32,1); }
.s1-l5 { --at: 5630ms; --dur: 1000ms; --ease: cubic-bezier(.645,.045,.355,1); --anim: abc-in-wipe; }

/* Anyone who asks for less motion gets the finished frame, which the original does
   not offer. */
@media (prefers-reduced-motion: reduce) {
  .abc-hero__slide .abc-hero__i,
  .abc-hero__slide .abc-hero__btn,
  .abc-hero__slide .abc-hero__i[data-abc-split] > span {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Prev / next arrows, the "zeus" set.

   From the slider settings' `nav.arrows` (saved to
   _source-mirror/slider/slider-1-settings.json), including the CSS template the
   plugin fills in: 70px circles, background rgba(0,0,0,.1), a 20px white glyph from
   the revicons font, inset 20px from each edge and vertically centred. `on: false`
   means they are not permanently on: they fade in while the slider is hovered.

   Hovering one drops a black veil over it and slides the target slide's picture in
   from the side, which is what the template's .tp-title-wrap and .sr7-nav-img do.

   Rendered as <button> rather than the plugin's custom element so they are reachable
   by keyboard and announced; nothing about the appearance changes.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: revicons;
  src: url("/theme/wp-content/plugins/revslider/public/css/fonts/revicons/fonts/revicons.woff") format("woff"),
       url("/theme/wp-content/plugins/revslider/public/css/fonts/revicons/fonts/revicons.ttf") format("truetype");
  font-weight: normal; font-style: normal; font-display: block;
}

.abc-hero__arrow {
  position: absolute; top: 50%;
  width: 70px; height: 70px;
  margin-top: -35px;
  padding: 0; border: 0; border-radius: 50%;
  overflow: hidden;
  background: rgba(0, 0, 0, .1);
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  transition: opacity .3s ease;
}
.abc-hero:hover .abc-hero__arrow,
.abc-hero__arrow:focus-visible { opacity: 1; }
.abc-hero__arrow--prev { left: 20px; }
.abc-hero__arrow--next { right: 20px; }

.abc-hero__arrow::before {
  font-family: revicons;
  font-size: 20px;
  color: #fff;
  line-height: 70px;
  display: block;
  text-align: center;
  position: relative;
  z-index: 2;
}
.abc-hero__arrow--prev::before { content: "\e824"; }
.abc-hero__arrow--next::before { content: "\e825"; }

.abc-hero__arrow-veil {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .5);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: all .3s;
}
.abc-hero__arrow-img {
  position: absolute; inset: 0;
  background-position: center center;
  background-size: cover;
  border-radius: 50%;
  transition: all .3s;
}
.abc-hero__arrow--prev .abc-hero__arrow-img { transform: translateX(-100%); }
.abc-hero__arrow--next .abc-hero__arrow-img { transform: translateX(100%); }
.abc-hero__arrow:hover .abc-hero__arrow-img,
.abc-hero__arrow:focus-visible .abc-hero__arrow-img { transform: translateX(0); opacity: 1; }
.abc-hero__arrow:hover .abc-hero__arrow-veil,
.abc-hero__arrow:focus-visible .abc-hero__arrow-veil { transform: scale(1); opacity: 1; }

/* DIVERGENCE from the source, on purpose: no arrows on phones. They are useless
   there anyway, since they only appear on hover and a touch screen has none, and they
   sit over the headline at these widths. The slides still cycle on their own. */
@media (max-width: 777.98px) {
  .abc-hero__arrow { display: none; }
}

/* level 3: the 778 grid */
@media (min-width: 480px) and (max-width: 777.98px) {
  .abc-hero__viewport { --gw: 778; --gh: 560; --u: calc(100vw / 778); }
  .s2-l1 { --y: -126; }
  /* DIVERGENCE, same reason as the 480 grid below: at 50px this headline measures
     787 in a 778 grid and clips at both edges. 47px brings it to 740. */
  .s2-l2 { --y:  -79; font-size: calc(47 * var(--u)); line-height: calc(52 * var(--u)); }
  .s2-l3 { --y:  -23; }
  .s2-l4 { --y:   31; }
  .s2-l5 { --y:  121; }
  .s1-l1 { --y: -142; --x: 0; }
  .s1-l2 { --y:  -84; --x: 0; font-size: calc(50 * var(--u)); line-height: calc(55 * var(--u)); }
  .s1-l7 { --y:  -28; --x: 0; font-size: calc(50 * var(--u)); line-height: calc(55 * var(--u)); }
  .s1-l4 { --y:   43; --x: 0; width: calc(596 * var(--u)); }
  .s1-l5 { --y:  133; --x: 0; }
}

/* level 4: the 480 grid. Slide 1's headlines switch to 800 weight here. */
@media (max-width: 479.98px) {
  .abc-hero__viewport { --gw: 480; --gh: 460; --u: calc(100vw / 480); }
  .s2-l1 { --y: -115; font-size: calc(18 * var(--u)); }
  /* DIVERGENCE from the source, on purpose. At 32px the long headlines measure 507
     in a 480 grid, so they are 5% wider than the viewport and clip at both edges at
     every phone width; her site does this too. 28px brings them to 443, leaving about
     18px either side. They stay on one line: letting them wrap would need the whole
     band re-flowed, since every layer here is absolutely positioned and a second line
     would run into the kicker below. */
  .s2-l2 { --y:  -75; font-size: calc(28 * var(--u)); line-height: calc(40 * var(--u)); }
  .s2-l3 { --y:  -33; }
  .s2-l4 { --y:   16; font-size: calc(18 * var(--u)); }
  .s2-l5 { --y:  100; --x: 1; }
  .s1-l1 { --y: -115; --x: 0; font-size: calc(18 * var(--u)); line-height: calc(22 * var(--u)); }
  .s1-l2 { --y:  -74; --x: 0; font-weight: 800; font-size: calc(28 * var(--u)); line-height: calc(35 * var(--u)); }
  .s1-l7 { --y:  -36; --x: 0; font-weight: 800; font-size: calc(28 * var(--u)); line-height: calc(35 * var(--u)); }
  .s1-l4 { --y:   18; --x: 0; width: calc(476 * var(--u)); font-size: calc(18 * var(--u)); }
  .s1-l5 { --y:  103; --x: 1; }
}

/* The homepage's second Slider Revolution module ("particle-hero1"), rebuilt.

   It is the background band behind "Diversity and Inclusion". The measurement that
   first said it was empty was taken before it loaded: sr7 defers this module until it
   is scrolled near, so a headless capture of the top of the page catches a preloader
   and nothing else. Scrolled into view it renders 1440x630 with

     sr7-img   background bg3-1.jpg, cover, 50% 50%, over rgba(0,0,0,.5)
     sr7-bg    filter: contrast(0.9) sepia(0.2)

   The section's second row carries margin-top:-550px, which is what lifts the
   heading, copy and button up over this band; that comes from the source markup and
   is already in place. */
/* The band's height is fixed per breakpoint and never scaled within one: the module's
   settings carry height [630, 630, 570, 472, 352] with keepBPHeight true. Measured on
   the live site the boundaries land at 1024, 778 and 480. Unlike the hero, this module
   does not scale with the viewport, so a single 630px here was 79% too tall on a
   phone and pushed the whole section down. */
.abc-band { position: relative; width: 100%; height: 630px; overflow: hidden; }
@media (max-width: 1023.98px) { .abc-band { height: 570px; } }
@media (max-width: 777.98px)  { .abc-band { height: 472px; } }
@media (max-width: 479.98px)  { .abc-band { height: 352px; } }

/* the particle canvas sits above the photograph and the glow, as it does on the source */
.abc-band__particles { position: absolute; inset: 0; z-index: 2; }
.abc-band__particles canvas { display: block; }

/* the photograph, with the module's own filter */
.abc-band::before {
  z-index: 0;
  content: ""; position: absolute; inset: 0;
  background: url("/media/2018/04/bg3-1.jpg") 50% 50% / cover no-repeat;
  filter: contrast(0.9) sepia(0.2);
}

/* The warm centre glow and dark vignette are not in the photograph: the particles
   addon paints them onto a canvas over it. Modelled here as a radial gradient fitted
   to samples taken off the live band along its centre lines, which land within a few
   levels of the source at the centre, the mid falloff and the edges. */
.abc-band::after {
  content: ""; position: absolute; inset: 0;
  z-index: 1;
  background: radial-gradient(circle 700px at 50% 44%,
    rgba(255, 205, 110, .66)   0%,
    rgba(255, 196, 100, .62)  22%,
    rgba(240, 150,  60, .34)  38%,
    rgba( 60,  20,  10, .30)  58%,
    rgba( 18,   4,   3, .72)  78%,
    rgba( 14,   2,   2, .86) 100%);
}