/*
 * site.css — Brave Little Beast house design layer for Winbridge SBF.
 *
 * Loaded AFTER the exported Webflow stylesheets so these deliberate design
 * decisions win by cascade order. This is where the design-pass fixes live while
 * the bulk Webflow CSS is still in place; it becomes the seed of the house token
 * system as we strip Webflow CSS (design item #4). Keep changes intentional and
 * documented — one concern per block.
 */

/* ------------------------------------------------------------------ *
 * Buttons — unify to a rounded RECTANGLE (design item: some round, some sharp).
 * The site shipped a mess of radii: 0px (hero .and_sharp + .get-started outline
 * CTAs), 6px (nav .button-2 / .w-button), 38px (.btn). Unify every real button to
 * a modest 6px rounded rectangle (NOT a pill). Excludes the hamburger/nav toggles.
 * ------------------------------------------------------------------ */
.btn,
.btn.and_sharp,
.button,
.button-2,
.w-button,
a.w-button,
.get-started,
.pop-up-button-2,
.form-submit {
  border-radius: 6px !important;
}

/* ------------------------------------------------------------------ *
 * Home hero — full viewport height on desktop AND mobile, with the
 * scroll-cue arrow kept above the fold (design item: hero = 100vh).
 * svh (NOT dvh) so the height is STATIC: dvh tracks the collapsing mobile URL
 * bar, and every height change makes `background-size: cover` re-crop, which
 * reads as the skyline zooming while you scroll. svh is the toolbar-showing
 * height — fixed for the whole scroll, and still short enough to keep the
 * arrow on-screen at load. vh is the fallback for browsers without svh.
 * ------------------------------------------------------------------ */
.d-6-section {
  /* fill the viewport BELOW the sticky nav so the scroll arrow stays on-screen.
     Webflow hard-sets height:100vh here, so clear it and drive off min-height.
     --nav-h is measured by a script in BaseLayout; 6.5rem is a no-JS fallback. */
  height: auto !important;
  min-height: calc(100vh - var(--nav-h, 6.5rem)) !important;
  min-height: calc(100svh - var(--nav-h, 6.5rem)) !important;
}

/* The Webflow markup hides the arrow on small/tiny (w-hidden-small/tiny).
   Show it on every breakpoint and anchor it just above the bottom edge. */
.d-6-section .downarrow {
  display: block !important;
  position: absolute !important;
  z-index: 2;
  bottom: 40px;
}
@media screen and (max-width: 767px) {
  .d-6-section .downarrow {
    bottom: 24px;
  }
}
/* the scroll arrow is now a link to the next section */
.d-6-section .downarrow { cursor: pointer; }
/* land in-page anchors just below the sticky nav (fallback; JS also offsets) */
#start { scroll-margin-top: var(--nav-vis, 6.5rem); }

/* Hero overlay — navy fading left->right (80% -> 0%) so the left-aligned type pops.
   Overlay sits above the skyline image; hero content is lifted above the overlay. */
.d-6-section { position: relative; }
.d-6-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 48, 110, 0.8) 0%, rgba(0, 48, 110, 0) 100%);
  z-index: 0;
  pointer-events: none;
}
.d-6-section > *:not(.downarrow) {
  position: relative;
  z-index: 1;
}

/* TOUCH BACKGROUND FIX — the home hero uses `background-attachment: scroll, fixed`
   (the skyline layer is fixed for a parallax feel on desktop). Mobile browsers
   can't render fixed backgrounds — iOS paints nothing, leaving only the gradient.
   Webflow handled this with `html.w-mod-touch * { background-attachment: scroll }`,
   which we lost when the w-mod-js feature-detection script was removed. Restore it
   via a touch media query, plus a width fallback for narrow viewports. */
@media (hover: none) and (pointer: coarse) {
  * { background-attachment: scroll !important; }
}
@media (max-width: 991px) {
  .d-6-section,
  .internal-hero,
  .cta-box { background-attachment: scroll !important; }
}

/* ==================================================================== *
 * TYPE SYSTEM — one cohesive scale applied on EVERY page.
 *
 * Webflow shipped ~22 ad-hoc text styles per page (buttons at 19/16/14px, body
 * in Brandon + Open Sans + proxima-nova, headings across five weights and random
 * uppercase). This collapses them into role rules so every page reads the same.
 *
 * CASE CONVENTION: eyebrows + buttons are UPPERCASE; every headline and body run
 * is sentence/title case. FONT: Brandon is the one family (the homepage hero's
 * Dafoe script lockup is the single intentional exception, left untouched).
 *
 * Heading SIZES keep their two intentional tiers — page-hero display (~48px) vs
 * section (~22-26px) — because the same class (.h2-internal) is reused for both
 * by context. We normalize weight / case / font / leading, not contextual size.
 * ==================================================================== */

/* ---- THE SCALE ---------------------------------------------------------
 * Every size on the site comes from a token here. Nothing computes its own
 * size, nothing inherits a size from a parent, and no role carries its own
 * clamp() formula.
 *
 * That last point is the whole reason this exists. Each role used to have its
 * own clamp(min, Xvw, max), which meant roles scaled at DIFFERENT rates: at
 * 1280 the CTA heading was 1.48x the section title, at 820 it was 1.34x, at
 * 390 it was 1.23x. The hierarchy quietly flattened as the screen narrowed.
 * Fixed tokens make the ratio between two roles a decision, not a by-product
 * of two viewport formulas racing each other.
 *
 *              1280    820    390
 *   display      68     52     38
 *   h1           40     34     29
 *   h2           32     28     25
 *   h3           23     22     21
 *   h4           19     19     19
 *   lead         20     19     19
 *   body         17     17     17
 *   small        15     15     15
 *   eyebrow      13     13     13
 *
 * The HEADING tier scales; the READING tier does not. Body text that shrinks
 * with the viewport is exactly what collapses hierarchy on a phone — holding
 * it fixed and moving only the headings preserves the contrast between them,
 * and keeps body above the 16px mobile-legibility floor everywhere.
 * ------------------------------------------------------------------------ */
:root {
  --font: 'Brandon', 'Helvetica Neue', Arial, sans-serif;

  /* heading tier — scales */
  --fs-display: 4.25rem;    /* 68 */
  --fs-h1:      2.5rem;     /* 40 */
  --fs-h2:      2rem;       /* 32 */
  --fs-h3:      1.4375rem;  /* 23 */
  --fs-h4:      1.1875rem;  /* 19 */

  /* reading tier — fixed */
  --fs-lead:    1.25rem;    /* 20 */
  --fs-body:    1.0625rem;  /* 17 */
  --fs-small:   0.9375rem;  /* 15 */
  --fs-eyebrow: 0.8125rem;  /* 13 */
  --fs-button:  0.9375rem;  /* 15 */
  --fs-nav:     1rem;       /* 16 */
  --fs-nav-mobile: 1.5rem;  /* 24 — full-screen menu links */

  /* The home hero lockup ("Connect." in script over "MOVE FORWARD.") is the one
     place two sizes have to hold a fixed relationship to each other, because
     they read as a single piece of art. It was the WORST offender: identical at
     1280 and 820 — no tablet step at all — then a hard drop where the ratio
     between the two lines fell from 1.52x to 1.14x. Now both are tokens and the
     ratio is locked at ~1.5 across all three. */
  --fs-hero-main:   4rem;     /* 64 */
  --fs-hero-script: 2.625rem; /* 42 */

  /* Unitless, so a line-height always tracks its own size. Absolute px
     line-heights are why the nav rendered 20px text on a 16px line. */
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-title:   1.25;
  --lh-lead:    1.6;
  --lh-body:    1.65;
  --lh-tight:   1.4;

  --measure: 68ch;
}
@media (max-width: 991px) {
  :root {
    --fs-display: 3.25rem;    /* 52 */
    --fs-hero-main:   3.25rem;  /* 52 */
    --fs-hero-script: 2.125rem; /* 34 */
    --fs-h1:      2.125rem;   /* 34 */
    --fs-h2:      1.75rem;    /* 28 */
    --fs-h3:      1.375rem;   /* 22 */
    --fs-lead:    1.1875rem;  /* 19 */
  }
}
@media (max-width: 600px) {
  :root {
    --fs-display: 2.375rem;   /* 38 */
    --fs-hero-main:   2.25rem;  /* 36 */
    --fs-hero-script: 1.5rem;   /* 24 */
    --fs-h1:      1.8125rem;  /* 29 */
    --fs-h2:      1.5625rem;  /* 25 */
    --fs-h3:      1.3125rem;  /* 21 */
  }
}

/* EYEBROW / KICKER — small uppercase label above headings + footer column titles */
.tagline, .h2-oswald, .followabodoo, .dyn-txt-arrow, .footer-column-title {
  font-family: var(--font) !important;
  font-size: var(--fs-eyebrow) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  line-height: 1.4 !important;
}

/* HEADINGS — one family, sentence/title case, tight leading, two weight tiers.
   Contextual SIZE left to the existing CSS (hero display vs section). */
/* NB: bare h1 is intentionally excluded, and the exclusion is load-bearing — the
   homepage hero lockup ("Connect." in the Dafoe script + "MOVE FORWARD.") is an <h1>,
   and adding h1 here would overwrite its script face with the body font.
   Internal pages also carry an <h1> now (each page's hero heading, promoted from h2 so
   every page has one — see promoteHeroHeading in lib/pageHero.ts). Those are styled
   entirely through .h2-internal / .fw-heromain below, never through the element, which
   is exactly why the promotion is visually a no-op. Keep it that way. */
h2, h3, h4,
.h2-internal, .fw-heromain, .looking-text, .h3-hash, .h4-162,
.fontcolor__midnight, .gateway-title, .h3-value, .contact-window-header-2 {
  font-family: var(--font) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
h2, .h2-internal, .fw-heromain, .looking-text, .h3-hash {
  font-weight: 700 !important;
  line-height: var(--lh-heading) !important;
}
h3, h4, .h4-162, .fontcolor__midnight, .gateway-title, .h3-value, .contact-window-header-2 {
  font-weight: 600 !important;
  line-height: var(--lh-title) !important;
}

/* SUB-PAGE HERO HEADING — identical size/weight/case on every internal page,
   overriding the per-page size modifiers (.fw-shrink on tax, .accadmin/.accfco on
   accounting+fund-admin, .sayhello on contact, .privacy-titl on privacy). Scoped to
   the internal hero so it never touches the homepage's contextual .h2-internal sections. */
.internal-hero .h2-internal,
.h2-internal.fw-heromain,
.h2-internal.sayhello,
.h2-internal.privacy-titl {
  font-size: var(--fs-display) !important;   /* ~48 mobile -> 72 desktop (fills the hero) */
  font-weight: 400 !important;                       /* lighter — big + elegant, not heavy */
  text-transform: none !important;
  line-height: var(--lh-display) !important;
  letter-spacing: -0.015em !important;
}

/* LEAD — intro paragraph under a hero/section title */
.hero-sub-text, .i-am-from-text {
  font-family: var(--font) !important;
  font-size: var(--fs-lead) !important;
  font-weight: 400 !important;
  line-height: var(--lh-lead) !important;
  text-transform: none !important;
}

/* BODY — one size, one font, comfortable leading, regular weight */
p, .section-title-large-sub, .para-value, .gateway-sub-text,
.text-block-4, .text-14, .para-about, .four-hash-list, .success-text {
  font-family: var(--font) !important;
  font-size: var(--fs-body) !important;
  font-weight: 400 !important;
  line-height: var(--lh-body) !important;
  text-transform: none !important;
}
.section-title-large-sub { max-width: var(--measure); }

/* SMALL / LINKS — nav + footer links, legal line */
.link, .all-rights, .privacy-link {
  font-family: var(--font) !important;
  font-size: var(--fs-small) !important;
  font-weight: 400 !important;
}

/* BUTTONS — identical on every page: one size / weight / case / font / tracking.
   Fixes the 19/16/14px size drift the review caught. */
.btn, .btn_text, .button, .button-2, .w-button,
.get-started, .pop-up-button-2, .form-submit {
  font-family: var(--font) !important;
  font-size: var(--fs-button) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
}

/* ---- ROLE ASSIGNMENT ---------------------------------------------------
 * Everything the house components don't already own. Without these the class
 * keeps whatever size Webflow gave it, which is where the odd values came
 * from: .nav-link at 20px on a 16px line, .looking-text at 38px next to a
 * 32px .h2-internal doing the same job, .h4-162 at 26px, three different
 * "body" sizes at 15/16/17.
 *
 * Nothing here invents a size. Every rule points at a token, so a role can
 * never be defined at one breakpoint and undefined at another.
 * ---------------------------------------------------------------------- */

/* H2 — section headings. .h2-internal is reused as BOTH the page-hero display
   and a section heading; the display case is scoped to .internal-hero above,
   so the unscoped rule here is the section one. */
.h2-internal,
.looking-text,
.h3-hash,
.h1-form {
  font-size: var(--fs-h2) !important;
  line-height: var(--lh-heading) !important;
}

/* H3 — subsection and block headings */
.h4-162,
.fontcolor__midnight,
.gateway-title,
.h3-value,
.contact-window-header-2 {
  font-size: var(--fs-h3) !important;
  line-height: var(--lh-title) !important;
}

/* H4 — card and field-group titles */
.contactblock-title,
.team-member-name {
  font-size: var(--fs-h4) !important;
  line-height: var(--lh-title) !important;
}

/* NAV — the main links were 20px on a 16px line (0.8 leading). Match the
   dropdown, which was already 16 and reads correctly. */
.nav-link,
.nav-link.w--current {
  font-size: var(--fs-nav) !important;
  line-height: var(--lh-tight) !important;
}

/* BODY-tier stragglers on the contact + form pages */
.contact-text,
.contact-link-child,
.successtext,
.success-message,
.w-form-done div,
.w-form-fail div {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
}

/* SMALL — form labels and helper text */
.field-label,
.form-label-2,
.checkbox-field-label,
.w-file-upload-info,
.w-file-upload-file-name,
.w-file-upload-error-msg {
  font-size: var(--fs-small) !important;
  line-height: var(--lh-tight) !important;
}

/* EYEBROW — uppercase labels that weren't in the main eyebrow rule */
.testimonial-title {
  font-size: var(--fs-eyebrow) !important;
  line-height: var(--lh-tight) !important;
  letter-spacing: 0.12em !important;
}

/* ==================================================================== *
 * BUTTON SYSTEM — one size factor + a clean left-to-right SWAP on hover.
 *  - Shared box: identical padding + border-box so outlined and solid match.
 *  - Hover: a ::before layer holds the NEW fill + a duplicate of the label in
 *    the NEW color, and clip-reveals left->right. The color swaps completely —
 *    no gradient/both-colors bleed, no lingering border — and the new label
 *    wipes in L->R in sync with the fill.
 *  - data-label is set on each button by a tiny inline script in BaseLayout.
 * ==================================================================== */
.btn, .button, .button-2, .w-button, .get-started, .pop-up-button-2, .form-submit {
  padding: 14px 32px !important;
  box-sizing: border-box !important;
  position: relative;
  overflow: hidden;
  text-decoration: none !important;   /* buttons are links now — kill the underline */
}

/* Two real label layers (spans injected by BaseLayout) so the label can SLIDE and
   the trailing arrow is a flex item that centers by geometry (no baseline nudge, so
   the incoming fill fully covers the button — no color line at the edge).
   .b-out = resting/outgoing label (also the in-flow sizer);
   .b-in  = incoming fill + label + arrow. */
.b-out, .b-in {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  white-space: nowrap;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  pointer-events: none;
  transition: transform 0.34s cubic-bezier(0.33, 1, 0.68, 1);
}
.b-out { position: relative; }   /* in-flow so it gives the button its size */
.btn:hover .b-out, .button:hover .b-out, .button-2:hover .b-out,
.get-started:hover .b-out {
  transform: translateX(115%);
}
.b-in { transform: translateX(-115%); }
.btn:hover .b-in, .button:hover .b-in, .button-2:hover .b-in,
.get-started:hover .b-in {
  transform: translateX(0);
}
.b-arrow { width: 1.05em; height: 1.05em; flex-shrink: 0; display: block; }

/* SOLID — brand blue base; incoming navy fill + white label. No border. */
.button-2, .btn.solohero, .btn.and_whiteorange, .navportalbtn {
  background: #00adef !important;
  border: none !important;
}
.button-2 .b-out, .btn.solohero .b-out, .btn.and_whiteorange .b-out, .navportalbtn .b-out { color: #fff; }
.button-2 .b-in, .btn.solohero .b-in, .btn.and_whiteorange .b-in, .navportalbtn .b-in { background: #00306e; color: #fff; }

/* SOLID — brand navy base; incoming blue fill + white label. No border.
   (.bio-button dropped from these lists: the bio page's "Back to Team Members"
   was the only user of it and is now a .back-link text control instead.) */
.btn.solidsection {
  background: #00306e !important;
  border: none !important;
}
.btn.solidsection .b-out { color: #fff; }
.btn.solidsection .b-in { background: #00adef; color: #fff; }

/* OUTLINED — 2px border, 2px less padding to match the solid size;
   incoming white fill + navy label. */
.get-started {
  background: transparent !important;
  border: 2px solid #fff !important;
  padding: 12px 30px !important;
}
.get-started .b-out { color: #fff; }
.get-started .b-in { background: #fff; color: #00306e; }
/* Form submit is an <input> (no ::before) — plain fast color swap, no border */
.pop-up-button-2, .form-submit {
  background: #00306e !important;
  color: #fff !important;
  border: none !important;
  transition: background-color 0.34s cubic-bezier(0.33, 1, 0.68, 1) !important;
}
.pop-up-button-2:hover, .form-submit:hover {
  background: #00adef !important;
}

/* ==================================================================== *
 * VANILLA INTERACTIONS — replacing webflow.js (removed). Dropdowns, mobile
 * menu, modal, hero load animation, and hover reveals, all CSS (+ a little
 * JS in BaseLayout for the hamburger and modal toggles).
 * ==================================================================== */

/* page-transition curtains: not needed without webflow.js */
.curtain { display: none !important; }

/* Desktop nav dropdowns — faithfully reproduce the live site's open panel. webflow.js
   used to add .w--open (white card + radius + shadow); without it we drive the whole
   open state from :hover / :focus-within, and the panel otherwise falls back to
   Webflow's raw grey (#ddd) .w-dropdown-list default. */
.nav-dropdown .w-dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin-top: 8px;                 /* the .dropdown-bridge (top:-8px) covers this gap for hover */
  padding: 8px 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(48, 54, 77, 0.18);
  display: block;                  /* stay in the box model; visibility handles the hide for a fade */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.nav-dropdown:hover .w-dropdown-list,
.nav-dropdown:focus-within .w-dropdown-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
/* keep the toggle highlighted (soft blue chip) the whole time its menu is open */
.nav-dropdown:hover > .w-dropdown-toggle,
.nav-dropdown:focus-within > .w-dropdown-toggle {
  color: var(--deep-sky-blue);
  background-color: rgba(0, 173, 239, 0.1);
}
/* dropdown rows — clean, roomy, blue hover (matches live) */
.nav-dropdown .nav-dropdown-link {
  display: block;
  padding: 11px 22px;
  font-size: var(--fs-nav);
  line-height: 1.3;
  color: #151515;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.12s ease, background-color 0.12s ease;
}
.nav-dropdown .nav-dropdown-link:hover {
  color: var(--deep-sky-blue);
  background-color: #f3f3f7;
}
.dropdown-corner { display: none !important; }

/* ==================================================================== *
 * MOBILE MENU — the panel opens UNDER the nav bar, so the hamburger itself
 * morphs into the X and stays the close control.
 *
 * Was: the panel covered the whole bar (z-index 999 inside .mobilenavmenu's
 * own z-1000 stacking context), which hid the morphing hamburger, so a second
 * static X had to be layered on top. Two X's, no continuity. Now the bar is
 * the only fixed chrome — panel at z-index 1, bar contents at z-index 2 — and
 * one control does open AND close.
 *
 * The panel keeps its layout at all times and is hidden with opacity +
 * visibility rather than display, because `display` can't be transitioned:
 * that's what lets the close animate instead of just vanishing.
 * ==================================================================== */
.mobilenavmenu .mob-brand,
.mobilenavmenu .onrt-tab {
  position: relative;
  z-index: 2;                      /* above the panel — the bar never gets covered */
}

.mobilenavmenu .navmenu-1 {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  position: fixed;
  inset: 0;
  z-index: 1;
  background: #fff;
  /* clear the bar, then center in what's left */
  padding: calc(var(--nav-vis, 73px) + 1.25rem) 8% 2rem;
  overflow: hidden;                /* full-screen, never scrolls */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  /* exit ~2/3 the enter duration so dismissing feels quicker than opening */
  transition: opacity 0.16s ease-in, transform 0.16s ease-in, visibility 0s linear 0.16s;
}
.mobilenavmenu.nav-open .navmenu-1 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s;
}

/* rows lift in behind the panel, 30ms apart — reads as one motion, not seven */
.mobilenavmenu .navmenu-1 > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mobilenavmenu.nav-open .navmenu-1 > * { opacity: 1; transform: none; }
.mobilenavmenu.nav-open .navmenu-1 > *:nth-child(1) { transition-delay: 0.07s; }
.mobilenavmenu.nav-open .navmenu-1 > *:nth-child(2) { transition-delay: 0.10s; }
.mobilenavmenu.nav-open .navmenu-1 > *:nth-child(3) { transition-delay: 0.13s; }
.mobilenavmenu.nav-open .navmenu-1 > *:nth-child(4) { transition-delay: 0.16s; }
.mobilenavmenu.nav-open .navmenu-1 > *:nth-child(5) { transition-delay: 0.19s; }
.mobilenavmenu.nav-open .navmenu-1 > *:nth-child(6) { transition-delay: 0.22s; }
.mobilenavmenu.nav-open .navmenu-1 > *:nth-child(n+7) { transition-delay: 0.25s; }

.mobilenavmenu .navmenu-1 .ul-nav-link {
  width: auto;
  text-align: center;
  padding: 0.7rem 0;
  font-size: var(--fs-nav-mobile);
  line-height: 1.25;
}
.mobilenavmenu .navmenu-1 .line-bottom-menu { width: 80px; margin-top: 10px; }
.mobilenavmenu .navmenu-1 .navportalbtn { margin-top: 1.2rem; }
.mobilenavmenu .navmenu-1 .navportalbtn .btn_text { font-size: var(--fs-button); }

/* hamburger -> X. The three lines sit at y 18 / 28 / 38 inside the 60px box,
   so the outer two travel exactly 10px to meet the centre before rotating —
   the earlier 6px left them short of each other and the X never closed up. */
.hamburger-1 { cursor: pointer; }
.hamburger-1 .top-line,
.hamburger-1 .middle-line,
.hamburger-1 .bottom-line {
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.16s ease;
}
.mobilenavmenu.nav-open .hamburger-1 .top-line { transform: translateY(10px) rotate(45deg); }
.mobilenavmenu.nav-open .hamburger-1 .middle-line { opacity: 0; transform: scaleX(0.4); }
.mobilenavmenu.nav-open .hamburger-1 .bottom-line { transform: translateY(-10px) rotate(-45deg); }
.hamburger-1:focus-visible {
  outline: 2px solid var(--deep-sky-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .mobilenavmenu .navmenu-1,
  .mobilenavmenu .navmenu-1 > *,
  .hamburger-1 .top-line,
  .hamburger-1 .middle-line,
  .hamburger-1 .bottom-line {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  /* the X still forms (it's state, not decoration) — only the travel is dropped */
  .mobilenavmenu .navmenu-1,
  .mobilenavmenu .navmenu-1 > * { transform: none !important; }
}


/* service-block "Learn More" reveal (was an IX2 slide) -> simple fade on hover */
.introblock2 .learn-more-box { opacity: 0; transform: none !important; transition: opacity 0.3s ease; }
.introblock2:hover .learn-more-box { opacity: 1; }

/* ==================================================================== *
 * HOME SERVICES PANEL (ServicesGrid.astro) — one rounded white card, thin
 * dividers (vertical on desktop, horizontal on mobile), circular brand-navy
 * icon badges. Replaces the old .flex-parent-3 / .introblock2 cards. Type +
 * color come from our system (Brandon, --midnight-blue), not the mockup's
 * Nunito / #17386e.
 * ==================================================================== */
.services-grid-section .sg-head {
  width: 100%;
  max-width: 680px;
  margin: 0 auto 2.75rem;
  text-align: center;
}
.services-grid-section .sg-head .h2-internal {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

.sg-card {
  display: flex;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(0, 48, 110, 0.08);
  overflow: hidden;
}
.sg-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 3rem 2.25rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.sg-item + .sg-item { border-left: 1px solid #e7eaef; }   /* divider between columns */
a.sg-item:hover { background: #f4f6fa; text-decoration: none; }

.sg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 66px;
  height: 66px;
  border-radius: 999px;
  background: rgba(0, 48, 110, 0.08);
  color: var(--midnight-blue);
}
/* svg = the component's inline fallback icon; img = an icon set on the service in
   Sanity. Both sit in the badge at the same size. An <img>-loaded SVG cannot inherit
   the badge's currentColor, so the uploaded artwork carries --midnight-blue baked in. */
.sg-icon svg,
.sg-icon img { width: 30px; height: 30px; }

.sg-title {
  font-family: var(--font);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-title);
  color: var(--midnight-blue);
}
.sg-text {
  font-family: var(--font);
  /* --fs-body, not --fs-small: this is a descriptive sentence, and the system
     reserves `small` for meta, captions and roles. Applies to the home cards
     as well as the tax ones, so the two read as the same component. */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: #5a6673;
  max-width: 32ch;
}

/* the .sg-head spacing rule is scoped to .services-grid-section, so give the
   heading the same breathing room when the card is used inside a svc-section */
.svc-section .sg-head { text-align: center; margin-bottom: 2.75rem; }
.svc-section .sg-head .tagline { margin-bottom: 0.6rem; }

/* PROSE variant — same card, dividers and icon badges, for items carrying a real
   paragraph rather than a one-line summary. Stays CENTRED like the home card
   (Ryan). The only changes are the reading size and a wider measure: three or
   four sentences at the 15px caption size inside 30ch is a very narrow column.
   --fs-body is the system's size for actual prose; --fs-small is for meta. */
.sg-card--prose .sg-item { padding: 2.75rem 2rem; }
.sg-card--prose .sg-text { max-width: 34ch; }
.sg-card--prose .sg-icon { width: 56px; height: 56px; }
.sg-card--prose .sg-icon svg,
.sg-card--prose .sg-icon img { width: 26px; height: 26px; }

@media (max-width: 767px) {
  .services-grid-section .sg-head { margin-bottom: 2rem; }
  .sg-card { flex-direction: column; }
  .sg-item { padding: 2.25rem 1.75rem; gap: 0.85rem; }
  .sg-item + .sg-item { border-left: 0; border-top: 1px solid #e7eaef; }
}

/* "Our Approach" 4-column items — center the icon, title, and copy (Ryan 2026-07-22).
   The icon is a fixed-width block, so it needs auto side-margins on top of text-align. */
.flex-parent._4-column .flex-child._4-column-child { text-align: center; }
.flex-parent._4-column .icon-approach { margin-left: auto; margin-right: auto; }

/* "Looking for…" split panels — rebuild the dead webflow IX2 hover as pure CSS.
   Both overlays sit solid navy over their background image on load; on hover the
   overlay fades so the image reveals through a light navy tint (keeps white text
   legible). The stuck-panel bug is gone with the w-mod-js hook removal above. */
.fp-iam .dist-overlay,
.fp-iam .surg-overlay { transition: opacity 0.45s ease; }
.flex-child-iam-dist:hover .dist-overlay,
.flex-child-iam-surgeon:hover .surg-overlay { opacity: 0.85; }

/* ==================================================================== *
 * CLOSING CTA BOX (home) — replaces the old two-block "_2-link-gateway"
 * (both blocks were the same "get in touch" action). A single CENTERED box
 * (not a full-bleed band): the hero skyline image behind a blue overlay,
 * centered white copy, one "Contact Us" action to /contact.
 * ==================================================================== */
.cta-box-section {
  background: #fff;             /* the box floats on white; not a full-width band */
  padding: 80px 22px;           /* horizontal = the site gutter */
}
.cta-box {
  position: relative;
  /* match the body content width exactly (1200 container - 2x22px gutter) so the
     box's edges land on the same line as every section + the footer above/below. */
  max-width: 1156px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background-image: url('/images/winbridge-sbf-contact.jpg');
  background-size: cover;
  background-position: 50% 40%;
}
.cta-box::before {             /* blue overlay over the skyline image */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 48, 110, 0.86) 0%, rgba(0, 31, 74, 0.8) 100%);
  z-index: 1;
}
.cta-box-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
}
.cta-eyebrow { color: var(--deep-sky-blue) !important; margin: 0; }
.cta-box .cta-heading {
  color: #fff;
  font-size: var(--fs-h2);
  line-height: 1.1;
  margin: 0;
}
.cta-sub {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: var(--fs-lead) !important;
  line-height: 1.6 !important;
  max-width: 44ch;
  margin: 0;
}
/* sky-blue button (set here, not via .nav-button which is hidden at mobile) */
.cta-box .cta-button {
  margin-top: 0.75rem;
  background-color: var(--deep-sky-blue) !important;
}
.cta-box .cta-button:hover { background-color: #0093cc !important; }
@media (max-width: 767px) {
  .cta-box-section { padding: 48px 22px; }
  .cta-box-inner { padding: 56px 24px; }
}

/* ==================================================================== *
 * SERVICE-PAGE INTRO — unify the first block across the 3 service pages.
 * Headline-left / body-right, left-aligned, one controlled reading width.
 * Each page's hero gets a consistent eyebrow (service name) + tagline; the
 * repeated service-name label is dropped in favor of a distinct intro
 * headline. Scales to any body length; stacks on tablet/mobile.
 * ==================================================================== */
.svc-intro { padding: 76px 0; }
.svc-intro-grid {
  display: grid;
  grid-template-columns: minmax(190px, 260px) 1fr;   /* body fills to the container edge */
  gap: 56px;
  align-items: start;
}
.svc-intro-head .svc-intro-title {
  color: var(--midnight-blue) !important;
  font-size: var(--fs-h2) !important;
  line-height: 1.15 !important;
  margin: 0;
}
/* short sky-blue accent line under the headline (matches the .mf-hash detail on
   the feature sections). */
.svc-intro-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin-top: 22px;
  background-color: var(--deep-sky-blue);
}
.svc-intro-body .section-title-large-sub {
  max-width: none;
  margin: 0 0 1.15rem;
}
.svc-intro-body .section-title-large-sub:last-child { margin-bottom: 0; }
@media (max-width: 991px) {
  .svc-intro { padding: 56px 0; }
  .svc-intro-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ==================================================================== *
 * SERVICE-PAGE SECTION SHELL (.svc-section) — ONE structure for every
 * below-hero section: a fixed heading column (left, with the sky-blue line)
 * + a content column (right) that fills to the gutter. One container
 * (1200 / 22px), one vertical rhythm, one collapse rule. Replaces the
 * frankenstein of webflow containers / columns / paddings on the service
 * pages. Right-column content uses .svc-lead / .svc-features / .svc-icons /
 * .svc-lists, all of which stack to one column on tablet & mobile.
 * ==================================================================== */
.svc-section { padding: 68px 0; background: #fff; }
.svc-section--first { padding-top: 76px; }
.svc-section--tint { background: #f4f6f8; }

.svc-section__inner { max-width: 1200px; margin: 0 auto; padding: 0 22px; }
.svc-section__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: start;
}
.svc-section__title {
  color: var(--midnight-blue);
  font-family: var(--font);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}
.svc-section__title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin-top: 22px;
  background: var(--deep-sky-blue);
}

/* right column: lead paragraphs */
.svc-lead > * { margin: 0 0 1.15rem; }
.svc-lead > *:last-child { margin-bottom: 0; }
.svc-lead .svc-p {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: #333;
}

/* right column: 2-up feature list (title + optional text) */
.svc-features { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 44px; }
.svc-feature__title {
  font-family: var(--font);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--midnight-blue);
  line-height: 1.25;
  margin: 0 0 6px;
}
.svc-feature__text {
  font-family: var(--font);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: #5a6673;
  margin: 0;
}

/* right column: intro sub-label (e.g. "Services Include:") */
.svc-lead__label {
  font-family: var(--font);
  font-weight: 700;
  color: var(--midnight-blue);
  margin: 26px 0 20px;
}

/* right column: icon grid (fund services, tax approach). Reuses the existing
   .featureicon / .fluidbigicon SVG graphics at a consistent size. */
.svc-icons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 40px; }
.svc-icon-item .featureicon,
.svc-icon-item .fluidbigicon {
  width: 50px;
  height: 50px;
  background-size: contain;
  background-position: 0 50%;
  margin: 0 0 14px;
}
.svc-icon-item__title {
  font-family: var(--font);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--midnight-blue);
  line-height: 1.25;
  margin: 0 0 6px;
}
.svc-icon-item__text {
  font-family: var(--font);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: #5a6673;
  margin: 0;
}

/* right column: labeled lists (fund strategies / structures) */
/* Divided lists. TWO layouts from ONE primitive, chosen by how many groups
   there are rather than by anyone picking a column count:
     - 2+ groups  -> a column per group  (Fund Admin: Strategies | Structures)
     - 1 group    -> the items flow across two columns by themselves
   That's what lets the CMS model meaning ("a list, optionally titled") and keep
   layout out of the editor's hands entirely. */
.svc-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 44px; }

/* breathing room when a list follows a lead paragraph (it replaced
   .svc-lead__label, which carried its own top margin) */
.svc-lead + .svc-lists { margin-top: 30px; }

.svc-lists--single { display: block; }
.svc-lists--single .svc-list__items {
  columns: 2;
  column-gap: 44px;
}
/* border-BOTTOM here, not top: with CSS columns only the DOM-first item is
   :first-of-type, so a top-border rule leaves a stray line above column two.
   The :first-of-type selector is repeated deliberately — the base rule zeroes
   padding-top for it, and since that rule sits later in this file it would
   otherwise win, leaving column one's first item 8px higher than column two's
   and knocking the two columns off a shared baseline. */
.svc-lists--single .svc-list__item,
.svc-lists--single .svc-list__item:first-of-type {
  break-inside: avoid;
  border-top: 0;
  border-bottom: 1px solid #e7eaef;
  padding-top: 8px;
}
@media (max-width: 600px) {
  .svc-lists--single .svc-list__items { columns: 1; }
}
.svc-list__title {
  font-family: var(--font);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--midnight-blue);
  margin: 0 0 12px;
}
.svc-list__item {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: #333;
  padding: 8px 0;
  border-top: 1px solid #e7eaef;
}
.svc-list__item:first-of-type { border-top: 0; padding-top: 0; }

/* DESCRIBED variant — the same divided list, but each row carries a title and a
   short description instead of a bare phrase. Composes with --single, so a lone
   described list still flows across two columns.
   Hierarchy comes from weight and colour rather than size: both lines sit on
   --fs-body because a service description is prose, and the type system reserves
   --fs-small for meta, captions and roles. */
.svc-lists--described .svc-list__item {
  padding: 14px 0;
}
.svc-list__item-title {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-title);
  color: var(--midnight-blue);
  margin-bottom: 4px;
}
.svc-list__item-text {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: #5a6673;
  margin: 0;
  max-width: 46ch;
}

/* right column: numbered values grid (Our Story values) */
.svc-values { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 44px; }
.svc-value__num {
  font-family: var(--font);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--deep-sky-blue);
  line-height: 1;
  margin-bottom: 14px;
}
.svc-value__title {
  font-family: var(--font);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--midnight-blue);
  line-height: 1.25;
  margin: 0 0 8px;
}
.svc-value__text {
  font-family: var(--font);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: #5a6673;
  margin: 0;
}

/* ---- stacked variant: title ABOVE a full-width body ---------------------
   For sections whose content needs the whole 1200 (the team roster), while
   keeping the same container, title treatment and vertical rhythm as the
   heading-left sections. */
.svc-section__grid--stack { grid-template-columns: 1fr; gap: 38px; }

/* ==================================================================== *
 * TEAM ROSTER (.tm-grid / .tm-card)
 *
 * Replaces .team-member-flex-parent > .w-dyn-list > .w-dyn-items >
 * .collection-item-11 > .team-member-wrapper.ttier.tt2.ah — four nested
 * Webflow CMS wrappers, two of which had no styles at all, sizing cards with
 * percentage flex math (31.33% + 1% margins). That math only ever produced
 * 3-up or 1-up, and .tt2.ah pinned every card to min-height 347px with 60px
 * of side padding and an 80px bottom margin: on a 390px screen each person
 * cost 427px of scroll inside a 226px-wide content column.
 *
 * Now one grid that actually responds (4 / 3 / 2 up), cards sized by content.
 * ==================================================================== */
/* Two labelled groups: leadership, a rule, then the rest of the staff. The
   page carries no section title of its own — the hero says "Meet the Winbridge
   SBF Team" and these centred labels do the dividing. */
.tm-group--divided {
  border-top: 1px solid #dfe4e9;
  margin-top: 66px;
  padding-top: 60px;
}
.tm-grouphead { text-align: center; margin-bottom: 46px; }
.tm-grouphead__eyebrow {
  font-family: var(--font);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: var(--deep-sky-blue);
  margin-bottom: 10px;
}
.tm-grouphead__title {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-h2);   /* same scale as .svc-section__title */
  font-weight: 700;
  line-height: 1.15;
  color: var(--midnight-blue);
}

.tm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* leadership is exactly one row */
  gap: 52px 28px;
}

.tm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tm-card__photo {
  position: relative;
  display: block;
  width: 100%;
  max-width: 220px;                        /* bigger headshots than the old 160px */
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #eef1f4;
  margin-bottom: 18px;
}
/* direct child only — the reveal's arrow is also an <img> in here and must NOT
   be stretched to fill the circle */
.tm-card__photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tm-card__name {
  margin: 0;                               /* it's an <h3> — drop the UA margins */
  font-family: var(--font);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.25;
  color: var(--midnight-blue);
  /* the roster splits names into given / family+credentials fields; render as
     one string so we don't get the old "BRENDAN P.   FITZGERALD, CPA" gap */
  text-wrap: balance;
}
.tm-card__rule {
  display: block;
  width: 34px;
  height: 2px;
  background: var(--deep-sky-blue);
  margin: 12px 0 10px;
}
.tm-card__title {
  font-family: var(--font);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: #5a6673;
}

/* Whole card is the link (stretched ::after), so the tap target is the card
   rather than just the circle — but the reveal it triggers is the original
   Webflow one: a sky-blue wash over the headshot with the bio arrow. */
.tm-card__link { color: inherit; text-decoration: none; }
.tm-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.tm-card__reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 173, 239, 0.6);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.tm-card__arrow { width: 34px; height: auto; display: block; }
.tm-card:hover .tm-card__reveal,
.tm-card:focus-within .tm-card__reveal { opacity: 1; }
.tm-card:hover .tm-card__photo > img { transform: scale(1.05); }
.tm-card:hover .tm-card__name,
.tm-card__link:hover { text-decoration: none; }   /* the wash is the affordance */
.tm-card__link:focus-visible::after {
  outline: 2px solid var(--deep-sky-blue);
  outline-offset: 6px;
  border-radius: 8px;
}

/* Touch has no hover, so the reveal simply never fires there. It was briefly a
   corner badge instead, but the circle's overflow clips a corner-anchored badge
   into a half-moon — it read as a rendering glitch rather than an affordance. */
@media (hover: none) {
  .tm-card__reveal { display: none; }
}

/* LinkedIn, when the client supplies URLs, sits ABOVE the stretched link so it
   stays independently clickable (never nest one link inside another). */
.tm-card__social {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  display: inline-flex;
}

@media (max-width: 991px) {
  .svc-section { padding: 48px 0; }
  .svc-section--first { padding-top: 40px; }
  .svc-section__grid { grid-template-columns: 1fr; gap: 22px; }
  .svc-section__grid--stack { gap: 30px; }
  /* tablet: two across */
  .tm-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 26px; }
  .tm-group--divided { margin-top: 48px; padding-top: 44px; }
  .tm-grouphead { margin-bottom: 34px; }
}
@media (max-width: 600px) {
  .svc-features,
  .svc-icons,
  .svc-lists,
  .svc-values { grid-template-columns: 1fr; gap: 26px; }
  /* phone: one across, with a headshot big enough to earn the column */
  .tm-grid { grid-template-columns: 1fr; gap: 40px; }
  .tm-card__photo { max-width: 190px; margin-bottom: 16px; }
  .tm-group--divided { margin-top: 38px; padding-top: 36px; }
}

/* Bio page: return to the roster. This used .bio-button, which inherits the
   house button's hover wipe — and that wipe brings in a RIGHT-pointing arrow,
   which is nonsense on a control that goes back. A plain text link with a
   left chevron that slides the way it's actually taking you. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 0;                 /* a 16px line is not a tappable target */
  border: 0;
  background: none;
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--deep-sky-blue);
  text-decoration: none;
  transition: color 0.18s ease;
}
.back-link svg {
  flex-shrink: 0;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.back-link:hover { color: var(--midnight-blue); }
.back-link:hover svg { transform: translateX(-4px); }
.back-link:focus-visible {
  outline: 2px solid var(--deep-sky-blue);
  outline-offset: 4px;
  border-radius: 4px;
}
/* ==================================================================== *
 * BIO PAGE — rebuilt on the .svc-section shell, so a person's page shares the
 * service pages' container (1200 / 22px), left heading column and 991 collapse.
 *
 * Was: .bio-section > .container-large.biocontainer > .flex-parent-bio, with
 * .photo-container and .bio-copy-side both at width:65% and every level
 * centre-aligned (align-items: center on two flex parents, text-align: center
 * on the copy). That produced a narrow centred column with the right half of
 * the page empty, and .bio-section's own 22px of padding sat ON TOP of
 * .container-large's 22px, so bio content started at 44px on mobile while
 * every other page starts at 22px.
 * ==================================================================== */
.bio-backrow { margin-bottom: 26px; }

/* The bio page is the only page whose first .svc-section sits directly under the
   nav with no hero above it. On mobile that nav is FIXED (out of flow), so the
   section needs the same clearance every .internal-hero gets or the back link
   renders underneath it. --nav-vis is measured in BaseLayout; the desktop nav is
   in-flow, so no offset is needed there. */
@media (max-width: 991px) {
  .svc-section--nohero { padding-top: calc(var(--nav-vis, 73px) + 28px) !important; }
}

.bio-aside { position: relative; }
/* matches the roster card exactly — .tm-card__photo is 220px, 190px on phone.
   Webflow's .bio-photo was pinned to 160px at every breakpoint, so a person's
   own page showed them SMALLER than the grid you arrived from. */
.bio-portrait {
  width: 220px;
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #eef1f4;
  margin-bottom: 22px;
}
.bio-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bio-name {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--midnight-blue);
  text-transform: none;      /* title case, per the house convention */
}
.bio-rule {
  display: block;
  width: 60px;
  height: 3px;
  margin: 18px 0 14px;
  background: var(--deep-sky-blue);
}
.bio-role {
  font-family: var(--font);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: #5a6673;
}
.bio-linkedin { margin-top: 4px; }

.bio-body > *:first-child { margin-top: 0; }
.bio-body p {
  margin: 0 0 1.15rem;
  color: #333;
}
.bio-body p:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
  /* stacked: identity above the bio, both on the 22px gutter */
  .bio-portrait { width: 190px; margin-bottom: 18px; }
  .bio-rule { margin: 14px 0 12px; }
}

/* CONSISTENT IMAGE HEROES — one dark treatment across every .internal-hero.fwhero
   page (services + our-story, our-team, careers): the hero image behind the same
   navy overlay used by the CTA box, a white title, and a sky-blue eyebrow. Unifies
   our-team's old navy->blue gradient into the same flat navy. (Contact has no image
   and privacy has no hero — handled separately.) */
.internal-hero.fwhero {
  position: relative;
  isolation: isolate;
}
.internal-hero.fwhero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 48, 110, 0.86) 0%, rgba(0, 31, 74, 0.8) 100%);
  z-index: 1;
}
.internal-hero.fwhero > * {
  position: relative;
  z-index: 2;
}
.internal-hero.fwhero .h2-internal.fw-heromain {
  color: #fff !important;
}
.internal-hero.fwhero .tagline.fw-tag {
  color: var(--deep-sky-blue) !important;
}
/* Our Team's hero shipped at 400px; match the 600px every other internal hero uses. */
.internal-hero.fwhero.ourteam { height: 600px !important; }
/* ...and it stacked THREE background layers: an OPAQUE navy->sky-blue gradient over
   a dark wash over the photo. Being opaque, the top layer hid the photo completely —
   that hero has never actually shown its image, and once the shared ::before overlay
   landed on top it was just navy on navy. Reduce it to the photo alone and let the
   same overlay every other hero uses do the work.

   The !important is load-bearing: Webflow's rule carries the same three-class specificity,
   so this has to outrank it rather than merely follow it.

   The PHOTO, though, must not be hardcoded here. It was, and that is why the Team Page hero
   ignored Sanity: the template writes the chosen image as an inline style, and an inline
   style loses to !important. The CMS value was in the HTML the whole time and the browser
   threw it away. Same fix as the home hero and the CTA band: the declaration stays, the
   value comes from a custom property, and the shipped photo is the fallback for when nothing
   is set. Custom properties are substituted before the cascade compares priorities, so the
   inline value wins without the inline style having to fight !important at all. */
.internal-hero.fwhero.ourteam {
  background-image: var(--page-hero-photo, url('/images/Winbridge-2020-100.jpg')) !important;
  background-position: 50% 50% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Mobile/tablet: the nav is FIXED (out of flow), and the per-page hero margin-top:0
   let the centered eyebrow + title slide up under the bar. Pad every internal hero
   by the visible nav height so its content clears the nav. --nav-vis is measured by
   the BaseLayout script; 73px is the no-JS fallback. (Desktop nav is sticky/in-flow,
   so no offset needed there.) */
@media (max-width: 991px) {
  .internal-hero { padding-top: var(--nav-vis, 73px) !important; }
}

/* ==================================================================== *
 * ONE CONTENT WIDTH — align every section to the home content width so
 * left edges + widths match on every page (the site shipped containers at
 * 1200/no-pad, 1050, 940, etc., which made sections drift). Canonical =
 * .container-large: 1200px max, 22px side padding. Vertical padding stays
 * per-class (only the horizontal box is unified).
 * ==================================================================== */
.container-large,
.container-large-2,
.container-large-3,
.largecontainer,
.largecontainer.lc1050,
.wrap._1200wrap {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

/* On mobile these section wrappers add their OWN horizontal padding (18-30px),
   which double-pads with the container's 22px gutter above. Zero it so the
   container stays the single gutter (matches desktop, where sections have none). */
@media (max-width: 991px) {
  .section-8,
  .section-content { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Footer gutter must match the BODY's, at every width: footer content should land
   on the same left edge as every .container-large section (62px inside the 1200
   container, 22px once full-width). The footer shipped a 4rem parent gutter + 1rem
   column padding (content at 120px) and a 5rem margin on the copyright row. The
   columns keep their 1rem inner gutter, so the parent pads by (22px - 1rem). */
.footer-flex-parent {
  padding-left: calc(22px - 1rem) !important;
  padding-right: calc(22px - 1rem) !important;
}
.bottom-foot-parent {
  margin-left: 22px !important;
  margin-right: 22px !important;
}

/* Footer on mobile: the smallest breakpoint set the columns to 80% width +
   margin-left:10%, reading as a huge left indent. Make them full-width and
   align the footer gutter to the body's (22px). */
@media (max-width: 479px) {
  .footer-flex-parent { padding-left: 22px !important; padding-right: 22px !important; }
  .ffc-2, .ffc-2.top2, .ffc-2.footer-col-3, .ffc-3, .ffc-5 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* bottom row (copyright + privacy) had margin-left:5rem; follow-us column had
     inner padding — align both to the same 22px gutter as the columns. */
  .bottom-foot-parent { margin-left: 22px !important; margin-right: 22px !important; }
  .footersocialw { padding-left: 0 !important; }
  .footersocial { margin-left: 0 !important; }
}

/* HERO load animation — staggered fade-up, replaces the stock IX2 sequence:
   1) Connect  2) Move Forward + the arch  3) line + paragraph + button
   4) the scroll arrow, alone, a beat after everything else has settled.

   Timeline: Connect 0.15-1.00s / Move Forward 0.55-1.40s / arch 1.25-1.85s /
   copy 1.40-2.00s / arrow 2.15-2.85s. The arrow's 0.15s of silence after the
   copy lands is the whole point — it arrives as its own gesture rather than as
   part of the block, which is what makes it read as an invitation to scroll. */

/* The Connect/Move Forward wrapper carried a baked opacity:0 (webflow.js used to fade it
   in). Force it visible so its animated children can show now that webflow.js is gone. */
.d-6-section [data-ix="connect-load-2"] { opacity: 1 !important; transform: none !important; }

@keyframes heroFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* arch (step 2) + line / paragraph / button (step 3): slide-up fade */
html.js-anim .d-6-section .fluid-bridge-here,
html.js-anim .d-6-section .herohash,
html.js-anim .d-6-section .hero-sub-text,
html.js-anim .d-6-section .hero-button-w {
  opacity: 0;
  animation: heroFade 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
html.js-anim .d-6-section .fluid-bridge-here { animation-delay: 1.25s; }        /* arch — spaced well after the two headlines */
html.js-anim .d-6-section .herohash,
html.js-anim .d-6-section .hero-sub-text,
html.js-anim .d-6-section .hero-button-w { animation-delay: 1.4s; }             /* rest of the copy block */

/* step 4 — the arrow, on its own. Drifts DOWNWARD into place (the direction it
   points, and the direction it's asking you to go) rather than sharing the copy's
   upward slide, and takes a little longer to arrive. Held non-interactive until
   it's actually visible, so there's no invisible tap target for the first 2s. */
@keyframes heroArrow {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); pointer-events: auto; }
}
html.js-anim .d-6-section .downarrow {
  opacity: 0;
  pointer-events: none;
  animation: heroArrow 0.7s cubic-bezier(0.16, 1, 0.3, 1) 2.15s forwards;
}

/* Connect + Move Forward WIPE in left-to-right with a soft blur-to-sharp resolve —
   gentle easing, slowed down so it feels premium rather than snappy. */
@keyframes wipeIn {
  from { clip-path: inset(0 100% 0 0); filter: blur(10px); }
  to   { clip-path: inset(0 0 0 0); filter: blur(0); }
}
html.js-anim .d-6-section .h1-dafoe,
html.js-anim .d-6-section .h1-la {
  clip-path: inset(0 100% 0 0);
  filter: blur(10px);
  animation: wipeIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
html.js-anim .d-6-section .h1-dafoe { animation-delay: 0.15s; }                /* Connect */
html.js-anim .d-6-section .h1-la { animation-delay: 0.55s; }                   /* Move Forward */

@media (prefers-reduced-motion: reduce) {
  .d-6-section .h1-dafoe, .d-6-section .fluid-bridge-here, .d-6-section .h1-la,
  .d-6-section .herohash, .d-6-section .hero-sub-text, .d-6-section .hero-button-w,
  .d-6-section .downarrow { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* the arrow's pointer-events are restored by its keyframe, so with the animation
     cancelled it has to be restored here or the arrow stays unclickable */
  .d-6-section .downarrow { pointer-events: auto !important; }
}

/* ---- HOME HERO LOCKUP --------------------------------------------------
   The two lines are one piece of art, so they move together. Unitless leading
   so each tracks its own size (Webflow had line-height pinned equal to
   font-size in px, recomputed per breakpoint). */
.d-6-section .h1-hero.h1-la {
  font-size: var(--fs-hero-main) !important;
  line-height: var(--lh-display) !important;
}
.d-6-section .h1-hero.h1-dafoe {
  font-size: var(--fs-hero-script) !important;
  line-height: 1.15 !important;
  /* Brandon, matching the line below it (Ryan). The Webflow class is named for Mr Dafoe
     but that script never rendered here — the export set this line to proxima-nova, on
     our build and on the live site both. proxima-nova came from Typekit, which meant a
     render-blocking script and eleven requests for this one word; putting it on the brand
     face lets Typekit go entirely. Size stays as it was: the two lines are still a
     lockup, not a repeat. */
  font-family: var(--font) !important;
}

/* ==================================================================== *
 * CONTACT PAGE — details column + Formspark form
 *
 * The Webflow page stacked three icon blocks (Email Us / Call Us / LinkedIn)
 * on top of a details list repeating the same three things, then the form in a
 * third band. Decision #4 locked ONE contact path, so it's now the standard
 * two-column shell: details left, form right, stacking at 991 with everything
 * else. Sizes all come from the type tokens.
 * ==================================================================== */
.contact-details {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.contact-details__item + .contact-details__item { margin-top: 20px; }
.contact-details__label {
  display: block;
  font-family: var(--font);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deep-sky-blue);
  margin-bottom: 5px;
}
.contact-details__value {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--midnight-blue);
  text-decoration: none;
}
a.contact-details__value:hover { color: var(--deep-sky-blue); }
.contact-details__address { font-style: normal; display: block; }

.contact-lead { margin: 0 0 30px; max-width: 56ch; }

/* ---- form ---- */
.wf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two-up fields inside the wide column */
  gap: 20px 24px;
}
.wf-field--full { grid-column: 1 / -1; }
.wf-field label {
  display: block;
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--midnight-blue);
  margin-bottom: 7px;
}
.wf-req { color: var(--deep-sky-blue); }

.wf-field input,
.wf-field textarea {
  width: 100%;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--midnight-blue);
  background: #fff;
  border: 1px solid #cfd6dd;
  border-radius: 6px;
  padding: 12px 14px;             /* >=44px tall — a real touch target */
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.wf-field textarea { resize: vertical; min-height: 130px; line-height: var(--lh-body); }
.wf-field input:hover,
.wf-field textarea:hover { border-color: #aab6c2; }
.wf-field input:focus,
.wf-field textarea:focus {
  outline: none;
  border-color: var(--deep-sky-blue);
  box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.18);
}
/* :user-invalid, not :invalid — only flags a field once the visitor has
   actually interacted with it, so the form doesn't open covered in red */
.wf-field input:user-invalid,
.wf-field textarea:user-invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}

.wf-note {
  font-family: var(--font);
  font-size: var(--fs-small);
  color: #6b7683;
  margin: 16px 0 22px;
}
/* SUBMIT BUTTONS.
 *
 * These shipped as bare `.btn`, which never sets a background — so they rendered
 * with the browser's default button grey (#efefef) under a WHITE label: about
 * 1.15:1 contrast, effectively invisible, and universally read as "disabled".
 * The .b-in hover fill was transparent too, so the hover animation did nothing.
 * Given the solid brand treatment so they match .button-2 everywhere else.
 */
.wf-submit {
  cursor: pointer;
  background: #00adef !important;
  border: none !important;
  transition: background-color 0.25s ease;
}
.wf-submit .b-out { color: #fff; }
.wf-submit .b-in { background: #00306e; color: #fff; }

/* NOT-YET-SUBMITTABLE state.
 *
 * Applied only under .js-validate, which the form runtime puts on the wrapper —
 * so a visitor with JS off always sees a normal, obviously-clickable button and
 * the no-JS POST path is never visually blocked.
 *
 * The button is deliberately NOT `disabled`. A disabled control cannot be focused
 * or clicked, so it tells the visitor nothing about WHAT is missing; leaving it
 * live means clicking runs the browser's own field validation and points at the
 * offending field. This is styling only.
 *
 * #5f7183 rather than a light grey: white-on-#5f7183 is 5.03:1, comfortably past
 * WCAG AA, so the muted state stays fully legible instead of repeating the
 * invisible-label bug in a different colour.
 */
.js-validate .wf-submit:not(.is-ready) {
  background: #5f7183 !important;
}
.js-validate .wf-submit:not(.is-ready) .b-in { background: #4a5c6e; }

.wf-submit:disabled { opacity: 0.55; cursor: default; }

.wf-status {
  font-family: var(--font);
  font-size: var(--fs-small);
  margin: 14px 0 0;
  min-height: 1.4em;              /* reserve the line so nothing jumps */
}
.wf-status.is-error { color: #c0392b; }

/* honeypot — off-screen rather than display:none, since some bots skip
   hidden inputs but happily fill positioned ones */
.wf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.wf-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wf-success {
  border: 1px solid #cfe8d6;
  background: #f2faf5;
  border-radius: 10px;
  padding: 34px 30px;
}
.wf-success__mark {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #1e8e4e; color: #fff;
  margin-bottom: 18px;
}
.wf-success__title {
  margin: 0 0 8px;
  font-family: var(--font);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-title);
  color: var(--midnight-blue);
}
.wf-success__text {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: #333;
}

@media (max-width: 600px) {
  .wf-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* "I need help with" checkbox group */
.wf-check-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.wf-check-group legend {
  padding: 0;
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--midnight-blue);
  margin-bottom: 10px;
}
.wf-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
/* .wf-field label is (0,1,1) and would otherwise win over a bare .wf-check */
.wf-checks .wf-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;              /* keeps the row a comfortable tap target */
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: #333;
  cursor: pointer;
}
.wf-checks .wf-check input {
  width: 19px; height: 19px;
  flex-shrink: 0;
  accent-color: var(--deep-sky-blue);
  cursor: pointer;
}
.wf-checks .wf-check input:focus-visible {
  outline: 2px solid var(--deep-sky-blue);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .wf-checks { grid-template-columns: 1fr; gap: 2px; }
}

/* ==================================================================== *
 * CLIENT-SWAPPABLE PHOTOS (2026-07-24)
 *
 * These four backgrounds are now editable in Sanity. Each reads its photo from a
 * custom property that the page sets inline; the fallback in each var() is the photo
 * shipped today, so an empty CMS field renders exactly what is on the site now.
 *
 * The photo is a VARIABLE rather than the whole `background-image` on purpose, and the
 * home hero is why: its dark scrim is a linear-gradient inside the same shorthand as
 * the photo. Overwriting background-image from the CMS would delete that scrim and drop
 * white headline text onto a bright sky. Splitting them means the overlays live here,
 * in the stylesheet, and cannot be reached or broken from Sanity — which is exactly the
 * requirement (Ryan: the gradient applies no matter what image is uploaded).
 *
 * site.css loads after the Webflow export, so these win on load order at equal
 * specificity. Layer counts are preserved so the paired background-position /
 * -repeat / -size / -attachment values in the original rules still line up.
 * ==================================================================== */

/* Home hero. Two layers: the scrim, then the photo. */
.d-6-section.leftaligned.daytime {
  background-image: linear-gradient(#0006, #0006), var(--hero-photo, url('/images/Cleveland-7.jpg'));
}

/* Pre-footer CTA band. Its navy overlay is .cta-box::before, a separate element, so it
   is unaffected either way — the variable is used here for consistency. */
.cta-box {
  background-image: var(--cta-photo, url('/images/winbridge-sbf-contact.jpg'));
}

/* The two "Looking for…" panels. Their navy overlays are .dist-overlay / .surg-overlay
   child elements, so the hover fade keeps working with any photo. */
.flex-child-iam-dist {
  background-image: var(--iam-photo-1, url('/images/Tiny-Fund-Admin.jpg'));
}
.flex-child-iam-surgeon.middle {
  background-image: var(--iam-photo-2, url('/images/Tiny-BackOffice-BG.jpg'));
}