/* --------------------------------------------------------------------------
   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 · Size scale

   A row of six circles that grow from a solopreneur to large enterprise, an
   orange bracket over the five we work with, and a panel under it that names
   what usually needs attention at the selected stage.

   Every stage's panel is in the page at once, stacked in one grid cell. That
   is what makes all five crawlable, what gives the panel the height of its
   tallest state without measuring anything, and what lets the old state fade
   out while the new one fades in — they are different elements, so the two
   can overlap the way the spec's 120ms / 220ms crossfade needs.
   -------------------------------------------------------------------------- */

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

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

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

.bss-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
}

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

.bss-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);
}

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

.bss-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);
}

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

/* ---------- The scale ---------- */

.bss-cols {
  display: grid;
  /* Five stages, then the faded enterprise stop in a narrower last column. */
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 0.9fr);
}

/* On a laptop this wrapper dissolves and its children become cells of the
   grid above; it exists for the phone layout, where it is the vertical list
   with the orange rule down its left and the enterprise stop sits outside
   it. */
.bss-stops {
  display: contents;
}

.bss-bracket {
  position: relative;
  grid-row: 1;
  grid-column: 1 / 6;
  height: 34px;
  margin: 0 10% 14px;
}

/* The line fades with the label but draws from its own centre outward. */
.bss-bracket.wy-reveal {
  transform: none;
}

.bss-bracket-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  height: 2px;
  background: var(--wy-syracuse-orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 500ms var(--wy-ease-out);
}

.bss-bracket[data-shown="true"] .bss-bracket-line {
  transform: none;
}

/* The two end ticks, drawn off the line so they draw with it. */
.bss-bracket-line::before,
.bss-bracket-line::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 2px;
  height: 14px;
  background: var(--wy-syracuse-orange);
}

.bss-bracket-line::before {
  left: 0;
}

.bss-bracket-line::after {
  right: 0;
}

/* Sits on the line, with the page colour behind it so the line appears to
   break for the words. */
.bss-bracket-label {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  padding: 0 16px;
  background: var(--wy-ice-white);
  font-family: var(--wy-font-head);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wy-orange-text);
  white-space: nowrap;
}

/* A grid item rather than an absolutely positioned one, so its 44px drop and
   its 8.5% / 7.6% insets are measured against the row of stops itself — no
   number here has to be kept in step with the height of the bracket above. */
.bss-track {
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: start;
  height: 3px;
  margin: 44px 7.6% 0 8.5%;
  /* Fades out towards enterprise: the scale stops being ours before the line
     stops being drawn. */
  background: linear-gradient(90deg, var(--wy-carolina-blue) 0%, var(--wy-carolina-blue) 82%, rgba(132, 188, 218, 0) 100%);
  pointer-events: none;
}

.bss-track.wy-reveal {
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity var(--wy-dur-reveal) var(--wy-ease-out), transform 700ms var(--wy-ease-out);
}

.bss-track.wy-reveal[data-shown="true"] {
  transform: none;
}

.bss-stop {
  position: relative;
  grid-row: 2;
  grid-column: var(--bss-col, auto);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

/* Every dot shares one centre line, whatever its diameter. */
.bss-dot-box {
  display: flex;
  align-items: center;
  height: 90px;
}

.bss-dot {
  width: var(--bss-dot, 46px);
  height: var(--bss-dot, 46px);
  border: 3px solid var(--wy-carolina-blue);
  border-radius: 50%;
  background: var(--wy-white);
  /* The delay is what makes the colour travel along the track: each dot
     between the old stage and the new one waits 40ms longer than the last. */
  transition: background-color var(--wy-dur-base) ease var(--bss-delay, 0ms),
    border-color var(--wy-dur-base) ease var(--bss-delay, 0ms),
    box-shadow var(--wy-dur-base) ease var(--bss-delay, 0ms),
    transform var(--wy-dur-base) ease;
}

.bss-stop[data-state="before"] .bss-dot {
  background: var(--wy-carolina-blue);
  border-color: var(--wy-carolina-blue);
}

.bss-stop[data-state="on"] .bss-dot {
  background: var(--wy-syracuse-orange);
  border-color: var(--wy-syracuse-orange);
  box-shadow: 0 0 0 8px rgba(211, 78, 36, 0.16);
  /* Starting to match this rule is what runs the animation, so the newly
     selected dot pops and the others do not. */
  animation: bss-pop 300ms var(--wy-ease-back) var(--bss-delay, 0ms);
}

@keyframes bss-pop {
  50% {
    transform: scale(1.12);
  }
}

.bss-stop-text {
  display: flex;
  flex-direction: column;
}

.bss-name {
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--wy-payne-gray);
}

.bss-stop[data-state="on"] .bss-name {
  font-weight: 800;
  color: var(--wy-oxford-blue);
}

.bss-people {
  margin-top: -8px;
  font-size: 14px;
  color: var(--wy-payne-gray);
}

@media (hover: hover) and (pointer: fine) {
  .bss-stop[data-state="before"]:hover .bss-dot,
  .bss-stop[data-state="after"]:hover .bss-dot {
    transform: scale(1.08);
    border-color: var(--wy-polynesian-blue);
    transition-duration: var(--wy-dur-fast);
  }

  .bss-stop[data-state="before"]:hover .bss-name,
  .bss-stop[data-state="after"]:hover .bss-name {
    color: var(--wy-oxford-blue);
  }
}

/* The one stage this page is not about: named, so the scale has a top edge,
   and faded, because nothing here is addressed to it. */
.bss-enterprise {
  grid-row: 2;
  grid-column: 6;
  opacity: 0.55;
  cursor: default;
}

.bss-enterprise .bss-dot {
  border: 2px dashed var(--wy-cool-gray);
  background: transparent;
}

/* Dots pop in as the scale scrolls into view, in turn. The reveal scale sits
   on the box and the state scale on the dot, so neither overwrites the
   other. */
.bss-pop {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 400ms var(--wy-ease-back) 300ms, transform 400ms var(--wy-ease-back) 300ms;
}

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

/* ---------- The panel ---------- */

.bss-panel {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  border: 1px solid var(--wy-alice-blue);
  border-radius: 16px;
  overflow: hidden;
  background: var(--wy-white);
  box-shadow: 0 18px 40px rgba(7, 39, 75, 0.08);
}

.bss-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 40px 36px;
  background: var(--wy-oxford-blue);
  color: var(--wy-white);
  --wy-focus: var(--wy-white);
}

.bss-num {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  color: var(--wy-syracuse-orange);
}

/* All five states in one cell. */
.bss-stack {
  display: grid;
}

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

.bss-side-state {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The state leaving: fades over 120ms and only then stops being painted, so
   it is still visible while it fades. */
.bss-side-state {
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms var(--wy-ease-out), visibility 0s linear 120ms;
}

/* The state arriving: waits for the other one to go, then rises. */
.bss-side-state[data-on="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms var(--wy-ease-out) 120ms, visibility 0s;
}

/* The need cards fade one at a time, so the list itself only has to stop
   being painted once they have — no opacity of its own, or it would fade the
   stagger away underneath them. */
.bss-needs {
  visibility: hidden;
  transition: visibility 0s linear 120ms;
}

.bss-needs[data-on="true"] {
  visibility: visible;
  transition: visibility 0s;
}

.bss-stage-name {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  color: var(--wy-white);
}

.bss-stage-people {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wy-carolina-blue);
}

.bss-headline {
  margin: 10px 0 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--wy-alice-blue);
}

.bss-nav {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}

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

@media (hover: hover) and (pointer: fine) {
  .bss-arrow:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}

.bss-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px;
  background: var(--wy-white);
}

.bss-panel-label {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wy-payne-gray);
}

.bss-needs-stack {
  flex: 1;
}

.bss-needs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bss-need {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 12px;
  background: var(--wy-ice-blue);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 120ms var(--wy-ease-out), transform 0s linear 120ms;
}

/* Left to right, 60ms apart. */
.bss-needs[data-on="true"] .bss-need {
  opacity: 1;
  transform: none;
  transition: opacity 220ms var(--wy-ease-out) calc(120ms + var(--bss-i, 0) * 60ms),
    transform 220ms var(--wy-ease-out) calc(120ms + var(--bss-i, 0) * 60ms);
}

.bss-tag {
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 4px;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

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

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

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

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

.bss-need-title {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--wy-oxford-blue);
}

.bss-need-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--wy-eerie-black);
}

/* ---------- Tablet and phone: the scale stands up ---------- */

@media (max-width: 991px) {
  .bss-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .bss-intro {
    max-width: none;
  }

  /* A flex column, so the grid placement above simply stops applying. */
  .bss-cols {
    display: flex;
    flex-direction: column;
  }

  /* The orange rule runs beside the five stages we work with, and stops
     before the enterprise stop, which is outside this box. */
  .bss-stops {
    display: flex;
    flex-direction: column;
    padding-left: 18px;
    border-left: 3px solid var(--wy-syracuse-orange);
  }

  .bss-bracket {
    height: auto;
    margin: 0;
    padding-bottom: 6px;
  }

  /* Vertical: the rule down the left is the bracket now. */
  .bss-bracket-line,
  .bss-track {
    display: none;
  }

  .bss-bracket-label {
    position: static;
    transform: none;
    padding: 0;
    background: none;
    font-size: 11px;
  }

  .bss-stop {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 64px;
    padding: 4px 0;
    text-align: left;
  }

  .bss-dot-box {
    height: auto;
    justify-content: center;
  }

  .bss-people {
    margin-top: 0;
  }

  .bss-enterprise {
    padding-left: 21px;
  }

  .bss-panel {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 8px;
  }

  /* The list is the control at this width; a second one only adds a target
     to miss. */
  .bss-nav {
    display: none;
  }

  .bss-needs {
    gap: 12px;
  }
}

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

@media (max-width: 767px) {
  .bss {
    padding: 52px 20px;
  }

  .bss-inner {
    gap: 18px;
  }

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

  .bss-bar {
    width: 44px;
  }

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

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

  .bss-panel {
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(7, 39, 75, 0.08);
  }

  /* The number beside the name, the headline full width under both. */
  .bss-side {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 0;
    align-items: center;
    padding: 22px 20px;
  }

  .bss-num {
    grid-column: 1;
    grid-row: 1;
    font-size: 44px;
  }

  .bss-side-stack {
    grid-column: 2;
    grid-row: 1;
  }

  .bss-headline-stack {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .bss-side-state {
    gap: 2px;
  }

  .bss-stage-name {
    font-size: 21px;
  }

  .bss-stage-people {
    font-size: 11px;
  }

  .bss-headline {
    font-size: 16px;
  }

  .bss-main {
    gap: 12px;
    padding: 18px;
  }

  .bss-panel-label {
    font-size: 11px;
  }

  .bss-needs {
    grid-template-columns: minmax(0, 1fr);
  }

  .bss-need {
    gap: 8px;
    padding: 16px;
    border-radius: 10px;
  }

  .bss-tag {
    font-size: 10px;
  }

  .bss-need-title {
    font-size: 17px;
  }

  .bss-need-body {
    font-size: 15px;
    line-height: 1.5;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  /* Colours still change — that is the answer to the click — but nothing
     draws, pops, travels or staggers. */
  .bss-bracket-line,
  .bss-track.wy-reveal,
  .bss-pop {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .bss-dot {
    transition: background-color var(--wy-dur-fast) linear, border-color var(--wy-dur-fast) linear,
      box-shadow var(--wy-dur-fast) linear;
  }

  .bss-stop[data-state="on"] .bss-dot {
    animation: none;
  }

  .bss-side-state,
  .bss-needs,
  .bss-need {
    transition: none;
    transform: none;
  }

  .bss-side-state[data-on="true"],
  .bss-needs[data-on="true"] .bss-need {
    transition: none;
  }
}