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

/* --------------------------------------------------------------------------
   Where {Service} fits in our process (spec B1)
   A five-stage chevron ribbon with a Commitment Brand end cap, three cards
   underneath, and a link that opens the I.D.I.D. process map in a modal.

   One DOM for both layouts: the stages are an <ol> that is a chevron grid on
   desktop and a stack of rows on mobile. On mobile the header wrapper becomes
   display: contents so the link can re-order to the bottom (spec's mobile
   tree) without a second copy of it.
   -------------------------------------------------------------------------- */

:host {
  display: block;
}

.wf {
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: var(--wy-oxford-blue);
}

.wf-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px 40px;
}

.wf-head-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 820px;
}

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

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

.wf-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--wy-font-body);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--wy-polynesian-blue);
  /* Underlined at rest, as drawn; hover drops the underline further away. */
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: text-underline-offset var(--wy-dur-fast) var(--wy-ease-out);
}

.wf-link:hover,
.wf-link:focus-visible {
  text-underline-offset: 4px;
}

/* The arrow nudges on hover; the colour does not change (A6). */
.wf-arrow {
  transition: transform var(--wy-dur-fast) var(--wy-ease-out);
}

.wf-link:hover .wf-arrow,
.wf-link:focus-visible .wf-arrow {
  transform: translateX(4px);
}

/* Wide ribbons scroll rather than squeeze. At tablet and below the mobile
   layout takes over, so this never actually scrolls in practice. */
.wf-scroll {
  overflow-x: auto;
}

.wf-ribbon {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr)) minmax(140px, 0.8fr);
  gap: 6px;
  min-width: 960px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wf-stage {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 34px 18px 36px;
  background: var(--wy-alice-blue);
  color: var(--wy-polynesian-blue);
  /* Point on the right, notch on the left. */
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
  /* Pale → orange when the ribbon reveals. */
  transition: background-color var(--wy-dur-base) var(--wy-ease-out),
    color var(--wy-dur-base) var(--wy-ease-out);
}

/* The first stage has no notch to fit into. */
.wf-stage:first-child {
  padding-left: 22px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
}

/* #B8411D rather than #D34E24: the sublines are 13px white, which fails AA on
   the brighter orange (spec A2 and Part E). */
.wf-stage[data-active="true"][data-shown="true"] {
  background: var(--wy-orange-text);
  color: var(--wy-white);
}

.wf-stage-label {
  font-family: var(--wy-font-head);
  font-weight: 800;
  font-size: 17px;
  text-transform: uppercase;
}

.wf-stage-sub {
  font-size: 13px;
}

.wf-cap {
  display: flex;
  align-items: center;
  padding: 18px;
  border-radius: 6px;
  background: var(--wy-oxford-blue);
  color: var(--wy-white);
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 15px;
}

.wf-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.wf-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--wy-alice-blue);
  border-radius: 10px;
  background: var(--wy-white);
}

/* The middle card is the service's own role, so it carries the accent. */
.wf-card[data-role="true"] {
  border: 2px solid var(--wy-syracuse-orange);
}

.wf-card-label {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wy-payne-gray);
}

.wf-card[data-role="true"] .wf-card-label {
  color: var(--wy-orange-text);
}

.wf-card-body {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  white-space: pre-line;
}

/* The ribbon slides in left to right; each stage's own delay is set inline. */
.wf-stage,
.wf-cap {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 400ms var(--wy-ease-out), transform 400ms var(--wy-ease-out),
    background-color var(--wy-dur-base) var(--wy-ease-out) var(--wy-fill-delay, 0ms),
    color var(--wy-dur-base) var(--wy-ease-out) var(--wy-fill-delay, 0ms);
}

.wf-stage[data-shown="true"],
.wf-cap[data-shown="true"] {
  opacity: 1;
  transform: none;
}

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

@media (max-width: 767px) {
  .wf {
    gap: 20px;
  }

  /* Dissolving these two wrappers lets the h2, intro and link take part in
     the root's flex column, so `order` can put the link after the cards. */
  .wf-head,
  .wf-head-text {
    display: contents;
  }

  .wf-h2 {
    font-size: 25px;
    line-height: 1.25;
  }

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

  .wf-scroll {
    order: 2;
    overflow-x: visible;
  }

  .wf-cards {
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .wf-link {
    order: 4;
    min-height: 44px;
    font-size: 16px;
  }

  .wf-ribbon {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  .wf-stage,
  .wf-stage:first-child {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 6px;
    clip-path: none;
    /* Rows fade in from the top rather than sliding sideways. */
    transform: translateY(-6px);
  }

  .wf-stage[data-shown="true"] {
    transform: none;
  }

  .wf-stage-label {
    font-size: 15px;
  }

  .wf-stage-sub {
    text-align: right;
  }

  .wf-cap {
    padding: 12px 16px;
  }

  .wf-card {
    padding: 20px;
    gap: 8px;
  }

  .wf-card-label {
    font-size: 12px;
  }

  .wf-card-body {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wf-stage,
  .wf-cap {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- I.D.I.D. modal ---------- */

.id-backdrop {
  position: fixed;
  inset: 0;
  /* Above the site nav. */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 39, 75, 0.65);
  animation: id-fade 200ms var(--wy-ease-out);
}

.id-panel {
  display: flex;
  flex-direction: column;
  /* The map is the widest thing wYrks shows, inset 32px from the viewport. */
  width: min(var(--wy-max), 100vw - 64px);
  height: calc(100vh - 64px);
  border-radius: 12px;
  background: var(--wy-ice-white);
  overflow: hidden;
  animation: id-pop 250ms var(--wy-ease-out);
}

@keyframes id-fade {
  from { opacity: 0; }
}

@keyframes id-pop {
  from { opacity: 0; transform: scale(0.96); }
}

.id-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  background: var(--wy-oxford-blue);
  --wy-focus: var(--wy-white);
}

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

.id-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.id-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--wy-white);
  cursor: pointer;
  transition: background-color var(--wy-dur-fast) var(--wy-ease-out);
}

@media (hover: hover) {
  .id-btn:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}

.id-zoom {
  min-width: 52px;
  font-size: 14px;
  text-align: center;
  color: var(--wy-alice-blue);
}

.id-viewer {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  background: var(--wy-alice-blue);
  overflow: auto;
  overscroll-behavior: contain;
  cursor: grab;
  touch-action: pan-x pan-y;
}

.id-viewer:active {
  cursor: grabbing;
}

.id-canvas {
  display: block;
  /* The canvas is drawn at device pixels and sized down in CSS. */
  box-shadow: 0 6px 20px rgba(7, 39, 75, 0.18);
}

.id-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid rgba(211, 78, 36, 0.25);
  border-top-color: var(--wy-syracuse-orange);
  border-radius: 50%;
  animation: id-spin 700ms linear infinite;
}

@keyframes id-spin {
  to { transform: rotate(360deg); }
}

.id-failed {
  margin: auto;
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
  color: var(--wy-oxford-blue);
}

.id-failed a {
  color: var(--wy-polynesian-blue);
}

@media (max-width: 767px) {
  .id-panel {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  .id-viewer {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .id-backdrop,
  .id-panel {
    animation: none;
  }

  .id-spinner {
    animation-duration: 2s;
  }
}