/* --------------------------------------------------------------------------
   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 · Founder section

   A portrait with an orange offset block and a name tag over it, beside the
   eyebrow, name, pull quote, chips and a button that opens a navy bio panel
   underneath the pair.

   The section paints its own full-bleed background and carries all of the
   spacing (8vh 4vw at every breakpoint); the two containers inside it carry
   the 1440px cap and centre themselves. Keeping those apart means the 4vw
   gutter is measured from the edge of the page at every width, instead of
   from the edge of a band that has already stopped growing.
   -------------------------------------------------------------------------- */

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

.fo-inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 88px;
  width: 100%;
  max-width: var(--wy-max);
  margin: 0 auto;
}

/* ---------- The photo ---------- */

/* The padding is what the orange block sits in: the image fills the content
   box and the block is offset into the 28px of padding below and to the
   right of it. */
.fo-photo {
  position: relative;
  flex: 0 0 460px;
  padding: 0 28px 28px 0;
}

.fo-offset {
  position: absolute;
  left: 28px;
  top: 28px;
  right: 0;
  bottom: 0;
  border-radius: 14px;
  background: var(--wy-syracuse-orange);
}

/* Positioned, so it paints over the offset block behind it. */
.fo-img {
  position: relative;
  display: block;
  width: 100%;
  /* The width and height attributes on the tag reserve the right box while
     the file loads; `height: auto` is what lets the aspect ratio below take
     over once it has, instead of the image standing at its natural 800px. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
}

/* Before a photo is chosen in the Designer, something still has to hold the
   4:5 box open or the block and the tag have nothing to sit against. */
.fo-img--empty {
  background: var(--wy-alice-blue);
}

.fo-tag {
  position: absolute;
  left: -20px;
  bottom: 56px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 22px;
  border-radius: 10px;
  background: var(--wy-oxford-blue);
  box-shadow: 0 16px 36px rgba(7, 39, 75, 0.28);
}

.fo-tag span:first-child {
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wy-carolina-blue);
}

.fo-tag span + span {
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--wy-white);
}

/* ---------- The text column ---------- */

/* 892 = 1440 − 460 − 88: the text never grows past the share of the band the
   photo leaves it, so the quote keeps its measure on a wide screen. */
.fo-text {
  flex: 1 1 0;
  min-width: 0;
  max-width: 892px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fo-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* #B8411D, not #D34E24: small orange type on near-white (A2). */
  color: var(--wy-orange-text);
}

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

.fo-name {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 48.83px;
  line-height: 1.1;
  color: var(--wy-oxford-blue);
}

.fo-quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fo-mark {
  display: block;
  color: var(--wy-syracuse-orange);
}

.fo-blockquote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fo-q1 {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.4;
  color: var(--wy-oxford-blue);
}

.fo-q2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--wy-payne-gray);
}

.fo-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fo-chips li {
  padding: 8px 14px;
  border: 1px solid var(--wy-alice-blue);
  border-radius: 20px;
  background: var(--wy-ice-blue);
  font-weight: 600;
  font-size: 14px;
  color: var(--wy-oxford-blue);
}

/* ---------- The bio toggle ---------- */

.fo-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 24px;
  border: 2px solid var(--wy-oxford-blue);
  border-radius: 24px;
  background: transparent;
  color: var(--wy-oxford-blue);
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background-color var(--wy-dur-base) ease, color var(--wy-dur-base) ease,
    transform var(--wy-dur-fast) ease;
}

.fo-toggle:focus-visible {
  outline-offset: 3px;
}

.fo[data-open="true"] .fo-toggle {
  background: var(--wy-oxford-blue);
  color: var(--wy-white);
}

.fo-chev {
  flex: none;
  transition: transform 0.3s ease;
}

.fo[data-open="true"] .fo-chev {
  transform: rotate(180deg);
}

/* Pointer devices only: a touch screen leaves a tapped button stuck in its
   hover colour. */
@media (hover: hover) and (pointer: fine) {
  .fo-toggle:hover {
    background: var(--wy-alice-blue);
  }

  .fo[data-open="true"] .fo-toggle:hover {
    background: var(--wy-navy-panel);
  }
}

.fo-toggle:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}

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

/* 0fr → 1fr animates to the content's own height without measuring it. The
   closing transition is delayed by the length of the fade below, so the panel
   empties first and then the space closes up. Safari before 17.4 cannot
   animate grid-template-rows and opens it in one step, which is acceptable. */
.fo-bio-wrap {
  width: 100%;
  max-width: var(--wy-max);
  margin: 0 auto;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease 0.15s;
}

.fo[data-open="true"] .fo-bio-wrap {
  grid-template-rows: 1fr;
  transition-delay: 0s;
}

.fo-bio-clip {
  overflow: hidden;
  min-height: 0;
}

/* The space above the panel belongs inside the clip, so it collapses with it
   rather than leaving a gap under a closed panel. */
.fo-bio-space {
  padding-top: 48px;
}

.fo-bio {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: 48px;
  padding: 44px 48px;
  border-radius: 14px;
  background: var(--wy-oxford-blue);
  color: var(--wy-alice-blue);
  /* The focus ring goes white on navy (A4). */
  --wy-focus: var(--wy-white);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--wy-dur-fast) ease, transform var(--wy-dur-fast) ease;
}

.fo[data-open="true"] .fo-bio {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s var(--wy-ease-out) 0.15s, transform 0.3s var(--wy-ease-out) 0.15s;
}

/* An H3 for the document outline, sized as the label it looks like. */
.fo-bio-label {
  margin: 0;
  font-family: var(--wy-font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wy-carolina-blue);
}

/* The type is set here, on the container, and not only on the paragraphs:
   Webflow slots the bio in as light-DOM content, which a `p` rule inside
   this component's stylesheet never reaches, while inherited properties pass
   through the slot. The `p` rules below still dress a bio that arrives as a
   real string — a default, or the local preview. */
.fo-bio-body {
  display: block;
  font-size: 18px;
  line-height: 1.65;
  color: var(--wy-alice-blue);
}

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

.fo-bio-body p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--wy-alice-blue);
}

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

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

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

   One trigger — the section — releases a sequence the eye reads in the order
   the design is built: the photo lands, the orange block slides out from
   behind it, the tag slides in, and the text column follows line by line.
   Everything is opacity and transform, so it stays on the compositor.

   The whole sequence lives inside `prefers-reduced-motion: no-preference`:
   that way the hidden starting states do not exist at all for a visitor who
   has asked for less movement, and nothing has to out-specify them to put
   the content back (A6).
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .fo-img,
  .fo-offset,
  .fo-tag,
  .fo-bar,
  .fo-eyebrow-t,
  .fo-name,
  .fo-mark,
  .fo-q1,
  .fo-q2,
  .fo-chips li,
  .fo-toggle {
    will-change: opacity, transform;
  }

  .fo:not([data-shown="true"]) .fo-img {
    opacity: 0;
    transform: translateY(24px);
  }

  .fo-img {
    transition: opacity var(--wy-dur-reveal) var(--wy-ease-out),
      transform var(--wy-dur-reveal) var(--wy-ease-out);
  }

  /* Hidden behind the photo until the photo itself has arrived. */
  .fo:not([data-shown="true"]) .fo-offset {
    transform: translate(-28px, -28px);
  }

  .fo-offset {
    transition: transform 0.7s var(--wy-ease-out) 0.15s;
  }

  .fo:not([data-shown="true"]) .fo-tag {
    opacity: 0;
    transform: translateX(-16px);
  }

  .fo-tag {
    transition: opacity 0.5s var(--wy-ease-out) 0.4s, transform 0.5s var(--wy-ease-out) 0.4s;
  }

  .fo:not([data-shown="true"]) .fo-bar {
    transform: scaleX(0);
  }

  .fo-bar {
    transform-origin: left center;
    transition: transform 0.4s var(--wy-ease-out) 0.1s;
  }

  .fo:not([data-shown="true"]) .fo-eyebrow-t,
  .fo:not([data-shown="true"]) .fo-name,
  .fo:not([data-shown="true"]) .fo-q1,
  .fo:not([data-shown="true"]) .fo-q2 {
    opacity: 0;
    transform: translateY(16px);
  }

  .fo-eyebrow-t,
  .fo-name,
  .fo-q1,
  .fo-q2 {
    transition: opacity 0.5s var(--wy-ease-out), transform 0.5s var(--wy-ease-out);
  }

  .fo-eyebrow-t {
    transition-delay: 0.15s;
  }

  .fo-name {
    transition-delay: 0.22s;
  }

  .fo-q1 {
    transition-delay: 0.38s;
  }

  .fo-q2 {
    transition-delay: 0.48s;
  }

  .fo:not([data-shown="true"]) .fo-mark {
    opacity: 0;
    transform: scale(0.6);
  }

  .fo-mark {
    transform-origin: left center;
    transition: opacity 0.35s var(--wy-ease-back) 0.3s, transform 0.35s var(--wy-ease-back) 0.3s;
  }

  /* 560ms, then 60ms per chip — the index comes from the component. */
  .fo:not([data-shown="true"]) .fo-chips li {
    opacity: 0;
    transform: translateY(8px);
  }

  .fo-chips li {
    transition: opacity 0.3s var(--wy-ease-out), transform 0.3s var(--wy-ease-out);
    transition-delay: calc(560ms + var(--fo-chip-i, 0) * 60ms);
  }

  .fo:not([data-shown="true"]) .fo-toggle {
    opacity: 0;
  }

  .fo-toggle {
    transition: opacity 0.3s ease 0.8s, background-color var(--wy-dur-base) ease,
      color var(--wy-dur-base) ease, transform var(--wy-dur-fast) ease;
  }
}

/* The mobile photo sits in 18px of padding, so its block hides in 18px. */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .fo:not([data-shown="true"]) .fo-offset {
    transform: translate(-18px, -18px);
  }
}

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

@media (max-width: 991px) {
  .fo-inner {
    column-gap: 48px;
  }

  .fo-photo {
    flex: 0 0 320px;
  }

  .fo-tag {
    left: -12px;
  }

  .fo-name {
    font-size: 39px;
  }

  .fo-q1 {
    font-size: 22px;
  }

  .fo-q2 {
    font-size: 17px;
  }

  .fo-bio {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
    padding: 32px;
  }
}

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

   One column, in reading order: eyebrow, photo, name, quote, chips, button.
   .fo-text stops being a box of its own so its children become items of the
   same column as the photo; the eyebrow then moves above the photo on its
   own, which is the only piece that changes order.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .fo-inner {
    flex-direction: column;
    align-items: stretch;
    row-gap: 22px;
  }

  .fo-photo {
    flex: none;
    width: 100%;
    padding: 0 18px 18px 0;
  }

  .fo-offset {
    left: 18px;
    top: 18px;
    border-radius: 12px;
  }

  .fo-img {
    border-radius: 12px;
  }

  .fo-tag {
    left: 14px;
    bottom: 34px;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(7, 39, 75, 0.3);
  }

  .fo-tag span:first-child {
    font-size: 11px;
  }

  .fo-tag span + span {
    font-size: 16px;
  }

  .fo-text {
    display: contents;
  }

  .fo-eyebrow {
    order: -1;
    gap: 12px;
    font-size: 12px;
  }

  .fo-bar {
    width: 44px;
  }

  .fo-name {
    margin-top: 8px;
    font-size: 32px;
    line-height: 1.15;
  }

  .fo-quote {
    gap: 14px;
  }

  .fo-mark {
    width: 36px;
    height: 28px;
  }

  .fo-q1 {
    font-size: 20px;
    line-height: 1.45;
  }

  .fo-q2 {
    font-size: 17px;
  }

  .fo-chips {
    gap: 8px;
  }

  .fo-chips li {
    padding: 7px 12px;
    border-radius: 16px;
    font-size: 13px;
  }

  .fo-toggle {
    align-self: stretch;
  }

  .fo-bio-space {
    padding-top: 22px;
  }

  .fo-bio {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 22px;
    border-radius: 12px;
  }

  .fo-bio-label {
    font-size: 12px;
  }

  .fo-bio-body,
  .fo-bio-body p {
    font-size: 16px;
    line-height: 1.6;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion (A6): the reveal sequence above never applies, so all that
   is left is the panel and the button. The panel opens and closes in one
   step; the colour change stays, inside the 150ms the spec allows.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* The open state sets its own transition, at a higher specificity than a
     bare class, so it has to be named here or the panel would still fade in
     over 300ms after a 150ms wait. */
  .fo-bio-wrap,
  .fo[data-open="true"] .fo-bio-wrap,
  .fo-bio,
  .fo[data-open="true"] .fo-bio,
  .fo-chev {
    transition: none;
  }

  .fo-toggle {
    transition: background-color var(--wy-dur-fast) ease, color var(--wy-dur-fast) ease;
  }

  .fo-toggle:active {
    transform: none;
  }
}