/* --------------------------------------------------------------------------
   Service page tokens — Part A of the build spec.
   Every service-page component imports this, so the colours, type and motion
   values live in one place rather than being retyped thirty times. Each
   component's root element carries the .wy class alongside its own.

   These are plain custom properties, so a Webflow variable set on an ancestor
   can still override one: a custom property set outside the component
   inherits through the shadow boundary.
   -------------------------------------------------------------------------- */

.wy {
  /* A1 · The content band. Every component fills the width it is given and
     centres its own content inside this cap. */
  --wy-max: 1440px;

  /* A2 · Colour tokens */
  --wy-oxford-blue: #07274b;
  --wy-syracuse-orange: #d34e24;
  --wy-orange-text: #b8411d;
  --wy-polynesian-blue: #0e4c92;
  --wy-celestial-blue: #469dc8;
  --wy-carolina-blue: #84bcda;
  --wy-payne-gray: #4c5870;
  --wy-cool-gray: #929db5;
  --wy-alice-blue: #e0edf5;
  --wy-ice-blue: #f0f6fa;
  --wy-ice-white: #fcfcfc;
  --wy-white: #ffffff;
  --wy-eerie-black: #1e2019;
  --wy-light-text-on-gray: #bfddee;
  --wy-slate-panel: #3d475b;
  --wy-slate-panel-2: #2f394b;
  --wy-navy-panel: #0e2f57;
  --wy-navy-panel-2: #0b3360;
  --wy-line-on-navy: #2a5a8c;
  --wy-mist: #c7d0de;
  --wy-slate-dot: #8d97a8;
  --wy-peach-tint: #fbe7df;
  --wy-sky-tint: #b3d4e8;

  /* A3 · Typography */
  --wy-font-head: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wy-font-body: Aptos, Arial, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* A6 · Motion */
  --wy-dur-fast: 150ms;
  --wy-dur-base: 250ms;
  --wy-dur-reveal: 600ms;
  --wy-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --wy-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --wy-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* A4 · Shadows and focus */
  --wy-shadow-hover: 0 12px 28px rgba(7, 39, 75, 0.14);
  --wy-focus: var(--wy-carolina-blue);

  box-sizing: border-box;
  font-family: var(--wy-font-body);
  /* Webflow mounts each component in a <code-island style="display: contents">,
     so this element becomes a direct child of whatever section it was dropped
     into. In a flex or grid parent a block would shrink to its content and sit
     against the left edge; a definite width keeps it full width in all three
     layout modes. */
  width: 100%;
}

/* A1 · The centred 1440px band. A root that paints a full-bleed background
   stays 100% wide and puts this on its inner wrapper instead; a root that is
   itself the content box carries it directly. No side padding here, so it
   never doubles up with the padding of a Webflow container it sits inside. */
.wy-band {
  width: 100%;
  max-width: var(--wy-max);
  margin-inline: auto;
}

.wy *,
.wy *::before,
.wy *::after {
  box-sizing: border-box;
}

/* A4 · one focus ring everywhere. On dark panels a component sets
   --wy-focus: #fff on the element that owns the dark background. */
.wy :focus-visible {
  outline: 3px solid var(--wy-focus);
  outline-offset: 2px;
}

/* A6 · scroll reveal. The element starts shifted and transparent and is
   released by the shared observer (reveal.ts) adding data-shown. Transform
   and opacity only, so it stays on the compositor. */
.wy-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--wy-dur-reveal) var(--wy-ease-out),
    transform var(--wy-dur-reveal) var(--wy-ease-out);
}

.wy-reveal[data-shown="true"] {
  opacity: 1;
  transform: none;
}

/* A6 · reduced motion: no translate, scale or drawing; elements sit at their
   end state. Colour and opacity changes may stay, at 150ms or less. */
@media (prefers-reduced-motion: reduce) {
  .wy-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Business Sectors · Hero and sector ticker

   A navy full-bleed hero: the small H1 label and the big two-line statement
   on the left, the lead paragraph on the right, and three rows of sector
   pills drifting past underneath.

   The section carries the vertical padding and no side padding, because the
   ticker has to run edge to edge; the two text bands inside it carry the
   1440px cap and the 4vw gutter. That keeps the gutter measured from the
   edge of the page at every width rather than from the edge of a band that
   has already stopped growing.
   -------------------------------------------------------------------------- */

.bsh {
  display: block;
  /* The site nav is fixed over the top of the page, so the hero's first
     120px are behind it. The navy runs up under the nav — padding, not
     margin, so nothing of the page shows through as it scrolls. Override
     --bsh-nav on the instance if the nav's height changes. */
  --bsh-nav: 120px;
  padding: calc(var(--bsh-nav) + 12vh) 0 10vh;
  background: var(--wy-oxford-blue);
  color: var(--wy-ice-white);
  /* The rows are wider than the page by design, and the second one starts
     120px to the left of it. */
  overflow: hidden;
  /* A4 · on navy the focus ring is white, not Carolina blue. */
  --wy-focus: var(--wy-white);
}

/* The spec's hero reveal travels 16px, not the 24px the shared rule uses. */
.bsh .wy-reveal {
  transform: translateY(16px);
}

.bsh .wy-reveal[data-shown="true"] {
  transform: none;
}

/* ---------- The top band ---------- */

.bsh-top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: 72px;
  align-items: end;
  width: 100%;
  max-width: var(--wy-max);
  margin: 0 auto;
  padding: 0 4vw;
}

.bsh-left {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* The page's H1, styled as the label it looks like in the design. The big
   line below is the one that reads as a headline, and it is a paragraph — a
   page gets one H1, and it should be the one that names the page. */
.bsh-h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wy-carolina-blue);
}

/* Was ::before on the H1. An element now, so the dash is the same one whether
   the H1 tag sits on this element or on the text in the page, and because a
   pseudo-element cannot be hung off ::slotted(). */
.bsh-h1-rule {
  flex: none;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--wy-syracuse-orange);
}

/* The heading when it comes from the page. Webflow delivers slot content as
   an unclassed <div slot="heading"> with the Heading inside it; display:
   contents drops that wrapper's box so the H1 itself becomes the flex item
   beside the orange rule, at the right place in the row.

   Its type cannot be set from here. ::slotted() matches the wrapper and
   nothing below it, and no selector in a shadow root can reach an element
   nested inside a slotted node — so the Heading carries its own Webflow
   class. What that class needs is in the property's tooltip and in the
   README. This is the shadow boundary, not a gap in this stylesheet: a rule
   written here, with or without !important, never matches that H1.

   Inherited properties still pass through, so anything Webflow's own h1 rule
   leaves alone is picked up from .bsh-h1 above. */
.bsh-h1 ::slotted(*) {
  display: contents;
}

.bsh-big {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bsh-big1 {
  font-family: var(--wy-font-head);
  font-weight: 800;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--wy-white);
}

.bsh-big2 {
  max-width: 720px;
  font-family: var(--wy-font-head);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.2;
  color: var(--wy-carolina-blue);
}

/* The lead sits on the baseline of the big block (align-items: end), and the
   6px of padding is what lines its last line up with it.

   The type is set here rather than only on the paragraphs: the lead is a
   multiline Text Node, which Webflow slots in as light-DOM content, and a `p`
   rule written in this stylesheet never reaches it. Inherited properties do
   pass through a slot. The `p` rules below dress a lead that arrives as a
   real string — the property default, and the local preview. */
.bsh-lead {
  padding-bottom: 6px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--wy-alice-blue);
}

.bsh-lead ::slotted(*) {
  display: block;
}

.bsh-lead p {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--wy-alice-blue);
}

.bsh-lead p:last-child {
  margin-bottom: 0;
}

/* ---------- The ticker ---------- */

/* The wrapper is what hover pauses and what the stop button is positioned
   against. It cannot be the masked element: a mask applies to everything
   inside the box, and a button at the right-hand edge would fade out with
   the pills behind it. */
.bsh-ticker-wrap {
  position: relative;
  margin-top: 72px;
}

/* Opacity only — the rows start moving the moment they appear, and a
   translate running at the same time reads as a stutter. */
.bsh-ticker-wrap.wy-reveal {
  transform: none;
}

.bsh-ticker {
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.bsh-row {
  display: flex;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: bsh-drift var(--bsh-dur, 70s) linear infinite;
}

/* Row 2 travels the other way. */
.bsh-row:nth-child(2) {
  animation-direction: reverse;
}

/* Each run carries the gap that follows it, so the two runs together are
   exactly twice one run's width — which is what makes translating by half
   land on the seam instead of 14px past it. */
.bsh-run {
  display: flex;
  gap: 14px;
  padding-right: 14px;
}

@keyframes bsh-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.bsh-ticker-wrap[data-stopped="true"] .bsh-row {
  animation-play-state: paused;
}

/* Pointer devices only: on a touch screen the first tap would otherwise be
   spent on a hover state. */
@media (hover: hover) and (pointer: fine) {
  .bsh-ticker-wrap:hover .bsh-row {
    animation-play-state: paused;
  }
}

.bsh-pill {
  flex: none;
  padding: 14px 26px;
  border: 1px solid var(--wy-line-on-navy);
  border-radius: 32px;
  background: var(--wy-navy-panel);
  font-family: var(--wy-font-head);
  font-weight: 600;
  font-size: 18px;
  color: var(--wy-white);
}

.bsh-pill--more {
  border: 1px dashed var(--wy-carolina-blue);
  background: transparent;
  color: var(--wy-carolina-blue);
}

/* The sector names once, for a screen reader. Clipped rather than hidden:
   `display: none` and `visibility: hidden` take it out of the accessibility
   tree as well as off the screen. */
.bsh-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- The foot ---------- */

.bsh-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: var(--wy-max);
  margin: 28px auto 0;
  padding: 0 4vw;
}

.bsh-note {
  margin: 0;
  font-size: 16px;
  color: var(--wy-light-text-on-gray);
}

.bsh-yours {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 30px;
  background: var(--wy-syracuse-orange);
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--wy-white);
  text-decoration: none;
  /* It pops in rather than fading up, so it is not on .wy-reveal. */
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms var(--wy-ease-out), transform 300ms var(--wy-ease-back),
    background-color var(--wy-dur-fast) var(--wy-ease-out);
}

.bsh-yours[data-shown="true"] {
  opacity: 1;
  transform: none;
}

.bsh-plus {
  flex: none;
}

@media (hover: hover) and (pointer: fine) {
  .bsh-yours--link:hover {
    background: var(--wy-orange-text);
  }
}

/* ---------- Tablet ---------- */

@media (max-width: 991px) {
  .bsh-top {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }

  .bsh-big1 {
    font-size: 72px;
  }

  .bsh-big2 {
    font-size: 28px;
  }

  .bsh-lead,
  .bsh-lead p {
    font-size: 18px;
  }

  .bsh-lead {
    padding-bottom: 0;
  }

  .bsh-pill {
    font-size: 16px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .bsh {
    /* The nav clearance still applies — the token carries it, so lowering
       --bsh-nav here is all it takes if the mobile bar is shorter. */
    padding: calc(var(--bsh-nav) + 64px) 0 48px;
  }

  .bsh-top {
    padding: 0 20px;
    row-gap: 18px;
  }

  .bsh-left {
    gap: 18px;
  }

  .bsh-h1 {
    gap: 12px;
    font-size: 12px;
  }

  .bsh-h1-rule {
    width: 40px;
  }

  .bsh-big1 {
    font-size: 52px;
  }

  .bsh-big2 {
    font-size: 22px;
    line-height: 1.25;
  }

  .bsh-lead,
  .bsh-lead p {
    font-size: 17px;
  }

  .bsh-ticker-wrap {
    margin-top: 36px;
  }

  /* Full-bleed, and with no mask: at this width the mask would eat most of
     a pill at each end rather than a sliver. */
  .bsh-ticker {
    gap: 10px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .bsh-run {
    gap: 10px;
    padding-right: 10px;
  }

  .bsh-pill {
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 14px;
  }

  /* The rows are already a sample; the extra pill only takes up room. */
  .bsh-pill--more {
    display: none;
  }

  .bsh-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 22px;
    padding: 0 20px;
  }

  .bsh-note {
    font-size: 15px;
    line-height: 1.5;
  }

  .bsh-yours {
    padding: 10px 18px;
    font-size: 14px;
  }

  .bsh-plus {
    width: 14px;
    height: 14px;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  /* The rows sit at the offsets the design shows, and stay there. */
  .bsh-row {
    animation: none;
    transform: translateX(var(--bsh-rest, 0px));
  }

  .bsh-yours {
    opacity: 1;
    transform: none;
    transition: none;
  }
}