/* --------------------------------------------------------------------------
   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 · The same four questions in every business

   Eight business chips over four cards. The four questions never change —
   that is the whole argument of the section — so only the label and the
   answer at the foot of each card do.

   Every business's answers are in the page at once, stacked in one grid
   cell: all eight are crawlable, each answer box already stands at the
   height of its longest answer so the cards never jump, and the answer going
   out can fade while the one coming in rises.
   -------------------------------------------------------------------------- */

.bsq {
  display: block;
  padding: 10vh 4vw 18vh;
  background: var(--wy-ice-blue);
  color: var(--wy-eerie-black);
}

.bsq-inner {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
  max-width: var(--wy-max);
  margin: 0 auto;
}

/* ---------- Heading ---------- */

.bsq-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 72px;
  align-items: end;
}

.bsq-head-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bsq-eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wy-orange-text);
}

.bsq-bar {
  flex: none;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--wy-syracuse-orange);
}

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

.bsq-intro {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--wy-payne-gray);
}

/* ---------- The chips ---------- */

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

.bsq-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px 0 14px;
  border: 1px solid var(--wy-mist);
  border-radius: 24px;
  background: var(--wy-white);
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--wy-oxford-blue);
  cursor: pointer;
  transition: background-color var(--wy-dur-fast) var(--wy-ease-out),
    border-color var(--wy-dur-fast) var(--wy-ease-out), color 200ms var(--wy-ease-out);
}

.bsq-chip-icon {
  flex: none;
  color: var(--wy-polynesian-blue);
  transition: color 200ms var(--wy-ease-out);
}

.bsq-chip[aria-selected="true"] {
  border-color: var(--wy-oxford-blue);
  background: var(--wy-oxford-blue);
  color: var(--wy-white);
}

.bsq-chip[aria-selected="true"] .bsq-chip-icon {
  color: var(--wy-white);
}

@media (hover: hover) and (pointer: fine) {
  .bsq-chip[aria-selected="false"]:hover {
    border-color: var(--wy-oxford-blue);
    background: var(--wy-alice-blue);
  }
}

/* Fade in on scroll, 40ms apart, with no travel — eight chips sliding at
   once reads as the row itself moving. */
.bsq-chip-reveal {
  opacity: 0;
  transition: opacity var(--wy-dur-reveal) var(--wy-ease-out),
    background-color var(--wy-dur-fast) var(--wy-ease-out),
    border-color var(--wy-dur-fast) var(--wy-ease-out), color 200ms var(--wy-ease-out);
}

.bsq-chip-reveal[data-shown="true"] {
  opacity: 1;
}

/* ---------- The four cards ---------- */

.bsq-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.bsq-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wy-alice-blue);
  border-radius: 14px;
  overflow: hidden;
  background: var(--wy-white);
  /* Rises into place on scroll; see the stagger below. */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--wy-dur-reveal) var(--wy-ease-out),
    transform var(--wy-dur-reveal) var(--wy-ease-out), box-shadow 200ms var(--wy-ease-out);
}

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

@media (hover: hover) and (pointer: fine) {
  .bsq-card[data-shown="true"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(7, 39, 75, 0.12);
  }
}

/* The P colours: the head is the only place on this page where all four
   appear side by side, so the four are the section's key. */
.bsq-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 24px;
  /* Wipes in from the left once the card has arrived. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 400ms var(--wy-ease-out) 200ms;
}

.bsq-card[data-shown="true"] .bsq-card-head {
  clip-path: inset(0);
}

.bsq-card[data-p="Purpose"] .bsq-card-head {
  background: var(--wy-oxford-blue);
  color: var(--wy-white);
}

.bsq-card[data-p="Process"] .bsq-card-head {
  background: var(--wy-polynesian-blue);
  color: var(--wy-white);
}

.bsq-card[data-p="Proof"] .bsq-card-head {
  background: var(--wy-celestial-blue);
  color: var(--wy-oxford-blue);
}

.bsq-card[data-p="Promise"] .bsq-card-head {
  background: var(--wy-orange-text);
  color: var(--wy-white);
}

.bsq-p {
  font-family: var(--wy-font-head);
  font-weight: 800;
  font-size: 22px;
}

.bsq-num {
  font-family: var(--wy-font-head);
  font-weight: 800;
  font-size: 14px;
  opacity: 0.75;
}

.bsq-card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  padding: 24px;
}

.bsq-q {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  color: var(--wy-oxford-blue);
}

/* All eight answers in one cell, pinned to the foot of the card. */
.bsq-stack {
  display: grid;
  margin-top: auto;
}

.bsq-stack > * {
  grid-area: 1 / 1;
}

.bsq-answer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 120ms var(--wy-ease-out), transform 0s linear 120ms,
    visibility 0s linear 120ms;
}

/* Out over 120ms, then in over 220ms, card by card 60ms apart — left to
   right on a laptop, top to bottom on a phone, which is the same order. */
.bsq-answer[data-on="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 220ms var(--wy-ease-out) calc(120ms + var(--bsq-i, 0) * 60ms),
    transform 220ms var(--wy-ease-out) calc(120ms + var(--bsq-i, 0) * 60ms), visibility 0s;
}

/* A tint of the card's own P colour, so an answer belongs to its question. */
.bsq-card[data-p="Purpose"] .bsq-answer {
  background: #e6ebf1;
}

.bsq-card[data-p="Process"] .bsq-answer {
  background: #e3ecf6;
}

.bsq-card[data-p="Proof"] .bsq-answer {
  background: #e6f2f8;
}

.bsq-card[data-p="Promise"] .bsq-answer {
  background: var(--wy-peach-tint);
}

.bsq-answer-label {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wy-payne-gray);
}

.bsq-answer-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--wy-oxford-blue);
}

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

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

  .bsq-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Phone ---------- */

@media (max-width: 767px) {
  /* The chip row runs edge to edge, so the section's side padding moves on
     to the blocks that are not it. */
  .bsq {
    padding: 52px 0 18vh;
  }

  .bsq-inner {
    gap: 18px;
  }

  .bsq-head {
    padding: 0 20px;
  }

  .bsq-eyebrow {
    gap: 12px;
    font-size: 12px;
  }

  .bsq-bar {
    width: 44px;
  }

  .bsq-title {
    font-size: 28px;
  }

  .bsq-intro {
    font-size: 16px;
  }

  /* One row that scrolls, rather than four rows of wrapped chips. */
  .bsq-chips {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 2px 20px 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* The snap area and scrollIntoView both measure from the padding box, so
       without this the first chip snaps flush to the edge of the screen and
       the 20px that lines it up with the heading above is eaten. */
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }

  .bsq-chips::-webkit-scrollbar {
    display: none;
  }

  .bsq-chip {
    flex: none;
    min-height: 44px;
    padding: 0 16px 0 12px;
    border-radius: 22px;
    font-size: 13px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .bsq-chip-icon {
    width: 18px;
    height: 18px;
  }

  .bsq-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 0 20px;
  }

  .bsq-card {
    border-radius: 12px;
  }

  .bsq-card-head {
    padding: 12px 18px;
  }

  .bsq-p {
    font-size: 18px;
  }

  .bsq-num {
    font-size: 12px;
  }

  .bsq-card-body {
    gap: 12px;
    padding: 16px 18px 18px;
  }

  .bsq-q {
    font-size: 17px;
  }

  .bsq-answer {
    padding: 12px 14px;
    border-radius: 8px;
  }

  .bsq-answer-label {
    font-size: 10px;
  }

  .bsq-answer-text {
    font-size: 15px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .bsq-chip-reveal,
  .bsq-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .bsq-card-head {
    clip-path: none;
    transition: none;
  }

  .bsq-answer,
  .bsq-answer[data-on="true"] {
    transform: none;
    transition: none;
  }
}