/* --------------------------------------------------------------------------
   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;
  }
}

/* --------------------------------------------------------------------------
   Word cloud

   The approved artwork, reproduced: nineteen words at the positions they were
   measured at, in the three colours it uses, two of them standing on end.
   The cloud and nothing else — no heading, no caption.

   It is a fixed composition on a board, not a flow. Positions are
   percentages of that board and sizes are `cqw`, so the whole thing scales
   with the width it is given the way a picture does, and the words keep
   their relationship to each other at every size. Nothing can collide,
   because nothing is being packed.

   The board is the artwork's ink box, not its canvas: its edges are the
   outermost words. That is why the component carries no padding — there is
   nothing to pad, and the Webflow section it is dropped into sets the space
   around it.

   Below 768px the artboard would put the small words at nine or ten pixels,
   so there it stops being a composition and becomes a centred wrap of the
   same words at readable sizes.
   -------------------------------------------------------------------------- */

.wc {
  display: block;
  /* None, at any breakpoint. The board's edges are the outermost words, and
     the space around the cloud belongs to the section it is dropped into. */
  padding: 0;
  /* Transparent: the cloud takes the background of whatever it is placed on.
     The palette below only chooses the ink. */
  background: transparent;

  --wc-lead: var(--wy-oxford-blue);
  --wc-blue: var(--wy-celestial-blue);
  --wc-accent: var(--wy-syracuse-orange);
  /* Only used by the travelling highlight, which is off unless asked for. */
  --wc-hot: var(--wy-syracuse-orange);
  --wc-hot-accent: var(--wy-oxford-blue);
}

.wc[data-palette="dark"] {
  --wc-lead: var(--wy-white);
  --wc-blue: var(--wy-carolina-blue);
  /* The brand orange is only about 3:1 on navy. This is the same hue lifted
     until it clears 4.5:1, so the rare words stay readable on the dark
     background rather than only visible. */
  --wc-accent: #f2825a;
  --wc-hot: #f2825a;
  --wc-hot-accent: var(--wy-white);
  --wy-focus: var(--wy-white);
}

/* ---------- The artboard ---------- */

.wc-cloud {
  position: relative;
  width: 100%;
  max-width: var(--wc-w, 1120px);
  margin: 0 auto;
  padding: 0;
  /* Holds the artwork's proportions, so a percentage down the board means
     the same thing at every width. */
  aspect-ratio: var(--wc-ratio, 1068 / 596);
  /* What `cqw` is a percentage of. Every size in the cloud is stated in it,
     which is what makes the composition scale as one piece rather than the
     type and the positions drifting apart. */
  container-type: inline-size;
  list-style: none;
}

.wc-word {
  position: absolute;
  left: var(--wc-x);
  top: var(--wc-y);
  font-family: var(--wy-font-head);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;

  /* Cap height 32 of the board's 1400 units, over Montserrat's cap ratio,
     then held back 3%: see the tracking note below. The difference in cap
     height is a pixel and the difference in fit is twenty. */
  font-size: 3.17cqw;
  /* The measured positions are where the ink starts, and `top` places the
     line box, whose first 0.15em is the space above the capitals. Taking it
     back off puts the letters where they were measured. */
  margin-top: -0.15em;
  /* Montserrat is not the face the artwork was drawn in — its capitals run
     about 7% wider — so the words are tracked in until they fill the same
     boxes. Without this the composition is right and the words are too fat
     for it, and the long ones reach into their neighbours. */
  letter-spacing: -0.045em;

  /* The entrance: each word swells out of a blur, from the middle of the
     artboard outwards. Transform and opacity do the work; the blur is a
     one-shot on arrival and is gone by the time the drift starts. */
  opacity: 0;
  scale: 0.86;
  filter: blur(6px);
  transition:
    opacity 560ms var(--wy-ease-out) var(--wc-delay, 0ms),
    scale 560ms var(--wy-ease-back) var(--wc-delay, 0ms),
    filter 560ms var(--wy-ease-out) var(--wc-delay, 0ms),
    color var(--wy-dur-base) var(--wy-ease-out);
}

.wc-cloud[data-shown="true"] .wc-word {
  opacity: 1;
  scale: 1;
  filter: blur(0);
}

/* Once a word has arrived it drifts, each on its own clock and out of phase
   with its neighbours, so the cloud breathes rather than pulses. Three
   pixels, against gaps of forty and more in the artwork — it cannot bring
   two words together. */
.wc[data-drift="true"] .wc-cloud[data-shown="true"] .wc-word {
  animation: wc-drift var(--wc-float, 11s) var(--wy-ease-in-out) var(--wc-phase, 0s) infinite alternate;
}

/* Scrolled past: paused rather than stopped, so a word keeps the offset it
   had instead of jumping back to true. */
.wc[data-still="true"] .wc-word {
  animation-play-state: paused;
}

@keyframes wc-drift {
  from {
    translate: 0 -3px;
  }
  to {
    translate: 0 3px;
  }
}

/* ---------- The three colours ---------- */

/* The three weights, measured off the artwork as a share of cap height:
   navy stems 0.250, blue 0.219, orange 0.200. In Montserrat that is
   ExtraBold, Bold and SemiBold. The colours are three different weights in
   the original, and setting them all to one flattens the cloud. */
.wc-word[data-tier="lead"] {
  color: var(--wc-lead);
  font-weight: 800;
}

.wc-word[data-tier="blue"] {
  color: var(--wc-blue);
  font-weight: 700;
}

/* Smaller, as the artwork has them: one size for the rare words, as there
   is one size for the rest. */
.wc-word[data-tier="accent"] {
  color: var(--wc-accent);
  font-weight: 600;
  font-size: 1.98cqw;
}

/* ---------- The two that stand on end ---------- */

/* A quarter turn and nothing else: the cloud is horizontal words and upright
   ones, with nothing on a diagonal. `writing-mode` turns the box as well as
   the text, so the word occupies the column the artwork gives it. */
.wc-word[data-vertical="true"] {
  writing-mode: vertical-rl;
  rotate: 180deg;
  /* Turning the word turns its line box too, so the space above the
     capitals is now space to one side of them. The correction moves to the
     axis it ended up on. */
  margin-top: 0;
  margin-left: -0.15em;
}

/* ---------- The travelling highlight ---------- */

/* Off unless it is asked for. Written through the cloud rather than on the
   word alone: the rule that ends the entrance sets scale on
   `.wc-cloud[data-shown] .wc-word`, and a plain `.wc-word[data-lit]` loses
   to it — the highlight would change colour and never grow. */
.wc-cloud[data-shown="true"] .wc-word[data-lit="true"] {
  color: var(--wc-hot);
  scale: 1.06;
}

.wc-cloud[data-shown="true"] .wc-word[data-tier="accent"][data-lit="true"] {
  color: var(--wc-hot-accent);
}

/* ---------- Phones ---------- */

@media (max-width: 767px) {
  /* The board would put the small words at nine pixels here. The
     composition is a thing for a wide screen; this is the same words,
     centred and readable. Still no padding — the section supplies it. */
  .wc-cloud {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 16px;
    max-width: none;
    aspect-ratio: auto;
    container-type: normal;
  }

  .wc-word {
    position: static;
    font-size: clamp(19px, 6.4vw, 30px);
  }

  .wc-word[data-tier="accent"] {
    font-size: clamp(12px, 4vw, 19px);
  }

  /* Standing a word on end costs three rows of height on a narrow screen,
     for one word. */
  .wc-word[data-vertical="true"] {
    writing-mode: horizontal-tb;
    rotate: none;
  }
}

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

/* The words are already in place: no drift, no entrance. */
@media (prefers-reduced-motion: reduce) {
  .wc-word,
  .wc-cloud[data-shown="true"] .wc-word,
  .wc[data-drift="true"] .wc-cloud[data-shown="true"] .wc-word {
    opacity: 1;
    scale: 1;
    filter: none;
    animation: none;
    translate: none;
    transition: color var(--wy-dur-fast) var(--wy-ease-out);
  }
}