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

/* --------------------------------------------------------------------------
   'A closer look' shell (spec C0)
   The gray band every closer-look module sits in: eyebrow, H2 and intro, an
   optional pre-box of checklist lines, the module itself, optional note chips
   and an optional italic footer line.

   The section paints its own full-bleed background and carries all of the
   spacing; .cl-inner carries the shared .wy-band, which centres the content
   and caps it at 1440px. Keeping the two apart means the 4vw side gutter is
   measured from the edge of the page at every width, instead of from the
   edge of a band that has already stopped growing.
   -------------------------------------------------------------------------- */

.cl {
  display: block;
  padding: 96px 4vw;
  background: var(--wy-payne-gray);
  color: var(--wy-ice-white);
  /* Focus rings go white on this background (A4). */
  --wy-focus: var(--wy-white);
}

.cl-inner {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.cl-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
}

.cl-eyebrow {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wy-light-text-on-gray);
}

.cl-h2 {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 39.06px;
  line-height: 1.2;
}

.cl-intro {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 300;
}

/* ---------- Optional pre-box ---------- */

.cl-pre {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: 10px;
  background: var(--wy-ice-white);
  color: var(--wy-oxford-blue);
}

.cl-pre-title {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 20px;
}

.cl-pre-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 17px;
  line-height: 1.5;
}

.cl-tick {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--wy-syracuse-orange);
  border-radius: 4px;
}

.cl-pre-note {
  margin: 0;
  font-size: 16px;
  font-style: italic;
  color: var(--wy-payne-gray);
}

/* ---------- Optional note chips ---------- */

.cl-notes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 28px;
  border: 1px solid var(--wy-carolina-blue);
  border-radius: 10px;
}

.cl-notes-title {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--wy-white);
}

.cl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cl-chip {
  padding: 8px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 15px;
  line-height: 1.4;
}

/* No width cap: the line sits under a module that spans the whole band, and
   a cap two thirds of the way across broke it at a spot that read as an
   accident rather than a measure. */
.cl-footer {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  font-style: italic;
  color: var(--wy-alice-blue);
}

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

@media (max-width: 767px) {
  .cl {
    padding: 56px 4vw;
  }

  .cl-inner {
    gap: 24px;
  }

  .cl-head {
    gap: 10px;
  }

  .cl-eyebrow {
    font-size: 12px;
  }

  .cl-h2 {
    font-size: 28px;
  }

  .cl-intro {
    font-size: 17px;
  }

  .cl-pre {
    gap: 12px;
    padding: 22px;
  }

  .cl-pre-title {
    font-size: 18px;
    line-height: 1.3;
  }

  .cl-pre-item {
    font-size: 16px;
  }

  /* On mobile the note is a footnote under a rule, not an aside. */
  .cl-pre-note {
    padding-top: 12px;
    border-top: 1px solid var(--wy-alice-blue);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
    color: var(--wy-orange-text);
  }

  .cl-notes {
    gap: 10px;
    padding: 18px;
  }

  .cl-notes-title {
    font-size: 16px;
  }

  .cl-chips {
    gap: 8px;
  }

  .cl-chip {
    padding: 7px 12px;
    border-radius: 16px;
    font-size: 14px;
  }

  .cl-footer {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   Data Analytics closer look (C14)
   The signal chart: the HPI line drops first, the KPI line follows, and the
   gap between them is the window to act. Then the two explainer cards and
   the pairs.
   -------------------------------------------------------------------------- */

.sg {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sg-top {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
}

.sg-chart {
  flex: 999 1 600px;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--wy-ice-white);
}

.sg-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The lines draw left to right, HPI first; the window and the dots follow. */
.sg-line {
  stroke-dasharray: var(--sg-len, 1200);
  stroke-dashoffset: var(--sg-len, 1200);
  transition: stroke-dashoffset 1200ms var(--wy-ease-in-out);
}

.sg-line[data-which="kpi"] {
  transition-delay: 300ms;
}

.sg-chart[data-shown="true"] .sg-line {
  stroke-dashoffset: 0;
}

.sg-window,
.sg-dot,
.sg-mark {
  opacity: 0;
  transition: opacity 400ms var(--wy-ease-out) 900ms;
}

.sg-dot {
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 200ms var(--wy-ease-out) 900ms, transform 200ms var(--wy-ease-back) 900ms;
}

.sg-chart[data-shown="true"] .sg-window,
.sg-chart[data-shown="true"] .sg-mark {
  opacity: 1;
}

.sg-chart[data-shown="true"] .sg-dot {
  opacity: 1;
  transform: none;
}

.sg-side {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sg-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: 10px;
  background: var(--wy-ice-white);
  color: var(--wy-eerie-black);
}

.sg-card[data-kind="hpi"] {
  border-top: 6px solid var(--wy-syracuse-orange);
}

.sg-card[data-kind="kpi"] {
  border-top: 6px solid var(--wy-polynesian-blue);
}

.sg-card-t {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 800;
  font-size: 19px;
  color: var(--wy-oxford-blue);
}

.sg-card-b {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.sg-ex {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sg-pill {
  padding: 5px 11px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
}

.sg-card[data-kind="hpi"] .sg-pill {
  background: var(--wy-peach-tint);
  /* Deep enough on the peach tint for AA at 13px. */
  color: #8f3317;
}

.sg-card[data-kind="kpi"] .sg-pill {
  background: var(--wy-alice-blue);
  color: var(--wy-oxford-blue);
}

/* ---------- Pairs ---------- */

.sg-pairs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 28px;
  border-radius: 12px;
  background: var(--wy-slate-panel);
}

.sg-pairs-t {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--wy-white);
}

.sg-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
  align-items: center;
}

.sg-pair span[data-side] {
  padding: 10px 16px;
  border-radius: 24px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--wy-white);
}

.sg-pair span[data-side="a"] {
  border: 2px solid #f0a58c;
}

.sg-pair span[data-side="b"] {
  border: 2px solid var(--wy-carolina-blue);
}

.sg-link {
  width: 100%;
  height: 12px;
}

@media (max-width: 767px) {
  .sg {
    gap: 14px;
  }

  .sg-chart {
    flex: none;
    padding: 14px 10px;
  }

  .sg-side {
    flex: none;
  }

  .sg-card {
    gap: 8px;
    padding: 18px;
  }

  .sg-card-t {
    font-size: 18px;
  }

  .sg-pill {
    padding: 5px 10px;
  }

  .sg-pairs {
    gap: 12px;
    padding: 20px 16px;
  }

  .sg-pairs-t {
    font-size: 17px;
    line-height: 1.3;
  }

  /* Stacked, with a dashed drop between the two halves. */
  .sg-pair {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .sg-pair span[data-side] {
    padding: 9px 14px;
    border-radius: 20px;
  }

  .sg-drop {
    align-self: center;
    width: 2px;
    height: 14px;
    border-left: 2px dashed var(--wy-mist);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg-line,
  .sg-window,
  .sg-dot,
  .sg-mark {
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
    transition: none;
  }
}