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

/* --------------------------------------------------------------------------
   How wYrks does it differently (spec B2)
   The navy panel inside the 'What it is' section. Three numbered items, each
   with an orange rule under its number. Not interactive.
   -------------------------------------------------------------------------- */

:host {
  display: block;
}

.hd {
  background: var(--wy-oxford-blue);
  color: var(--wy-ice-white);
  border-radius: 12px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  /* Focus rings on this panel are white, per A4. */
  --wy-focus: var(--wy-white);
}

.hd-title {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 31.25px;
  line-height: 1.2;
}

.hd-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px 48px;
}

.hd-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hd-n {
  font-family: var(--wy-font-head);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  color: var(--wy-carolina-blue);
}

.hd-bar {
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--wy-syracuse-orange);
  /* Grows from the left as the item reveals. */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 400ms var(--wy-ease-out);
}

.hd-item[data-shown="true"] .hd-bar {
  transform: scaleX(1);
}

.hd-t {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--wy-white);
}

.hd-b {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--wy-alice-blue);
  /* So a line break typed into the Webflow property survives. */
  white-space: pre-line;
}

/* ---------- Mobile (spec's mobile tree) ---------- */

@media (max-width: 767px) {
  .hd {
    margin-top: 12px;
    padding: 28px 22px;
    gap: 28px;
  }

  .hd-title {
    font-size: 24px;
  }

  .hd-items {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .hd-item {
    gap: 10px;
  }

  /* Number and bar share a row here. */
  .hd-row {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .hd-n {
    font-size: 34px;
  }

  .hd-bar {
    width: 40px;
  }

  .hd-t {
    font-size: 19px;
  }

  .hd-b {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hd-bar {
    transform: none;
    transition: none;
  }
}