/* Da Vinci — fidelity.css: exact values ported from Elementor reference; loaded after site.css + components to override approximations. */
/* ============================================================
   home
   Ported CSS for the home page sections from the Elementor reference (post-10.css + kit post-7.css) to the theme's existing selectors. Sections covered: hero, trading-house (value-cards component), roles (image + off-white card + gradient accordion), roles-carousel, working (image + light-blue card on purple canvas), explore (off-white card with 60/40 two-column loop layout). Also ported the site-wide .btn style (8px 12px, 56px radius, 14px/16px/500) and all button-variant hover states from the reference, and set body.home to the purple canvas so the off-white rounded cards float on purple with 10px gaps (matching the reference page-canvas design).

Key Elementor values ported: container border-radius 10px (not the theme's 16px --radius), card min-height 325px, value-card 4-col→2-col→1-col grid with 20px/10px gaps, roles accordion gradient linear-gradient(104deg, #5755C6 15%, #977AC3 88%) mapped to --indigo/--lavender-2 tokens with 1rem dark titles that turn white when open and transparent-plus-icon (hidden), working text card on --light-blue with min-height 530px, explore 60/40 column split via CSS grid on .explore .container. Typography mapped to :root tokens (--fs-hero/--fs-h1/--fs-h2/--fs-body/--fs-sm with matching line-heights). Colors mapped: purple-60% rgba(68,25,73,0.6) and dark-60% rgba(38,20,20,0.6) for muted text, replacing the theme's --text-muted where the reference uses purple-tinted muted text on light cards.

Gaps / skipped: (1) The Elementor reference hero has NO rotating globe (just the gradient bg image + 2 buttons + heading in a row); the code-first hero adds the globe component, so I kept the code-first centered-title column layout and only ported the title typography (80px/80px → 48px/50px at <=1024px). The hero bg gradient image was not ported (asset URL is instance-local); kept solid var(--purple). (2) The reference value-card hover only changes background-color to purple (title stays purple → low contrast); I matched this exactly per fidelity, including the 0.5s background transition. (3) The roles-carousel job-card internal styling comes from an Elementor loop template not present in post-10.css, so I only ported the section shell (off-white card, 80px padding, 40px/60px track margin) and set the card radius to 10px; the existing .job-card padding/flex layout was left as-is. (4) globe.css was not modified — the Elementor reference has no globe to port from, and the existing globe.css is already generic and shared with the connect page as intended. (5) Could not resolve the Elementor kit typography line-heights beyond primary(42)/text(20)/accent(16)/bf2eb21(18)/1b8fbed(80); used matching --lh-* tokens. Reference URLs fetched: post-10.css, post-7.css, base-desktop.css (all 200 OK).
   ============================================================ */
/* ============================================================
   GLOBAL — page canvas + rounded bounding-box pattern
   Ref: Elementor canvas container d95acdf (the parent of ALL six home
   content sections c25ef6e / ade902b / 29cfb0f / 21f6fad / 6aa211e / a62016d):
       background-color: transparent;
       background-image: linear-gradient(180deg, #FFFFFF00 5%, #FDFDFD 10%);   (= near-white #FDFDFD)
       display: flex; flex-direction: column;
       padding: 10px 10px 0 10px;                 (10px side inset, 10px top, 0 bottom)
   Each child section: border-radius: 10px, stacked with 10px gaps.
   The off-white (#F3F3F3) sections read as cards ONLY because the canvas is the
   LIGHTER near-white (#FDFDFD) — so the canvas must NOT be off-white.
   Replaces the old:  body.home { background: var(--off-white); }
   ============================================================ */

/* ----- Page canvas (was var(--off-white) #F3F3F3, identical to the off-white
   cards and therefore invisible). d95acdf near-white #FDFDFD gradient. ----- */
body.home {
  background-color: var(--near-white);   /* gradient moved to main::after (the canvas layer, below) — on body it sits behind the hero and never shows */
}

/* ----- Every top-level content section (all <section>s except the full-bleed
   hero) becomes a 10px-inset, 10px-radius card with 10px gaps — mirrors the
   d95acdf padding:10px + per-child border-radius:10px + stacking gap.
   Its (0,2,3) specificity supersedes the ad-hoc per-section margins
   (value-cards 10px 0, roles-carousel 0 24px, explore 44px 24px), normalizing
   them all to the uniform production inset. ----- */
/* 10px page frame (ALL pages): every content section below the hero insets 10px as a
   rounded card (prod canvas d95acdf padding:10px). The hero is always the first section
   and stays full-bleed on every page (prod heroes are x=0 w=1440). #main specificity
   supersedes the ad-hoc per-section margins (value-cards, roles-carousel, explore). */
/* flow-root so a first section's own top margin (tradfi, events, thank-you) stays
   inside #main. Left to collapse it escapes to html, where whether it still offsets
   the page depends on the scroll library's state, and the page read 10px high. */
#main { display: flow-root; }
#main > section:not(:first-child) {
  margin: 10px 10px 0;      /* 10px top gap + 10px side inset */
  border-radius: 10px;      /* rounded card corners (no-op on transparent roles/working rows) */
}
#main > section:last-child {
  margin-bottom: 0;         /* prod's canvas has no trailing gap: the footer's own 10px padding is the gap */
}
#main > section.dv-ty { margin-bottom: 10px; }   /* thank-you is the one page whose canvas pads 10px all round */
/* prod's canvas pads 10px on the sides and top everywhere; the bottom pad is
   mobile-only, except on these two pages, which carry it at every width, and on
   home, whose canvas has no bottom pad at any width. */
@media (max-width: 767px) {
  #main > section:last-child { margin-bottom: 10px; }
  body.home #main > section:last-child { margin-bottom: 0; }
}
body.page--digital-assets #main > section:last-child,
body.page--internship-signup #main > section:last-child { margin-bottom: 10px; }
/* dv_spacer(): prod's empty containers each add one more 10px frame gap. A
   zero-height section would collapse its margins away, so carry the 10px as
   height and let the neighbouring section supply the gap. */
#main > section.dv-spacer { height: 10px; padding: 0; margin-top: 0; }
body.home main > section:not(.hero) {
  position: relative;       /* home only: lift content above the pinned/sticky hero (#2/#3) */
  z-index: 1;
}

/* #2/#3: the hero (position:sticky, below) pins behind the rising content, so
   scrolling slides the sections up over "The Art of Trading" + the CTAs, and the
   gutters between the cards reveal the hero underneath instead of pure white.
   Prod fades that reveal to white via a gradient on its canvas container d95acdf
   (linear-gradient(180deg,#FFFFFF00 5%,#FDFDFD 10%)) which sits ABOVE the pinned
   hero but BELOW the section cards. We have no canvas element (sections are direct
   children of #main), so reproduce it with a main::after layer that starts at the
   hero's bottom (top:100vh) — so it never veils the hero itself — spans the content,
   and carries that transparent->near-white gradient. z-index:0 keeps it over the
   sticky hero (z-index:0, painted earlier) and under the cards (z-index:1); only the
   gutters show it, fading hero->white by ~the middle of the first content card.
   ponytail: the gradient stops are the tuning knob — raise the white % to fade later. */
body.home main { position: relative; }   /* containing block for the canvas layer */
body.home main::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100vh;               /* start at the hero's bottom (.hero min-height:100vh) so the hero stays crisp */
  bottom: 0;
  z-index: 0;               /* over the pinned hero (z-index:0), under the cards (z-index:1) */
  pointer-events: none;
  background: linear-gradient(180deg, #ffffff00 0%, #ffffff00 5%, var(--near-white) 13%);
}

/* ----- .roles is the transparent flex row (ref ade902b, --padding:0); the 10px
   inset now comes from the global section margin above. Its existing
   padding:10px 10px 0 would double the side inset to 20px. ----- */
body.home .roles { padding: 0; }

/* Note: no section-level overflow is added on purpose — the card children
   (roles__media/roles__content/working__content/img, job-card, explore-card)
   already set their own border-radius + overflow, and the roles-carousel track
   must keep horizontal overflow. Insets stay 10px at all breakpoints (prod
   d95acdf padding is not reduced on tablet/mobile). */

/* ============================================================
   Global tokens, container, typography, body — fidelity fixes
   Ported from kit-7 (post-7.css) @media responsive cascade.
   Desktop values already match in site.css :root; these blocks
   add the missing 1024/767 reductions and the h4 accent weight.
   Paste into fidelity.css (overrides win via cascade + @media).
   ============================================================ */

/* Accent typography weight is 500 (kit-7), not the 400 shared by h1-h3 */
h4 { font-weight: 500; }

/* 725a570 (h2/24px) defines no line-height in kit-7 -> browser normal */
:root { --lh-h2: normal; }

/* ---- Tablet: @max-width:1024px (kit-7 breakpoint) ----
   1b8fbed hero 80/80 -> 48/50 ; text 18 -> 16 ; accent 14 -> 16 */
@media (max-width: 1024px) {
  :root {
    --fs-hero: 48px;
    --lh-hero: 50px;
    --fs-body: 16px;   /* text typography drops to 16; --lh-body stays 20px */
    --fs-xs:   16px;   /* accent typography drops to 16; --lh-xs stays 16px */
  }
}

/* ---- Mobile: @max-width:767px (kit-7 breakpoint) ----
   primary 40/42 -> 32/34 ; text & accent remain 16 */
@media (max-width: 767px) {
  :root {
    --fs-h1:   32px;
    --lh-h1:   34px;
    --fs-body: 16px;
    --fs-xs:   16px;
  }
}

/* Note: --container (1330px) needs no @media cap — at <=1024px viewports
   the viewport itself is narrower than both 1330 and the reference's 1024
   cap, so .container is viewport-width either way (no visible difference).
   Body background: reference is "none" (white canvas); mine var(--white)
   renders identical #ffffff — no change needed. */

/* ===== Buttons (site-wide Elementor style) ===== */
.btn {
	padding: 8px 12px;
	border-radius: 56px;
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	font-weight: 500;
	align-self: flex-start;   /* prod's buttons never stretch to a flex row's height */
	text-align: center;   /* prod centers button labels (invisible while shrink-wrapped, but matches computed) */
}
.btn--accent { background: var(--lime); color: var(--dark); }
.btn--accent:hover { background: var(--purple); color: var(--white); }
.btn--ghost { background: transparent; border-color: rgba(246,246,246,0.2); color: var(--white); }
.btn--ghost:hover { background: rgba(246,246,246,0.2); color: var(--white); }
.btn--solid-light { background: var(--white); color: var(--dark); }
.btn--solid-light:hover { background: var(--lime); color: var(--purple); }
.btn--ghost-dark { border-color: var(--dark); color: var(--dark); }
.btn--ghost-dark:hover { background: rgba(68,25,73,0.6); color: var(--white); }
.btn--white { background: var(--white); color: var(--dark); }
.btn--white:hover { background: var(--lime); color: var(--purple); }

/* The outlined CTA in a hero/working pair keeps 14/16 at every width while its
   filled sibling follows the kit's accent typography up to 16 at <=1024. In prod
   these five buttons carry their own typography instead of the global accent, so
   they do not move. Not a blanket ghost rule: the events Load More is a ghost too
   and does take the kit's 16. */
.hero__ctas .btn--ghost,
.working__ctas .btn--ghost-dark,
.careers-working .btn--ghost-dark,
.careers-process .btn--ghost,
.connect-working__ctas .btn--ghost-dark {
	font-size: 14px;
	line-height: 16px;
}

/* ===== Prod's copy/photo split row =====
   Five rows share it (home working 468b944/db6fc14, about-us 4d7c1c1, careers
   824f00b/038ac7b, connect 99e2523/730f770, and the thank-you hero in site.css).
   Prod sets no width on either panel. Both are width:100%, so both overflow and
   shrink, and flex weights the shrink by each panel's CONTENT-box basis. The photo
   panel's padding-right — half the gutter outside the 1330px content column — cuts
   its basis and hands the difference to the copy panel. That padding is the entire
   reason the split is uneven, and it tracks the viewport on its own: 679/657 @1366,
   879/1011 @1920, 1280/1762 @3072. So no ratio belongs here. */
.working__content,
.about-working__panel,
.careers-working__copy,
.connect-working__panel,
.roles__media,
.roles__content,
.da-solutions__panel--media,
.da-solutions__panel--content,
.dv-isu-program__photo,
.dv-isu-program__panel,
.working__media,
.about-working__media,
.careers-working__media,
.connect-working__media {
	flex: 0 1 auto;
	width: 100%;
	min-width: 0;
}
.working__media,
.about-working__media,
.careers-working__media,
.connect-working__media {
	padding: 10px 10px 50px;                  /* db6fc14/038ac7b/730f770 T10 R10 B50 L10 */
}
/* The copy panels distribute with space-between, so this gap is invisible until tablet
   shortens them, and then it is what sets the floor: home working 574 not 564, about-us
   510 not 500. */
.working__content,
.about-working__panel,
.careers-working__copy,
.connect-working__panel,
.da-excellence__copy-inner {
	gap: 10px;
}
/* .dv-ty__copy carries the same 10px, but in site.css: put here it would outrank that
   file's own @767 gap:30px, since this file loads later. */
@media (min-width: 992px) {                   /* prod's own custom-CSS breakpoint, not a kit one */
	.working__media,
	.about-working__media,
	.careers-working__media,
	.connect-working__media {
		padding-right: calc((100vw - 1330px) / 2);   /* clamps to 0 under 1350, same as prod */
	}
}
@media (max-width: 767px) {
	.working__media,
	.about-working__media,
	.careers-working__media,
	.connect-working__media {
		padding: 10px;
	}
}

/* ===== Hero (ref elementor-10: 46b9cd8 section, b865131 CTA row, 2cb229e h1, 01c20ea ghost, 6000fdf solid) ===== */
.hero { position: sticky; top: 0; z-index: 0; min-height: 100vh; background: var(--purple); overflow: hidden; } /* sticky: pins behind rising content (#2) */
.hero__video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; z-index: 0; pointer-events: none;
}
.hero__overlay {
	position: relative; z-index: 2;
	min-height: 100vh;
	max-width: none;            /* neutralize any .container cap if class remains */
	margin: 0;                  /* neutralize .container auto-centering */
	display: flex;
	flex-direction: column;     /* ref 46b9cd8: column, justify flex-end */
	justify-content: flex-end;
	gap: 44px 0;                /* ref --gap:44px 0px (row 44, col 0) */
	padding: 24px 24px 50px;    /* ref --padding-top:24 / bottom:50 / left:24 / right:24 */
}
.hero__ctas {                  /* ref b865131: flex row, padding 0, ~10px gap */
	display: flex;
	flex-direction: row;
	gap: 10px;
}
.hero__title {                 /* ref 2cb229e + 1b8fbed: 910px wide, 80/80, wt400, white, LEFT-aligned */
	font-family: var(--font);
	font-size: var(--fs-hero);
	line-height: var(--lh-hero);
	font-weight: 400;
	color: var(--white);
	width: min(910px, 100%);   /* ref width:910px — mobile-safe equivalent */
	max-width: 910px;
	margin: 0;
	text-align: left;          /* THE FIX — ref 2cb229e default start; overrides site.css:152 .hero__title{text-align:center} that pushed the title right */
}

/* ref @media(max-width:1024px): 1b8fbed -> 48px/50px; accent -> 16px (solid button grows) */
@media (max-width: 1024px) {
	.hero__title { font-size: 48px; line-height: 50px; }
	.btn--solid-light { font-size: 16px; line-height: 16px; }
}

/* ref @media(max-width:767px): 46b9cd8 -> min-height 90vh, column-reverse, justify flex-start; title 48/50 */
@media (max-width: 767px) {
	.hero { min-height: 90vh; }
	.hero__overlay { min-height: 90vh; flex-direction: column-reverse; justify-content: flex-start; }
	.hero__title { font-size: 48px; line-height: 50px; }
	.btn--solid-light { font-size: 16px; line-height: 16px; }
}

/* ===== Trading House (value-cards) ===== */
/* Ground truth: embedded template .elementor-10 in /tmp/claude/prod_audit/home.html, styled by post-10.css.
   d95acdf = full-bleed section, padding 10px 10px 0        -> box inset 10px top+sides, 0 bottom
   c25ef6e = off-white rounded box, bg #F3F3F3 (311f85b), radius 10px, padding 0
   1dd2e02 = inner content box, flex column, padding 80/24/80/24
   759ef00 = heading+lede block, padding-bottom 100px       -> the space above the cards
   5797997 = heading (secondary #441949, 730px, mb 24px)
   2b373a9 = lede (#44194999, 730px)
   6ffab51 = card row, flex-direction:row, --gap 20px (10px @<=1024)
   73d5d5b/592fe6f/518fc89/5a16b11 = cards: bg #FFF, radius 10px, padding 24px,
        min-height 325px, justify-content:space-between, background-transition .5s, NO shadow
   hover: card bg -> secondary #441949 ; h3 + text-editor -> lime (#d6fa00; prod custom CSS literal #d6f400 !important) */
.value-cards {
	background: var(--off-white);        /* c25ef6e #F3F3F3 */
	padding: 80px 24px;                  /* 1dd2e02 80/24/80/24 (was 180px bottom) */
	border-radius: 10px;
	margin: 10px 10px 0;                 /* d95acdf 10px top+sides inset, 0 bottom (.roles supplies its own top) */
}
.value-cards .container { max-width: none; padding: 0; }
.value-cards .section__title {
	color: var(--purple);                /* 5797997 secondary */
	text-align: center;
	width: 730px;
	max-width: 730px;
	margin: 0 auto 34px;                 /* 5797997 widget margin 0 0 24px + the heading group's 10px gap */
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
}
.value-cards .section__lede {
	color: rgba(68, 25, 73, 0.6);        /* 2b373a9 = #44194999 */
	text-align: center;
	width: 730px;
	max-width: 730px;
	margin-inline: auto;                 /* bottom gap lives on the grid so it does not collapse away */
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}
.value-cards__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;                           /* 6ffab51 --gap:20px */
	margin-top: 124px;                   /* 759ef00 100px group padding + the band's 10px gap + the lede's own paragraph margin */
}
.value-cards__card {
	background: var(--white);            /* card primary #fff */
	border-radius: 10px;
	padding: 24px;
	min-height: 325px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0;                              /* prod card has no --gap (kills component's 0.85rem) */
	box-shadow: none;                    /* prod card has NO shadow (kills component's 0 4px 18px) */
	transition: background-color 0.5s;   /* --background-transition:0.5s */
}
.value-cards__card:hover { background: var(--purple); }                /* -> secondary #441949 */
.value-cards__card:hover .value-cards__title,
.value-cards__card:hover .value-cards__text { color: var(--lime); }    /* h3 + text -> lime #d6fa00 (prod #d6f400) */
.value-cards__head {
	display: flex;
	flex-direction: column;
	align-items: stretch;                /* prod's title widget spans the card; flex-start shrink-wrapped it */
	gap: 20px;                           /* 15c54fd --row-gap:20px */
}
.value-cards__iconwrap { margin-left: -10px; }        /* bab5102 margin 0 0 0 -10px */
.value-cards__icon {
	width: 55px;
	height: 40px;
	object-fit: contain;
	object-position: left center;        /* prod object-position:center left */
}
.value-cards__title {
	font-size: var(--fs-h2);             /* 24px = token 725a570 */
	line-height: 42px;                   /* prod title lh is 42px (--lh-h2 is globally 'normal', ~28px here) */
	color: var(--purple);                /* c92c209 secondary */
}
.value-cards__text {
	font-size: var(--fs-sm);             /* 16px = token bf2eb21 */
	line-height: var(--lh-sm);           /* 18px */
	color: rgba(68, 25, 73, 0.6);        /* a041cf9 = #44194999 */
	margin-bottom: 0.9rem;               /* it is prod's text *widget* that ends flush on the card's content floor, and it measures 86.4 against the paragraph's 72 — the 14.4 hangs below the copy. Zeroing it made space-between push the copy 14px down. */
}
@media (max-width: 1024px) {
	.value-cards__grid { grid-template-columns: repeat(2, 49%); gap: 10px; }  /* 6ffab51 gap 10; cards are 49% each, so the pair leaves 10px unused rather than filling the track */
	.value-cards .section__lede { font-size: var(--fs-sm); }                  /* kit text 16px @<=1024 */
}
@media (max-width: 767px) {
	.value-cards { padding: 40px 10px; }                                       /* 1dd2e02 mobile 40/10/40/10 */
	.value-cards .section__title { width: auto; font-size: 32px; line-height: 34px; }
	.value-cards .section__lede { width: auto; }
	.value-cards__grid { margin-top: 54px; }   /* 759ef00 pad-bottom 20 + band gap 20 + the lede's own paragraph margin */
	.value-cards__text { line-height: var(--lh-body); }  /* prod card text lh grows 18->20 @767 */
	/* Mobile = first-open accordion (prod). fidelity's base .value-cards__card
	   (min-height 325) + __head (column) load after the component and clobbered its
	   @767 collapse, leaving 4 full-height cards (+900px). Restore the collapse here,
	   in the winning layer; the rest (grid gap, head padding, type) lives in the
	   component's own @767 block. */
	.value-cards__grid { grid-template-columns: 1fr; gap: 15px; }   /* stacked rows; the @1024 2-up above outranked the component's own rule */
	.value-cards__title { font-size: 16px; line-height: 24px; }     /* prod's accordion head type; the base 24/42 outranked the component too */
	.value-cards__card { min-height: 0; padding: 0; overflow: hidden; }
	.value-cards__head { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
	/* Prod swaps in an e-n-accordion here (dce13e5), so the open slides 400ms linear. */
	.value-cards__grid { interpolate-size: allow-keywords; }
	.value-cards__card::details-content {
		height: 0;
		min-height: 0;              /* the card is a column flex, so without this the slot's auto min-size pins it to content height and the height transition never moves */
		overflow: clip;
		transition: height 400ms linear, content-visibility 400ms linear allow-discrete;
	}
	.value-cards__card[open]::details-content { height: auto; }
}

/* ===== Roles: "Passionate about solving problems" (section d95acdf / row ade902b) =====
   Two ROUNDED TILES that must each read as a distinct card SURROUNDED BY WHITE:
     - image card  (7e0dffe) = .roles__media
     - "blue box with the text" (75e7864) = .roles__content
   White surround = a white frame around the whole row + a white channel between the
   two cards. .roles has no background, so the white <body> shows through the padding
   and the grid gap. Card radius = 10px (site card language: post-29 header + post-3693
   footer). NOTE: exact prod gap/padding px were not present in the provided CSS dumps
   (ade902b/7e0dffe/75e7864 per-element CSS is absent from post-29.css and every inline
   <style> block); 10px chosen to match the site's radius/padding rhythm. */

/* flex, not grid: this is the same shrink row as home working (see the shared block
   above). 1fr 1fr looked right only because the two paddings match above 1024; from
   there down the copy tile drops to 20px, and a grid track that sizes to content gave
   486/508 where prod gives 499/495. */
.roles__grid {
  display: flex;
  flex-direction: row;
  gap: 10px;             /* WHITE channel between the two rounded tiles (was 0 — cards flush) */
  align-items: stretch;
  max-width: none;       /* override .container: section is full-bleed */
  padding: 0;            /* override .container side padding; outer 10px frame lives on .roles */
}

/* 7e0dffe — image card (rounded tile; photo fills, Careers + heading overlaid bottom-left) */
.roles__media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* ref --justify-content: flex-end */
  padding: 24px;               /* ref --padding 24px */
}
.roles__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* image clipped to the 10px radius via overflow:hidden */
  z-index: 0;
}
.roles__media-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;     /* button + title left-aligned (8541fab align-self flex-start) */
  gap: 34px;                   /* 8541fab's own margin-bottom 24 plus 7e0dffe's 10px gap */
}

/* 8541fab — Careers lime pill */
.roles__media .btn--accent {
  padding: 8px 12px;
  border-radius: 56px;
  font-size: 14px;             /* ref accent typography */
  font-weight: 500;
  line-height: 16px;
}
.roles__media .btn--accent:hover {
  background: var(--purple);   /* ref secondary #441949 */
  color: var(--white);         /* ref primary #FFFFFF */
}

/* 67222e4 — h2 */
.roles__media .section__title {
  color: var(--white);
  width: 465px;
  max-width: 100%;
  font-size: var(--fs-h1);     /* 40px */
  line-height: var(--lh-h1);   /* 42px */
  margin: 0;
}

/* 75e7864 — "the blue box with the text": light-blue rounded card (was off-white #f3f3f3) */
.roles__content {
  background: var(--off-white);   /* #f3f3f3 — user: grey like the rest, not blue */
  border-radius: 10px;
  padding: 40px 24px;             /* ref --padding 40px 24px */
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center;        /* ref --justify-content: center */
  align-items: center;            /* prod centers a 700px accordion column, not full-width */
}

/* ===== Roles accordion — Elementor nested-accordion ba37581 (desktop) + 082a2d3 (mobile), unified =====
   Ref post-10.css (page 10). Closed head bg WHITE (#FFFFFF), text #000, radius 8px, on the off-white
   card. OPEN head + body are ONE continuous gradient block:
   linear-gradient(104deg,#5755C6 15%,#977AC3 88%) == var(--indigo)->var(--lavender-2), light text
   (#F6F6F699). Body: radius 0/0/10/10, padding 30px, margin-top:-10px seams it up under the head.
   Items 15px apart; icon 28px at right (icon-gap 10px):
     CLOSED = plus-in-a-circle SVG (small black plus in a #261414/20% ring, e-closed);
     OPEN   = wide row of #F6F6F6 plus signs (e-opened) — the "pluses pattern".
   Icons are inline SVGs in production; embedded here as data URIs on the existing .accordion__plus
   span, so NO PHP/markup change is needed. Shown at all widths (ref keeps a mobile accordion). */
/* Open/close animation (prod parity). ::details-content + interpolate-size slide
   the body height 0<->auto; the native `name` attr already handles one-open-at-a-time.
   Prod's n_accordion_animation_duration, sampled linear: the desktop widgets
   (15407aa cards, ba37581 roles) run 200ms and the ≤1024 copies they swap in
   (d8cd52e, 082a2d3) 400ms; faq's single widget d1df9c2 is 400ms everywhere. */
[data-accordion] { interpolate-size: allow-keywords; --acc-dur: 200ms; }
.accordion--faq { --acc-dur: 400ms; }
[data-accordion] .accordion__item::details-content {
  height: 0;
  overflow: clip;
  transition: height var(--acc-dur) linear, content-visibility var(--acc-dur) linear allow-discrete;
}
[data-accordion] .accordion__item[open]::details-content { height: auto; }
@media only screen and (max-width: 1024px) {
  [data-accordion] { --acc-dur: 400ms; }
}

.accordion--roles { width: 100%; max-width: 700px; }   /* prod accordion is a 700px column, centered by .roles__content */
.accordion--roles .accordion__item {
  background: transparent;
  border: none;
  border-radius: 10px;                /* ref --n-accordion-border-radius:10px (post-10 override) */
  overflow: hidden;
  margin-bottom: 15px;                /* ref --n-accordion-item-title-space-between 15px */
}
.accordion--roles .accordion__item:last-child { margin-bottom: 0; }
.accordion--roles .accordion__item[open] { border-radius: 10px; }   /* ref open block radius 10px */

.accordion--roles .accordion__head {
  display: flex;
  flex-direction: row-reverse;        /* DOM plus is first -> renders at the right (icon-order initial) */
  align-items: center;
  gap: 10px;                          /* ref --n-accordion-icon-gap column 10px */
  padding: 28px;                      /* ref --n-accordion-padding 28px */
  font-size: 1rem;                    /* ref --n-accordion-title-font-size 1rem */
  color: var(--dark);                 /* ref title-normal-color #000 */
  background: var(--white);           /* ref item-title bg = primary #FFFFFF */
}
.accordion--roles .accordion__title { flex-grow: 1; }               /* ref title flex-grow 1 -> icon far right */
.accordion--roles .accordion__item[open] .accordion__head {
  background-color: transparent;
  background-image: linear-gradient(104deg, var(--indigo) 15%, var(--lavender-2) 88%);
  color: var(--white);                /* ref title-active-color = primary #FFFFFF */
}

/* Icon: CLOSED = plus-in-circle (28x28); OPEN = wide pluses row. Replace the generic 2-bar plus. */
.accordion--roles .accordion__plus {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%20fill='none'%3E%3Crect%20x='0.5'%20y='0.5'%20width='27'%20height='27'%20rx='13.5'%20stroke='%23261414'%20stroke-opacity='0.2'/%3E%3Cpath%20d='M13.5%2013.5V10.5H14.5V13.5H17.5V14.5H14.5V17.5H13.5V14.5H10.5V13.5H13.5Z'%20fill='black'/%3E%3C/svg%3E") center / 28px 28px no-repeat;
}
.accordion--roles .accordion__plus::before,
.accordion--roles .accordion__plus::after { content: none; }        /* kill the generic bar-plus */
.accordion--roles .accordion__item[open] .accordion__plus {
  flex: 0 0 auto;
  width: 364px;
  max-width: 60%;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='364'%20height='14'%20viewBox='0%200%20364%2014'%20fill='none'%3E%3Cpath%20d='M358.666%205.12926H364V8.54878H358.666V13.678H355.11V8.54878H349.783V5.12926H355.11V0H358.666V5.12926Z'%20fill='%23F6F6F6'/%3E%3Cpath%20d='M329.128%205.20725H334.218V8.47079H329.128V13.3661H325.734V8.47079H320.65V5.20725H325.734V0.31193H329.128V5.20725Z'%20fill='%23F6F6F6'/%3E%3Cpath%20d='M299.59%205.28524H304.437V8.39279H299.59V13.0541H296.358V8.39279H291.517V5.28524H296.358V0.629903H299.59V5.28524Z'%20fill='%23F6F6F6'/%3E%3Cpath%20d='M270.051%205.36323H274.655V8.3148H270.051V12.7422H266.982V8.3148H262.384V5.36323H266.982V0.94187H270.051V5.36323Z'%20fill='%23F6F6F6'/%3E%3Cpath%20d='M240.513%205.44123H244.867V8.23681H240.513V12.4302H237.606V8.23681H233.252V5.44123H237.606V1.2538H240.513V5.44123Z'%20fill='%23F6F6F6'/%3E%3Cpath%20d='M210.975%205.51922H215.086V8.15882H210.975V12.1123H208.23V8.15882H204.119V5.51922H208.23V1.56577H210.975V5.51922Z'%20fill='%23F6F6F6'/%3E%3Cpath%20d='M181.436%205.60318H185.304V8.08083H181.436V11.8003H178.854V8.08083H174.986V5.60318H178.854V1.87773H181.436V5.60318Z'%20fill='%23F6F6F6'/%3E%3Cpath%20d='M151.898%205.68117H155.523V8.00284H151.898V11.4883H149.478V8.00284H145.853V5.68117H149.478V2.18966H151.898V5.68117Z'%20fill='%23F6F6F6'/%3E%3Cpath%20d='M122.354%205.75916H125.735V7.92484H122.354V11.1764H120.102V7.92484H116.72V5.75916H120.102V2.50764H122.354V5.75916Z'%20fill='%23F6F6F6'/%3E%3Cpath%20d='M92.8152%205.83715H95.9531V7.84685H92.8152V10.8644H90.7254V7.84685H87.5876V5.83715H90.7254V2.8196H92.8152V5.83715Z'%20fill='%23F6F6F6'/%3E%3Cpath%20d='M63.2769%205.91514H66.1715V7.7689H63.2769V10.5525H61.3493V7.7689H58.4547V5.91514H61.3493V3.13153H63.2769V5.91514Z'%20fill='%23F6F6F6'/%3E%3Cpath%20d='M33.7386%205.99314H36.3899V7.6909H33.7386V10.2345H31.9732V7.6909H29.3282V5.99314H31.9732V3.4435H33.7386V5.99314Z'%20fill='%23F6F6F6'/%3E%3Cpath%20d='M4.20032%206.07113H6.60205V7.61291H4.20032V9.92257H2.59708V7.61291H0.195312V6.07113H2.59708V3.75547H4.20032V6.07113Z'%20fill='%23F6F6F6'/%3E%3Cpath%20d='M358.666%205.12926H355.11V8.54878H358.666V5.12926Z'%20fill='%23F6F6F6'/%3E%3C/svg%3E") right center / 364px 28px no-repeat;
}

.accordion--roles .accordion__body {
  padding: 30px;                      /* ref content padding 30px */
  margin: 0;
  max-width: none;                    /* override base .accordion__body max-width:60ch */
  color: rgba(246, 246, 246, 0.6);    /* ref content text #F6F6F699 (light; no kit token) */
  font-size: var(--fs-body);          /* ref text typography 18px */
  line-height: var(--lh-body);        /* ref 20px */
  border-radius: 0 0 10px 10px;       /* ref content radius 0/0/10/10 */
  background-color: transparent;
  background-image: linear-gradient(104deg, var(--indigo) 15%, var(--lavender-2) 88%); /* SAME gradient as open head */
}
.accordion--roles .accordion__item[open] .accordion__body { margin-top: -10px; }  /* ref -10px seam */
.accordion--roles .accordion__body p:first-child { margin-top: 0; }
.accordion--roles .accordion__body p:last-child  { margin-bottom: 0; }

/* ===== Breakpoints (reference: 1024 = tablet, 767 = mobile) ===== */
@media (max-width: 1024px) {
  /* 75e7864 @1024: padding 20px all. Accordion STAYS visible (ref shows mobile accordion 082a2d3). */
  .roles__content { padding: 20px; }
  /* the reference sets --n-accordion-padding:20px here, but prod still renders 28 all the
     way to 767, so the row keeps its desktop padding through tablet. */
  .roles__media .btn--accent { font-size: 16px; }                 /* ref accent 16px at tablet */
  .accordion--roles .accordion__body { font-size: var(--fs-sm); line-height: var(--lh-body); } /* ref text 16px, lh stays 20 @1024 */
}

@media (max-width: 767px) {
  /* ade902b wraps (flex-wrap-mobile) => single column at 767. */
  .roles__grid { flex-direction: column; }
  /* 7e0dffe @767: min-height 55vh, gap 0, padding 10px 10px 15px. */
  .roles__media { min-height: 55vh; padding: 10px 10px 15px; }
  .roles__media-inner { gap: 14px; }                              /* ref 8541fab margin-bottom 14px */
  .roles__media .section__title { font-size: 32px; line-height: 34px; } /* primary @767 */
  /* 75e7864 @767: min-height 58vh, padding 20px 12px. */
  .roles__content { min-height: 58vh; padding: 20px 12px; }
  .roles__media .btn--accent { font-size: 16px; }                 /* ref accent 16px at mobile */
  .accordion--roles { max-width: none; }                          /* stacked, prod's accordion fills the 12px-padded column (723 at 767) */
  .accordion--roles .accordion__head { padding: 20px; }           /* ref 082a2d3 --n-accordion-padding 20px @767 */
  .accordion--roles .accordion__body { padding: 20px; }           /* ref mobile body padding 20px @767 */
}

/* ===== Roles carousel (Explore Our Roles) — ported from prod loop template 843 =====
   Replaces the block currently at fidelity.css lines 337-375.
   NOTE: production containers 29cfb0f/e4660ef have no CSS in the captured post-29.css
   (header/nav only), so the section box background below is inferred (low-confidence).
   Card/image/meta/Apply/arrow values are verified from the loop-843 inline <style>. */
.roles-carousel {
	max-width: none;                      /* full-bleed like other home cards; global section margin owns the 10px inset */
	background: var(--off-white);         /* 29cfb0f bg inferred; set transparent if prod container is transparent */
	border-radius: 10px;
	padding: 80px 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.roles-carousel .section__title {
	color: var(--purple);
	font-size: var(--fs-h1);              /* 40px */
	line-height: var(--lh-h1);            /* 42px */
	margin-bottom: 0;
}
.roles-carousel .section__lede {
	max-width: 520px;
	color: rgba(68, 25, 73, 0.6);         /* muted purple #44194999 — was #000 (read too black) */
	font-size: var(--fs-body);            /* 18px */
	line-height: var(--lh-body);          /* 20px */
	/* paragraph gap from the shared p rule; prod's lede widget is 54px, not 40 */
}

/* Prod stacks title and lede full-width and overlays the swiper buttons on the
   top-right, so the head is a column and the arrows come out of the flow.
   (user: arrows above the images, not on them). */
.roles-carousel__head {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.roles-carousel__intro { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.roles-carousel__arrows {
	position: absolute;
	inset: auto 0 0 auto;                 /* bottom-right of the head, like prod's overlay */
	display: flex;
	gap: 10px;
}

/* viewport wraps the scroll track */
.roles-carousel__viewport {
	margin-top: 40px;
}

/* 4-up carousel row (prod slides_to_show:4, 15px image spacing) */
.roles-carousel__track {
	display: flex;
	gap: 15px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 0;
	margin: 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;                /* hide scrollbar; arrows drive scroll */
}
.roles-carousel__track::-webkit-scrollbar { display: none; }

/* ---- Job card: cover image on top, meta row below (prod 53726fc6) ---- */
/* the 4-up sizing belongs to the carousel: in the careers grid the card is a
   column flex item, so a flex-basis there caps its HEIGHT and the image spills */
.roles-carousel__track > .job-card { flex: 0 0 calc((100% - 45px) / 4); }   /* 4 cards, 3 x 15px gaps */
/* 1023, not 1024: prod's swiper takes its desktop slide count from min-width 1024 while
   the CSS breakpoint is max-width 1024, so at exactly 1024 it is still showing four. */
@media (max-width: 1023px) {
	.roles-carousel__track > .job-card { flex-basis: calc((100% - 15px) / 2); }   /* prod slides_to_show_tablet:2 */
}
.job-card {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 24px;                            /* prod --gap:24px */
	min-height: 455px;                    /* prod --min-height:455px */
	border-radius: 10px;                  /* prod --border-radius:10px */
	background: transparent;              /* prod ::before #F5F50000 */
	padding: 0;                           /* prod --padding:0 */
	box-shadow: none;
	transition: none;
	text-decoration: none;
}
.job-card:hover { transform: none; box-shadow: none; }

/* image (prod 170e8c76 img) */
.job-card__media { width: 100%; }
.job-card__media img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 400px;                        /* prod */
	object-fit: cover;
	object-position: center center;
	border-radius: 10px;
}

/* meta row (prod 42722aca): location+title left, Apply right, bottom-aligned */
.job-card__meta {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	gap: 5px;
	height: 60px;                         /* prod custom height:60px — a floor is not enough: from 1024 down the
	                                         title wraps to two lines and prod lets it overflow upward rather than
	                                         grow the card, which is what kept its slides at 484 */
	padding: 0 5px;                       /* prod --padding-left/right:5px */
	position: relative;
	z-index: 99;                          /* prod --z-index:99 */
}
/* left column (prod b408be9) */
.job-card__info {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 5px;
	flex: 0 0 75%;                        /* b408be9 547 of the 730 meta box */
	min-width: 0;
}
/* location (prod 593508b) */
.job-card__location {
	font-size: 14px;
	line-height: 16px;
	font-weight: 400;
	color: rgba(68, 25, 73, 0.6);         /* prod var(--e-global-color-6261f15) = #44194999 */
}
/* title (prod 193b680b — TEXT typography, not the 40px primary) */
.job-card__title {
	font-size: 18px;                      /* prod title 18/20 — pinned (not --fs-body, now 16px body copy) */
	line-height: 20px;
	font-weight: 400;
	color: var(--purple);                 /* #441949 */
	margin: 0;
}
/* right column (prod 1cd062e1) */
.job-card__apply-wrap {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	flex: 0 0 25%;                        /* 1cd062e1 182 of the 730 meta box */
}
/* Apply pill (prod 6b35be1d) */
.job-card__apply {
	display: inline-flex;
	align-items: center;
	background: var(--lavender);          /* #8A8BFF */
	color: var(--white);                  /* #FFFFFF */
	padding: 7px 12px;
	border-radius: 50px;
	font-size: var(--fs-xs);              /* accent typography: 14, and 16 from 1024 down, which takes the pill 61 -> 66 */
	line-height: var(--lh-xs);
	font-weight: 500;
	white-space: nowrap;
	transition: background-color .25s, color .25s;
}
.job-card:hover .job-card__apply {
	background: var(--lime);              /* #D6FA00 */
	color: var(--purple);                 /* #441949 */
}

/* ---- Prev / Next arrows (prod .elementor-swiper-button, arrows-position-inside) ---- */
.roles-carousel__arrow {
	width: 40px;
	height: 41px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent;              /* SVG draws the outlined circle */
	cursor: pointer;
}
.roles-carousel__arrow svg { width: 40px; height: 41px; display: block; }
.roles-carousel__arrow:disabled { opacity: .4; cursor: default; }

@media (max-width: 1024px) {
	.roles-carousel .section__lede { font-size: var(--fs-sm); }
	.job-card__title { font-size: var(--fs-sm); line-height: var(--lh-sm); } /* text 16px @<=1024 */
	.job-card__location { font-size: 16px; }             /* prod 593508b @<=1024 */
}

@media (max-width: 767px) {
	.roles-carousel { padding: 40px 10px; }
	.roles-carousel .section__title { font-size: 32px; line-height: 34px; }
	.roles-carousel__viewport { margin-top: 60px; }
	.roles-carousel__track > .job-card { flex-basis: 100%; }
	.job-card { min-height: 365px; justify-content: flex-start; } /* prod mobile 1-up + --min-height:365px */
	.job-card__title { font-size: 16px; line-height: 20px; } /* prod mobile job title is 16px (not 18) */
	.job-card__media img { height: 250px; }              /* prod @767 */
	.job-card__meta { flex-direction: column; align-items: flex-start; gap: 15px; height: auto; } /* prod @767: Apply stacks below title (--gap:15px), so the 60px clamp is off */
	/* stacked: the 75/25 row split would become a HEIGHT split here */
	.job-card__info { flex: 0 0 auto; width: 100%; }
	.job-card__apply-wrap { flex: 0 0 auto; }
}

/* ============ Working at Da Vinci ============ */
/* Section wrapper = ref d95acdf: near-white (#FDFDFD) bg + 10px frame padding.
   This is the WHITE FRAME the two rounded cards sit inside. */
.working {
	background: transparent;                  /* canvas is already near-white; the global section margin is the 10px frame */
	padding: 0;                               /* inner cards get 10px inset from global margin + 10px grid gap (matches .roles) */
	display: flex;                            /* stack the text/image row above the globe... */
	flex-direction: column;
	gap: 10px;                                /* ...with the same 10px card gutter between them (the globe was flush before) */
}
/* Row = ref 21f6fad: default 10px e-con gap → thin white gutter between the
   light-blue card and the image card (matches the 10px outer frame). */
.working__grid {
	display: flex;                            /* was grid 1fr 1fr — prod isn't 50/50 on wide screens */
	gap: 10px;                                /* 21f6fad default gap (kit --widgets-spacing:10px) */
	align-items: stretch;
}
.working__media { position: relative; overflow: hidden; min-height: 530px; }  /* prod card = 530px */
/* Image card = ref db6fc14: prod carries the photo as the panel's own background, so
   it fills the panel edge to edge. Our <img> must do the same — a 10px inset left a
   white frame and a photo 20px smaller than prod's on a 4K screen. */
.working__media img {
	position: absolute;                       /* out of flow so the photo never dictates the row height (fixes the box ballooning tall on wide screens) */
	inset: 0;
	width: 100%;                              /* replaced elements need explicit size — insets alone keep intrinsic dims */
	height: 100%;
	border-radius: 10px;                      /* db6fc14 --border-radius:10px */
	object-fit: cover;
	object-position: center center;
}
/* Text card = ref 468b944: light-blue, radius 10px, min-height 530px,
   padding 40/30/40/40; heading group pinned top, body group pinned bottom. */
.working__content {
	background: var(--light-blue);            /* 468b944 #B1D6EF */
	border-radius: 10px;                      /* 468b944 --border-radius:10px */
	padding: 40px 30px 40px 40px;             /* T40 R30 B40 L40 */
	min-height: 530px;                        /* prod card = 530px, not 530 (was making the blue box gigantic + empty) */
	display: flex;
	flex-direction: column;
	justify-content: space-between;           /* 468b944 --justify-content:space-between */
	/* gap comes from the shared copy-panel rule; a 0 here read the same on desktop but
	   let the panel collapse 10px short once tablet took the slack out */
}
/* Heading group = ref ba79123 (--gap:0): title & subtitle sit TIGHT together.
   Fixes the excess space between "Working at Da Vinci" and the subtitle. */
.working__heading {
	display: flex;
	flex-direction: column;
	gap: 0;                                   /* ba79123 --gap:0px */
}
/* Body group = ref 5c8a720 (--gap:24px): paragraph + CTAs. */
.working__body {
	display: flex;
	flex-direction: column;
	gap: 24px;                                /* 5c8a720 --gap:24px */
}
.working__content .section__title {
	color: var(--dark);                       /* d30eab0 #000 */
	font-size: var(--fs-h1);                  /* primary 40px */
	line-height: var(--lh-h1);                /* primary 42px */
	font-weight: 400;
	margin: 0;                                /* kill site.css .section__title 1.5rem */
}
.working__subtitle {
	color: rgba(38, 20, 20, 0.6);             /* 34399f9 #26141499 */
	max-width: 455px;                         /* 34399f9 max-width:455px */
	font-size: var(--fs-h1);                  /* primary 40px */
	line-height: var(--lh-h1);                /* primary 42px */
	font-weight: 400;
	margin: 0;                                /* kill site.css .working__subtitle 1.5rem */
}
.working__content p {
	color: rgba(38, 20, 20, 0.6);             /* 8335be8 #26141499 */
	max-width: 545px;                         /* 8335be8 max-width:545px */
	font-size: var(--fs-body);                /* text 18px */
	line-height: var(--lh-body);              /* text 20px */
	font-weight: 400;
	/* paragraph gap from the shared p rule; prod's 8335be8 wrapper is 134px, not 120 */
}
.working__ctas {
	display: flex;
	flex-direction: row;                      /* e3109aa --flex-direction:row */
	gap: 10px;                                /* e3109aa has no explicit --gap → inherits kit --widgets-spacing:10px */
	margin: 0;
}
.working__ctas .btn {
	padding: 8px 12px;                        /* c07c725/67de488 padding */
	border-radius: 56px;                      /* --border-radius:56px */
	font-weight: 500;                         /* accent weight 500; size/height come from .btn so the shared outlined rule can win */
}
.working__ctas .btn--ghost-dark {
	border-color: var(--dark);                /* c07c725 1px solid #000 */
	color: var(--dark);
}
.working__ctas .btn--ghost-dark:hover,
.working__ctas .btn--ghost-dark:focus {
	background: rgba(68, 25, 73, 0.6);        /* #44194999 */
	color: var(--white);                      /* primary #FFFFFF */
}
.working__ctas .btn--white {
	background: var(--white);                 /* 67de488 primary */
	color: var(--dark);                       /* text */
}
.working__ctas .btn--white:hover,
.working__ctas .btn--white:focus {
	background: var(--lime);                  /* 045cdc7 #d6fa00 */
	color: var(--purple);                     /* secondary #441949 */
}

@media (max-width: 1024px) {
	.working__content { padding: 30px; }      /* 468b944 @1024 --padding:30px */
	.working__content p { font-size: var(--fs-sm); line-height: var(--lh-body); } /* text 16/20 */
}

@media (max-width: 767px) {
	/* 468b944 @767: min-height 50vh, padding 30px 15px, group gap 30px;
	   db6fc14 @767: min-height 50vh; primary type 32/34.
	   Row wraps to one column (21f6fad --flex-wrap-mobile:wrap). Frame padding stays. */
	.working__grid { flex-direction: column; }
	.working__content { flex: none; width: 100%; }  /* stack full-width; drop the desktop flex ratio */
	.working__media { display: none; }             /* prod hides db6fc14 at 767: the band is the text card only */
	.working__content {
		padding: 30px 15px;
		min-height: 50vh;
		gap: 30px;                            /* 468b944 @767 --gap:30px (heading<->body) */
	}
	.working__content .section__title,
	.working__subtitle {
		font-size: 32px;                      /* primary @767 */
		line-height: 34px;
	}
}

/* ===== Globe (Empowering Independent Thinking) ===== */
/* #map-container = ref 6aa211e: min-height 80vh, transparent, radius 10px,
   padding 80px 0; @1024 min-height 60vh padding 0.
   Override globe.css base via .globe#map-container (higher specificity than #map-container). */
.globe#map-container {
	min-height: 80vh;
	background: transparent;
	border-radius: 10px;
	padding: 80px 0;
}
@media (max-width: 1024px) {
	.globe#map-container {
		min-height: 60vh;
		padding: 0;
	}
}
@media (max-width: 767px) {
	/* globe.js already sizes the canvas to prod's 600px here; drop the 100vh
	   wrapper so the band is the globe, not the globe plus 300px of padding.
	   Connect keeps prod's 80vh band (the canvas sits at its top). */
	.globe#map-container { height: auto; min-height: 0; }
	.connect-map .globe#map-container { min-height: 80vh; align-items: flex-start !important; }   /* globe.css centres with !important; prod hangs the canvas from the top */
}

/* ===== Explore Da Vinci ===== */
.explore {
	background: var(--off-white);
	border-radius: 10px;
	padding: 80px 24px;
}
.explore .section__title {
	color: var(--purple);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	margin: 0;                          /* prod: eyebrow + subtitle are one tight block, no gap between them */
}
.explore__subtitle {
	color: rgba(68, 25, 73, 0.6);
	font-size: var(--fs-h1);            /* match the title (prod: both are equal-size <h2>) — user: larger */
	line-height: var(--lh-h1);          /* prod lh42 = fs; 1.2 gave lh48 → 14px gap to the eyebrow */
	font-weight: 400;
	margin: 0 0 44px;                   /* a50092c's inner carries margin-top:44px */
}
.explore .container {
	display: grid;
	grid-template-columns: 3fr 2fr;   /* 60/40 of what is left after the gap, like prod's flex row */
	column-gap: 20px;
	row-gap: 0;                        /* prod: eyebrow/subtitle/grid rows tight; subtitle's own mb spaces the grid */
	align-items: start;
	max-width: none;
	padding: 0;
}
.explore .container > h2,
.explore .container > h3 { grid-column: 1 / -1; }

/* grids */
.explore .explore__grid { margin-top: 0; }
.explore .explore__grid--featured { display: block; }
.explore .explore__grid--events {
	display: flex;
	flex-direction: column;
	gap: 10px;                         /* loop-grid row_gap: 10px */
}

/* neutralise the generic vertical-card styling coming from site.css */
.explore .explore-card {
	text-decoration: none;
	color: inherit;
}
.explore .explore-card:hover { transform: none; }
.explore .explore-card__title { margin: 0; padding: 0; }

/* ---- Featured hero card (loop-135) ---- */
.explore .explore-card--featured {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 455px;
	padding: 25px;
	border-radius: 10px;
	overflow: hidden;
	background-color: var(--purple);   /* fallback if no thumbnail */
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	/* background-image (gradient overlay + post image) is set inline per-post in PHP */
}
.explore .explore-card--featured .explore-card__row {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 10px;
	width: 100%;
	max-width: 1330px;                  /* ccb57c8's boxed inner, centred in the card */
	margin-inline: auto;
}
.explore .explore-card--featured .explore-card__meta {
	flex: 0 0 calc(50% - 5px);          /* 46a154c and 3a407ad are equal halves of the 1330 inner */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
}
.explore .explore-card--featured .explore-card__date {
	align-self: flex-start;
	font-family: var(--font);
	font-size: 16px;
	line-height: 16px;
	font-weight: 400;
	color: rgba(246, 246, 246, 0.6);   /* #F6F6F699 */
}
.explore .explore-card--featured .explore-card__title {
	font-family: var(--font);
	font-size: var(--fs-body);          /* 18px */
	line-height: var(--lh-body);        /* 20px */
	font-weight: 400;
	color: var(--white);
}
.explore .explore-card--featured .explore-card__more {
	flex: 0 0 auto;
	align-self: flex-end;
	margin-left: auto;                  /* right edge of its own half, like 3e12a0c */
	padding: 7px 12px;
	border-radius: 40px;
	background: var(--white);           /* #FDFDFD */
	color: var(--dark);
	font-family: var(--font);
	font-size: 14px;
	line-height: 16px;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color 0.2s;
}
.explore .explore-card--featured:hover .explore-card__more { background: var(--lime); } /* #D6FA00 */

/* ---- Event list cards (loop-117) ---- */
.explore .explore-card--event {
	display: flex;
	flex-direction: row;
	gap: 20px;
	padding: 0;
	background: none;
	border-radius: 0;
	overflow: visible;
}
.explore .explore-card--event .explore-card__thumb {
	flex: 0 0 calc(50% - 15px);         /* prod: half the row minus the gap and the body's 10px pad */
	display: flex;
}
.explore .explore-card--event .explore-card__thumb img {
	width: 100%;
	max-width: 100%;
	height: 140px;
	aspect-ratio: auto;                 /* cancels site.css 16/10 */
	object-fit: cover;
	object-position: center center;
	border-radius: 10px;
}
.explore .explore-card--event .explore-card__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	padding: 10px;                      /* 26ee684 padding:10px */
}
.explore .explore-card--event .explore-card__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.explore .explore-card--event .explore-card__date {
	display: none;                      /* prod's home event cards are title + Read more only */
}
.explore .explore-card--event .explore-card__title {
	font-family: var(--font);
	font-size: var(--fs-body);          /* 18px */
	line-height: var(--lh-body);        /* 20px */
	font-weight: 400;
	color: var(--purple);               /* secondary #441949 */
}
.explore .explore-card--event .explore-card__more {
	align-self: flex-start;
	padding: 7px 12px;
	border: 1px solid rgba(38, 20, 20, 0.2);  /* #26141433 */
	border-radius: 40px;
	background: transparent;
	color: var(--dark);
	font-family: var(--font);
	font-size: 14px;
	line-height: 16px;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color 0.2s;
}
.explore .explore-card--event .explore-card__more:hover { background: var(--white); } /* #FDFDFD */

/* ---- Tablet (<=1024px) ---- */
@media (max-width: 1024px) {
	.explore .container {
		/* fr, not %: 55% + 45% + a 10px gap overflows the container by the gap, which pushed
		   the whole column 10 wide (520 -> 526 at 1024). prod splits what is left. */
		grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
		column-gap: 10px;
	}
	.explore .explore-card--event { gap: 10px; }
	.explore .explore-card--event .explore-card__date { font-size: 16px; line-height: 1; }
}
@media (max-width: 1024px) and (min-width: 768px) {
	.explore .explore-card--event .explore-card__thumb { flex: 0 0 120px; }
}

/* ---- Mobile (<=767px) ---- */
@media (max-width: 767px) {
	.explore {
		padding: 40px 10px;
	}
	.explore .section__title {
		font-size: 32px;
		line-height: 34px;
	}
	.explore .container {
		grid-template-columns: 1fr;
	}
	.explore__subtitle { margin-bottom: 0; }   /* a50092c drops its 44px top margin when stacked */
	.explore .explore__grid--events {
		gap: 20px;                 /* prod cards sit 140 apart; its column is 10 taller than the sum */
		margin-top: 20px;          /* a50092c's 10px gap plus 09cd8c0's own 10px inner margin */
	}
	/* d77e9a8's 394 is 4e42989's 44px lead-in plus a 350px card, not a 394px card. */
	.explore .explore__grid--featured { padding-top: 44px; }
	.explore .explore-card--featured { min-height: 350px; }
	.explore .explore-card--featured .explore-card__date { font-size: 14px; line-height: 1; }
	.explore .explore-card--featured .explore-card__row {   /* prod stacks Read more UNDER the title on mobile; desktop keeps it inline-right */
		flex-direction: column;
		align-items: flex-start;
		max-width: none;
	}
	.explore .explore-card--featured .explore-card__meta { flex: 0 0 auto; width: 100%; }
	.explore .explore-card--featured .explore-card__more { align-self: flex-start; margin-left: 0; }
	.explore .explore-card--event {
		gap: 10px;
	}
	.explore .explore-card--event .explore-card__thumb { flex: 0 0 35%; }   /* prod scales with the card: 254 at 767, 123 at 390 */
	.explore .explore-card--event .explore-card__thumb img { height: 120px; }
	.explore .explore-card--event .explore-card__body { padding: 0; }
	.explore .explore-card--event .explore-card__date { font-size: 14px; line-height: 1; }
}

/* ============================================================
   Footer — production Elementor footer (post-3693) rebuilt.
   Full-bleed dark background-image card (10px radius) with a
   30/70 two-column layout.
   ** REPLACES the two earlier footer blocks in this file
      (approx L554-622 white bar, and L2912-2948 purple band)
      and supersedes .site-footer* in site.css (L230-234). **
   Kit colours: primary #FFFFFF=var(--white); accent #8A8BFF=
   var(--lavender); 311f85b #F3F3F3=var(--off-white). Literals:
   #FDFDFD (4a4a5f2), rgba(246,246,246,.2) (c8d1c38 #F6F6F633),
   rgba(246,246,246,.6) (c4bc613 #F6F6F699). Newsletter uses
   rgba(253,253,253,..) exactly as the production HTML widget.
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 999;                                   /* outer --z-index:999 */
  display: flex;
  flex-direction: column;
  padding: 10px;                                  /* 10px gutter all sides (prod card sits at x=10 y=10) */
  overflow: hidden;                               /* custom CSS on 69739177 */
  background: var(--white);                        /* outer bg = primary #FFFFFF */
  color: #FDFDFD;                                  /* default light text */
  font-family: var(--font);
}

/* Dark card (6b3590c) — background image + fallback live here. */
.site-footer__card {
  display: flex;
  flex-wrap: nowrap;   /* the 30/70 basis overflows by the gap and must shrink like prod, not wrap */
  gap: 40px 10px;                                  /* prod nests the 100px on a single-child wrapper, so the real inter-column gap is 10px; using 100px shoved the 30/70 split off by ~53px */
  padding: 24px;                                   /* prod: 24px on the card, then 10px on each column block */
  border-radius: 10px;                             /* custom CSS + --border-radius */
  background-color: var(--purple);                 /* legibility fallback if webp is slow */
  background-image: url("../img/footer/footer-bg-desktop.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.site-footer__cols { display: contents; }          /* pass-through wrapper (6cac459) */

/* 30 / 70 main columns (2c764c56 / 43454821). */
.site-footer__col--brand {
  flex: 0 1 30%; min-width: 0;                        /* percentage basis, not 0: with border-box a 0 basis floors at the padding and skews the split */
  padding-inline: 10px;                               /* prod's column blocks are 10px-padded inside the 24px card */
  display: flex; flex-direction: column; gap: 0;
  justify-content: flex-start;                        /* prod stacks logo -> heading -> newsletter from the top */
}
.site-footer__col--brand .site-footer__logo { margin-top: 14px; }             /* prod logo top ~48 */
.site-footer__col--brand .site-footer__heading { margin: 52px 0 8px; }        /* mobile-only heading (desktop hidden): logo->heading 52 */
.site-footer__col--brand .dv-foot-nl { margin-top: 102px; }                   /* prod newsletter sits ~102 below the logo (label y=168, input 228, personalise 320) */
.site-footer__col--main {
  flex: 0 1 70%; min-width: 0;
  padding-inline: 10px;
  display: flex; flex-direction: column;
  justify-content: flex-start;                        /* heading at top; copyright row follows the nav row's margin */
}

/* Logo (367a1266) — plain image, top-left. */
.site-footer__logo { display: block; align-self: flex-start; width: 136px; height: 18px; }

/* Heading (57413779 / fbb6b8b) — primary typography, colour 4a4a5f2. */
.site-footer__heading {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  font-weight: 400;
  color: #FDFDFD;
}
.site-footer__heading--mobile  { display: none; }   /* brand-column heading only shows when stacked (mobile) */
.site-footer__heading--desktop { display: block; margin-top: 10px; }  /* prod heading at TOP of MAIN column, y=44 (logo brand col y=48) */

/* Personalise link (9726fcd) — 14/14 w500, prod renders pure #fff, hover accent. */
.site-footer__personalise {
  margin: 50px 0 0; align-self: flex-start;   /* prod's brand column runs a 50px widget gap at every width */
  font-family: var(--font); font-size: 14px; line-height: 14px; font-weight: 500;
  color: var(--white);
}
.site-footer__personalise a { color: inherit; text-decoration: none; }
.site-footer__personalise a span { text-decoration: underline; }
.site-footer__personalise a:hover,
.site-footer__personalise a:focus { color: var(--lavender); }

/* Links + contact row (454687ec) — top/bottom hairlines. */
.site-footer__row {
  display: flex;
  column-gap: 10px;                                 /* prod splits navs/contact 30/70 either side of a 10px gap */
  margin: 40px 0;                                   /* prod: 10px column gap + the group's own 30 */
  padding: 30px 0 50px;
  border-top: 1px solid rgba(246, 246, 246, 0.2);   /* c8d1c38 #F6F6F633 */
  border-bottom: 1px solid rgba(246, 246, 246, 0.2);
}
.site-footer__navs {                                 /* 19c563d0 — 30% */
  flex: 3 1 0; min-width: 0;
  display: flex; gap: 50px;                          /* --column-gap:50px */
}
.site-footer__contact {                              /* 5aafb8fd — 70% */
  flex: 7 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 20px;  /* prod row pitch ~34px (14px row + 20 gap); the sourced 6px read too tight */
}

/* Footer nav lists (2d2a1529 / 40d963bf) — 14/14 w500, colour 4a4a5f2. */
.site-footer__menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;   /* li margin-bottom 8px */
  min-width: 0;                                      /* both lists give up width in proportion when the 30% column tightens, as prod's do */
}
.site-footer__menu a {
  display: block;                                    /* li height = 14 so gap gives prod's 22px row pitch */
  font-family: var(--font); font-size: 14px; line-height: 14px; font-weight: 500;
  color: #FDFDFD; text-decoration: none;
}
.site-footer__menu a:hover,
.site-footer__menu a:focus { color: var(--lavender); }  /* accent */

/* Contact rows (166464 etc.) — 120px label + value. */
.site-footer__contact-row { display: flex; gap: 10px; }   /* prod: 120px label, 10px gutter, then the value */
.site-footer__contact-label {
  flex: 0 0 120px; max-width: 120px;
  font-family: var(--font); font-size: 14px; line-height: 14px; font-weight: 500;
  color: rgba(246, 246, 246, 0.6);                   /* c4bc613 #F6F6F699 */
}
.site-footer__contact-val {
  min-width: 0;
  font-family: var(--font); font-size: 14px; line-height: 14px; font-weight: 500;
  color: var(--white);                               /* value = primary #FFFFFF */
}
.site-footer__contact-val a { color: inherit; text-decoration: none; }
.site-footer__contact-val a:hover,
.site-footer__contact-val a:focus { color: var(--lavender); }

/* Bottom row (a1082e8) — copyright 30% + privacy 70%. */
.site-footer__bottom { display: flex; margin-bottom: 10px; }   /* natural position, like prod: the nav row's 40px bottom margin sets it */
.site-footer__copy {                                 /* 6468d0f0 */
  flex: 3 1 0; align-self: center;
  font-family: var(--font); font-size: 14px; line-height: 14px; font-weight: 500;
  color: rgba(246, 246, 246, 0.6);
}
.site-footer__privacy { flex: 7 1 0; min-width: 0; }
.site-footer__privacy .site-footer__menu { flex-direction: row; gap: 25px; justify-content: flex-end; }  /* privacy link to the right (#9) */

/* Mobile-only decorative pluses (5c3d46a7). */
.site-footer__pluses { display: none; }
/* Newsletter page replaces the brand-column subscribe form with the plus-matrix (prod). */
.site-footer--bd .site-footer__navs { gap: 40px; }   /* prod's business-development footer runs a tighter nav gutter */
.site-footer__pluses--brand { display: block; width: 100%; max-width: 300px; height: 300px; margin: 52px 0 10px; }  /* prod: 50 under the logo widget, 10 col padding below */
@media (max-width: 1024px) {
	/* prod halves the cap but keeps the 300 height, so the matrix stretches rather than
	   shrinking with the column (auto height gave a 264 square). */
	.site-footer__pluses--brand { max-width: 150px; }
}

/* ---- Newsletter widget (58a26b6) — exact production styles ---- */
.dv-foot-nl {
  display: flex; flex-direction: column; width: 100%;
  box-sizing: border-box;
  font-family: var(--font);
  color: #FDFDFD;
}
.dv-foot-nl *, .dv-foot-nl *::before, .dv-foot-nl *::after { box-sizing: inherit; }
.dv-foot-nl__label {
  font-size: 25px; line-height: 1.25; letter-spacing: -0.01em; padding: 0 0 24px;
}
.dv-foot-nl__form {
  display: flex; align-items: center; gap: 6px;
  width: 100%; max-width: 320px;
  padding: 4px 4px 4px 6px;
  background: rgba(253, 253, 253, 0.06);
  border: 1px solid rgba(253, 253, 253, 0.18);
  border-radius: 999px;
  transition: border-color 0.2s, background 0.2s;
}
.dv-foot-nl__form:focus-within {
  border-color: var(--lavender);
  background: rgba(253, 253, 253, 0.1);
}
.dv-foot-nl__input {
  flex: 1; min-width: 0; padding: 8px 16px;   /* prod's pill is 47 tall, not 51 */
  font: inherit; font-size: 14px; color: inherit;
  background: transparent !important;
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
  -webkit-appearance: none; appearance: none;
}
.dv-foot-nl__input::placeholder { color: rgba(253, 253, 253, 0.45); }
.dv-foot-nl__btn {
  flex-shrink: 0; width: 36px; height: 36px;
  border: 0; border-radius: 999px;
  background: #FDFDFD; color: var(--purple);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; line-height: 1; padding: 0;
  transition: background 0.2s, color 0.2s;
}
.dv-foot-nl__btn:hover { background: var(--lime); color: #000; }
.dv-foot-nl__btn > span { display: block; transform: translateY(-1px); }

/* ---- Responsive (mirrors post-3693 @1024 / @768 / @767) ---- */
@media (max-width: 1024px) {
  .site-footer__row { flex-wrap: wrap; row-gap: 30px; }   /* 454687ec --gap:30px 0 */
  /* wrapped, the contact block ends the row, so prod's last paragraph margin
     is what sets the distance to the bottom hairline */
  .site-footer__contact { padding-block-end: 0.9rem; }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .site-footer__navs    { flex: 0 1 30%; }                /* 19c563d0 keeps its 30%, so the lists wrap like prod's */
  .site-footer__contact { flex: 0 0 100%; }               /* 5aafb8fd --width:100% */
  .site-footer__copy    { flex: 1 1 50%; }                /* 77dcca5 --width:50% */
  .site-footer__privacy { flex: 1 1 50%; }                /* 7fdf3271 --width:50% */
}
@media (max-width: 767px) {
  .site-footer {                                          /* image moves to outer */
    background-image: url("../img/footer/footer-bg-mobile.webp");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;                                /* landscape 2560x1540 must fill the tall mobile footer, not scale to 100%-width (~235px) and leave content white-on-white below */
    background-color: var(--purple);                       /* dark fallback keeps footer text legible if the webp is slow/short */
  }
  .site-footer__card { padding: 0; gap: 10px 0; flex-wrap: wrap; background-image: none; background-color: transparent; border-radius: 0; }
  /* prod stacks two 10px-padded blocks here, so the content sits at x=20 */
  .site-footer__col--brand, .site-footer__col--main { flex: 0 0 100%; }
  .site-footer__col--brand { padding: 0 10px 25px; }   /* the logo's own margin already gives prod's top inset; the 25 covers prod's taller personalise widget */
  .site-footer__col--main { padding: 10px; justify-content: flex-start; gap: 10px; }   /* desktop-only bottom-align off; 10px is prod's stacked widget gap */
  .site-footer__heading--mobile  { display: block; }
  .site-footer__heading--desktop { display: none; }
  /* the form-less footers keep the heading in the main column on mobile too,
     so their brand column is just the logo (prod: 10 + 24px logo widget + 10) */
  .site-footer--pluses .site-footer__heading--mobile  { display: none; }
  .site-footer--pluses .site-footer__heading--desktop { display: block; margin-top: 0; }  /* the stacked main column's own 10px padding is prod's inset */
  .site-footer--pluses .site-footer__col--brand { padding-bottom: 12px; }
  .site-footer__col--brand .dv-foot-nl { margin-top: 15px; }   /* mobile: heading is visible again, so drop the 102px desktop gap (prod nl y=185) */
  /* nowrap: a wrapping column flex container sizes its items off their max-content
     height, which padded the contact block out by a phantom 14px (118 vs prod's 105) */
  .site-footer__row  { flex-direction: column; flex-wrap: nowrap; margin: 30px 0 10px; }
  .site-footer__navs { flex: 0 0 auto; gap: 50px; }
  /* the row is a column here, so min-height:auto floors the block at its min-content
     height — the address row counted as if wrapped, 14 more than it renders (118 vs 105) */
  .site-footer__contact { flex: 0 0 auto; min-height: 0; gap: 24px; }   /* prod's rows carry their paragraph margin when stacked, widening the pitch by 4 */
  .site-footer__contact-row { gap: 0; }  /* stacked, prod drops the label gutter and splits 30/70 */
  .site-footer__contact-label { flex-basis: 30%; max-width: 30%; }
  .site-footer__contact-val   { flex: 1 1 70%; max-width: 70%; }
  /* prod keeps copyright and privacy on one line here (its block is 14 tall) and
     lets the column gap do the spacing below */
  .site-footer__bottom { margin-bottom: 0; }
  .site-footer__copy    { flex: 0 0 55%; align-self: flex-start; }   /* 77dcca5 --width:55%, left-aligned (was centered) */
  .site-footer__privacy { flex: 0 0 45%; }                           /* 7fdf3271 --width:45% */
  .site-footer__privacy .site-footer__menu { gap: 17px; }
  /* prod keeps the matrix at its natural 594; only below ~594 does it shrink. The
     form footers left-align it, the form-less ones centre it. */
  .site-footer__pluses { display: block; width: 594px; max-width: 100%; height: 306px; object-fit: contain; margin-top: 40px; }
  .site-footer--pluses .site-footer__pluses { margin-inline: auto; }
  /* Brand-column matrix is the desktop-only stand-in for the subscribe form; on mobile the
     main-column matrix above already shows, so drop it to avoid a duplicate (prod shows one). */
  .site-footer__pluses--brand { display: none; }
}
/* ---- END footer ---- */

/* ===== Header / site nav — matched to REAL PRODUCTION (Elementor header id 29) =====
   White pill floating 15px from top; BLACK nav links; lavender/blue Careers button.
   Replaces the previous :8081-based block (old fidelity.css lines 624-723) and
   overrides the base header rules in site.css. */

/* Outer bar (ref container 0e590ce): full-bleed, transparent, floats at top:15px
   (Elementor position:absolute + sticky top, sticky_offset 15, z-index 1000,
   padding 0 40px). It only supplies the side gutters; the pill is the white part. */
.site-header {
  position: fixed; top: 15px; left: 0; right: 0; z-index: 1000;
  display: block;
  padding: 0 40px;
  background: transparent;
  color: var(--dark);
  transition: none;
}
@media (max-width: 767px) { .site-header { padding: 0 20px; } }

/* Scroll state: keep the bar transparent — the pill is ALWAYS white in production.
   (Also overrides site.css .is-solid dark rgba band.) No nav/burger colour flip. */
.site-header.is-solid { background: transparent; backdrop-filter: none; }

/* THE WHITE PILL (ref container 4799236): white bg, 20px radius, 10px/15px padding,
   full width inside the 40px gutters (e-con-full — NOT capped at 1330), no shadow. */
.site-header .site-header__inner {
  display: flex; flex-direction: row; align-items: center;
  width: 100%; max-width: none; margin: 0;
  min-height: 0; height: auto;
  gap: 0;
  background: var(--white);
  border-radius: 20px;
  padding: 10px 15px;
}
@media (max-width: 767px) { .site-header .site-header__inner { padding: 10px; } }

/* Logo (ref widget 014a13a): intrinsic 136x18, nudged up 6px; the auto right-margin
   pushes the nav + Careers button to the right edge of the pill. */
.site-logo { display: flex; align-items: center; margin: 0 auto 0 0; }  /* clean vertical centre in the pill (#1) */
.site-logo .custom-logo,
.site-logo img { display: block; height: 18px; width: auto; max-width: 136px; }

/* Primary nav (ref widget d955678): horizontal, BLACK links, Porteron 14px/500,
   line-height 14px, 32px between items, hover -> lavender. */
.site-nav { display: flex; align-items: center; }
.site-nav__list {
  display: flex; align-items: center; flex-wrap: nowrap;
  list-style: none; margin: 0; padding: 0; gap: 32px;
}
.site-nav__list a {
  display: block; padding: 0;
  color: var(--dark);            /* #000000 = --e-global-color-text */
  font-family: var(--font);
  font-size: var(--fs-xs);       /* 14px = typography 7e315f4 */
  line-height: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a { color: var(--lavender); }
/* Production desktop nav excludes Careers (it is the button). Safety net so the
   menu's Careers item doesn't duplicate the button; remove if WP menu is fixed.
   Hide the whole <li>, not just the <a>: an empty <li> stays a flex item and the
   32px gap applies on BOTH sides of it, doubling the Events<->Connect gap. */
.site-nav__list li:has(> a[href*="/careers"]) { display: none; }

/* Careers CTA button (ref widget 4b21a01): lavender/blue pill, white text,
   radius 56px, padding 8px 12px, Porteron 14px/16px/500; 30px from the nav
   (ref aa63860 column-gap). Hover -> lime bg + purple text. */
.site-nav__cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 30px;
  padding: 8px 12px;
  background: var(--lavender);   /* #8A8BFF = accent */
  color: var(--white);
  border-radius: 56px;
  font-family: var(--font);
  font-size: var(--fs-xs);       /* 14px = accent typography */
  line-height: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.site-nav__cta:hover,
.site-nav__cta:focus { background: var(--lime); color: var(--purple); }

/* Mobile burger toggle — dark lines to read on the white pill. */
.nav-toggle {
  display: none;
  flex-direction: column; gap: 5px;
  align-items: center; justify-content: center;
  margin-left: 20px;
  background: transparent; border: 0; border-radius: 3px;
  color: var(--dark);            /* dark burger on white pill (was white) */
  cursor: pointer; padding: 0.5rem;
}
.nav-toggle span {
  display: block; width: 1.25rem; height: 2px;
  background: currentColor; border-radius: 3px;
}

/* Mobile dropdown — white rounded panel aligned to the pill (uses .site-header
   padding box, so left:0/right:0 == pill edges at both 40px and 20px gutters). */
.mobile-nav {
  position: absolute; top: 100%; left: 0; right: 0; bottom: auto; width: auto;  /* bottom:auto kills the inset:0 bottom leaked from site.css (else top:100%+bottom:0 = 0 height, menu opens invisible) */
  background: var(--white); color: var(--dark);
  margin-block-start: 8px; padding: 0;
  border-radius: 20px; overflow: hidden;
  max-height: 0; transform: none;
  transition: max-height 0.3s ease;
  z-index: 10000;
}
.mobile-nav.is-open { max-height: 100vh; }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; background: var(--white); }
.mobile-nav__list li { border-block-end: 1px solid #eee; }
.mobile-nav__list li:last-child { border-block-end: none; }
.mobile-nav__list a {
  display: block; padding: 12px 15px;
  color: var(--dark); font-family: var(--font);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
  font-weight: 500; text-decoration: none;
}
.mobile-nav__list a:hover { color: var(--lavender); }

/* Breakpoint (ref): horizontal nav + Careers button down to 768px; burger <=767. */
@media (max-width: 767px) {
  .site-nav, .site-nav__cta { display: none !important; }
  .nav-toggle { display: flex; }
}
@media (min-width: 768px) {
  .nav-toggle { display: none !important; }
  .mobile-nav { display: none; }
}

/* ============================================================
   about-us
   Ported CSS for the about-us page from Elementor reference (post-32.css + kit post-7.css) to the theme's existing selectors.

Sections covered:
- about-hero: 75vh min-height (60vh@1024, 55vh@767), title 40px/42px (--fs-h1), lede 18px/20px white, FAQ button white bg/dark text/radius 56px/padding 8px 12px with lime+purple hover, image 100% x 40vh contain bottom-center (310px@1024), copy capped 372px to match the reference heading widget width.
- about-approach: heading 40px purple (mb 24px), lede 18px/20px purple-60 (rgba(68,25,73,.6)), grid forced to 1 column (reference is a single-column stack, not 2-col), cards rebuilt as a 2-track grid (30px icon left, title+text right) with white bg, 10px radius, 24px padding, hover bg purple; icon 30px, title 24px/1 purple, text 16px/18px purple-60.
- about-system: bg switched beige -> --light-blue (#b1d6ef) to match the reference panel, 32px padding, 430px min-height, heading dark, text 18px/20px rgba(38,20,20,.6) capped 545px.
- value-cards (trading-house): bg -> white, heading purple, lede 730px purple-60 18px/20px, grid 4 cols / 20px gap (2 cols@1024, 1@767), cards 10px radius, 24px padding, 325px min-height, hover bg purple, icon 55x40 with -10px left margin, title 24px purple, text 16px/18px purple-60.
- about-roles: bg -> white, heading purple, lede 520px purple-60 18px/20px, 3-col grid 20px (2 cols@1024, 1@767), thumb radius 10px, caption 18px/18px purple.

Tokens used: --fs-h1/--lh-h1, --fs-h2, --fs-body/--lh-body, --fs-sm/--lh-sm, --purple, --white, --dark, --light-blue, --lime. Hardcoded only the Elementor alpha tints (rgba(68,25,73,.6) and rgba(38,20,20,.6)) which have no matching token.

Gaps / deliberate skips:
- The system reference has a left image column (team-office webp) absent from the code-first DOM; only the right light-blue panel values were portable.
- Approach/value-cards card hover sets bg purple in the reference (text stays purple, an Elementor quirk that makes text invisible on hover); ported faithfully per the pixel-close instruction.
   ============================================================ */
/* about-hero — page-specific: office banner + two-col Our Story band.
   Values from prod post-32.css: banner 60vh / radius 10px, left panel 55vh
   Frame-36149 gradient (white heading + lede + FAQ pill + dots gif), right
   corridor photo 40vh. Backgrounds set inline in about-us-hero.php. */
.about-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 10px 0;   /* prod's wrapper has no bottom padding; the next section's own 10px margin is the gap */
}
.about-hero__banner {
  min-height: 75vh;
  border-radius: 10px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.about-hero__band {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: stretch;
}
.about-hero__panel,
.about-hero__photo {
  width: 50%;
  border-radius: 10px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.about-hero__panel {
  min-height: 80vh;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.about-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
.about-hero__title {
  font-size: var(--fs-h1);
  line-height: calc(var(--lh-h1) / var(--fs-h1));
  color: var(--white);
  width: 100%;
  max-width: 372px;                      /* prod renders a 372px block, not a shrink-to-fit line */
  margin: 0;
}
.about-hero__lede {
  /* prod lede = --fs-body (18 desktop / 16 mobile) at --lh-body 20 */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--white);
  max-width: 600px;                      /* prod wraps the lede at ~600px (5 lines), not the full panel */
}
/* the lede paragraph keeps the shared 0.9rem gap, as prod's does */
.about-hero__faq {
  background: var(--white);
  color: var(--dark);
  border-radius: 56px;
  padding: 8px 12px;
  font-size: var(--fs-xs);               /* prod's button is 14/16, not the inherited 16/24 */
  line-height: var(--lh-xs);
  font-weight: 500;
}
.about-hero__faq:hover,
.about-hero__faq:focus {
  background: var(--lime);
  color: var(--purple);
}
.about-hero__deco {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.about-hero__deco img {
  width: 100%;
  height: 40vh;                          /* prod scales the gif with the viewport (360 at 900, 560 at 1400) */
  object-fit: contain;
  object-position: bottom center;
  display: block;
}
.about-hero__photo { min-height: 530px; }
/* prod's tablet only shortens the photo; the banner keeps 75vh and the panel 80vh all
   the way down to 767, where both drop a step (60vh / 55vh). */
@media (max-width: 1024px) {
  .about-hero__photo { min-height: 450px; }
  .about-hero__deco img { height: 310px; }   /* prod pins the gif at 310 across tablet instead of tracking the viewport */
}
@media (max-width: 767px) {
  .about-hero__band { flex-direction: column; }
  .about-hero__banner { min-height: 60vh; }
  .about-hero__panel { min-height: 55vh; }
  .about-hero__deco img { height: 155px; }   /* prod's mobile gif band */
  .about-hero__panel,
  .about-hero__photo { width: 100%; }
  .about-hero__photo { min-height: 40vh; }
  .about-hero__copy { padding-right: 0; }
  .about-hero__lede { max-width: none; }   /* stacked, prod's lede fills the panel (699 at 767) instead of wrapping at 600 */
}

/* about-approach — 59f2e67: off-white #f3f3f3 panel, radius 10px, padding 80px 24px,
   2-col row (head 50% | cards stack 50%, column-gap 24px). */
.about-approach {
  background: var(--off-white);
  border-radius: 10px;
  margin: 10px;
  padding: 80px 24px;
}
.about-approach .container { max-width: none; padding: 0; }
/* grid minmax(0,1fr) x2 forces a true 50/50 (prod). flex:1 1 0 did NOT hold in Blink:
   the text-heavy card column's content stole ~100px, shrinking the head to ~568. */
.about-approach__inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: stretch; }
/* the head fills its half of the split; prod caps the heading at 730 and the lede at 645 */
.about-approach__head { min-width: 0; max-width: none; margin-bottom: 0; display: flex; flex-direction: column; gap: 10px; }
.about-approach__head .section__title {
  color: var(--purple);
  margin: 0 0 24px;
  text-align: start;
  max-width: 730px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}
.about-approach__lede { max-width: 645px; text-align: start; }
.about-approach__lede p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(68, 25, 73, 0.6);
  /* paragraph gap from the shared p rule; prod keeps it on the last one too */
}
.about-approach__grid {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.about-approach__card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 30px;
  background: var(--white);
  border-radius: 10px;
  padding: 24px;
  box-shadow: none;
  transition: background 0.3s;
}
.about-approach__card:hover { background: var(--purple); }
.about-approach__card:hover .about-approach__card-title,
.about-approach__card:hover .about-approach__card-text { color: var(--lime); }
.about-approach__icon { width: 30px; height: 30px; margin-bottom: 7px; }   /* prod's icon widget is 37 tall; only shows once the card stacks */
.about-approach__icon img { width: 30px; height: 30px; }
.about-approach__card-body { display: flex; flex-direction: column; gap: 30px; }
.about-approach__card-title {
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--purple);
  margin: 0;
}
.about-approach__card-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: rgba(68, 25, 73, 0.6);
  width: 80%;                    /* prod wraps the card text at 80% of the body column */
  /* prod's text widget measures 89.4 against the paragraph's own 90: Elementor pulls the
     wrapper up 15px while the paragraph hangs 14.4. That 0.6 per card is both cards, so the
     approach band ran 1.2 tall and pushed every band under it down — the page's whole +1 docH. */
  margin: 0 0 -0.6px;
}
/* prod holds the 2-col split and the 80/24 padding all the way to 767; the only tablet
   change is a 300px floor under each card as the text column narrows. */
@media (max-width: 1024px) {
  .about-approach__card { min-height: 300px; }
  .about-approach__card-text { width: 100%; }   /* the 80% wrap only applies while the column is wide */
}
@media (max-width: 767px) {
  .about-approach { padding: 40px 10px; }
  .about-approach__inner { grid-template-columns: 1fr; gap: 20px; } /* stack head over cards (inner is grid, not flex) */
  .about-approach__grid { gap: 10px; grid-auto-rows: 1fr; }   /* prod's stacked rows stay equal height, 10px apart */
  .about-approach__head, .about-approach__grid { width: 100%; }
  .about-approach__card { min-height: 0; padding: 20px; grid-template-columns: 1fr; gap: 20px; } /* mobile stacks icon above title (prod) */
  .about-approach__card-text { line-height: 22px; }  /* prod card-text lh 18->22 on mobile */
}

/* about-system — a9dcb1b: 2-col row (image c9b54fe 50% | light-blue panel a90aa63 50%). */
.about-system { margin: 10px; padding: 0; }  /* kill base .section ~115px vert padding; prod container is flush (was making the section 192px too tall) */
.about-system .container { max-width: none; padding: 0; }
.about-system__inner { display: flex; flex-direction: row; gap: 10px; }  /* prod: 10px between image and panel */
.about-system__media {
  flex: 1 1 50%;   /* a 0 basis floors at the panel's own padding and skews the 50/50 */
  min-height: 430px;
  border-radius: 10px;
  background: url('/wp-content/uploads/2025/12/DaVinciTrading-team-office-presenation.webp') center center / cover no-repeat;
}
.about-system__panel {
  flex: 1 1 50%;
  min-height: 430px;
  background: var(--light-blue);
  border-radius: 10px;
  padding: 32px 24px;   /* the title/text caps do the wrapping; a right pad only starves them on narrow screens */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.about-system__panel .section__title {
  color: var(--dark);
  margin: 0;              /* space-between distributes; prod wraps this at 626 */
  max-width: 626px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}
.about-system__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(38, 20, 20, 0.6);
  max-width: 545px;
  /* the shared paragraph margin is what lifts the text off the panel floor, as on prod */
}
/* prod stays a 50/50 row through tablet (both panels 350 at 1024 and at 800); 767 is
   where it stacks. */
@media (max-width: 1024px) {
  .about-system__media,
  .about-system__panel { min-height: 350px; }
  .about-system__panel { padding: 30px; }
}
@media (max-width: 767px) {
  .about-system__inner { flex-direction: column; gap: 10px; }
  .about-system__media { min-height: 40vh; }
  .about-system__panel { min-height: 360px; padding: 30px 15px; }   /* prod's stacked panel matches the image band and distributes title/text */
  .about-system__panel .section__title { max-width: none; }         /* stacked, prod's title runs the full 717 instead of wrapping at 626 */
}

/* about-roles — a1cf8a6: off-white #f3f3f3 panel, radius 10px, padding 80px 24px;
   inner 22db80c is a flex column with 24px gap (h2, lede, 600px bg video, 3-card grid). */
.about-roles {
  background: var(--off-white);
  border-radius: 10px;
  margin: 10px;
  padding: 80px 24px;
}
.about-roles .container { max-width: none; padding: 0; }
.about-roles__inner { display: flex; flex-direction: column; gap: 24px; }
.about-roles__inner > .section__title { color: var(--purple); margin: 0; font-size: var(--fs-h1); line-height: var(--lh-h1); }
.about-roles__lede {
  color: rgba(68, 25, 73, 0.6);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 520px;
  /* paragraph gap from the shared p rule, as prod's lede widget carries */
}
.about-roles__video { min-height: 600px; border-radius: 10px; overflow: hidden; position: relative; } /* prod's bg-video is position:absolute so it overflows visually but contributes only min-height (600px) to flow; a static <video> renders ~772px and ballooned the section +172px */
.about-roles__bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.about-roles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }   /* prod grid gap is 10 */
.about-roles__thumb { border-radius: 10px; }
.about-roles__caption {
  font-size: 18px;
  line-height: 18px;
  font-weight: 400;
  color: var(--purple);
  margin: 16px 0 0;   /* prod gap between the thumb and its caption */
}
@media (max-width: 1024px) {
  .about-roles { padding: 40px 10px; }
  /* prod's bg-video container is a fixed 600px on every viewport; the vh overrides shrank it to ~338px on mobile (-262px) */
  .about-roles__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 10px; }
}
@media (max-width: 767px) {
  .about-roles__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);   /* prod's loop grid reserves a 4th row it never fills; 1fr keeps it the height of a card (231 at 390, 443 at 767) */
    gap: 10px;
  }
}

/* about-working — 233f894: 2-col row (lavender panel 22514a2 55% | team photo 76eee6f 44%). */
.about-working { margin: 10px; padding: 0; } /* kill .section's 115px vertical pad — prod's panel row has none (panel min-height:530 drives height); the pad added ~230px empty space, pushing the footer down */
.about-working .container { max-width: none; padding: 0; }
.about-working__inner { display: flex; flex-direction: row; gap: 10px; }  /* prod row gap is 10px, not 24 */
.about-working__panel {
  min-height: 530px;  /* prod culture card = 530px */
  background: var(--lavender);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.about-working__copy { display: flex; flex-direction: column; gap: 0; } /* prod: title + subtitle are one tight block (gap 0) */
.about-working__title {
  color: var(--near-white);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  margin: 0;
}
.about-working__subtitle {
  color: rgba(246, 246, 246, 0.6);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  max-width: 455px;
  margin: 0;
  font-weight: 400;
}
.about-working__body { display: flex; flex-direction: column; gap: 24px; }
.about-working__body p {
  color: rgba(246, 246, 246, 0.8);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 545px;
  /* paragraph gap from the shared p rule; prod's widget carries it, lifting the body group */
}
.about-working__btn { border-radius: 56px; padding: 8px 12px; align-self: flex-start; }
.about-working__media {
  min-height: 530px;  /* prod culture card = 530px */
  border-radius: 10px;
  background: url('/wp-content/uploads/2025/07/20250528_DaVinciTrading-JoniIsraeli-013-SWR57353.jpg') center center / cover no-repeat;
}
/* Tablet is the one width where prod abandons the shared shrink model and pins explicit
   percentages: 483/387 at 900 and 428/342 at 800 are 55/44 to the pixel, while the shrink
   model would give 448/422. Above 1024 it is back to shrink (595/575 at 1200). */
@media (max-width: 1024px) {
  .about-working__panel { width: 55%; min-height: 450px; padding: 30px; }
  .about-working__media { width: 44%; min-height: 450px; padding: 10px; }
}
@media (max-width: 767px) {
  .about-working__inner { flex-direction: column; gap: 10px; }
  .about-working__panel { width: 100%; min-height: 450px; padding: 30px 15px; gap: 30px; }   /* prod's stacked panel is content-height with a 30px gap */
  .about-working__media { width: 100%; min-height: 40vh; }
}

/* ============================================================
   careers
   Ported careers page CSS from Elementor reference (post-38.css + post-7.css kit) to the code-first theme's existing selectors. fidelity.css loads after site.css and component CSS, so equal-specificity rules here win.

Key mappings (Elementor container ID -> theme selector):
- cdfde43/082ea1b -> .careers-hero (outer, transparent, 10px pad, max-width 1330)
- 53c2325 -> .careers-hero__copy (purple panel, border-radius 10px, min-height 78vh, padding 24px, flex column space-between)
- 7481d56 -> .careers-hero__media (image panel, min-height 78vh, radius 10px)
- 544e369 -> .careers-jobs (beige/off-white panel, NOT purple; radius 10px; padding 80px 0)
- 1394919 -> .careers-teams (beige panel; padding 100px 0; centered purple title)
- bf6103e -> .careers-process (row; no bg)
- a36006a -> .careers-process__media (image panel, min-height 60vh, ::before overlay rgba(0,0,0,.3))
- 6c1fa92 -> .careers-process__copy (beige panel, NOT purple; min-height 60vh; padding 30px 0 30px 30px)
- 6c3bfbf -> .careers-benefits (beige panel; padding 100px 0)
- c719596 -> .careers-working (row; no bg)
- 824f00b -> .careers-working__copy (light-blue #B1D6EF panel, NOT beige; min-height 530px; padding 24px)
- 038ac7b -> .careers-working__media (image panel, min-height 530px)

Values ported exactly from Elementor: backgrounds (#441949 purple, #F3F3F3 off-white, #B1D6EF light-blue), border-radius 10px/56px (buttons), min-heights (78vh/60vh/530px/55vh/58vh/50vh), padding (24px/80px/100px/30px/8px 12px), font sizes/line-heights via tokens (--fs-h1 40/42 for all headings, --fs-body 18/20 for ledes/text, --fs-sm 16/18 for Departments/Offices labels, --fs-xs 14/16 weight 500 for buttons), colors (#44194999 purple-60 for ledes/labels, #26141499 dark-60 for working copy text, #f6f6f699 for hero lede), button styles (transparent ghost with dark border on process; white->lime-hover accent + dark ghost on working), title max-widths (372px hero, 465px process, 455px working subtitle, 545px text, 640px centered ledes), deco image heights (380/300/175), grid gaps (10px hero/process/working rows, 15px team/benefit card grids), and the 10px outer margin between stacked panels.

Used :root tokens where values match (--purple, --off-white, --light-blue, --lime, --white, --near-white, --dark, --fs-h1/--lh-h1, --fs-body/--lh-body, --fs-sm/--lh-sm, --fs-xs/--lh-xs, --container). Hardcoded only values with no matching token (purple-60 #44194999, dark-60 #26141499, hero-lede #f6f6f699, overlay rgba(0,0,0,.3)).

Responsive: @media(max-width:1024px) and (max-width:767px) overrides ported from Elementor (deco 300/175px, panel padding reductions, min-heights 55/58/50vh, process/working copy padding). Added an (max-width:859px) breakpoint to collapse the 2-col grids where the theme's existing min-width:860px rule did the same — kept consistent with the theme's existing 860px breakpoint rather than Elementor's 768px to avoid fighting source order.

Gaps / notes:
- Structural difference: the reference wraps all sections in one Elementor container (cdfde43, 10px padding) producing stacked rounded panels with 10px white gaps; the theme renders separate <section> elements. Approximated by giving each section max-width:var(--container) + margin:10px auto + border-radius:10px (on the panel-type sections). Vertical gaps between sections are ~20px (10px+10px margins) vs reference 10px — within pixel-close tolerance.
- Hero/process/working are 2-col rows in the reference with no panel radius on the row itself (only on children); ported accordingly (no radius on .careers-hero/.careers-process/.careers-working, radius on the child panels).
- Card grids (jobs/teams/benefits) keep the component's 3-column layout; only gap was overridden to 15px for teams/benefits. Elementor's loop-grid column counts come from inline data-settings not present in post-38.css, so left as-is.
- Filter chips exist in the reference too (department row then location row); ported prod's outline styling, including the active chip, which prod marks with a solid purple border and no fill.
- No new class names invented; all rules use existing theme selectors. Skipped: the hero image is a background-image in Elementor (7481d56) but an <img> in the theme — kept the theme's <img> with object-fit:cover, which renders equivalently.
   ============================================================ */
/* ============ Careers — ported from Elementor post-38.css ============ */

/* ---- careers-hero (containers cdfde43 / 082ea1b / 53c2325 / 7481d56) ---- */
.careers-hero {
  padding: 10px 10px 0;                  /* full-bleed like every other hero; prod careers is full-width, not boxed 1330 */
  background: transparent;
}
.careers-hero .container { padding: 0; max-width: none; }
.careers-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* the deco's intrinsic width must not widen its track */
  gap: 10px;
  align-items: stretch;
}
.careers-hero__copy {
  max-width: none;
  background: var(--purple);
  color: var(--white);
  border-radius: 10px;
  padding: 24px;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.careers-hero__deco {
  display: block;
  width: auto;              /* prod: crosses hug the left at intrinsic width (~679 at h=380), not full-bleed */
  max-width: 100%;          /* but prod clips it to the panel below ~1500 (620 at 1366) */
  height: 380px;
  margin: 0;
  align-self: flex-start;
}
.careers-hero__title {
  font-size: var(--fs-h1);
  line-height: calc(var(--lh-h1) / var(--fs-h1));
  color: var(--near-white);
  margin: 0;
  max-width: 372px;
}
.careers-hero__lede {
  font-size: var(--fs-body);
  line-height: calc(var(--lh-body) / var(--fs-body));
  color: #f6f6f699;
  max-width: none;
  /* site.css zeroes this, but prod's lede widget measures 54.4 — the 40px text plus the
     shared paragraph hang. The panel is space-between over three children, so the missing
     14.4 was redistributed as +7 on the title and +14 on the lede itself. */
  margin: 0 0 0.9rem;
}
.careers-hero__media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: 78vh;
}
/* absolute: prod's panel is a background image, so the photo must not drive the row height */
.careers-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- careers-jobs (container 544e369 — beige panel) ---- */
.careers-jobs {
  padding: 80px 0;
  background: var(--off-white);
  color: var(--dark);
  border-radius: 10px;
}
/* prod stacks the two filter groups full-width with a 40px spacer between */
.careers-jobs .card-grid { gap: 40px; }
.careers-jobs .card-grid__filters { flex-direction: column; gap: 40px; margin-bottom: 0; }
.careers-jobs .card-grid__filter { gap: 8px; }
.careers-jobs .card-grid__filter-label {
  font-family: var(--font);
  font-size: var(--fs-sm);
  line-height: calc(var(--lh-sm) / var(--fs-sm));
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #44194999;
}
.careers-jobs .card-grid__chip {
  color: var(--purple);
  border-color: rgba(0, 0, 0, 0.3);      /* prod's chip border is black at 30%, not purple */
  border-radius: 50px;
}
.careers-jobs .card-grid__chip:hover { border-color: var(--lavender); }
.careers-jobs .card-grid__chip.is-active {
  background: transparent;               /* prod marks the active chip with a solid purple border only, no fill */
  color: var(--purple);
  border-color: var(--purple);
}
.careers-jobs .card-grid__grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }   /* 82520f4 gap 30 */

/* ---- careers-teams (container 1394919 — beige panel) ---- */
.careers-teams {
  padding: 100px 0;
  background: var(--off-white);
  color: var(--dark);
  border-radius: 10px;
}
.careers-teams__title {
  margin: 0 0 34px;                /* prod: 10px band gap + the lede widget's own 24px inset */
  text-align: center;
  color: var(--purple);
  font-size: var(--fs-h1);
  line-height: calc(var(--lh-h1) / var(--fs-h1));
}
.careers-teams__lede {
  margin: 0 auto 34px;
  max-width: 640px;
  text-align: center;
  color: #44194999;
  font-size: var(--fs-body);
  line-height: calc(var(--lh-body) / var(--fs-body));
}
.careers-teams .card-grid__grid { gap: 15px; }

/* team cards (prod 1394919): light-blue #B1D6EF panel, title always shown top-left;
   description fades in just below the title on hover. No bg/colour change, no flip. */
.careers-teams .team-card {
  height: 200px;                   /* prod's flip-box is fixed: the hover text does not grow the card */
  border-radius: 10px;
  background: var(--light-blue);
  overflow: hidden;
}
.careers-teams .team-card__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 24px;
  height: 100%;
}
.careers-teams .team-card__title {
  margin: 0;
  color: var(--purple);
  font-size: 18px;                 /* prod title stays 18px at all widths (not --fs-body which drops to 16) */
  line-height: 20px;
  font-weight: 400;
}
.careers-teams .team-card__desc {
  margin: 0;
  color: var(--purple);
  font-size: var(--fs-sm);
  line-height: calc(var(--lh-sm) / var(--fs-sm));
  opacity: 0;
  transition: opacity .6s ease-in-out;   /* prod flip-box timing */
}
.careers-teams .team-card:hover .team-card__desc,
.careers-teams .team-card:focus-within .team-card__desc { opacity: 1; }
/* prod mobile (1394919): the teams grid becomes a swipeable horizontal carousel.
   Native CSS scroll-snap = same behaviour as the Elementor swiper, no JS. Cards
   ~78% wide so the next peeks; taller than the desktop cards (prod ~340px). */
@media (max-width: 767px) {
  .careers-teams .card-grid__grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    gap: 15px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .careers-teams .card-grid__grid::-webkit-scrollbar { display: none; }
  .careers-teams .card-grid__item {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  /* prod keeps the 200px card height on mobile too */
}

/* ---- careers-process (containers bf6103e / a36006a / 6c1fa92) ---- */
.careers-process {
  margin: 10px 10px 0;
}
/* sections are full-bleed now; let their inner .container fill too (cards were centered at 1330) */
.careers-jobs .container,
.careers-teams .container,
.careers-benefits .container { max-width: none; }
/* prod never states a ratio here: both panels are width:100% and overflow, so the flex
   shrink splits them by their paddings. The copy's right pad is the page gutter, which
   is what bends the split from 1268/1774 at 3072 to an even 668/668 at 1366 and on down. */
.careers-process__inner {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.careers-process__media,
.careers-process__copy { flex: 0 1 auto; width: 100%; min-width: 0; }
/* at tablet the paddings change (media 24, copy 20 left), so the same shrink gives 504/490. */
@media (max-width: 767px) {
  .careers-process__inner { flex-direction: column; }
}
.careers-process__media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: 60vh;
  padding: 24px;
}
.careers-process__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.careers-process__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.careers-process__copy {
  background: var(--off-white);
  color: var(--purple);
  border-radius: 10px;
  padding: 30px calc((100vw - 1330px) / 2) 30px 30px;   /* 6c1fa92's gutter; clamps to 0 below 1330 as prod's does */
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;    /* prod stacks the three widgets on a 10px gap, not on heading margins */
}
.careers-process__title {
  font-size: var(--fs-h1);
  line-height: calc(var(--lh-h1) / var(--fs-h1));
  color: var(--purple);
  margin: 0;
  max-width: 465px;
}
.careers-process__text {
  font-size: var(--fs-body);
  line-height: calc(var(--lh-body) / var(--fs-body));
  color: var(--purple);
  max-width: 545px;
  margin: 0 0 0.9rem;   /* prod's text widget is 114.4: the 100px paragraph plus its 14.4 hang */
}
.careers-process .btn--ghost {
  align-self: flex-start;
  background: transparent;
  color: var(--dark);
  border: 1px solid var(--dark);
  border-radius: 56px;
  padding: 8px 12px;
  font-weight: 500;
}
.careers-process .btn--ghost:hover {
  background: #44194999;
  color: var(--white);
  border-color: #44194999;
}

/* ---- careers-benefits (container 6c3bfbf — beige panel) ---- */
.careers-benefits {
  margin: 10px;                          /* was max-width:1330 centered — prod's beige panel is full-bleed (cards 991px, not 417) */
  padding: 100px 0;
  background: var(--off-white);
  color: var(--dark);
  border-radius: 10px;
}
.careers-benefits__title {
  margin: 0 0 34px;                /* prod: 10px band gap + the lede widget's own 24px inset */
  text-align: center;
  color: var(--purple);
  font-size: var(--fs-h1);
  line-height: calc(var(--lh-h1) / var(--fs-h1));
}
.careers-benefits__lede {
  margin: 0 auto 34px;
  max-width: 640px;
  text-align: center;
  color: #44194999;
  font-size: var(--fs-body);
  line-height: calc(var(--lh-body) / var(--fs-body));
}
.careers-benefits .card-grid__grid { gap: 15px; }

/* benefit cards — purple #441949 panel with lime icon chip + white copy (prod 6c3bfbf) */
.careers-benefits .benefit-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 280px;                     /* prod card = 280px (icon pinned top, copy pinned bottom) */
  border-radius: 10px;
  background: var(--purple);
  color: var(--white);
  padding: 24px;                          /* e9a38f3 */
}
.careers-benefits .benefit-card__media {
  /* Prod's chip is a plain block around an inline image: the image's baseline gap is what makes
     it 34.8 tall, and the radius is 4px, not the 10px the cards use. At 10px the chip reads as a
     rounded pill instead of a near-square tile, which is the visible difference. */
  display: block;
  width: fit-content;
  padding: 5px;                           /* 897701a: a 5px inset round the 24px glyph, not a 40px tile */
  border-radius: 4px;
  background: var(--lime);
  flex: 0 0 auto;
  align-self: flex-start;
}
.careers-benefits .benefit-card__media img {
  width: 24px;
  height: 24px;                           /* prod's glyph is 24 square; ours was stretched a pixel */
  object-fit: contain;
  /* Elementor's reset makes images inline-block on the middle baseline, and that is what gives
     prod's chip its 34.8 height. On a plain inline baseline the same glyph makes a 31px line box
     and the chip comes out 41 tall. */
  display: inline-block;
  vertical-align: middle;
}
.careers-benefits .benefit-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.careers-benefits .benefit-card__title {
  margin: 0;
  color: var(--near-white);        /* prod #fdfdfd, not pure white */
  font-size: 18px;                 /* prod title stays 18px at all widths (not --fs-body which drops to 16) */
  line-height: 20px;
  font-weight: 400;                /* prod title-normal weight 400 (not 500) */
}
.careers-benefits .benefit-card__excerpt {
  margin: 0;
  color: rgba(246, 246, 246, 0.8);   /* prod #f6f6f6 base, not pure white */
  font-size: var(--fs-sm);
  line-height: calc(var(--lh-sm) / var(--fs-sm));
}

/* ---- careers-working (containers c719596 / 824f00b / 038ac7b) ---- */
.careers-working {
  margin: 10px;                          /* was max-width:1330 centered — prod's working row is full-bleed like the other pages' */
  padding-bottom: 0;
}
.careers-working__inner {
  display: flex;                         /* was grid 1fr 1fr — prod panel is ~42% on wide screens, not 50% */
  gap: 10px;
  align-items: stretch;
}
.careers-working__copy {
  background: var(--light-blue);
  color: var(--dark);
  border-radius: 10px;
  padding: 24px;
  min-height: 530px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
/* prod's panel distributes two groups, not four widgets: eyebrow+subtitle butted together,
   then the paragraph and the CTA row 24px apart. Four flat children put space-between's free
   space into three gaps instead of one, which left the subtitle 59px low and the paragraph
   37px high while the panel's own box still matched. Same head/body split as connect-working. */
.careers-working__head { display: flex; flex-direction: column; gap: 0; }
.careers-working__body { display: flex; flex-direction: column; gap: 24px; }
.careers-working__eyebrow {
  font-size: var(--fs-h1);
  line-height: calc(var(--lh-h1) / var(--fs-h1));
  color: var(--dark);
  margin: 0;
}
.careers-working__subtitle {
  font-size: var(--fs-h1);
  line-height: calc(var(--lh-h1) / var(--fs-h1));
  color: #26141499;
  max-width: 455px;
  margin: 0;
}
.careers-working__text {
  font-size: var(--fs-body);
  line-height: calc(var(--lh-body) / var(--fs-body));
  color: #26141499;
  max-width: 545px;
  margin: 0 0 0.9rem;   /* prod hangs 14.4px under the paragraph inside the body group */
}
.careers-working__ctas { display: flex; flex-wrap: wrap; gap: 10px; }   /* prod: 10px between FAQ and Careers */
.careers-working__media {
  position: relative;                    /* positioning context for the absolute img */
  border-radius: 10px;
  overflow: hidden;
  min-height: 530px;
}
.careers-working__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }  /* absolute: fills the card, never drives row height (full-bleed media would balloon otherwise) */
.careers-working .btn--ghost-dark {
  align-self: flex-start;
  background: transparent;
  color: var(--dark);
  border: 1px solid var(--dark);
  border-radius: 56px;
  padding: 8px 12px;
  font-weight: 500;
}
.careers-working .btn--ghost-dark:hover {
  background: #44194999;
  color: var(--white);
  border-color: #44194999;
}
.careers-working .btn--accent {
  align-self: flex-start;
  background: var(--white);
  color: var(--dark);
  border: 0;                             /* prod's filled CTA has no border, so it stays 32 tall */
  border-radius: 56px;
  padding: 8px 12px;
  font-size: var(--fs-xs);
  line-height: calc(var(--lh-xs) / var(--fs-xs));
  font-weight: 500;
}
.careers-working .btn--accent:hover {
  background: var(--lime);
  color: var(--purple);
  border-color: var(--lime);
}

/* ============ Responsive (max-width: 1024px) ============ */
@media (max-width: 1024px) {
  .careers-hero__copy { padding: 24px; }
  .careers-hero__deco { height: 300px; object-fit: contain; }
  .careers-hero__media { min-height: 78vh; }
  .careers-jobs { padding: 80px 0; }              /* 544e369 keeps its 80px band at tablet, only the columns halve */
  .careers-jobs .card-grid__grid { grid-template-columns: repeat(2, 1fr); }
  /* 1394919/6c3bfbf pad 40 top/bottom and 10 on the left only, so the cards sit 10 inside
     the frame instead of the container's 24, and both grids drop to two columns. */
  .careers-teams,
  .careers-benefits { padding: 40px 0 40px 10px; }
  .careers-teams .container,
  .careers-benefits .container { padding: 0; }
  .careers-teams .card-grid__grid,
  .careers-benefits .card-grid__grid { grid-template-columns: repeat(2, 1fr); }
  /* prod's head is title 42, 10, lede 40 + a 24 pad, 10 — 126 to the first card. The shared
     heading margins gave 150. */
  .careers-teams__title,
  .careers-benefits__title { margin: 0 0 10px; }
  .careers-teams__lede,
  .careers-benefits__lede { margin: 0 0 34px; }
  .careers-process__copy { padding: 20px; }
  .careers-working__copy { padding: 24px; }
}
@media (max-width: 1024px) and (min-width: 992px) {
  .careers-process__copy { padding-right: 0; }   /* 6c1fa92's (100vw - 1330px)/2 gutter is 0 across this band */
}

/* ============ Single-column layouts — 767, not the theme's 860 ============ */
/* prod holds the hero, process and working rows two-up all the way to 767; stacking them at
   860 made the process band 550 and the working band 540 too tall at 768. */
@media (max-width: 767px) {
  .careers-hero__inner { grid-template-columns: 1fr; }
  .careers-hero__media { display: none; }
  .careers-process__inner { grid-template-columns: 1fr; }
  .careers-working__inner { flex-direction: column; }
  .careers-working__copy,
  .careers-working__media { flex: none; width: 100%; }  /* stack full-width; drop the desktop flex ratio */
}

/* ============ Responsive (max-width: 767px) ============ */
@media (max-width: 767px) {
  .careers-hero { padding: 10px 10px 0; }   /* the next band supplies its own 10px top margin */
  .careers-hero__inner { gap: 20px; }
  .careers-hero__copy {
    min-height: 55vh;
    padding: 10px 10px 15px;              /* 53c2325 @767 */
    gap: 20px;
  }
  .careers-hero__deco { height: 175px; }
  .careers-hero__title { max-width: 100%; }
  .careers-hero__media { min-height: 58vh; }
  .careers-jobs { padding: 40px 0; }
  .careers-jobs .container { padding: 0 10px; }        /* 544e369 @767 padding 40px 10px */
  .careers-jobs .card-grid__grid { grid-template-columns: 1fr; }
  .careers-teams { padding: 40px 0; }
  .careers-benefits { padding: 40px 0; }
  /* the two carousels bleed off the right frame edge on prod (inner is 360 wide) */
  .careers-teams .container,
  .careers-benefits .container { padding: 0 0 0 10px; }
  /* Prod renders team + benefit cards as a 1-up horizontal carousel on mobile
     (one card + a peek of the next), NOT a stacked grid — a 1-col stack ran the
     benefits section to ~1656px vs prod's ~600. Scroll-snap flex row = one card tall. */
  .careers-teams .card-grid__grid,
  .careers-benefits .card-grid__grid {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .careers-teams .card-grid__grid::-webkit-scrollbar,
  .careers-benefits .card-grid__grid::-webkit-scrollbar { display: none; }
  /* prod's swiper holds back an 80px peek of the next card, so one slide is the track
     minus 80: 280 at 390, 531 at 641. A fixed 280 only ever matched the 390 reading. */
  .careers-teams .card-grid__item,
  .careers-benefits .card-grid__item { flex: 0 0 calc(100% - 80px); scroll-snap-align: start; }
  .careers-teams .card-grid__grid { gap: 15px; }   /* prod's teams pitch is 295, benefits 290 */
  /* prod drops the lede widget's 24px top inset when stacked */
  .careers-benefits__title,
  .careers-teams__title { margin-bottom: 10px; }
  .careers-process__media { min-height: 55vh; padding: 10px 10px 15px; }   /* a36006a @767 = 495 */
  .careers-process__copy {
    min-height: 58vh;           /* 6c1fa92 @767 = 522, copy pinned to the bottom */
    padding: 20px 12px;
  }
  /* the 10px gap and the paragraph's own 14.4 hang carry the stacked rhythm here too, so the
     base rules already bottom-align the block on its CTA — no mobile margins needed */
  .careers-working__copy {
    min-height: 450px;          /* 824f00b @767 matches the photo band, as on about-us and connect */
    gap: 30px;                  /* stacked the content clears the 450 floor, so this gap is what shows */
    padding: 30px 15px;
  }
  .careers-working__media { min-height: 50vh; padding: 10px; }   /* 038ac7b @767 = 450 */
}
/* 767 exactly: prod's swiper reads its two-up slide count from min-width 767 while the CSS
   is still on the mobile rules, the same off-by-one the roles carousel has at 1024. */
@media (width: 767px) {
  .careers-teams .card-grid__item    { flex-basis: calc((100% - 95px) / 2); }
  .careers-benefits .card-grid__item { flex-basis: calc((100% - 90px) / 2); }
}


/* ============================================================
   career-match
   Ported CSS for the career-match page from the Elementor reference. The reference renders the entire page as a single HTML widget whose inline `.dv-cm` stylesheet is already mirrored almost verbatim in site.css (lines ~1397-1780), so only two top-level divergences survived verification:

1. `.dv-cm` — full-bleed breakout `width: calc(100vw - 20px); margin-left: calc(-50vw + 50% + 10px)` present in the reference, absent from site.css. This is Elementor's trick to escape its constrained content column; included to match pixel-close, but caveat: in the code-first theme `.dv-cm` is a bare `<section>` (rendered via dv_section()) that may already be full-width — if the page already spans the viewport, this override can be dropped.
2. `.dv-cm__cards` — `margin-bottom: 0` (reference) vs unset (site.css).

Skipped per method (no corresponding theme selector / class not present in the PHP DOM): `.dv-cm__hero-plus`, `.dv-cm-card__quote`, `.dv-cm-card__photo svg`, `.dv-cm__how-subtitle`, and the combined `.dv-cm__how-title, .dv-cm__how-subtitle` media selector — none of these classes appear in sections/career-match-{hero,cards,how,apply}.php. The `@media (max-width:900px)` and `@media (max-width:600px)` blocks already match site.css exactly (the only ref difference there is the how-subtitle selector, which has no DOM). All :root tokens are already used by site.css for these rules; the two ported values are layout calcs/zero with no token equivalent. Reference fetches: post-7.css (kit globals), post-3407.css (3 trivial rules), base-desktop.css (widget base) — none added page-specific values beyond the inline block.
   ============================================================ */
/* Career Match — fidelity overrides ported from Elementor reference
   (http://ams18-fnijwei01.dv.local:8081/career-match/ inline .dv-cm CSS).
   Loaded after site.css; uses the theme's existing selectors. */

/* ── .dv-cm (root) — full-bleed breakout ── */
.dv-cm {
  /* Break out of the content container to match footer width */
  width: calc(100vw - 20px);
  margin-left: calc(-50vw + 50% + 10px);
  /* Prod's HTML widget sits in an Elementor container with padding: 10px 0, which is where
     the page's 10px top inset and 20px of document height come from. */
  padding: 10px 0;
}

/* ── Section 2: event info + cards ── */
.dv-cm__cards {
  margin-bottom: 0;
}


/* ============================================================
   connect
   Ported connect-hero and connect-working from Elementor post-36.css (page ID 36). connect-map skipped per instructions (globe owned by home; also absent from the Elementor reference page).

Elementor-to-theme mapping (verified against reference HTML widget IDs):
- edf1348 -> .connect-hero; 9658698 -> .connect-hero__inner; 408a367 -> .connect-hero__media; 228a8fe -> .connect-hero__panel; f09d006 -> .connect-hero__copy; 5ccb209 -> .connect-hero__title; eae3a48 -> .connect-hero__lede.
- 6a69753 -> .connect-working; 6eff31e -> .connect-working__inner; 99e2523 -> .connect-working__panel; 10bdcdc -> .connect-working__head; ab0fae9 -> .connect-working__title; 4549221 -> .connect-working__subtitle; 6551bd1 -> .connect-working__body; 86afab4 -> .connect-working__body p; 5000d16 -> .connect-working__ctas; 0a1e03b -> .btn--ghost-dark (FAQ); fdf16f4 -> .btn--accent (Careers); 730f770 -> .connect-working__media.

Key ports: hero inner gap 10px->0 (reference has no gutter, children 50/50); hero copy gap 30px, max-width none (title individually capped at 372px); hero title/lede use --fs-h1/--lh-h1 and --fs-body/--lh-body; hero lede color #F6F6F6CC (no token, literal rgba). Working panel background beige->--light-blue (#B1D6EF); section gets min-height 80vh + flex align-items center (vertically centered row) with padding 80px 0; inner gap 0; head gap 0; title+subtitle both 40px/42px (Elementor primary typography) with subtitle capped 455px in rgba(38,20,20,0.6); body gap 24px max-width 545px; body text 18px/20px in rgba(38,20,20,0.6). Buttons overridden scoped under .connect-working__ctas: 14px/16px weight 500, padding 8px 12px, radius 56px; FAQ transparent bg + 1px solid --dark border, hover rgba(68,25,73,0.3)+white; Careers white bg (the PHP's btn--accent is lime globally, overridden to white here to match reference), hover lime+purple. CTAs gap 0 (reference 5000d16 has no gap).

Breakpoints: added @media(max-width:1024px) and (max-width:767px) per Elementor. The theme's existing 860px breakpoint stacks both sections earlier than the reference (767px) and stacks the working section which the reference never stacks; the 1024px/767px blocks override that so hero stacks only at 767px (column-reverse => media below via order:2) and the working section stays two columns at all widths (panel/media drop to 50vh at 767px). Between 860px and 1024px the 1024px block re-asserts two columns and 530px min-heights to match the reference. Hero media/panel min-heights step 78vh -> 60vh (<=1024) -> 30vh/55vh (<=767); hero panel padding steps 24px -> 20px -> 10px 10px 15px.

Gaps/limitations: globe/map section has no Elementor reference (not ported). Button :focus states ported alongside :hover for parity. No animations/transforms exist in the reference for these widgets. Reference uses #26141499 (alpha 0.6) which differs from the --text-muted token (alpha 0.7), so the literal rgba was used to stay pixel-close.
   ============================================================ */
/* connect-hero */
.connect-hero { padding: 10px 10px 0; }
.connect-hero__inner { gap: 10px; border-radius: 0; overflow: visible; }  /* prod separates the photo + magenta panel by 10px */
/* grid items: the default min-width:auto let the panel's min-content push the single
   stacked track 22px past the container at 390 */
.connect-hero__media, .connect-hero__panel { min-width: 0; }
.connect-hero__media {
  min-height: 78vh;
  border-radius: 10px;
  background-color: var(--off-white);
}
.connect-hero__panel {
  min-height: 78vh;
  border-radius: 10px;
  padding: 24px;                         /* prod 228a8fe; the extra 14 was the lede's missing paragraph gap */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
}
.connect-hero__copy { display: flex; flex-direction: column; gap: 30px; max-width: none; }
.connect-hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  margin: 0;
  color: var(--near-white);
  width: 100%;
  max-width: 372px;      /* width:372px forced the cap onto the 350px mobile panel */
}
.connect-hero__lede {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: rgba(246, 246, 246, 0.8);   /* paragraph gap: shared p rule */
}
@media (min-width: 992px) {
  .connect-hero__copy { padding-right: calc((100vw - 1330px)/2); }
}

/* connect-working */
.connect-working {
  padding: 0;   /* prod section IS the 530 card — was min-height:80vh (720) + 80px pad + centering, making it 190px too tall */
}
.connect-working__inner { display: flex; gap: 10px; width: 100%; align-items: stretch; }  /* was grid 1fr 1fr — prod panel is ~42% on wide screens, not 50% */
.connect-working__panel {
  background: var(--light-blue);
  border-radius: 10px;
  padding: 24px;
  min-height: 530px;  /* prod culture card = 530px */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
}
.connect-working__head { display: flex; flex-direction: column; gap: 0; }
.connect-working__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  margin: 0;
  color: var(--dark);
}
.connect-working__subtitle {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  margin: 0;
  color: rgba(38, 20, 20, 0.6);
  width: 455px;
  max-width: 455px;
}
.connect-working__body { display: flex; flex-direction: column; gap: 24px; max-width: 545px; }
.connect-working__body p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: rgba(38, 20, 20, 0.6);
}
.connect-working__ctas { display: flex; flex-wrap: wrap; gap: 10px; }  /* prod: 10px between FAQ and Careers */
.connect-working__ctas .btn {
  font-weight: 500;   /* size/height come from .btn so the shared outlined rule can win */
  padding: 8px 12px;
  border-radius: 56px;
}
.connect-working__ctas .btn--ghost-dark {
  background-color: transparent;
  border: 1px solid var(--dark);
  color: var(--dark);
}
.connect-working__ctas .btn--ghost-dark:hover,
.connect-working__ctas .btn--ghost-dark:focus {
  background-color: rgba(68, 25, 73, 0.3);
  color: var(--white);
}
.connect-working__ctas .btn--accent {
  background: var(--white);
  color: var(--dark);
  border: 0;
}
.connect-working__ctas .btn--accent:hover,
.connect-working__ctas .btn--accent:focus {
  background: var(--lime);
  color: var(--purple);
}
.connect-working__media {
  min-height: 530px;  /* prod culture card = 530px */
  border-radius: 10px;
  /* padding comes from the shared split-row block, which also tracks the 992 gutter */
}

@media (max-width: 1024px) {
  /* connect-hero — tablet */
  .connect-hero__inner { grid-template-columns: 1fr 1fr; }
  .connect-hero__media { min-height: 60vh; order: 0; }
  .connect-hero__panel { min-height: 60vh; padding: 20px; }
  /* connect-working — reference keeps two columns at tablet; reset the theme's 860px stack */
  .connect-working__inner { grid-template-columns: 1fr 1fr; }
  .connect-working__panel { min-height: 530px; padding: 24px; }
  .connect-working__media { min-height: 530px; }
}

@media (max-width: 767px) {
  /* connect-hero — mobile (reference stacks column-reverse) */
  .connect-hero__inner { grid-template-columns: 1fr; }
  .connect-hero__media { min-height: 30vh; order: 2; }
  .connect-hero__panel { min-height: 55vh; padding: 10px 10px 15px; gap: 0; }
  /* connect-working — reference STACKS on phones (text panel above, image below);
     keeping 2 cols here squeezed the 455px subtitle and scrolled the page sideways. */
  .connect-working__inner { flex-direction: column; }
  .connect-working__panel,
  .connect-working__media { flex: none; width: 100%; }  /* stack full-width; drop the desktop flex ratio */
  .connect-working__panel { min-height: 450px; gap: 30px; padding: 30px 15px; min-width: 0; }   /* prod's stacked panels all floor at 450, same as about-working */
  /* Base pins the subtitle to width:455px; on a 390px phone that fixed width forces
     the grid track's auto-minimum to 455 and scrolls the page sideways. Free it. */
  .connect-working__subtitle { width: auto; max-width: 100%; }
  .connect-working__media { min-height: 50vh; padding: 10px; }
}


/* ============================================================
   events
   Ported events page CSS from Elementor reference (post-34.css + kit post-7.css globals) to the theme's existing selectors.

Element ID → theme class mapping used:
- 4e3c2fd → .events-hero__media (50%, min-height 78vh, radius 10, bg image cover, bg-color off-white fallback)
- 1c31742 → .events-hero__panel (50%, min-height 78vh, bg dark, radius 10, padding 24, justify space-between)
- 0c0e5fa → .events-hero__mark (img width 100%, height 380px desktop / 175px mobile, align-self flex-start)
- 6a18d81 → .events-hero__title (color teal, max-width 372px; title pushed to bottom via margin:auto to reproduce the 7d48da5 group sitting at the bottom, since the theme lacks the inner wrapper)
- b87e395 → .events-hero__lede (text-editor 18/20, color teal, 30px gap to title)
- fa97da9 / 4775a6e → .events-list (bg off-white, radius 10, padding 40px 24px)
- 78e2915 → .events-list__title (primary 40/42, purple)
- d607130 / 108a7ea → .events-list__sub (primary 40/42, purple @ 60% = rgba(68,25,73,0.6))
- c1159a7 / 277204b → .events-list .card-grid (margin-top 44px)
- b1c3bbb → .events-cta__panel (55%, min-height 530, bg LAVENDER #8A8BFF not purple, radius 10, padding 24, justify space-between)
- 3326e93 → .events-cta__heading (40/42, near-white #FDFDFD)
- 7a2d30a → .events-cta__subheading (40/42, rgba(246,246,246,0.6), max-width 455px)
- e9b91be → .events-cta__body (text 18/20, rgba(246,246,246,0.8), max-width 545px)
- 641b525 → .events-cta__body-wrap (gap 24px)
- 08d2302 → .events-cta__btn (bg white, color black, radius 56px, padding 8/12; hover bg lime + color purple)
- 440a937 → .events-cta__media (44%, min-height 530, radius 10, bg image cover)

Key fidelity decisions:
- All heading widgets on the reference inherit the kit primary typography (40px/42px desktop, 32px/34px @767) — Elementor sets NO per-element font-size on this page, so section titles, subtitles, hero h1 and the cta h3 subheading are ALL 40px. Ported faithfully via --fs-h1/--lh-h1 (and 32/34 hardcoded at mobile, no matching token).
- The page wrapper (59ef123) 10px outer inset + per-section border-radius 10 (flush between sections) has no single theme selector, so I reproduced the inset via per-section margins: hero margin 10px 10px 0, .events-list margin 0 10px, cta margin 0 10px 10px.
- Hero inner group wrapper (7d48da5, gap 30 between title/lede) does not exist in the theme markup, so I used margin:auto on the title + 30px top margin on the lede to group them at the panel bottom.
- Added a min-width:768 block to keep the hero two-column at 768–1024 (the theme's own @media 860 stacks it; reference stays row until 767).
- event-card: the reference loop-grid widget renders 0 posts on staging and emits no card CSS, so there were no Elementor values to port; I styled .event-card / -__media / -__badge / -__body / -__title / -__date / -__location to match the theme's existing .archive-card pattern using tokens (16/10 aspect, --radius, --fs-xs/--fs-sm, --text-muted) so cards are not unstyled.
- Skipped: page-wrapper padding (no selector), Elementor motion-effects/animation layers (none active), loop-grid internal card layout (no reference data).
- Component CSS files (card-grid.css, cta-band.css) were read but not modified: this page's events-list uses .card-grid only for the grid wrapper (already correct: 3 cols / 1.5rem gap), and events-cta is a page-specific inlined variant of cta-band (not the .cta-band component), so cta-band.css needed no changes.
   ============================================================ */
/* events-hero */
.events-hero {
  display: flex;
  flex-direction: row;
  gap: 10px;                 /* prod separates the media + dark panel by 10px (were flush) */
  align-items: stretch;
  background: transparent;
  margin: 10px 10px 0;
}
.events-hero__media {
  flex: 1 1 50%;
  min-height: 78vh;
  border-radius: 10px;
  background-color: var(--off-white);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.events-hero__panel {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* 1c31742: crosses at the top, the copy group at the bottom */
  align-items: stretch;
  min-height: 78vh;
  padding: 24px;
  background-color: var(--dark);
  border-radius: 10px;
  overflow: hidden;
}
.events-hero__mark {
  align-self: flex-start;   /* prod: crosses hug the panel left at intrinsic width, not full-bleed */
  width: auto;              /* 686x384 SVG at h=380 => ~679px wide, matching prod */
  height: 380px;
  margin: 0;
}
/* 7d48da5: title + lede are one group, 30px apart, pinned to the panel floor */
.events-hero__group {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.events-hero__title {
  margin: 0;
  max-width: 372px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--teal);
}
.events-hero__lede {
  /* paragraph gap from the shared p rule (prod's widget is 74, not 60) */
  max-width: none;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--teal);
}

/* single-event (read-more page) — prod Elementor single-post layout:
   centered meta+title header, full-bleed hero image, off-white body panel.
   NB: WP puts `single` on <body>, and site.css .single{max-width:820px} was
   catching it and boxing the whole page; unbox the body (article-level .single
   rules still apply to single-job's own article). */
body.single { max-width: none; padding: 0; }
.single-event { margin: 0; max-width: none; }
.single-event__head {
  text-align: center;
  padding: 160px 24px 0;
}
.single-event__meta {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--fs-body);
  color: rgba(68, 25, 73, 0.3);          /* purple @30% */
}
.single-event__sep { margin: 0 12px; }
.single-event__title {
  margin: 24px 0 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  color: var(--purple);
}
.single-event__media {
  margin: 90px 10px 0;
  min-height: 80vh;
  border-radius: 10px;
  background-color: var(--off-white);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.single-event__panel {
  margin: 10px 10px 0;
  padding: 80px 24px;
  background: var(--off-white);
  border-radius: 10px;
}
.single-event__inner {
  max-width: 750px;
  margin: 0 auto;
}
.single-event__body-title {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  color: var(--purple);
}
.single-event__body {
  margin: 34px 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--dark);
}
.single-event__body p { margin: 0 0 20px; }
.single-event__body p:last-child { margin-bottom: 0; }
/* single-job: Greenhouse apply iframe centred below the hero (prod ~1330 wide). */
.single-job__form { max-width: 1330px; margin: 40px auto 0; padding: 0 24px; }
.single-job__form iframe { width: 100%; }
@media (max-width: 767px) {
  .single-event__head { padding: 120px 20px 0; }
  .single-event__media { margin: 40px 10px 0; min-height: 50vh; }
  .single-event__panel { padding: 40px 20px; }
  .single-job__form { padding: 0 10px; margin-top: 20px; }
}

/* events-list (upcoming + past) */
.events-list {
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0 10px;
  padding: 40px 24px;
  background-color: var(--off-white);
  border-radius: 10px;
  overflow: hidden;
}
.events-list__head {
  margin: 0 0 0;
  text-align: left;
}
.events-list__title {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--purple);
}
.events-list__sub {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: rgba(68, 25, 73, 0.6);
}
.events-list .card-grid {
  margin-top: 44px;
  gap: 50px;      /* prod leaves 50 between the last card and Load More; the component's 2.5rem left it 10 short */
}
.events-list .card-grid__grid {
  grid-template-columns: repeat(2, 1fr);
  row-gap: 48px;
  column-gap: 30px;
}
/* the loop track is half the section; prod's card caps at 1330 and centres in it,
   which is where the ~79px inset at 3072 comes from (it is gone by 1366) */
.events-list .event-card { width: 100%; max-width: 1330px; margin-inline: auto; }

/* event-card (prod loop template 293: anchor card, image on top, body row
   below — date+title left, "Read more" pill right, bottom-aligned) */
.event-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px;
  min-height: 455px;
  padding: 0;
  background: transparent;
  border-radius: 10px;
}
.event-card__media {
  margin: 0;
}
.event-card__media img {
  width: 100%;
  max-width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 10px;
}
.event-card__body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  row-gap: 5px;
  column-gap: 0;    /* prod's 75/25 pair sits flush; a 5px column gap shrank both by 4 */
  padding: 0;
}
.event-card__main {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  width: 75%;
}
.event-card__meta {          /* 3e1e6f0: date, time and location on one line */
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
}
.event-card__date {
  margin: 0;
  font-size: 14px;
  line-height: 1em;
  color: rgba(68, 25, 73, 0.3);
}
.event-card__title {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--purple);
}
.event-card__more-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 25%;
}
.event-card__more {
  display: inline-block;
  margin: 0;
  padding: 7px 10px;      /* prod's pill is 92x32, not 96x34 */
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 56px;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 500;
  color: var(--dark);
  background: transparent;
  transition: background-color 0.15s ease;
}
.event-card__more:hover,
.event-card:focus-within .event-card__more {
  background-color: var(--lime);
}
a.event-card {
  text-decoration: none;
  color: inherit;
}

/* events-cta */
.events-cta {
  display: flex;
  flex-direction: row;
  gap: 10px;                 /* prod separates the panel + photo by 10px (were flush) */
  align-items: stretch;
  background: transparent;
  margin: 0 10px 10px;
}
/* Split row with no declared ratio, same model as careers-process: both panels are
   width:100% + border-box, so both overflow and the shrink is weighted by each one's
   CONTENT-box basis — the paddings alone decide the split, and the media's right pad is
   the page gutter calc((100vw - 1330px)/2), clamped to 0 under 1330. That bends the
   split from 1275/1767 at 3072 to 874/1016 at 1920, 673/663 at 1366 and 595/575 at
   1200, all of which a fixed percentage got wrong away from the width it was read at. */
.events-cta__panel {
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 530px;
  padding: 24px;
  background-color: var(--lavender);
  border-radius: 10px;
  overflow: hidden;
}
.events-cta__lead {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.events-cta__heading {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--near-white);
}
.events-cta__subheading {
  margin: 0;
  max-width: 455px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: rgba(246, 246, 246, 0.6);
}
.events-cta__body-wrap {
  display: flex;
  flex-direction: column; /* prod: button sits BELOW the body copy, left-aligned (not beside it) */
  align-items: flex-start;
  gap: 24px;
  max-width: none;
}
.events-cta__body {
  flex: 0 0 auto;   /* max-width caps the WIDTH; flex-basis:545px made it a 545px HEIGHT in this column wrap → panel ballooned to 815px. Content-height now (fixes desktop too, not just mobile). */
  display: flow-root;   /* keep the paragraph's own gap inside the box, like prod's widget (134, not 120) */
  max-width: 545px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(246, 246, 246, 0.8);
}
.events-cta__body p {
  line-height: var(--lh-body);
  color: inherit;
}
.events-cta__buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
}
.events-cta__btn {
  align-self: flex-start;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;                 /* f1f8e2f button row is 32 tall */
  padding: 8px 12px;
  border: none;
  border-radius: 56px;
  background-color: var(--white);
  color: var(--dark);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 500;
}
.events-cta__btn:hover,
.events-cta__btn:focus {
  background-color: var(--lime);
  color: var(--purple);
}
.events-cta__media {
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 530px;
  /* prod's padding to the pixel: only the horizontal half shows (background-origin is
     the padding box, so cover still fills), but it is what weighs the shrink above. */
  padding: 10px calc((100vw - 1330px) / 2) 50px 10px;
  border-radius: 10px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

/* Tablet (max-width: 1024px) — reference: cta min-height 450, padding 30;
   body/lede text typography drops to 16px */
@media (max-width: 1024px) {
  .events-hero__lede,
  .events-cta__body {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
  }
  /* tablet is where prod swaps its 41.79/57.89 for a flat 55/44, same as about-working and
     the thank-you hero: 552/442 at 1024, 410/328 at 768 */
  .events-cta__panel {
    flex-basis: 55%;
    min-height: 450px;
    padding: 30px;
    gap: 10px;                /* the floor that keeps the panel at 510 once 768 shortens it */
  }
  .events-cta__media {
    flex-basis: 44%;
    min-height: 450px;
    padding: 10px;
  }
  .event-card__date {
    font-size: 16px;
    line-height: 14px;      /* prod's date row stays 14 tall at 16px, so the card is 463 not 465 */
  }
  .events-list .card-grid__grid {
    grid-template-columns: 1fr;
  }
}

/* Keep hero two-column between 768–1024 (theme stacks at 860; reference
   stays row until 767) */
@media (min-width: 768px) {
  .events-hero {
    flex-direction: row;
  }
  .events-hero__media,
  .events-hero__panel {
    min-height: 78vh;
  }
}

/* Wide-screen right gutter (prod custom CSS on 7d48da5 + 440a937):
   insets the hero copy and the cta photo from the right so content aligns
   to the 1330px column. Negative calc clamps to 0 (padding can't be <0). */
@media (min-width: 992px) {
  .events-hero__group {
    padding-right: calc((100vw - 1330px) / 2);
  }
  .events-cta__media {
    padding-right: calc((100vw - 1330px) / 2);
  }
}

/* Mobile (max-width: 767px) — reference column-reverse hero, 30vh media,
   55vh panel, mark 175px; list padding 40px 10px; cta 50vh / 40vh */
@media (max-width: 767px) {
  .events-hero {
    flex-direction: column-reverse;
  }
  .events-hero__media {
    min-height: 30vh;
  }
  .events-hero__panel {
    min-height: 55vh;
    padding: 10px 10px 15px;
  }
  .events-hero__mark {
    height: 175px;
  }
  .events-hero__title,
  .events-list__title,
  .events-list__sub,
  .events-cta__heading,
  .events-cta__subheading {
    font-size: 32px;
    line-height: 34px;
  }
  .events-list {
    padding: 40px 10px;
  }
  .events-cta {
    flex-direction: column;   /* prod @mobile: panel stacks above the photo (was row → narrow panel, tall, space-between spread the button ~370px off) */
  }
  .events-cta__panel,
  .events-cta__media {
    width: 100%;
  }
  .events-cta__panel {
    flex: 0 0 auto;    /* column now: was flex 1 1 55% → grew vertically, and space-between spread the button off */
    min-height: 450px; /* prod's stacked panel floors at 450, as on about-us, connect and careers */
    padding: 30px 15px;
    gap: 30px;
  }
  .events-cta__body {
    flex: 0 0 auto;    /* base flex-basis:545px is a WIDTH cap, but body-wrap is column so basis became a 545px HEIGHT, leaving ~370px empty lavender above the button. Collapse to text height. */
  }
  .events-cta__media {
    flex: 0 0 auto;
    min-height: 40vh;
  }
  .event-card {
    min-height: 350px;
  }
  .event-card__media img {
    height: 250px;
  }
  .event-card__body {
    flex-direction: column;   /* prod @mobile: Read more stacks below the title */
    align-items: flex-start;
    gap: 15px;
  }
  .event-card__main {
    width: 100%;
    gap: 10px;
  }
  .event-card__meta {         /* 3e1e6f0 @767: the three bits stack, 5px apart */
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .event-card__date {
    font-size: 14px;
    line-height: 1em;
  }
  .event-card__more-wrap {
    width: auto;
    align-items: flex-start;
  }
}


/* ============================================================
   faq
   Ported FAQ page (hero + list + accordion) to fidelity.css using the theme's existing selectors.

Hero (.faq-hero/.inner-hero__inner/__copy/__media/__title): Reference renders the hero as a rounded (10px) band with a purple gradient webp background, min-height 50vh, padding 24px, flex row, space-between, align-items flex-end. Mapped outer .faq-hero.inner-hero to the 10px-padded wrapper (transparent bg) and .inner-hero__inner to the gradient band (bg image url DaVinci_Gradient_RGB-2-scaled-1.webp, used production davincitrading.com URL matching the gif already in faq-hero.php). Copy column 45% / media 55% (50/50 at 1024-768), media img width 100% / height 40vh / object-fit contain / object-position bottom center. Title overridden from clamp to --fs-h1/--lh-h1 (40/42), weight 400, white.

FAQ list (.faq-list): off-white (#F3F3F3 -> --off-white) bg, min-height 85vh, padding 100px 0, border-radius 10px (corners only visible if section is inset; harmless on full-bleed). Breakpoints: 40px 20px at 1024, min-height 58vh + 12px at 767.

Accordion (.accordion--faq): width/max-width 900px centered. Closed items: white (--white) bg, no border, radius 10px, overflow hidden, head padding 28px, title 1rem/400, color --dark (#000). Open head: gradient linear-gradient(104deg,#5755C6 15%,#977AC3 88%), white text. Body: padding 30px, same gradient bg, text color #F6F6F699 (rgba(246,246,246,0.6) — no token, kept literal), font-size --fs-body/--lh-body (18/20), margin-top -10px on open to seam the gradient. Plus icon hidden (reference icon color is transparent #02010100 -> no visible toggle; open state indicated by gradient). Body font-size drops to --fs-sm (16) at 1024 and 767 per the reference text-editor breakpoint. Title drops to 32/34 at 767 (primary typography mobile; no token, literal).

Skipped: Elementor micro-vars with no theme selector (e-n-accordion item-title-space-between, container-widget-* internal flex vars, the inner 8429b02 wrapper row which just contains the centered accordion). The hero wrapper's 10px outer padding is applied to .faq-hero.inner-hero; the band itself is .inner-hero__inner since that is the theme's container element. accordion.css was not modified (kept generic for digital-assets/home) — all faq-specific overrides live in fidelity.css scoped under .accordion--faq.
   ============================================================ */
/* faq-hero — ref 067382b (e-con-full, padding 10px) > 68bb05a (min-height 50vh, row,
   space-between, align-items flex-end, padding 24px, radius 10px, gradient webp bg). */
.faq-hero.inner-hero {
	background: transparent;
	padding: 10px 10px 0;
}
.faq-hero .inner-hero__inner {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	gap: 10px;                       /* 68bb05a --gap:10px */
	max-width: none;                 /* ref 68bb05a full-bleed (e-con-full, no 1330 box cap) */
	min-height: 50vh;
	padding: 24px;
	border-radius: 10px;
	background-image: url("/wp-content/themes/davinci/assets/seed/2025/02/DaVinci_Gradient_RGB-2-scaled.webp");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.faq-hero .inner-hero__copy {
	max-width: none;
	display: flex;
	flex-direction: column;
	row-gap: 30px;                   /* ref 77204b0 --gap 30px 0px */
	flex: 0 0 calc(45% - 5px);       /* 45/55 of what is left after the 10px gap */
}
.faq-hero .inner-hero__media {
	flex: 0 0 calc(55% - 5px);
	display: flex;
	justify-content: flex-end;
}
.faq-hero .inner-hero__media img {
	max-width: none;
	width: 100%;
	height: 40vh;
	object-fit: contain;
	object-position: bottom center;
}
.faq-hero .inner-hero__title {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: 400;
	color: var(--white);
}
/* no lede on this hero, and the row is bottom-aligned, so the title's gap to a
   lede that is not there lifts it off the floor */
.inner-hero__title:last-child { margin-bottom: 0; }

/* faq-list — ref 5d5e5ff (min-height 85vh, padding 100px/10px, radius 10px, bg #F3F3F3)
   inside 067382b padding 10px -> inset 10px. */
.faq-list {
	background-color: var(--off-white);
	min-height: 85vh;
	margin: 0 10px;                  /* ref 067382b --padding-left/right 10px (inset) */
	padding: 100px 10px;             /* ref 5d5e5ff --padding 100px/10px */
	border-radius: 10px;
}

/* faq accordion — ref d1df9c2 (title 1rem, padding 28px, radius 10px, item gap 15px,
   title-normal #000 / title-active #FFF, icon 28px, icon-order initial = right). */
.accordion--faq {
	max-width: 900px;
	margin: 0 auto;
}
.accordion--faq .accordion__item {
	background: var(--white);
	border: none;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 15px;             /* ref --n-accordion-item-title-space-between 15px */
}
.accordion--faq .accordion__item:last-child { margin-bottom: 0; }
.accordion--faq .accordion__head {
	display: flex;
	flex-direction: row-reverse;     /* DOM plus-first -> renders right (ref icon-order initial) */
	align-items: center;
	gap: 10px;                       /* ref --n-accordion-icon-gap 0 10px */
	padding: 28px;                   /* ref --n-accordion-padding 28px */
	color: var(--dark);              /* ref title-normal-color #000 */
	font-size: 1rem;                 /* ref --n-accordion-title-font-size 1rem */
	font-weight: 400;
	background-color: var(--white);
}
.accordion--faq .accordion__title { flex-grow: 1; }  /* ref title-flex-grow 1 -> icon far right */
.accordion--faq .accordion__item[open] .accordion__head {
	background-color: transparent;
	background-image: linear-gradient(104deg, var(--indigo) 15%, var(--lavender-2) 88%);
	color: var(--white);             /* ref title-active-color #FFFFFF */
}

/* Icon: CLOSED = plus-in-circle 28x28; OPEN = 4-plusses row 90x28 (ref inline SVGs).
   Same closed SVG as .accordion--roles. #02010100 icon-color var = no CSS tint; SVG fills show. */
.accordion--faq .accordion__plus {
	position: relative;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%20fill='none'%3E%3Crect%20x='0.5'%20y='0.5'%20width='27'%20height='27'%20rx='13.5'%20stroke='%23261414'%20stroke-opacity='0.2'/%3E%3Cpath%20d='M13.5%2013.5V10.5H14.5V13.5H17.5V14.5H14.5V17.5H13.5V14.5H10.5V13.5H13.5Z'%20fill='black'/%3E%3C/svg%3E") center / 28px 28px no-repeat;
}
.accordion--faq .accordion__plus::before,
.accordion--faq .accordion__plus::after { content: none; }
.accordion--faq .accordion__item[open] .accordion__plus {
	flex: 0 0 90px;
	width: 90px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='90'%20height='28'%20viewBox='0%200%2090%2028'%20fill='none'%3E%3Cpath%20d='M87.076%2012.6474H89.9999V14.6571H87.076V17.6747H85.1286V14.6571H82.2047V12.6474H85.1286V9.62988H87.076V12.6474Z'%20fill='%23F6F6F6'%3E%3C/path%3E%3Cpath%20d='M59.5516%2012.7254H62.2488V14.5792H59.5516V17.3627H57.7554V14.5792H55.0582V12.7254H57.7554V9.94181H59.5516V12.7254Z'%20fill='%23F6F6F6'%3E%3C/path%3E%3Cpath%20d='M32.0272%2012.8034H34.4978V14.5012H32.0272V17.0448H30.3822V14.5012H27.9175V12.8034H30.3822V10.2538H32.0272V12.8034Z'%20fill='%23F6F6F6'%3E%3C/path%3E%3Cpath%20d='M4.50293%2012.8814H6.74091V14.4232H4.50293V16.7328H3.009V14.4232H0.770996V12.8814H3.009V10.5657H4.50293V12.8814Z'%20fill='%23F6F6F6'%3E%3C/path%3E%3C/svg%3E") center / 90px 28px no-repeat;
}

.accordion--faq .accordion__body {
	padding: 30px;                   /* ref content padding 30px */
	margin: 0;
	max-width: none;
	color: rgba(246, 246, 246, 0.6);  /* ref content text #F6F6F699 (no kit token) */
	font-size: var(--fs-body);        /* ref text typography 18/20 */
	line-height: var(--lh-body);
	background-color: transparent;
	background-image: linear-gradient(104deg, var(--indigo) 15%, var(--lavender-2) 88%);
}
.accordion--faq .accordion__item[open] .accordion__body {
	margin-top: -10px;                /* ref content margin-top -10px seam */
}
/* prod keeps the shared 0.9rem paragraph gap in this accordion (unlike the
   internship one, where its text widget cancels it with a -15px margin) */
.accordion--faq .accordion__body p { margin: 0 0 0.9rem; }
.accordion--faq .accordion__body a {
	color: inherit;                   /* ref text-editor sets no link color -> inherits #F6F6F699 */
	text-decoration: underline;
}
.accordion--faq .accordion__body ul {
	margin: 0.5em 0;
	padding-left: 1.25em;
}
.accordion--faq .accordion__body li { margin-bottom: 0.35em; }
.accordion--faq .accordion__body p:first-child { margin-top: 0; }

@media (max-width: 1024px) and (min-width: 768px) {
	/* minus the gap, like the 45/55 base: a flat 50% overflows the band by 10 */
	.faq-hero .inner-hero__copy { flex-basis: calc(50% - 5px); }
	.faq-hero .inner-hero__media { flex-basis: calc(50% - 5px); order: 0; }   /* the component flips the gif above the copy under 860; prod keeps it right until 767 */
}

@media (max-width: 1024px) {
	.faq-hero .inner-hero__inner { padding: 24px; }
	.faq-hero .inner-hero__media img { height: 200px; }
	.faq-list { padding: 40px 20px; }
	.faq-list .container { padding: 0; }   /* prod's accordion fills the band once 900px stops being the cap */
	.accordion--faq .accordion__body { font-size: var(--fs-sm); line-height: var(--lh-body); }
}

@media (max-width: 767px) {
	.faq-hero .inner-hero__inner {
		min-height: 55vh;
		flex-direction: column-reverse;
		justify-content: flex-start;
		gap: 0;
		padding: 10px 10px 15px;
	}
	.faq-hero .inner-hero__copy { flex-basis: auto; width: 100%; }
	.faq-hero .inner-hero__media { display: none; }  /* ref 612760b elementor-hidden-mobile */
	.faq-hero .inner-hero__title { font-size: 32px; line-height: 34px; }  /* ref primary @767 */
	.faq-list { min-height: 58vh; padding: 12px 0; }   /* prod's band pads 12px above the first item and below the last */
	.faq-list .container { padding: 0 12px; }     /* prod's item sits 12px inside the frame, not 34 */
	.accordion--faq .accordion__body { font-size: var(--fs-sm); line-height: var(--lh-body); }
}


/* ============================================================
   internship-signup
   Ported from Elementor post-3338.css (page id 3338) + kit post-7.css global tokens. Mapped: hero copy panel a4eaf27 (bg --dark, min-height 80vh, padding 124px/24px, radius 10px), hero title 376aed4 + lede 0da9461 (primary typography 40/42, text-editor 18/20, both 450px wide, white), hero photo a827c10 (min-height 78vh, radius 10px); program photo 6b59d81 (85vh) + panel 2bfed3e (bg off-white #F3F3F3 — NOT purple as theme had, radius 10px, padding 40/24), program title 6e47cd6 (700px, color purple, 40/42), program lede 2a20aee (18/20, color dark, 700px); accordion 15407aa (700px, item title padding 28px, title font 1rem, normal color black / open color white, open + body bg linear-gradient(104deg,#5755C6 15%,#977AC3 88%), body padding 30px margin-top -10px radius 0/0/10/10, body text color rgba(246,246,246,.6)); story panel f771f78 (bg light-blue #B1D6EF — NOT beige, min-height 430px, padding 32/30/32/24, radius 10px), story title d399250 (40/42 black), story text 14e84aa (545px, 18/20, color rgba(38,20,20,.6)), story button 7eeceff (bg white, color black, radius 56px, padding 8/12, font 14/16 weight 500; hover bg lime, color purple), story photo 8262f30 (min-height 430px, radius 10px). Section min-heights reset to 0 so panel min-heights drive height (grid stretch). Breakpoints 1024 and 767 ported. Skipped: Elementor parent overflow width 116.866% (would cause horizontal scroll; theme stays full-bleed grid), duplicate second accordion widget d8cd52e (theme renders single 3-item accordion), per-widget margin-top 63px on hero title at 1024 (no theme selector; minor). Token reuse: --dark/--white/--off-white/--light-blue/--purple/--lime/--fs-h1/--lh-h1/--fs-body/--lh-body/--fs-sm/--lh-sm/--fs-xs/--lh-xs. Non-token literals kept: gradient #5755C6→#977AC3, rgba(246,246,246,.6) accordion body text, rgba(38,20,20,.6) story text (theme --text-muted is .7, Elementor is .6). No new class names invented. No 404s (post-3338.css, post-7.css, base-desktop.css all fetched OK).
   ============================================================ */
/* ==========================================================================
   internship-signup — fidelity overrides ported from Elementor post-3338.css
   (reference: http://ams18-fnijwei01.dv.local:8081/internship-signup/).
   Uses the theme's existing .dv-isu-* selectors; loaded after site.css.
   ========================================================================== */

/* ---- Hero section layout ---- */
.dv-isu-hero { min-height: 0; padding: 10px 10px 0; }   /* first section: the frame is padding, not margin */
.dv-isu-hero__panel {
	background: var(--dark);
	color: var(--white);
	min-height: 80vh;
	border-radius: 10px;
	justify-content: space-between;
	align-items: stretch;
	padding: 124px 24px 24px 24px;
}
.dv-isu-hero__inner { display: flex; flex-direction: column; gap: 30px; }
.dv-isu-hero__title {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--white);
	margin: 0;
	max-width: 450px;
}
.dv-isu-hero__lede {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--white);
	margin: 0;
	max-width: 450px;
}
.dv-isu-hero__photo {
	min-height: 78vh;
	border-radius: 10px;
	background-color: var(--off-white);
	background-size: cover;
	background-position: center;
}

/* ---- Program (8-week) section ---- */
/* flex, not the grid site.css gives it: the photo pads 24 and the panel 20, so prod's
   shrink lands on 371/367 at 768 where equal tracks give 369/369. The hero and story rows
   do pad symmetrically, so they stay grids. */
.dv-isu-program { min-height: 0; display: flex; flex-direction: row; }
.dv-isu-program__photo {
	min-height: 85vh;
	border-radius: 10px;
	background-size: cover;
	background-position: center;
}
.dv-isu-program__panel {
	background: var(--off-white);
	color: var(--dark);
	min-height: 85vh;
	border-radius: 10px;
	justify-content: center;
	align-items: center;       /* 2bfed3e centres the copy block in the panel */
	padding: 40px 24px;
}
/* prod's 2bfed3e stacks three widgets with a 10px container gap */
.dv-isu-program__inner { display: flex; flex-direction: column; gap: 10px; max-width: 700px; }
.dv-isu-program__title {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--purple);
	margin: 0 0 25px;
	max-width: 700px;
}
.dv-isu-program__lede {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--dark);
	padding-bottom: 17px;    /* 2a20aee; the gap itself is the shared p rule */
	max-width: 700px;
}

/* Accordion: internship variant — ported from Elementor n-accordion (15407aa). */
.accordion--internship { display: flex; flex-direction: column; gap: 15px; max-width: 700px; }
.accordion--internship .accordion__item {
	background: var(--white);
	color: var(--dark);
	border: 0;
	border-radius: 10px;
	overflow: hidden;
	transition: background 0.2s, color 0.2s;
}
.accordion--internship .accordion__item:hover {
	background: var(--white);
	color: var(--dark);
}
.accordion--internship .accordion__item[open] {
	background: linear-gradient(104deg, #5755C6 15%, #977AC3 88%);
	color: var(--white);
}
.accordion--internship .accordion__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 28px;
	cursor: pointer;
	list-style: none;
}
.accordion--internship .accordion__head::-webkit-details-marker { display: none; }
.accordion--internship .accordion__title {
	font-size: var(--fs-sm);
	line-height: 24px;               /* prod title 16/24 (not --lh-sm 18) */
	font-weight: 400;
	flex: 1;
	color: var(--dark);
}
.accordion--internship .accordion__item[open] .accordion__title { color: var(--white); }
/* Toggle: same inline-SVG icons as .accordion--faq (prod) — CLOSED = thin '+' in a
   light-gray circle (28x28); OPEN = 4-plus row (90x28) in #F6F6F6 on the gradient. */
.accordion--internship .accordion__plus {
	position: relative;
	order: 2;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%20fill='none'%3E%3Crect%20x='0.5'%20y='0.5'%20width='27'%20height='27'%20rx='13.5'%20stroke='%23261414'%20stroke-opacity='0.2'/%3E%3Cpath%20d='M13.5%2013.5V10.5H14.5V13.5H17.5V14.5H14.5V17.5H13.5V14.5H10.5V13.5H13.5Z'%20fill='black'/%3E%3C/svg%3E") center / 28px 28px no-repeat;
}
.accordion--internship .accordion__plus::before,
.accordion--internship .accordion__plus::after { content: none; }
/* Open state: prod tiles pluses across a fixed 364px strip (same as .accordion--cards),
   so below ~1330 the strip squeezes the question rather than shrinking itself. */
.accordion--internship .accordion__item[open] .accordion__plus {
	flex: 0 0 364px;
	width: 364px;
	margin-left: 0;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='27'%20height='28'%20viewBox='0%200%2027%2028'%20fill='none'%3E%3Cpath%20transform='translate(9.75,0.35)'%20d='M4.50293%2012.8814H6.74091V14.4232H4.50293V16.7328H3.009V14.4232H0.770996V12.8814H3.009V10.5657H4.50293V12.8814Z'%20fill='%23F6F6F6'/%3E%3C/svg%3E") left center / 27px 28px repeat-x;
}
.accordion--internship .accordion__body {
	padding: 30px;
	margin-top: -10px;
	background: linear-gradient(104deg, #5755C6 15%, #977AC3 88%);
	color: rgba(246, 246, 246, 0.6);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	border-radius: 0 0 10px 10px;
	max-width: none;                 /* the 700px accordion already sets the measure */
}

/* ---- Our Story section ---- */
.dv-isu-story { min-height: 0; }
.dv-isu-story__panel {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background: var(--light-blue);
	color: var(--dark);
	min-height: 430px;
	border-radius: 10px;
	justify-content: space-between;
	padding: 32px 30px 32px 24px;
}
.dv-isu-story__body {
	max-width: 545px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}
.dv-isu-story__title {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--dark);
	margin: 0;
}
.dv-isu-story__text {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: rgba(38, 20, 20, 0.6);
	max-width: 545px;
}
.dv-isu-story__btn {
	background: var(--white);
	color: var(--dark);
	border-radius: 56px;
	padding: 8px 12px;
	font-family: inherit;
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	font-weight: 500;
	border: 0;
	align-self: flex-start;
	transition: background 0.2s, color 0.2s;
}
.dv-isu-story__btn:hover,
.dv-isu-story__btn:focus {
	background: var(--lime);
	color: var(--purple);
}
.dv-isu-story__photo {
	min-height: 430px;
	border-radius: 10px;
	background-size: cover;
	background-position: center;
}

/* ---- Responsive: tablet (<=1024px) ---- */
@media (max-width: 1024px) {
	.dv-isu-hero__panel { padding: 24px; }
	.dv-isu-program__panel { padding: 20px; }
	.dv-isu-program__lede { font-size: var(--fs-sm); }
	.dv-isu-story__panel { min-height: 350px; padding: 30px; }
	.dv-isu-story__photo { min-height: 350px; }
	/* prod stops tiling the pluses here and holds the icon at 90, which is what keeps the
	   open question on one line (it wrapped and took the item 21px taller) */
	.accordion--internship .accordion__item[open] .accordion__plus {
		flex: 0 0 90px;
		width: 90px;
		margin-left: auto;
	}
}

/* ---- Responsive: mobile (<=767px) ---- */
@media (max-width: 767px) {
	.dv-isu-program { flex-direction: column; }
	.dv-isu-hero__panel {
		min-height: 55vh;
		padding: 47px 10px 15px 10px;
	}
	/* prod top-aligns the copy and pushes it clear of the nav with a 63px title margin (376aed4) */
	.dv-isu-hero__inner { padding: 4px; justify-content: flex-start; }
	.dv-isu-hero__title { margin-top: 63px; }
	.dv-isu-hero__photo { min-height: 58vh; }
	.dv-isu-program__photo {
		min-height: 55vh;
		padding: 10px 10px 15px 10px;
	}
	.dv-isu-program__panel {
		min-height: 58vh;
		padding: 20px 12px;
	}
	.dv-isu-program__lede { font-size: var(--fs-sm); }
	/* stacked, prod's copy column fills the padded panel (723 at 767) instead of the 700 cap */
	.dv-isu-program__inner,
	.accordion--internship { max-width: none; }
	.accordion--internship .accordion__head { padding: 20px; }
	.accordion--internship .accordion__body { padding: 20px; }
	.dv-isu-story__panel {
		min-height: 40vh;
		padding: 30px 15px;
	}
	.dv-isu-story__photo {
		min-height: 40vh;
		padding: 10px;
	}
	.dv-isu-story__btn { margin-bottom: 14px; }
}


/* ============================================================
   newsletter
   The .dv-nl block in site.css (lines 241-486) is already a verbatim port of the reference's inline widget style — spot-checked hero padding/radius, hero-sub, card padding, and all three breakpoints (1024/820/640); they match, so no content-level rules were emitted.

Only clear mismatches found were at the Elementor page-wrapper layer (post-3535.css), which the code-first theme does not render (dv_section() drops .dv-nl straight into <main>):
1. Reference wraps the HTML widget in container e8da183 with padding:9px (all sides), margin:0, e-con-full/e-flex. Without it the .dv-nl__hero (border-radius:10px) is full-bleed and its side corners are clipped. Added margin/padding to .dv-nl to inset the rounded card 9px.
2. After the hero container, reference renders a boxed container with a widget-spacer of --spacer-size:50px before the footer. Added 50px bottom margin on .dv-nl to restore that gap.

Both reference values apply at all breakpoints (no media overrides in post-3535.css or base-desktop.css), so no @media rules emitted. box-sizing:border-box (already reset on .dv-nl *) keeps width:100% stable with the new padding. No new selectors invented.
   ============================================================ */
/* Newsletter page — Elementor page-wrapper insets + post-hero spacer
   (container e8da183 padding:9px / margin:0, and the 50px spacer widget below the hero) */
.dv-nl {
  margin: 0 0 90px;   /* prod: 10px gap, a 70px spacer band, then the footer's own 20 */
  padding: 9px;
}

/* ============================================================
   thank-you
   Ported from Elementor post-1890.css + kit post-7.css (global typography/color vars) + hello-elementor reset for heading defaults. PHP renders only the copy block (.dv-ty__copy); no media block, so layout/stacking breakpoints left untouched.

Fixed mismatches:
- .dv-ty__copy background: purple -> lavender (var(--lavender)). Elementor sets the copy container bg to --e-global-color-accent (#8a8bff), not secondary/purple.
- .dv-ty__title: was clamp(2rem,4vw,3rem)/1.1/beige; reference uses primary typography 40px/42px/weight 400, color #FDFDFD (near-white).
- .dv-ty__subtitle: was clamp + lime; reference ALSO uses primary typography (40px/42px/400) via the page-level .elementor-widget-heading .elementor-heading-title rule, color #F6F6F699 (no token), max-width 455px (already present), margin-top 0 (.elementor-heading-title{margin:0}).
- .dv-ty__lede: was beige+opacity 0.85/1rem/1.6; reference text-editor uses text typography 18px/20px/400, color #F6F6F6CC.
- .dv-ty__btn: site.css only set radius/padding and relied on .btn--accent (lime bg). Reference button = white bg / dark text, 14px/16px/weight 500, radius 56px, padding 8px 12px; :hover/:focus = lime bg / purple text.

Responsive: kit drops primary to 32/34 at max-767 and text to 16px at max-1024 (line-height stays 20px). Added those two overrides only.

Gaps: #F6F6F699 and #F6F6F6CC have no matching :root token, so hardcoded as 8-digit hex. Did not port font-family (theme already loads Porteron globally). Did not touch existing layout breakpoints (991/768) since the code-first omits the image block and its full-width-on-mobile adaptation is correct.
   ============================================================ */
/* Thank-you hero — fidelity fixes ported from Elementor post-1890/post-7 */

/* Copy block backdrop: Elementor accent (#8a8bff) — was purple */
.dv-ty__copy {
  background: var(--lavender);
}

/* Title — primary typography 40/42/400, near-white */
.dv-ty__title {
  color: var(--near-white);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  margin: 0;             /* prod heading margin:0; base h1 rule's 0.5em added a 20px gap to the subtitle */
}

/* Subtitle — also primary typography 40/42/400, translucent off-white */
.dv-ty__subtitle {
  margin: 0;              /* prod's .elementor-heading-title; the h3 0.5em gap added 16px to the stacked copy */
  color: #f6f6f699;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
}

/* Lede — text typography 18/20/400, translucent off-white */
.dv-ty__lede {
  color: #f6f6f6cc;
  opacity: 1;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
}

/* CTA button — white bg / dark text, lime / purple on hover */
.dv-ty__btn {
  background-color: var(--white);
  color: var(--dark);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 500;
  border-radius: 56px;
  padding: 8px 12px;
}
.dv-ty__btn:hover,
.dv-ty__btn:focus {
  background-color: var(--lime);
  color: var(--purple);
}

/* Mobile (<=767): primary typography drops to 32/34 */
@media (max-width: 767px) {
  .dv-ty__title,
  .dv-ty__subtitle {
    font-size: 32px;
    line-height: 34px;
  }
}

/* <=1024: text typography drops to 16px */
@media (max-width: 1024px) {
  .dv-ty__lede {
    font-size: var(--fs-sm);
  }
}

/* ============================================================
   tradfi
   Ported CSS for the tradfi page (hero, instruments, options) from Elementor reference post-2770.css + kit post-7.css, using the theme's existing selectors so rules override by source order.

Reference global tokens resolved from post-7.css: primary=#FFFFFF, secondary=#441949 (purple), text=#000000, accent=#8A8BFF; hashed colors 311f85b=#F3F3F3, 4a4a5f2=#FDFDFD, 6261f15=#44144999→rgba(68,25,73,.6), 4c7315c=#26141499→rgba(38,20,20,.6), ebb8c9a=#B1D6EF (light-blue). Mapped to :root vars (--purple, --white, --near-white, --light-blue, --dark, --fs-h1 40/42, --fs-body 18/20, --fs-sm 16/18).

Values ported per section:
- Hero offices: white card bg, 10px radius, 24px padding, 30px gap, space-between/center; hover bg purple; code 40/42 purple, city 16/18 purple-60%. Grid 3 cols, 20px gap, 70% width (90% at 768-1024, 100% at 767).
- Instruments: purple bg cards, 2px purple border, 10px radius, 24px padding, 50px gap, min-height 300px @1024; title 40/42 white, body 18/20 near-white, text-align center. Grid 3 cols, column-gap 10px; 1 col @767.
- Options: 2-col row, 530px min-height, 10px radius; copy bg light-blue, padding 40px 30px 40px 40px; title 40/42 dark; body 18/20 rgba(38,20,20,.6), max-width 640px, 24px paragraph gap.

Structural gap (could not be resolved via CSS alone): the reference renders the hero as a 75vh image band (0c4ab1b, empty) with the title/lede/offices on a SEPARATE off-white panel (0c6fd01/c1d1542) below it, using purple title text and purple-60% lede text. The theme's tradfi-hero PHP overlays the content on the purple image overlay instead, so the title/lede were kept white (--white) for readability over the dark overlay rather than the reference's purple/purple-60%. Office cards, instruments, and options sections had no such conflict and match the reference colors exactly.

Skipped (no matching theme selector or theme-equivalent already correct): the reference's 10px left/right border on 0c4ab1b, the negative -15px bottom margins on office-city/instrument body text widgets, and the off-white panel background (0c6fd01) since the theme has no separate content-panel wrapper inside the hero.
   ============================================================ */
/* tradfi-hero — maps to ref 0c4ab1b (image band) + 0c6fd01/c1d1542 (content panel) */
.tradfi-hero {
  margin: 10px 10px 0;
}
.tradfi-hero__bg {
  min-height: 75vh;
  border-radius: 10px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  margin-bottom: 10px;                   /* prod: 10px body gap between image band and content panel */
}
.tradfi-hero__panel {
  background: var(--off-white);
  border-radius: 10px;
}
.tradfi-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 24px;
  text-align: center;
  max-width: none;
  width: 100%;
}
.tradfi-hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  text-align: center;
  width: 100%; max-width: 730px;         /* prod renders a 730px centred block, not a shrink-to-fit line */
  margin: 0 0 34px;                      /* prod h1->lede gap 34px */
  color: var(--purple);
}
.tradfi-hero__lede {
  max-width: 645px;
  margin: 0 auto;
  text-align: center;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(68, 25, 73, 0.6);
}
/* paragraph gap comes from the shared p rule in site.css (0.9rem, prod parity) */

/* tradfi-hero offices — maps to ref 38294c2 grid + 3d6cdd5 cards */
.tradfi-hero__offices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 70%;
  margin: 30px auto 0;                   /* prod: lede's 0.9rem gap + 30px lands the cards at y1010 */
  padding: 0;
  list-style: none;
}
.tradfi-hero__office {
  background: var(--white);
  border: none;
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  min-width: 0;
}
.tradfi-hero__office:hover {
  background: var(--purple);
}
.tradfi-hero__office:hover .tradfi-hero__office-code,
.tradfi-hero__office:hover .tradfi-hero__office-city {
  color: var(--lime);
}
.tradfi-hero__office-code {
  display: inline;
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--purple);
}
.tradfi-hero__office-city {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 400;
  color: rgba(68, 25, 73, 0.6);
}

/* tradfi-instruments — maps to ref 21d94de grid + 92a2269 cards */
.tradfi-instruments {
  padding: 0;                        /* the global #main>section frame already insets 10px; padding here double-inset the cards (x20 vs prod x10) */
  background: transparent;
}
.tradfi-instruments__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 10px;
  padding: 0;
  margin: 0;
}
.tradfi-instruments__card {
  background: var(--purple);
  border: 2px solid var(--purple);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
}
.tradfi-instruments__card:hover {
  background: var(--white);
  border-color: var(--lime);
}
.tradfi-instruments__card:hover .tradfi-instruments__title,
.tradfi-instruments__card:hover .tradfi-instruments__body {
  color: var(--purple);
}
.tradfi-instruments__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  margin: 0;
  text-align: center;
  color: var(--white);
}
.tradfi-instruments__body {
  /* Elementor cancels the widget's trailing paragraph gap with -15px, overshooting
     it by 0.6px, so prod's card lands on 185.4 rather than 186 and the column of
     three comes out 2px shorter. */
  margin: 0 0 calc(0.9rem - 15px);
  text-align: center;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--near-white);
}

/* tradfi-options — maps to ref e389b33 row (444a7ca media + f7d5553 copy) */
.tradfi-options {
  padding: 0;                        /* the section already carries a 10px margin; extra 10px padding double-inset the row (x20 vs prod x10) */
  background: transparent;
}
.tradfi-options__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: 10px;
  overflow: hidden;
  min-height: 530px;
  gap: 10px;                         /* prod separates the image + panel by 10px (was fused flush) */
}
.tradfi-options__media {
  position: relative;                /* positioning context for the absolute img below */
  min-height: 530px;
  border-radius: 10px;
  overflow: hidden;
}
.tradfi-options__media img {
  position: absolute;                /* out of flow: img fills the card but never drives row height (was ballooning to 1011px on wide screens) */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tradfi-options__copy {
  background: var(--light-blue);
  border-radius: 10px;
  padding: 40px 30px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
}
.tradfi-options__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  margin: 0;
  color: var(--dark);
}
.tradfi-options__body {
  margin: 0;
  max-width: 640px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(38, 20, 20, 0.6);
}
/* paragraph gap comes from the shared p rule in site.css (0.9rem, prod parity) */

@media (max-width: 1024px) {
  .tradfi-hero__office { min-height: 150px; }
  .tradfi-instruments__card { min-height: 300px; gap: 30px; padding: 20px; }
  .tradfi-instruments__body { font-size: 16px; line-height: 1.2em; }
  .tradfi-options__copy { padding: 30px; }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .tradfi-hero__offices { width: 90%; }
}

@media (min-width: 768px) {
  .tradfi-hero__offices { width: 70%; }
}

@media (max-width: 767px) {
  .tradfi-hero__bg { min-height: 60vh; }   /* prod's mobile image band is 60vh (540 at 900), not the desktop 75vh; the frame + radius stay as prod keeps them */
  .tradfi-hero__inner { padding: 40px 10px; }   /* prod's inner padding; no gap here — prod's 20px gap sits between two group wrappers, and our flat DOM would apply it twice */
  .tradfi-hero__title { font-size: 32px; line-height: 34px; }
  .tradfi-hero__offices { grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-top: 20px; }   /* prod's lede->offices gap on mobile (30 on desktop) */
  .tradfi-hero__office { min-height: 0; gap: 20px; padding: 10px; }
  .tradfi-hero__office-code { font-size: 18px; line-height: 18px; }
  .tradfi-hero__office-city { font-size: 14px; line-height: 24px; }
  .tradfi-instruments__grid { grid-template-columns: 1fr; gap: 10px; }
  .tradfi-instruments__card { min-height: 0; gap: 20px; padding: 20px 10px; }
  .tradfi-instruments__title { font-size: 26px; line-height: 26px; }
  .tradfi-instruments__body { font-size: 14px; line-height: 24px; }
  .tradfi-options__row { grid-template-columns: 1fr; }
  .tradfi-options__media { min-height: 50vh; }
  .tradfi-options__copy { min-height: 50vh; gap: 30px; padding: 30px 15px; }
  .tradfi-options__title { font-size: 32px; line-height: 34px; }
}


/* ============================================================
   digital-assets
   Ported from Elementor post-1932.css (hero, stats-band, solutions accordion,
   partners, excellence, locations) + responsive.
   ============================================================ */
/* ===== Digital Assets page — Elementor fidelity overrides ===== */
/* Ported from Elementor post-1932.css, mapped to theme selectors. */

/* ---- Hero ---- */
.da-hero {
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}
.da-hero__panel--copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  min-height: 80vh;
  border-radius: 10px;
  padding: 124px 24px 24px 24px;
  gap: 10px;                             /* prod's panel gap between the text group and the gif */
  background-position: center center;
}
.da-hero__copy-inner {
  max-width: none;
  padding: 0;
  gap: 30px;
}
.da-hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  margin: 0;
  max-width: 372px;
}
.da-hero__lede {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  max-width: 450px;
  color: var(--white);
  /* paragraph gap comes from the shared p rule; prod's lede wrapper carries the same 0.9rem */
}
.da-hero .btn--accent {
  background: var(--white);
  color: var(--dark);
  border-radius: 56px;
  padding: 8px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--lh-xs);
}
.da-hero .btn--accent:hover {
  background: var(--lime);
  color: var(--purple);
}
.da-hero__media {
  display: flex;
  justify-content: flex-end;
}
.da-hero__media img {
  width: 100%;
  max-width: none;
  height: 40vh;
  object-fit: contain;
  object-position: bottom center;
}
.da-hero__panel--photo {
  min-height: 78vh;
  border-radius: 10px;
}

/* ---- Stats band ---- */
.stats-band {
  background: var(--off-white);
  color: var(--purple);
  padding: 80px 24px 90px;   /* prod ends the band with an empty element after its 10px gap */
  border-radius: 10px;
  text-align: center;
}
.stats-band .container {
  max-width: none;
  padding: 0;
}
.stats-band__heading {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  color: var(--purple);
  max-width: 730px;
  margin: 0 auto 34px;                    /* prod: more gap below the heading */
}
.stats-band__lede {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: rgba(68, 25, 73, 0.6);
  max-width: 520px;
  margin-inline: auto;                    /* bottom gap comes from the shared p rule */
  opacity: 1;
}
.stats-band__grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 125px;                      /* prod: lede gap + 100px bottom padding on the heading group + the band's 10px gap (collapses with the lede margin) */
}
.stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  min-height: 325px;
  background: var(--white);
  border-radius: 10px;
  padding: 24px;
  text-align: left;   /* stats-band centers heading/lede; prod left-aligns the card figure+label */
}
.stat:hover { background: var(--purple); }                       /* no transition: hover flips instantly */
.stat:hover .stat__figure,
.stat:hover .stat__label { color: var(--lime); }                 /* figure+label go lime so they stay legible on the purple card */
.stat__figure {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  color: var(--purple);
  letter-spacing: 0;
}
.stat__label {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 400;
  color: rgba(68, 25, 73, 0.6);
  opacity: 1;
}

/* ---- Solutions (prod f3cf79e: image-left / off-white-right) ---- */
/* flex, not grid: same shrink row as home roles. The two paddings only diverge from 1024
   down (media 24, copy 20), and there a 1fr track sized to content gave 497/497 where prod
   gives 499/495. */
.da-solutions {
  display: flex;
  flex-direction: row;
  padding: 0;
  gap: 10px;                         /* prod separates the media + content panels by 10px */
}
.da-solutions__panel--media {
  padding: 24px;                     /* 6b59 — nothing sits in it, but it is half the shrink basis */
  min-height: 85vh;
  border-radius: 10px;
  background-image: url("/wp-content/themes/davinci/assets/seed/2025/06/da-vinci-developement-scaled.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.da-solutions__panel--content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* prod centers a 700px column (title + accordion) in the panel */
  gap: 10px;           /* prod's panel gap between the title and the accordion */
  min-height: 85vh;
  border-radius: 10px;
  padding: 40px 24px;
  background: var(--off-white);
}
.da-solutions__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  color: var(--purple);
  width: 100%;
  max-width: 700px;                      /* 700px block on desktop (centered by panel), shrinks on mobile */
  margin: 0 0 40px;
  text-align: left;
}

/* ---- Accordion (cards variant) ---- */
.accordion--cards {
  width: 100%;
  max-width: 700px;
}
.accordion--cards .accordion__item {
  border: none;
  margin-bottom: 15px;
}
.accordion--cards .accordion__item:last-child { margin-bottom: 0; }
.accordion--cards .accordion__item:first-child {
  border: none;
}
.accordion--cards .accordion__head {
  background: var(--white);
  border-radius: 10px;
  gap: 10px;          /* only bites once the open strip fills the row: prod's question then gets 107 */
  padding: 28px;
  font-size: 1rem;
  font-weight: 400;
  color: var(--dark);
  justify-content: space-between;
}
.accordion--cards .accordion__item[open] .accordion__head {
  background: linear-gradient(104deg, #5755C6 15%, #977AC3 88%);
  color: var(--white);
}
.accordion--cards .accordion__title { order: 1; }
/* Toggle: same inline-SVG icons as .accordion--faq (prod) — CLOSED = thin '+' in a
   light-gray circle (28x28); OPEN = 4-plus row (90x28) in #F6F6F6 on the gradient. */
.accordion--cards .accordion__plus {
  order: 2;
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%20fill='none'%3E%3Crect%20x='0.5'%20y='0.5'%20width='27'%20height='27'%20rx='13.5'%20stroke='%23261414'%20stroke-opacity='0.2'/%3E%3Cpath%20d='M13.5%2013.5V10.5H14.5V13.5H17.5V14.5H14.5V17.5H13.5V14.5H10.5V13.5H13.5Z'%20fill='black'/%3E%3C/svg%3E") center / 28px 28px no-repeat;
}
.accordion--cards .accordion__plus::before,
.accordion--cards .accordion__plus::after { content: none; }
/* Open state: prod tiles pluses across a fixed 364px strip, so from ~1330 down the strip
   squeezes the question instead of shrinking (its first title wraps at 1200, ours did not). */
.accordion--cards .accordion__item[open] .accordion__plus {
  flex: 0 0 364px;
  width: 364px;
  height: 28px;
  margin-left: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='27'%20height='28'%20viewBox='0%200%2027%2028'%20fill='none'%3E%3Cpath%20transform='translate(9.75,0.35)'%20d='M4.50293%2012.8814H6.74091V14.4232H4.50293V16.7328H3.009V14.4232H0.770996V12.8814H3.009V10.5657H4.50293V12.8814Z'%20fill='%23F6F6F6'/%3E%3C/svg%3E") left center / 27px 28px repeat-x;
}
.accordion--cards .accordion__body {
  background: linear-gradient(104deg, #5755C6 15%, #977AC3 88%);
  border-radius: 0 0 10px 10px;
  margin-top: -10px;
  padding: 30px;
  color: rgba(246, 246, 246, 0.6);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: none;
}
.accordion--cards .accordion__body p { margin: 0; }

/* ---- Partners (two logo marquees; heading block hidden in prod) ---- */
.da-partners {
  padding: 0;
  background: none;
}
.da-partners__sliders {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Excellence ---- */
.da-excellence { background: transparent; }
.da-excellence__inner { padding: 0; gap: 10px; }  /* prod separates the two panels by 10px */
.da-excellence__copy {
  background: var(--light-blue);
  border-radius: 10px;
  padding: 32px 30px 32px 24px;
  min-height: 430px;
  display: flex;
  align-items: stretch;
}
.da-excellence__copy-inner {
  max-width: 626px;
  /* gap comes from the shared copy-panel rule; a 0 here let the panel fall 10px short at 768 */
  padding: 0;
  margin: 0; /* kill the .container's margin:0 auto — prod left-aligns the copy, not centered */
  display: flex;
  flex-direction: column;
}
.da-excellence__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  color: var(--dark);
  margin: 0 0 auto; /* prod distributes: heading top, body + button pushed to the bottom */
}
.da-excellence__group {
  display: flex;
  flex-direction: column;
  gap: 24px;          /* prod groups the body + button and spaces them by 24 */
}
.da-excellence__body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: rgba(38, 20, 20, 0.6);
  max-width: 545px;
  /* paragraph gap comes from the shared p rule; the group gap adds the rest */
}
.da-excellence .btn--ghost-dark {
  background: var(--white);
  color: var(--dark);
  border: 0;
  border-radius: 56px;
  padding: 8px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--lh-xs);
  align-self: flex-start;
}
.da-excellence .btn--ghost-dark:hover {
  background: var(--lime);
  color: var(--purple);
  border-color: var(--lime);
}
.da-excellence__photo {
  min-height: 430px;
  border-radius: 10px;
}

/* ---- Locations ---- */
.da-locations {
  background: #130429;
  border-radius: 10px;
  padding: 32px 24px;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.da-locations .container {
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.da-locations__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  color: var(--near-white);
  margin: 0;
}
.da-locations__grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 0 40px;
}
.da-locations__card {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0;
}
.da-locations__image {
  width: 100%;
  flex-basis: 100%;
  height: 400px;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
}
.da-locations__city {
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: var(--lh-xs);
  letter-spacing: 0.5px;
  color: var(--white);
  margin: 0;
  flex: 1;
}
.da-locations__country {
  font-size: 10px;
  font-weight: 500;
  line-height: 10px;
  color: var(--near-white);
  margin: 0;
  align-self: center;
}

/* ---- Responsive: tablet (max-width: 1024px) ---- */
@media (max-width: 1024px) {
  /* Maintain two-column layouts at 768-1024 (override theme's 899px breakpoint) */
  .da-hero { grid-template-columns: 1fr 1fr; min-height: 80vh; }
  .da-hero__panel--copy { min-height: 80vh; padding: 24px; }
  .da-hero__panel--photo { min-height: 78vh; order: 0; }
  .da-hero__media img { height: 200px; }
  .da-hero__lede { font-size: var(--fs-sm); line-height: var(--lh-body); }

  .da-excellence__inner { grid-template-columns: 1fr 1fr; }
  .da-excellence__copy { min-height: 350px; padding: 30px; }
  .da-excellence__photo { min-height: 350px; order: 0; }
  .da-excellence__body { font-size: var(--fs-sm); line-height: var(--lh-body); }

  .stats-band__grid { grid-template-columns: repeat(3, 1fr); }
  .stat { min-height: 300px; }

  .da-solutions__inner { padding: 20px; }
  .da-solutions__panel--content { padding: 20px; }   /* 2bfe @1024 — and it is what tilts the split to 499/495 */
  /* prod swaps in its tablet copy of this widget below 1025, and that one lets the plus strip
     shrink with the panel (220 at 1024, 92 at 768) instead of holding 364 */
  .accordion--cards .accordion__item[open] .accordion__plus { flex: 1 1 auto; width: auto; min-width: 90px; margin-left: 24px; }

  .da-partners { min-height: 350px; }

  .da-locations { min-height: 350px; padding: 30px; }
  .da-locations__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* ---- Responsive: mobile (max-width: 767px) ---- */
@media (max-width: 767px) {
  .da-hero { grid-template-columns: 1fr; min-height: 0; }
  .da-hero__panel--copy { min-height: 55vh; padding: 130px 10px 15px 10px; gap: 14px; }   /* prod drops the panel gap on mobile and hangs 14px under the button instead */
  .da-hero__title { font-size: 32px; line-height: 34px; }
  .da-hero__lede { font-size: var(--fs-sm); line-height: var(--lh-body); }
  .da-hero__panel--photo { display: none; }  /* prod hides the office photo on mobile (elementor-hidden-mobile); min-height:0 still left the grid gap */
  .da-hero__media img { height: 200px; }

  .stats-band { padding: 40px 10px 60px; gap: 20px; }   /* prod's trailing empty element plus the band's 20px mobile gap */
  .stats-band__heading { font-size: 32px; line-height: 34px; }
  .stats-band__lede { font-size: var(--fs-sm); line-height: var(--lh-body); }
  .stats-band__grid { grid-template-columns: 1fr; margin-top: 55px; }   /* lede gap + the group's 20px padding + the band's 20px gap */
  .stat { min-height: 150px; }
  .stat__figure { font-size: 32px; line-height: 34px; }

  .da-solutions { flex-direction: column; }
  .da-solutions__panel--media { min-height: 55vh; }
  .da-solutions__panel--content { min-height: 58vh; padding: 20px 12px; }
  .da-solutions__title { font-size: 32px; line-height: 34px; }   /* prod keeps the 40px gap under the title on mobile */

  .accordion--cards { width: 100%; max-width: none; }   /* stacked, prod's accordion fills the padded column (723 at 767) */
  .accordion--cards .accordion__head { padding: 20px; }
  .accordion--cards .accordion__body { padding: 20px; }   /* prod tightens the open-panel padding on mobile */

  .da-partners__sliders { gap: 20px; }

  .da-excellence__inner { grid-template-columns: 1fr; }
  .da-excellence__copy { min-height: 40vh; padding: 30px 15px; gap: 30px; }
  .da-excellence__photo { min-height: 40vh; }  /* prod mobile: text/About-us first, photo below (was order:-1) */
  .da-excellence__copy-inner { gap: 30px; }   /* the 30px is only the floor; the title's auto margin still pushes the group to the panel's bottom */
  .da-excellence__title { font-size: 32px; line-height: 34px; } /* keep the auto bottom margin: at 767 prod leaves 101px under the title, at 390 there is no slack left */
  .da-excellence__group { padding-bottom: 14px; }   /* prod hangs 14px under the button on mobile */
  .da-excellence__body { font-size: var(--fs-sm); line-height: var(--lh-body); }

  .da-locations { min-height: 40vh; padding: 30px 15px; gap: 30px; }
  .da-locations .container { gap: 30px; }
  .da-locations__title { font-size: 32px; line-height: 34px; }
  .da-locations__grid { grid-template-columns: 1fr; }
  .da-locations__image { height: 180px; }
}


/* ---- Digital Assets: partners logo marquees (prod HTML-widget CSS, scoped) ---- */
.da-partners .slider,
.da-partners .client-slider {
  overflow: hidden;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.da-partners .slide-track {
  display: flex;
  width: max-content;
  animation: da-scroll-left 60s linear infinite;
}
.da-partners .slide {
  flex: 0 0 200px;
  margin-right: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.da-partners .slide img {
  width: auto;
  height: 200px;
  object-fit: contain;
}
@keyframes da-scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.3333%); }
}
.da-partners .client-slide-track {
  display: flex;
  width: max-content;
  animation: da-client-scroll 60s linear infinite;
}
.da-partners .client-slide {
  flex: 0 0 200px;
  margin-right: 40px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.da-partners .client-slide img {
  width: auto;
  height: 200px;
  object-fit: contain;
}
@keyframes da-client-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(33.3333%); }
}
@media only screen and (max-width: 767px) {
  .da-partners .slide-track { animation-duration: 40s; }
  .da-partners .slide { flex: 0 0 100px; margin-right: 20px; padding: 5px; }
  .da-partners .client-slide-track { animation-duration: 40s; }
  .da-partners .client-slide { flex: 0 0 100px; margin-right: 20px; padding: 5px; }
}

/* ============================================================
   Scroll-reveal. Prod runs the wordpress-gsap plugin: every element it
   marks .fade-in-bottom is set to opacity 0 at init and tweened from
   {opacity:0, y:50px} the moment its top crosses the viewport bottom —
   duration 1s, delay 0.2s, ease power4.out, and it never reverses.
   Elements already on screen at load animate too, so the class is on
   exactly prod's set (see the fade-in-bottom marks in sections/).
   power4.out == CSS cubic-bezier(0.165, 0.84, 0.44, 1) (ease-out-quart).
   The hide lives here, not in site.js, so nothing flashes in before the
   observer runs. Motion-safe only.
   ============================================================ */
/* Prod's Elementor background-video containers sit at opacity 0 and fade in over 1s
   the moment the video starts playing (home hero 46b9…, about-us student clip e8be…),
   so the backdrop never pops in. site.js flips is-playing on the `playing` event. */
video[autoplay] { opacity: 0; transition: opacity 1s ease; }
video[autoplay].is-playing { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .fade-in-bottom { opacity: 0; transform: translateY(50px); }
  .fade-in-bottom.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s,
                transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  }
}