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

/* --------------------------------------------------------------------------
   Leadership · Leader card

   A portrait card with the role, name and a quote over a navy gradient, which
   turns on its vertical axis to a bio on the back.

   The card stands on its own: it fills the width of whatever it is dropped
   into (a Webflow grid or flex row of your own), and its height for each
   breakpoint comes from its own properties.
   -------------------------------------------------------------------------- */

.lc {
  display: block;
  width: 100%;
  perspective: 1800px;
  height: var(--lc-h-d, 640px);
  /* Both buttons sit on navy or orange, so the focus ring goes white (A4). */
  --wy-focus: var(--wy-white);
}

.lc-flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 0.8s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.lc[data-flipped="true"] .lc-flip {
  transform: rotateY(180deg);
}

/* Each face hides its own back, so the one turned away is invisible rather
   than mirrored through the card. */
.lc-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--wy-oxford-blue);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 40px rgba(7, 39, 75, 0.16);
  /* The whole face turns the card, so it says so. The button on it is still
     the control a keyboard uses. */
  cursor: pointer;
}

/* ---------- Front ---------- */

.lc-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--wy-ease-out);
}

.lc-photo--empty {
  background: var(--wy-navy-panel);
}

/* The text at the foot of the card is legible because of this, so the stops
   are part of the design rather than a flourish: by 62% of the height the
   navy is already at 78%. */
.lc-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 39, 75, 0) 34%,
    rgba(7, 39, 75, 0.78) 62%,
    rgba(7, 39, 75, 0.97) 100%
  );
}

.lc-tab {
  position: absolute;
  left: 0;
  top: 40px;
  width: 8px;
  height: 72px;
  border-radius: 0 4px 4px 0;
  background: var(--wy-syracuse-orange);
}

.lc-front-text {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lc-role {
  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);
}

.lc-name {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 31.25px;
  line-height: 1.15;
  color: var(--wy-white);
}

.lc-quote {
  margin: 0;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--wy-alice-blue);
}

.lc-quote p {
  margin: 0;
}

/* ---------- The two buttons ---------- */

.lc-open,
.lc-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background-color var(--wy-dur-fast) ease, transform var(--wy-dur-fast) ease;
}

.lc-open:focus-visible,
.lc-close:focus-visible {
  outline-offset: 3px;
}

.lc-open {
  align-self: flex-start;
  margin-top: 6px;
  border: 0;
  /* #B8411D rather than #D34E24: white on the brighter orange is 4.3:1, just
     short of AA at this size (spec 3.8). */
  background: var(--wy-orange-text);
  color: var(--wy-white);
}

.lc-close {
  border: 2px solid var(--wy-carolina-blue);
  background: transparent;
  color: var(--wy-white);
}

.lc-arrow {
  flex: none;
  transition: transform var(--wy-dur-fast) ease;
}

.lc-open:active,
.lc-close:active {
  transform: scale(0.96);
  transition-duration: 100ms;
}

/* Hover belongs to pointers: on a touch screen it sticks after the tap. */
@media (hover: hover) and (pointer: fine) {
  .lc-open:hover {
    background: #c2461f;
  }

  .lc-close:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}

/* The parts of hover that move: the front only — a turned card does not lift
   or zoom — and none of it for a visitor who asked for less movement. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lc:not([data-flipped="true"]):hover .lc-photo {
    transform: scale(1.04);
  }

  .lc:not([data-flipped="true"]):hover .lc-front {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(7, 39, 75, 0.22);
  }

  .lc-open:hover .lc-arrow {
    transform: translateX(3px);
  }
}

.lc-front {
  transition: transform var(--wy-dur-base) var(--wy-ease-out),
    box-shadow var(--wy-dur-base) var(--wy-ease-out);
}

/* ---------- Back ---------- */

.lc-back {
  display: flex;
  flex-direction: column;
  transform: rotateY(180deg);
  color: var(--wy-alice-blue);
}

.lc-back-head {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 36px 40px 24px;
  border-bottom: 1px solid var(--wy-line-on-navy);
}

.lc-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--wy-syracuse-orange);
}

.lc-back .lc-role {
  margin-bottom: 6px;
  font-size: 12px;
}

.lc-back-name {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 25px;
  color: var(--wy-white);
}

/* A bio longer than the card scrolls here, so the head and the button stay
   where they are rather than being pushed out of the card. */
.lc-back-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 40px;
}

/* Block with margins, not a flex column with a gap, and the type set here
   rather than only on the paragraphs.

   Webflow delivers the bio as slotted light-DOM content, which
   a `p` rule written in this component's stylesheet can never reach —
   ::slotted() styles the assigned node and nothing inside it. Inherited
   properties do pass through the slot, so size, line height and colour are
   set on the container and the paragraphs pick them up; their spacing is
   whatever the page gives a <p>, which a flex `gap` would have fought with
   anyway. The `p` rules below still dress a bio that arrives as a real
   string — a default, or the local preview. */
.lc-bio {
  display: block;
  font-size: 17px;
  line-height: 1.6;
  color: var(--wy-alice-blue);
}

.lc-bio ::slotted(*) {
  display: block;
}

.lc-bio p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--wy-alice-blue);
}

.lc-bio p:last-child {
  margin-bottom: 0;
}

.lc-bio a {
  color: var(--wy-white);
}

.lc-chips {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lc-chips li {
  padding: 6px 12px;
  border: 1px solid var(--wy-line-on-navy);
  border-radius: 16px;
  background: var(--wy-navy-panel);
  font-weight: 600;
  font-size: 13px;
  color: var(--wy-white);
}

.lc-back-foot {
  padding: 0 40px 32px;
}

/* --------------------------------------------------------------------------
   Scroll-in (A6 / spec 3.7)

   The card arrives, then its front text follows a beat later. Kept inside
   `no-preference` so the hidden starting states do not exist at all for a
   visitor who has asked for less movement.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .lc:not([data-shown="true"]) {
    opacity: 0;
    transform: translateY(32px);
  }

  .lc {
    transition: opacity 0.7s var(--wy-ease-out) var(--lc-d, 0ms),
      transform 0.7s var(--wy-ease-out) var(--lc-d, 0ms);
  }

  .lc:not([data-shown="true"]) .lc-role,
  .lc:not([data-shown="true"]) .lc-name,
  .lc:not([data-shown="true"]) .lc-quote,
  .lc:not([data-shown="true"]) .lc-open {
    opacity: 0;
    transform: translateY(12px);
  }

  .lc-front-text > * {
    transition: opacity 0.4s var(--wy-ease-out), transform 0.4s var(--wy-ease-out);
  }

  .lc-role {
    transition-delay: calc(var(--lc-d, 0ms) + 200ms);
  }

  .lc-name {
    transition-delay: calc(var(--lc-d, 0ms) + 260ms);
  }

  .lc-quote {
    transition-delay: calc(var(--lc-d, 0ms) + 320ms);
  }

  .lc-open {
    transition: opacity 0.4s var(--wy-ease-out) calc(var(--lc-d, 0ms) + 380ms),
      transform 0.4s var(--wy-ease-out) calc(var(--lc-d, 0ms) + 380ms),
      background-color var(--wy-dur-fast) ease;
  }
}

/* Cards stagger against each other only where they sit side by side (each
   card's own "Reveal delay"); stacked on a phone each one arrives as it
   reaches the screen. */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .lc {
    --lc-d: var(--lc-delay, 0ms);
  }
}

/* --------------------------------------------------------------------------
   Tablet (768–991px)
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .lc {
    height: var(--lc-h-t, 600px);
  }

  .lc-front-text {
    left: 28px;
    right: 28px;
    bottom: 28px;
  }

  .lc-name {
    font-size: 25px;
  }

  .lc-quote {
    font-size: 17px;
  }

  .lc-back-head {
    padding: 28px;
  }

  .lc-back-body {
    padding: 22px 28px;
  }

  .lc-bio,
  .lc-bio p {
    font-size: 16px;
  }

  .lc-back-foot {
    padding: 0 28px 28px;
  }
}

/* --------------------------------------------------------------------------
   Mobile (≤ 767px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .lc {
    perspective: 1400px;
    height: var(--lc-h-m, 560px);
  }

  .lc-face {
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(7, 39, 75, 0.18);
  }

  .lc-shade {
    background: linear-gradient(
      180deg,
      rgba(7, 39, 75, 0) 30%,
      rgba(7, 39, 75, 0.8) 58%,
      rgba(7, 39, 75, 0.97) 100%
    );
  }

  .lc-tab {
    top: 28px;
    width: 6px;
    height: 56px;
    border-radius: 0 3px 3px 0;
  }

  .lc-front-text {
    left: 22px;
    right: 22px;
    bottom: 24px;
    gap: 10px;
  }

  .lc-role {
    font-size: 11px;
  }

  .lc-name {
    font-size: 25px;
  }

  .lc-quote {
    font-size: 16px;
  }

  .lc-open {
    margin-top: 4px;
    padding: 0 18px;
  }

  .lc-back-head {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 22px 16px;
  }

  .lc-avatar {
    width: 64px;
    height: 64px;
  }

  .lc-back .lc-role {
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .lc-back-name {
    font-size: 19px;
  }

  .lc-back-body {
    gap: 12px;
    padding: 18px 22px;
  }

  .lc-bio,
  .lc-bio p {
    font-size: 15px;
    line-height: 1.55;
  }

  .lc-bio p {
    margin-bottom: 12px;
  }

  .lc-bio p:last-child {
    margin-bottom: 0;
  }

  .lc-chips li {
    padding: 5px 10px;
    border-radius: 14px;
    font-size: 12px;
  }

  .lc-back-foot {
    padding: 0 22px 22px;
  }
}

/* --------------------------------------------------------------------------
   No rotation: a crossfade instead

   Two cases, the same result. A visitor who has asked for less movement gets
   the bio without the card turning; and a browser that cannot hide a face's
   back would otherwise show the bio mirrored through the photo, so it swaps
   the faces rather than rotating them.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .lc-flip,
  .lc[data-flipped="true"] .lc-flip,
  .lc-back {
    transform: none;
    transition: none;
  }

  .lc-front,
  .lc[data-flipped="true"] .lc-back {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
  }

  .lc-back,
  .lc[data-flipped="true"] .lc-front {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s 0.2s;
  }

  .lc-open,
  .lc-close {
    transition: background-color var(--wy-dur-fast) ease;
  }

  .lc-open:active,
  .lc-close:active {
    transform: none;
  }
}

@supports not ((backface-visibility: hidden) or (-webkit-backface-visibility: hidden)) {
  .lc-flip,
  .lc[data-flipped="true"] .lc-flip,
  .lc-back {
    transform: none;
  }

  .lc-front,
  .lc[data-flipped="true"] .lc-back {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
  }

  .lc-back,
  .lc[data-flipped="true"] .lc-front {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s 0.2s;
  }
}