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

/* --------------------------------------------------------------------------
   Service slider (spec B3)
   Mobile behaviour only: at 767px and below the slides become a swipeable
   track that bleeds into the right page gutter so the next card peeks. Above
   that the same slides lay out as the desktop grid.

   Note the deliberate difference from the Slider Carousel component: this one
   wraps, so both arrows stay enabled at the ends.
   -------------------------------------------------------------------------- */

:host {
  display: block;
}

.sl {
  --sl-w: 86%;
  --sl-gap: 12px;
  --sl-i: 0;

  --sl-control: var(--wy-oxford-blue);
  --sl-control-hover: var(--wy-alice-blue);
  --sl-dot-on: var(--wy-syracuse-orange);
  --sl-dot-off: var(--wy-mist);
  --sl-count: var(--wy-payne-gray);

  position: relative;
  width: 100%;
}

/* Light controls sit on the gray closer-look section and the navy results
   band; Dark controls on white and pale blue. */
.sl[data-theme="light"] {
  --sl-control: var(--wy-white);
  --sl-control-hover: rgba(255, 255, 255, 0.12);
  --sl-dot-on: var(--wy-white);
  --sl-dot-off: var(--wy-slate-dot);
  --sl-count: var(--wy-alice-blue);
  --wy-focus: var(--wy-white);
}

.sl-viewport {
  overflow: hidden;
  /* The only place content touches the screen edge: it reaches into the
     20px page gutter so the next card shows. */
  margin-right: -20px;
}

.sl-track {
  display: flex;
  gap: var(--sl-gap);
  align-items: stretch;
  transform: translateX(calc(var(--sl-i) * -1 * (var(--sl-w) + var(--sl-gap))));
  transition: transform 0.35s ease;
}

/* While a finger is dragging the track follows it, with no transition. */
.sl[data-dragging="true"] .sl-track {
  transition: none;
}

.sl-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.sl-arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--sl-control);
  border-radius: 50%;
  background: transparent;
  color: var(--sl-control);
  cursor: pointer;
  transition: background-color var(--wy-dur-fast) var(--wy-ease-out),
    transform 100ms var(--wy-ease-out);
}

@media (hover: hover) {
  .sl-arrow:hover {
    background: var(--sl-control-hover);
  }
}

.sl-arrow:active {
  transform: scale(0.94);
}

.sl-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sl-dots {
  display: flex;
  gap: 6px;
}

.sl-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--sl-dot-off);
  transition: width 200ms var(--wy-ease-out), background-color 200ms var(--wy-ease-out);
}

.sl-dot[data-on="true"] {
  width: 20px;
  background: var(--sl-dot-on);
}

.sl-count {
  font-size: 13px;
  line-height: 1.4;
  color: var(--sl-count);
}

/* One slide: nothing to page through. */
.sl[data-single="true"] .sl-controls {
  display: none;
}

.sl[data-single="true"] .sl-viewport {
  margin-right: 0;
}

/* Above mobile the track is the desktop grid and the controls go away. The
   per-slide widths are inline styles, applied and cleared in JS, because
   Webflow delivers every slide inside one wrapper that ::slotted cannot
   see past. */
.sl[data-mode="grid"] .sl-viewport {
  overflow: visible;
  margin-right: 0;
}

.sl[data-mode="grid"] .sl-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--sl-min, 280px), 1fr));
  gap: var(--sl-grid-gap, 20px);
  transform: none;
  transition: none;
}

.sl[data-mode="grid"] .sl-controls {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .sl-track,
  .sl-dot,
  .sl-arrow {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Our Friction Audits

   A two-column header — the title left, the standfirst right — over nine
   white cards in a three-column grid. Each card is topped by a 4px rule that
   cycles navy, Polynesian, Celestial by card number. Mobile stacks the
   header and swaps the grid for the service slider.

   Sizes are read from the approved design, which was drawn against the
   spec's 1280px content box: 28px card padding, a 16px grid gap, a 48px icon
   tile and 22/17px type (A3, A4).
   -------------------------------------------------------------------------- */

/* The full-bleed band. It paints the background edge to edge and carries all
   of the component's own spacing, so nothing inside has padding of its own. */
.fa {
  display: block;
  padding: 8vh 4vw;
  background: var(--wy-ice-white);
  color: var(--wy-eerie-black);
}

/* The content container: capped at 1440px by .wy-band and centred in
   whatever is left, so past the cap it stays in the middle of the page
   rather than against the left edge. */
.fa-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---------- The header ---------- */

/* 2fr / 3fr puts the standfirst two fifths of the way across, which is where
   the design starts it, and keeps both columns proportional rather than
   pinning the title to a width it might outgrow. */
.fa-head {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 40px;
  align-items: start;
}

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

.fa-intro {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--wy-payne-gray);
}

/* ---------- The nine cards ---------- */

/* Three columns at the full band, two on a tablet: 340px is the width at
   which 1376px still divides into three but 960px does not, so the step down
   needs no breakpoint of its own. */
.fa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}

.fa-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--wy-alice-blue);
  /* The rule is the card's own top border, so it follows the rounded top
     corners and the padding below it stays the card's. */
  border-top: 4px solid var(--wy-oxford-blue);
  border-radius: 8px;
  background: var(--wy-white);
}

/* The rule cycles by card number, not by column. On the desktop grid that
   reads as a colour per column; on the slider the same three repeat. */
.fa-card:nth-child(3n + 2) {
  border-top-color: var(--wy-polynesian-blue);
}

.fa-card:nth-child(3n) {
  border-top-color: var(--wy-celestial-blue);
}

.fa-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fa-tile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--wy-ice-blue);
  color: var(--wy-polynesian-blue);
}

.fa-num {
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--wy-cool-gray);
}

.fa-t {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--wy-oxford-blue);
}

.fa-b {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}

.fa-kicker {
  margin: 8px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--wy-alice-blue);
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  /* #B8411D, not #D34E24: small bold orange on white (A2, Part E). */
  color: var(--wy-orange-text);
}

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

@media (max-width: 767px) {
  .fa-inner {
    gap: 24px;
  }

  .fa-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

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

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

  .fa-card {
    gap: 10px;
    padding: 22px;
  }

  .fa-tile {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  .fa-num {
    font-size: 13px;
  }

  .fa-t {
    font-size: 20px;
  }

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

  .fa-kicker {
    padding-top: 14px;
    font-size: 16px;
  }
}