/* ==========================================================================
   Da Vinci — site.css
   Design tokens + base + sections. Component-specific styles live in
   components/<name>/*.css. Values ported from prod's Elementor CSS.
   ========================================================================== */

/* ---- Tokens (ported from Elementor kit-7) ---- */
:root {
	/* Brand + accent palette — exact values from .elementor-kit-7 */
	--purple:      #441949;   /* --e-global-color-secondary (brand) */
	--lavender:    #8a8bff;   /* --e-global-color-accent */
	--lime:        #d6fa00;   /* --e-global-color-045cdc7 (neon) */
	--light-blue:  #b1d6ef;   /* --e-global-color-ebb8c9a */
	--teal:        #d8eae9;   /* --e-global-color-78fe4a6 */
	--off-white:   #f3f3f3;   /* --e-global-color-311f85b */
	--near-white:  #fdfdfd;   /* --e-global-color-4a4a5f2 */
	--white:       #ffffff;   /* --e-global-color-primary */
	--dark:        #000000;   /* pure black — buttons + specific dark headings */
	--text:        #333333;   /* --e-global-color-text — default body copy (prod) */
	--indigo:      #5755c6;
	--lavender-2:  #977ac3;
	/* Legacy beige retained only for back-compat; prefer --off-white/--teal. */
	--beige:       #f3f3f3;
	--beige-2:     #f3f3f3;
	--text-muted:  rgba(38, 20, 20, 0.7);

	--font:        "Porteron Regular", "Helvetica Neue", Arial, sans-serif;
	--container:   1330px;    /* .elementor-section-boxed / --container-max-width */

	/* Type scale — exact from kit-7 typography vars (all Porteron, weight 400) */
	--fs-hero:     80px;  --lh-hero: 80px;   /* 1b8fbed */
	--fs-h1:       40px;  --lh-h1: 42px;     /* primary */
	--fs-h2:       24px;  --lh-h2: 26px;     /* 725a570 */
	--fs-body:     18px;  --lh-body: 20px;   /* 18/20 "text" style — ledes, card + section copy (sourced per-element from Elementor). NOT the generic body default; see body{} below. */
	--fs-sm:       16px;  --lh-sm: 18px;     /* bf2eb21 */
	--fs-xs:       14px;  --lh-xs: 16px;     /* accent (weight 500) */

	--radius:      10px;
	--section-pad: clamp(4rem, 8vw, 8rem);
}

/* ---- Font ---- */
@font-face {
	font-family: "Porteron Regular";
	src: url("../fonts/Porteron-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;                 /* prod default body copy: 16px/24px/#333 (dominant --e-global-color-text) — NOT the 18px --fs-body element style */
	color: var(--text);
	background: var(--white);
	line-height: 1.5;                /* 24/16 */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-variant-ligatures: none;    /* prod sets these on * in its customizer CSS */
	font-feature-settings: "liga" 0;
}
img { max-width: 100%; height: auto; display: block; }
/* Carousel logos are not draggable on prod (customizer CSS). */
.slide img, .client-slide img { user-select: none; -webkit-user-drag: none; pointer-events: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 400; line-height: 1.05; }
h1 { font-size: var(--fs-h1); line-height: calc(var(--lh-h1) / var(--fs-h1)); }
h2 { font-size: var(--fs-h2); line-height: calc(var(--lh-h2) / var(--fs-h2)); }
h3 { font-size: var(--fs-sm); line-height: calc(var(--lh-sm) / var(--fs-sm)); }
h4 { font-size: var(--fs-xs); line-height: calc(var(--lh-xs) / var(--fs-xs)); }
p { margin: 0 0 0.9rem; }        /* 14.4px — prod's single paragraph gap, in rem so it does not scale with the element's own font-size */
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--dark); color: #fff; padding: 0.5rem 1rem;
}
.skip-link:focus { left: 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }

/* ---- Buttons ---- */
.btn {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 56px;
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	font-weight: 500;
	border: 0 solid transparent;   /* filled buttons carry no border on prod; only the outlined variants add width */
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	cursor: pointer;
}
.btn--accent      { background: var(--lime); color: var(--dark); }
.btn--accent:hover{ background: #bfcf00; }
.btn--ghost       { border: 1px solid rgba(255,255,255,0.6); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,0.12); }
.btn--ghost-dark  { border: 1px solid rgba(38,20,20,0.4); color: var(--dark); }
.btn--ghost-dark:hover { background: rgba(38,20,20,0.06); }
.btn--solid-light { background: #fff; color: var(--dark); }
.btn--solid-light:hover { background: var(--lime); color: var(--purple); }
.btn--white { background: #fff; color: var(--dark); }
.btn--white:hover { background: var(--lime); color: var(--purple); }

/* ---- Section scaffolding ---- */
.section { padding: var(--section-pad) 0; }
.section--dark { background: var(--purple); color: #fff; }
.section__title { font-size: var(--fs-h1); line-height: calc(var(--lh-h1) / var(--fs-h1)); margin-bottom: 1.5rem; }
/* no margin-bottom: prod gives every paragraph the same 0.9rem gap (shared p rule) */
.section__lede  { max-width: 60ch; color: var(--text-muted); }

/* ---- Header ---- */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	color: #fff;
	background: transparent;
	transition: background 0.25s;
}
.site-header.is-solid { background: rgba(38, 20, 20, 0.92); backdrop-filter: blur(8px); }
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	height: 76px;
}
.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav__list { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.site-nav__list a { color: #fff; font-size: 1.05rem; }
.site-nav__list a:hover { color: var(--lavender); }
.site-nav__cta { margin-left: 0.5rem; }

/* Mobile nav */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 26px; height: 2px; background: #fff; display: block; }
.mobile-nav {
	position: fixed; inset: 0 0 0 auto; width: min(320px, 80vw); z-index: 110;
	background: var(--dark); color: #fff; padding: 5rem 2rem 2rem;
	transform: translateX(100%); transition: transform 0.3s; overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.mobile-nav__list li { margin-bottom: 1.25rem; font-size: 1.3rem; }

@media (max-width: 860px) {
	.site-nav { display: none; }
	.nav-toggle { display: flex; }
}

/* ---- Hero ---- */
.hero { position: relative; min-height: 100vh; background: var(--purple); }
.hero #map-container { position: absolute; inset: 0; min-height: 100vh; }
.hero__overlay {
	position: relative; z-index: 5;
	min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end;
	gap: 44px;
	padding: 24px 24px 50px;
}
.hero__ctas { display: flex; gap: 1rem; }
.hero__title {
	font-size: clamp(2.5rem, 8vw, 6rem); color: #fff; text-align: center;
}

/* ---- Trading house ---- */
.trading-house__intro { max-width: 70ch; color: var(--text-muted); margin-bottom: 3rem; }
.trading-house__cards {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 4rem;
}
.value-card {
	background: var(--beige-2); border-radius: var(--radius); padding: 2rem;
	display: flex; flex-direction: column; gap: 1rem;
}
.value-card__icon { width: 56px; height: 56px; object-fit: contain; }
.value-card__title { font-size: 1.5rem; }
.value-card__text { color: var(--text-muted); font-size: 0.98rem; }
.trading-house__accordion { max-width: 760px; margin: 0 auto; }
@media (max-width: 900px) { .trading-house__cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trading-house__cards { grid-template-columns: 1fr; } }

/* ---- Roles ---- */
.roles__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.roles__media img { border-radius: var(--radius); width: 100%; }
.roles__content .section__title { color: #fff; }
@media (max-width: 860px) { .roles__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---- Roles carousel ---- */
.roles-carousel__track {
	display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
	padding: 0 1.5rem 1.5rem; -webkit-overflow-scrolling: touch;
}
/* carousel-only sizing: in the careers grid the card is a column flex item, so a
   flex-basis here caps its height instead of its width */
.roles-carousel__track > .job-card { flex: 0 0 280px; }
.job-card {
	scroll-snap-align: start;
	background: var(--beige-2); border-radius: var(--radius); padding: 2rem;
	display: flex; flex-direction: column; justify-content: space-between; min-height: 200px;
	transition: transform 0.2s, box-shadow 0.2s;
}
.job-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(38,20,20,0.12); }
.job-card__title { font-size: 1.4rem; }
.job-card__cta { color: var(--indigo); font-size: 0.95rem; margin-top: 1rem; }

/* ---- Working ---- */
.working__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.working__media img { border-radius: var(--radius); width: 100%; }
.working__subtitle { font-size: clamp(1.4rem, 2.5vw, 2rem); margin-bottom: 1.5rem; }
.working__ctas { display: flex; gap: 1rem; margin-top: 2rem; }
@media (max-width: 860px) { .working__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---- Explore ---- */
.explore__subtitle { font-size: 1.6rem; margin: 2.5rem 0 1.5rem; }
.explore__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.explore-card {
	background: var(--beige-2); border-radius: var(--radius); overflow: hidden;
	display: flex; flex-direction: column; transition: transform 0.2s;
}
.explore-card:hover { transform: translateY(-4px); }
.explore-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.explore-card__title { padding: 1.25rem; font-size: 1.15rem; }
@media (max-width: 860px) { .explore__grid { grid-template-columns: 1fr; } }
.explore__grid--single { grid-template-columns: 1fr; }

/* ---- Single / page / archive ---- */
.single { padding: 8rem 0 5rem; max-width: 820px; }
.single__title { font-size: clamp(2rem, 5vw, 3.5rem); }
.single__meta { color: var(--text-muted); }
.single__body { font-size: 1.1rem; line-height: 1.8; }
.single__body h2 { margin-top: 2rem; }
.greenhouse-error { color: #b00; }

.archive { padding: 8rem 0 5rem; }
.archive__title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 2.5rem; }
.archive__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.archive-card { background: var(--beige-2); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.archive-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.archive-card__title { padding: 1.25rem; font-size: 1.2rem; }
.archive-card time { padding: 0 1.25rem 1.25rem; color: var(--text-muted); }
@media (max-width: 860px) { .archive__grid { grid-template-columns: 1fr; } }

/* ---- Footer ---- */
.site-footer { background: var(--dark); color: #fff; padding: 4rem 0 2rem; }
.site-footer__inner { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 2rem; align-items: start; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer__legal { color: rgba(255,255,255,0.6); font-size: 0.9rem; }
@media (max-width: 700px) { .site-footer__inner { grid-template-columns: 1fr; } }

/* ---- Pagination ---- */
.nav-links { display: flex; gap: 0.5rem; justify-content: center; margin-top: 3rem; }
.nav-links a, .nav-links span { padding: 0.5rem 0.9rem; border: 1px solid rgba(38,20,20,0.2); border-radius: 8px; }
.nav-links .current { background: var(--dark); color: #fff; }

/* ---- Newsletter page (.dv-nl) — ported verbatim from the Elementor source ---- */
.dv-nl *, .dv-nl *::before, .dv-nl *::after {
  padding: 0; box-sizing: border-box;
}
.dv-nl {
  --white:         #FFFFFF;
  --purple:        #441949;
  --black:         #000000;
  --bright-purple: #8A8BFF;
  --yellow:        #D6FA00;
  --blue:          #B1D6EF;
  --gray:          #F3F3F3;
  --off-white:     #FDFDFD;
  --white-20:      rgba(246, 246, 246, 0.2);
  --purple-60:     rgba(68, 25, 73, 0.6);
  font-family: 'Porteron Regular', 'Porteron', -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  color: var(--purple);
}

.dv-nl__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(120% 80% at 110% -10%, rgba(138, 139, 255, 0.28), transparent 55%),
    radial-gradient(80% 60% at -10% 110%, rgba(214, 250, 0, 0.10), transparent 60%),
    var(--purple);
  color: var(--off-white);
  border-radius: 10px;
  padding: 180px 72px 120px;
  overflow: hidden;
  isolation: isolate;
}
.dv-nl__hero-pattern {
  position: absolute;
  top: -120px;
  right: -100px;
  width: 760px;
  height: 760px;
  background: url("/wp-content/uploads/2025/02/Vector.png") no-repeat center/contain;
  filter: brightness(0) invert(1);
  opacity: 0.22;
  transform: rotate(180deg);
  pointer-events: none;
  z-index: 1;
}
.dv-nl__hero-tick {
  position: absolute;
  left: 72px;
  top: 80px;
  width: 34px;
  height: 34px;
  z-index: 2;
}
.dv-nl__hero-tick::before,
.dv-nl__hero-tick::after {
  content: "";
  position: absolute;
  background: var(--yellow);
  border-radius: 3px;
}
.dv-nl__hero-tick::before { top: 50%; left: 0; right: 0; height: 6px; transform: translateY(-50%); }
.dv-nl__hero-tick::after { left: 50%; top: 0; bottom: 0; width: 6px; transform: translateX(-50%); }

.dv-nl__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 80px;
  width: 100%;
  max-width: 1200px;
}

.dv-nl__copy {
  display: flex;
  flex-direction: column;
}
.dv-nl__eyebrow {
  font-size: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bright-purple);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-block-end: 28px;
}
.dv-nl__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--bright-purple);
}
.dv-nl__hero-heading {
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 400;
  line-height: 0.98;
  color: var(--off-white);
  letter-spacing: -0.025em;
  max-width: 14ch;
  padding-block-end: 32px;
  margin: 8px 0 16px;   /* prod's snippet, not the global 0.5em: at 72px that was 36 and made the centred copy block 12 too tall */
}
.dv-nl__hero-heading em {
  font-style: normal;
  color: var(--bright-purple);
}
.dv-nl__hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(253, 253, 253, 0.72);
  max-width: 520px;
}

.dv-nl__card {
  background: var(--white);
  border-radius: 10px;
  padding: 48px 44px 40px;
  box-shadow:
    0 32px 64px -24px rgba(68, 25, 73, 0.45),
    0 8px 24px -8px rgba(68, 25, 73, 0.18);
  width: 100%;
  position: relative;
  overflow: hidden;
}
.dv-nl__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, var(--bright-purple), var(--yellow));
}

.dv-nl__form .gform_wrapper { max-width: 100% !important; }
.dv-nl__form .gform_wrapper .gform_fields {
  display: grid !important;                /* our GF build leaves this a block, so the gap never applied */
  grid-template-columns: 1fr;
  row-gap: 13px !important;
}
.dv-nl__form .gform_wrapper .ginput_complex { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }  /* First/Last side by side like prod GF name field */
.dv-nl__form .gform_wrapper input[type="text"],
.dv-nl__form .gform_wrapper input[type="email"],
.dv-nl__form .gform_wrapper textarea,
.dv-nl__form .gform_wrapper select {
  background: var(--gray) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 15px 16px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 38px !important;   /* prod's field is 38 tall; without this the box grows to 51 */
  box-sizing: border-box;
  height: 38px;
  color: var(--purple) !important;
  width: 100% !important;
  transition: border-color 0.2s, background 0.2s;
}
.dv-nl__form .gform_wrapper textarea { height: auto; }
.dv-nl__form .gform_wrapper input:focus,
.dv-nl__form .gform_wrapper textarea:focus,
.dv-nl__form .gform_wrapper select:focus {
  border-color: var(--bright-purple) !important;
  background: var(--white) !important;
  outline: none;
}
.dv-nl__form .gform_wrapper input::placeholder,
.dv-nl__form .gform_wrapper textarea::placeholder {
  color: rgba(68, 25, 73, 0.35) !important;
  opacity: 1;
}
.dv-nl__form .gform_wrapper label,
.dv-nl__form .gform_wrapper .gfield_label {
  color: rgba(68, 25, 73, 0.55) !important;
  font-size: 11px !important;              /* prod's label is 11/1.43 + 6px padding = a 22px box */
  line-height: 1.43 !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500 !important;
  padding-block-end: 6px !important;
  margin-block-end: 8px !important;        /* prod's label-to-input gap */
  display: block;
}
.dv-nl__form .gform_wrapper .gfield_required {
  color: var(--bright-purple) !important;
  font-size: 12px !important;              /* prod's asterisk runs a size up, so those labels are 24 */
}
/* Option lists: prod spaces the options 12px apart, each row a 20px box with the
   text 32px in. The input is out of flow so the row stays the label's own 22px. */
.dv-nl__form .gform_wrapper .gfield_radio,
.dv-nl__form .gform_wrapper .gfield_checkbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block-start: 4px;                /* prod's legend gap is 12, the plain label's is 8 (margin would collapse) */
}
.dv-nl__form .gform_wrapper .gfield_radio label,
.dv-nl__form .gform_wrapper .gfield_checkbox label,
.dv-nl__form .gform_wrapper .gfield_consent_label {
  position: relative;
  padding-inline-start: 32px;
  margin-block-end: 0 !important;          /* the 8px is the field label's gap, not every label's */
}
.dv-nl__form .gform_wrapper .gfield_radio input,
.dv-nl__form .gform_wrapper .gfield_checkbox input,
.dv-nl__form .gform_wrapper .gfield_consent_label input {
  position: absolute;
  inset: 0 auto auto 0;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--purple);
}
/* Consent is its own group, so it carries the same 4px legend offset itself
   (padding does not move a padding-box-positioned input, hence the inset). */
.dv-nl__form .gform_wrapper .gfield_consent_label { padding-block-start: 4px; }
.dv-nl__form .gform_wrapper .gfield_consent_label input { inset-block-start: 4px; }
.dv-nl__form .gform_wrapper .gform-field-label--type-sub,
.dv-nl__form .gform_wrapper .gform_validation_container,
.dv-nl__form .gform_wrapper .gform_required_legend,
.dv-nl__form .gform_wrapper .gfield_required_text,
.dv-nl__form .gform_wrapper .gform_title,
.dv-nl__form .gform_wrapper .gform_description { display: none !important; }
.dv-nl__form .gform_wrapper .gform_footer { margin-block-start: 24px !important; padding-top: 8px !important; }
.dv-nl__form .gform_wrapper .gform_button,
.dv-nl__form .gform_wrapper input[type="submit"] {
  background: var(--purple) !important;
  color: var(--off-white) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 17px 36px !important;
  height: 47px;                            /* prod's submit; line-height alone leaves ours at 51 */
  box-sizing: border-box;
  line-height: 13px !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  width: 100% !important;
  font-weight: 500 !important;
}
.dv-nl__form .gform_wrapper .gform_button:hover {
  background: var(--black) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(68, 25, 73, 0.25);
}
.dv-nl__form .gform_wrapper .gform_confirmation_message {
  color: var(--purple) !important;
  font-size: 16px !important;
}

@media (max-width: 1024px) {
  .dv-nl__hero { padding: 140px 48px 96px; }
  .dv-nl__inner { gap: 56px; }
  .dv-nl__card { padding: 40px 32px; }
}
@media (max-width: 1024px) {
  .dv-nl__hero-tick { display: none; }
}
@media (max-width: 820px) {
  .dv-nl__hero { padding: 120px 32px 80px; }
  .dv-nl__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .dv-nl__hero-pattern {
    top: auto;
    bottom: -120px;
    right: -160px;
    width: 560px;
    height: 560px;
  }
}
@media (max-width: 640px) {
  .dv-nl__hero { padding: 110px 26px 72px; }
  .dv-nl__hero-pattern {
    top: auto;
    bottom: -80px;
    right: -180px;
    width: 480px;
    height: 480px;
  }
  .dv-nl__card { padding: 32px 24px; }
  .dv-nl__form .gform_wrapper .ginput_complex { grid-template-columns: 1fr; }  /* GF stacks First/Last under 641 */
}

/* ---- Thank-you page (.dv-ty) — ported verbatim from the Elementor source ---
   Two-block band: purple confirmation copy on the left, DaVinciTrading.webp
   background image on the right. Collapses to a single stacked column on
   tablet/mobile. Left block min-height 90vh (tablet 450px, mobile 50vh);
   right block min-height 530px (mobile 40vh). Both blocks have 10px rounded
   corners. Desktop right-edge bleed on the image mirrors the original
   `padding-right: calc((100vw - 1330px)/2)` custom_css. */
.dv-ty { padding: 0; margin: 10px; }  /* prod frames this lone hero (x=10); it's #main's first-child so the generic frame rule skips it */
.dv-ty__inner {
  display: flex;
  flex-direction: row;
  gap: 10px;                 /* prod separates the copy panel + photo by 10px (were flush) */
  /* prod does NOT centre a 1330 inner — copy panel sits at the frame edge (x=10, text x=34), not x=55/79 */
}
.dv-ty__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;            /* invisible while space-between has slack; floors the panel at 510 on tablet */
  min-height: 90vh;
  /* 2e522dd carries no width in prod: it and the photo panel are both width:100%
     and shrink, weighted by content-box basis, so f17d5bf's gutter padding-right
     is what makes the split uneven. See the shared block in fidelity.css. */
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  padding: 150px 24px 24px;
  background: var(--purple);
  border-radius: 10px;
}
.dv-ty__head { display: flex; flex-direction: column; gap: 0; }
.dv-ty__title {
  color: var(--beige);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
}
.dv-ty__subtitle {
  max-width: 455px;
  color: var(--lime);   /* prod's head group is title + subtitle flush (126, not 146) */
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 400;
}
.dv-ty__foot { display: flex; flex-direction: column; gap: 24px; }
.dv-ty__lede {
  max-width: 545px;
  color: var(--beige);
  opacity: 0.85;
  font-size: 1rem;
  line-height: 1.6;
}
.dv-ty__btn { align-self: flex-start; border-radius: 56px; padding: 8px 12px; }
.dv-ty__media {
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 530px;
  padding: 10px 10px 50px;   /* f17d5bf T10 R10 B50 L10 */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
}

@media (max-width: 1024px) {   /* prod's tablet breakpoint, not 991 */
  /* Tablet is where prod stops letting the shrink model pick the split and pins 55/44,
     the same swap about-working makes: 552/442 at 1024, 410/328 at 768. */
  .dv-ty__copy { width: 55%; min-height: 450px; padding: 30px; }
  .dv-ty__media { width: 44%; min-height: 450px; padding: 10px; }
}
@media (max-width: 767px) {
  .dv-ty__inner { flex-direction: column; }
  .dv-ty__copy { width: 100%; min-height: 50vh; padding: 100px 15px 30px; gap: 30px; }   /* prod 2e522dd stacks head/foot with a 30px gap */
  .dv-ty__media { width: 100%; min-height: 40vh; }
}
@media (min-width: 992px) {
  /* Desktop right-edge bleed (mirrors Elementor custom_css, which fires at 992). */
  .dv-ty__media { padding-right: calc((100vw - 1330px) / 2); }
}

/* ============================================================
   Digital Assets page (page-digital-assets.php)
   Sections: hero, solutions, partners, excellence, locations.
   ============================================================ */

/* ---- Hero ---- */
.da-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 10px;                 /* prod separates the copy panel + photo by 10px (were flush) */
  padding: 10px 10px 0;      /* 10px white frame (top+sides) — da-hero is #main's first-child so the generic frame rule skips it; matches other heroes (prod panel x=10,top=10) */
  min-height: 80vh;
  color: #fff;
  /* no container bg: the copy panel + photo carry their own; a purple container bled into the frame/gap */
}
.da-hero__panel--copy {
  position: relative;
  display: flex;
  align-items: center;
  padding: 7rem 0 3rem;
  background-image: url("/wp-content/uploads/2025/02/Frame-36149.png");
  background-size: cover;
  background-position: center;
}
.da-hero__copy-inner { display: flex; flex-direction: column; gap: 1.25rem; }
.da-hero__title {
  font-size: clamp(2.2rem, 4.5vw, 3.75rem);
  line-height: 1.1;
  margin: 0;
  max-width: 16ch;
}
.da-hero__lede { font-size: 1.1rem; line-height: 1.6; max-width: 52ch; color: rgba(255,255,255,0.85); }
.da-hero__media img { width: 220px; max-width: 60%; height: auto; display: block; }
.da-hero__panel--photo {
  background-image: url("/wp-content/themes/davinci/assets/seed/2025/06/20250528_DaVinciTrading-JoniIsraeli-114-SWR57381-scaled.jpg");
  background-size: cover;
  background-position: center;
}
@media (max-width: 899px) {
  .da-hero { grid-template-columns: 1fr; min-height: 0; }
  .da-hero__panel--copy { min-height: 55vh; padding: 6rem 0 2.5rem; }
  .da-hero__panel--photo { min-height: 320px; order: -1; }
}

/* ---- Solutions (accordion wrapper) ---- */
.da-solutions {
  position: relative;
  color: #fff;
  padding: var(--section-pad) 0;
}
.da-solutions__inner {
  max-width: 880px;
  margin: 0 auto;
  background: rgba(38, 20, 20, 0.55);
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 16px;
}
.da-solutions__title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 1.5rem;
  color: #fff;
}

/* ---- Partners ---- */
.da-partners {
  background-image: url("/wp-content/themes/davinci/assets/seed/2025/06/DaVinci_Gradient-scaled.webp");
  background-size: cover;
  background-position: center;
  padding: var(--section-pad) 0;
  color: var(--dark);
}
.da-partners__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.da-partners__title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 0;
  color: var(--dark);
}
.da-partners__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.5rem 2rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  align-items: center;
}
.da-partners__logo {
  background: #fff;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
}
.da-partners__logo img { max-width: 100%; max-height: 48px; object-fit: contain; display: block; }

/* ---- Excellence (two-block) ---- */
.da-excellence { background: var(--beige); }
.da-excellence__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.da-excellence__copy { padding: var(--section-pad) 0; display: flex; align-items: center; }
.da-excellence__copy-inner { display: flex; flex-direction: column; gap: 1.25rem; max-width: 48ch; }
.da-excellence__title { font-size: clamp(2rem, 4vw, 3rem); margin: 0; color: var(--purple); }
.da-excellence__body { font-size: 1.05rem; line-height: 1.7; color: var(--dark); }
.da-excellence__photo {
  background-image: url("/wp-content/themes/davinci/assets/seed/2025/06/20250528_DaVinciTrading-JoniIsraeli-087-SWR56941-1-scaled.jpg");
  background-size: cover;
  background-position: center;
  min-height: 360px;
}
@media (max-width: 899px) {
  .da-excellence__inner { grid-template-columns: 1fr; }
  .da-excellence__photo { min-height: 280px; order: -1; }
}

/* ---- Locations ---- */
.da-locations { padding: var(--section-pad) 0; background: var(--beige); }
.da-locations__title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 2.5rem;
  color: var(--purple);
}
.da-locations__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.da-locations__card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(38, 20, 20, 0.06);
}
.da-locations__image { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.da-locations__city { font-size: 1.2rem; margin: 1rem 1.25rem 0; color: var(--purple); font-weight: 600; }
.da-locations__country { font-size: 0.95rem; margin: 0.25rem 1.25rem 1.25rem; color: var(--text-muted); }
@media (max-width: 900px) { .da-locations__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .da-locations__grid { grid-template-columns: 1fr; } }

/* ===== Connect page (page-connect.php) ===== */

/* Hero: office photo (left) + dark intro panel (right). */
.connect-hero { padding: 10px; }
.connect-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border-radius: 10px;
  overflow: hidden;
}
.connect-hero__media {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 78vh;
  border-radius: 10px;
}
.connect-hero__panel {
  background-color: var(--dark);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 78vh;
  border-radius: 10px;
  padding: 24px;
  display: flex;
  align-items: flex-end;
}
.connect-hero__copy { display: flex; flex-direction: column; gap: 1rem; max-width: 48ch; }
.connect-hero__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  margin: 0;
  color: var(--beige);
}
.connect-hero__lede { font-size: 1.1rem; line-height: 1.6; color: var(--beige); }  /* paragraph gap: shared p rule */

@media (max-width: 860px) {
  .connect-hero__inner { grid-template-columns: 1fr; }
  .connect-hero__media { min-height: 30vh; order: 2; }
  .connect-hero__panel { min-height: auto; padding: 2rem 1.25rem; }
}

/* Map: globe.gl canvas lives in #map-container (see components/globe/). */
.connect-map {
  background: transparent;
  border-radius: 10px;
  margin: 10px;
  overflow: hidden;
}
.connect-map #map-container { min-height: 80vh; }

/* Working at Da Vinci: statement panel (left) + office photo (right). */
.connect-working { padding: 10px; }
.connect-working__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.connect-working__panel {
  background: var(--beige);
  border-radius: 10px;
  padding: 3rem 2.5rem;
  min-height: 530px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}
.connect-working__head { display: flex; flex-direction: column; gap: 0.75rem; }
.connect-working__title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 0;
  color: var(--dark);
}
.connect-working__subtitle {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.25;
  margin: 0;
  color: var(--purple);
  max-width: 28ch;
}
.connect-working__body { display: flex; flex-direction: column; gap: 1.75rem; max-width: 60ch; }
.connect-working__body p { font-size: 1.05rem; line-height: 1.7; color: var(--dark); }  /* paragraph gap: shared p rule */
.connect-working__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.connect-working__media {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 530px;
  border-radius: 10px;
}

@media (max-width: 860px) {
  .connect-working__inner { grid-template-columns: 1fr; }
  .connect-working__panel { min-height: auto; padding: 2.25rem 1.25rem; }
  .connect-working__media { min-height: 50vh; }
}

/* ============================================================
   About Us page (page-about-us.php)
   Sections: hero (inner-hero), approach, system, trading-house
   (value-cards), roles (videos), cta-band.
   ============================================================ */

/* "Our approach to trading" — two strategy cards. */
.about-approach { padding: 6rem 0; background: var(--beige-2); }
.about-approach__head { max-width: 60ch; margin-bottom: 3rem; }
.about-approach__head .section__title { margin-bottom: 1.25rem; }
.about-approach__lede p { line-height: 1.6; color: var(--text-muted); }   /* paragraph gap from the shared p rule */
.about-approach__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.about-approach__card {
  background: #fff;
  border-radius: 18px;
  padding: 2.5rem;
  box-shadow: 0 1px 30px rgba(38, 20, 20, 0.06);
}
.about-approach__icon { width: 56px; height: 56px; margin-bottom: 1.5rem; }
.about-approach__icon img { width: 56px; height: 56px; display: block; }
.about-approach__card-title {
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
  color: var(--dark);
}
.about-approach__card-text { margin: 0; line-height: 1.65; color: var(--text-muted); }

/* "Our state-of-the-art in-house trading system". */
.about-system { padding: 6rem 0; background: var(--beige); }
.about-system__inner { max-width: 60ch; }
.about-system__inner .section__title { margin-bottom: 1.25rem; }
.about-system__text { font-size: 1.0625rem; line-height: 1.7; color: var(--text-muted); }

/* "Explore Core Roles" — three video cards + lightbox. */
.about-roles { padding: 6rem 0; background: var(--beige-2); }
.about-roles__head { max-width: 60ch; margin-bottom: 3rem; }
.about-roles__head .section__title { margin-bottom: 1rem; }
.about-roles__lede { color: var(--text-muted); font-size: 1.0625rem; }
.about-roles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.about-roles__card { margin: 0; }
.about-roles__thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.about-roles__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-roles__play {
  /* Prod centres a 100x107 block (its icon is an inline svg, so a 7px baseline gap
     rides under it) and the icon sits at that block's top, 3.5px above true centre. */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 107px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: flex-start;
  color: #fff;                 /* prod lays the icon straight on the thumb: no scrim, and hover changes nothing */
}
.about-roles__play svg {
  width: 100px;
  height: 100px;
  opacity: 0.8;
  filter: drop-shadow(1px 0 6px rgba(0, 0, 0, 0.3));
}
.about-roles__caption {
  margin: 1rem 0 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--dark);
}

/* Lightbox — prod's Elementor dialog: neutral 0.8 black backdrop, the video 85vw
   wide at 16:9 capped to 90vh inside an 85vh frame (so it overhangs the frame and
   its native controls stay on screen), close X in the viewport corner. */
.about-roles__lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
}
.about-roles__lightbox[hidden] { display: none; }
.about-roles__lightbox-frame { width: 85vw; max-height: 85vh; }
.about-roles__lightbox video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 90vh;
  object-fit: contain;
  background: #000;
}
.about-roles__close {
  position: fixed;
  top: 13px;
  right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 900px) {
  .about-approach__grid,
  .about-roles__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Events page (page-events.php)
   ============================================================ */

/* ---- Hero: office photo + dark content panel ---- */
.events-hero {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 78vh;
  background: var(--dark);
}
.events-hero__media {
  flex: 1 1 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.events-hero__panel {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: 3rem 3.5rem;
  color: #fff;
  background: var(--dark);
}
.events-hero__mark {
  width: 96px;
  height: 96px;
  object-fit: contain;
  opacity: 0.9;
  margin-bottom: 0.5rem;
}
.events-hero__title {
  margin: 0;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.05;
  color: #fff;
}
.events-hero__lede {
  max-width: 36rem;   /* paragraph gap comes from the shared p rule */
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.events-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 860px) {
  .events-hero { flex-direction: column-reverse; min-height: 0; }
  .events-hero__media { min-height: 60vw; }
  .events-hero__panel { padding: 2rem 1.25rem 2.5rem; }
}

/* ---- Events list (upcoming + past) ---- */
.events-list {
  padding: 5rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.events-list--past { background: var(--beige-2); }
.events-list__head {
  margin-bottom: 2.5rem;
  text-align: center;
}
.events-list__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--purple);
}
.events-list__sub {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.05rem;
}

@media (max-width: 560px) {
  .events-list { padding: 3.5rem 1.25rem; }
}

/* ---- Events closing CTA: purple panel + photo ---- */
.events-cta {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--purple);
  color: #fff;
}
.events-cta__panel {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 4rem 4rem;
  min-height: 530px;
}
.events-cta__lead { display: flex; flex-direction: column; gap: 0.75rem; }
.events-cta__heading {
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: #fff;
}
.events-cta__subheading {
  margin: 0;
  color: var(--lime);
  font-size: 1.15rem;
}
.events-cta__body-wrap { display: flex; flex-direction: column; gap: 1.75rem; max-width: 40rem; }
.events-cta__body p { line-height: 1.7; color: rgba(255, 255, 255, 0.88); }   /* paragraph gap from the shared p rule */
.events-cta__buttons { display: flex; flex-wrap: wrap; gap: 1rem; }
.events-cta__media {
  flex: 1 1 45%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 900px) {
  .events-cta { flex-direction: column; }
  .events-cta__panel { padding: 3rem 1.5rem; min-height: 0; }
  .events-cta__media { min-height: 60vw; }
}


/* ==========================================================================
   Careers page — sections/careers-*.php
   Scoped styles for the six careers-page sections. Reusable component styling
   (card-grid, btn, section--dark) lives in its own file; only the page-specific
   layout is defined here.
   ========================================================================== */

/* ---- Careers hero ---- */
.careers-hero { padding: 9rem 0 4rem; }
.careers-hero__inner {
	display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center;
}
.careers-hero__copy { max-width: 40rem; }
.careers-hero__deco {
	display: block; width: 100%; max-width: 380px; height: auto;
	margin-bottom: 1.5rem;
}
.careers-hero__title {
	font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.08; color: #fff; margin: 0 0 1.25rem;
}
.careers-hero__lede {
	font-size: 1.1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.85); max-width: 38ch; margin: 0;
}
.careers-hero__media {
	display: none; border-radius: var(--radius); overflow: hidden; height: 60vh; min-height: 360px;
}
.careers-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 860px) {
	.careers-hero__inner { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
	.careers-hero__media { display: block; }
}

/* ---- Careers jobs (filter chips styled as section headings) ---- */
.careers-jobs .card-grid__filters { gap: 2rem 3rem; margin-bottom: 1rem; }
.careers-jobs .card-grid__filter-label {
	font-family: var(--font); font-size: clamp(1.4rem, 2.2vw, 1.8rem);
	letter-spacing: normal; text-transform: none; color: #fff;
}
.careers-jobs .card-grid__chip { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.careers-jobs .card-grid__chip:hover { border-color: var(--lavender); }
.careers-jobs .card-grid__chip.is-active { background: var(--lime); color: var(--dark); border-color: var(--lime); }

/* ---- Careers teams ---- */
.careers-teams__title { text-align: center; color: #fff; }
.careers-teams__lede { margin-left: auto; margin-right: auto; text-align: center; color: rgba(255, 255, 255, 0.85); }

/* ---- Careers process (image + purple copy) ---- */
.careers-process__inner {
	display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
.careers-process__media {
	border-radius: var(--radius); overflow: hidden; min-height: 55vh;
}
.careers-process__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.careers-process__copy {
	background: var(--purple); color: #fff; border-radius: var(--radius);
	padding: clamp(2rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: flex-end;
}
.careers-process__title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin: 0 0 1.25rem; }
.careers-process__text { max-width: 48ch; line-height: 1.7; color: rgba(255, 255, 255, 0.85); margin: 0 0 2rem; }
@media (min-width: 860px) {
	.careers-process__inner { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
	.careers-process__media, .careers-process__copy { min-height: 60vh; }
}

/* ---- Careers benefits ---- */
.careers-benefits__title { text-align: center; color: #fff; }
.careers-benefits__lede { margin-left: auto; margin-right: auto; text-align: center; color: rgba(255, 255, 255, 0.85); }

/* ---- Careers working (beige + image) ---- */
.careers-working { padding-bottom: 0; }
.careers-working__inner {
	display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
.careers-working__copy {
	background: var(--beige); color: var(--dark); border-radius: var(--radius);
	padding: clamp(2rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: space-between;
	min-height: 530px;
}
.careers-working__eyebrow {
	font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 1rem; color: var(--dark);
}
.careers-working__subtitle {
	font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.2; margin: 0 0 1.5rem; color: var(--text-muted);
	max-width: 28ch;
}
.careers-working__text { line-height: 1.7; color: var(--text-muted); max-width: 48ch; margin: 0 0 2rem; }
.careers-working__ctas { display: flex; flex-wrap: wrap; gap: 1rem; }
.careers-working__media {
	border-radius: var(--radius); overflow: hidden; min-height: 50vh;
}
.careers-working__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 860px) {
	.careers-working__inner { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
	.careers-working__media { min-height: 530px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Career Match page (davincitrading.com/career-match)
   Ported from Elementor _elementor_data (single HTML widget). Scoped to `.dv-cm`.
   Section files: sections/career-match-{hero,cards,how,apply}.php
   ════════════════════════════════════════════════════════════════════════ */

/* ── Reset (scoped) ── */
.dv-cm *, .dv-cm *::before, .dv-cm *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

/* ── Brand tokens ── */
.dv-cm {
  --deep-purple:   #441949;
  --bright-purple: #8A8BFF;
  --off-white:     #D8EAE9;
  --lime:          #d6f400;
  --light-bg:      #f3f3f3;
  --white:         #ffffff;
  --dark-bg:       #0a0a0a;

  font-family: 'Porteron Regular', 'Porteron', -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout helpers ── */
.dv-cm__section {
  border-radius: 14px;
  padding: 80px 60px;
  margin: 0 10px;
}
.dv-cm__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ══ SECTION 1: HERO (dark, split layout) ══ */
.dv-cm__hero {
  background: var(--dark-bg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.dv-cm__hero-content {
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}
.dv-cm__hero-img {
  background: linear-gradient(135deg, var(--deep-purple), var(--bright-purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  color: rgba(255,255,255,0.08);
  overflow: hidden;
}
.dv-cm__hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dv-cm__title {
  font-size: clamp(36px, 4.5vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--off-white);
  margin-bottom: 24px;
}
.dv-cm__subtitle {
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  max-width: 440px;
  line-height: 1.6;
}

/* ══ SECTION 2: EVENT INFO + CARDS (light) ══ */
.dv-cm__content {
  background: var(--light-bg);
  margin-top: 10px;
}
.dv-cm__event-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.dv-cm__event-bar .tag {
  color: var(--deep-purple);
  background: rgba(68,25,73,0.08);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
}
.dv-cm__event-bar .dot  { color: rgba(68,25,73,0.2); }
.dv-cm__event-bar .info { color: rgba(68,25,73,0.5); }

.dv-cm__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dv-cm-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dv-cm-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(68, 25, 73, 0.1);
}
.dv-cm-card__photo {
  height: 220px;
  background: linear-gradient(155deg, rgba(68,25,73,0.15), rgba(138,139,255,0.12));
  display: flex;
  align-items: center;
  justify-content: center;
}
.dv-cm-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.dv-cm-card__body {
  padding: 20px 24px 24px;
}
.dv-cm-card__name {
  font-size: 20px;
  color: var(--deep-purple);
  margin-bottom: 2px;
}
.dv-cm-card__role {
  font-size: 14px;
  color: var(--bright-purple);
  margin-bottom: 10px;
}
.dv-cm-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.dv-cm-card__badge {
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(68,25,73,0.06);
  color: rgba(68,25,73,0.55);
}

/* ══ SECTION 3: HOW IT WORKS (light) ══ */
.dv-cm__how {
  background: var(--light-bg);
  margin-top: 10px;
}
.dv-cm__how-title {
  font-size: 40px;
  line-height: 1.2;      /* prod lh 1.2×fs (48/33.6); default was body 1.55 → too tall */
  font-weight: 500;      /* prod 500; default 400 */
  color: var(--deep-purple);
  margin-bottom: 32px;
}
.dv-cm__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dv-cm-step {
  background: var(--white);
  border-radius: 12px;
  padding: 28px 24px;
}
.dv-cm-step__num {
  font-size: 13px;
  color: var(--bright-purple);
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}
.dv-cm-step__title {
  font-size: 18px;
  color: var(--deep-purple);
  margin-bottom: 8px;
}
.dv-cm-step__desc {
  font-size: 15px;
  color: rgba(68,25,73,0.5);
  line-height: 1.5;
}

/* ══ SECTION 4: APPLICATION FORM (dark) ══ */
.dv-cm__form {
  background: var(--dark-bg);
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}
.dv-cm__form-title {
  font-size: 40px;
  line-height: 1.2;      /* prod lh 1.2×fs (48); default was body 1.55 → too tall */
  font-weight: 500;      /* prod 500; default 400 */
  color: var(--off-white);
  margin-bottom: 8px;
}
.dv-cm__form-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 36px;
  max-width: 520px;
  line-height: 1.6;
}

/* ── Gravity Forms dark-theme overrides ── */
.dv-cm__form .gform_wrapper {
  max-width: 640px !important;
}
.dv-cm__form .gform_wrapper .gfield_required {
  color: var(--lime) !important;
  font-size: 14px !important;
  margin-left: 4px !important;
}
.dv-cm__form .gform_wrapper .gfield_required .gfield_required_text {
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  width: 0 !important;
  display: inline !important;
}
.dv-cm__form .gform_wrapper .gfield_required .gfield_required_asterisk,
.dv-cm__form .gform_wrapper .gfield_required .gfield_required_custom {
  font-size: 16px !important;
  color: var(--lime) !important;
  visibility: visible !important;
  display: inline !important;
}
.dv-cm__form .gform_wrapper .gfield_label .gfield_required {
  display: inline !important;
  visibility: visible !important;
}
.dv-cm__form .gform_wrapper .gform_confirmation_message,
.dv-cm__form .gform_confirmation_message,
.dv-cm__form .gform_confirmation_wrapper {
  color: var(--off-white) !important;
  font-size: 17px !important;
  line-height: 1.6;
}
.dv-cm__form .gform_wrapper .ginput_container_fileupload {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  overflow: hidden;
}
.dv-cm__form .gform_wrapper .ginput_container_fileupload input[type="file"] {
  color: rgba(255,255,255,0.6) !important;
  width: 100% !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.dv-cm__form .gform_wrapper input[type="text"],
.dv-cm__form .gform_wrapper input[type="email"],
.dv-cm__form .gform_wrapper input[type="tel"],
.dv-cm__form .gform_wrapper input[type="number"],
.dv-cm__form .gform_wrapper textarea,
.dv-cm__form .gform_wrapper select {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  color: #ffffff !important;
  transition: border-color 0.2s;
}
.dv-cm__form .gform_wrapper input[type="number"]::-webkit-outer-spin-button,
.dv-cm__form .gform_wrapper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.dv-cm__form .gform_wrapper input[type="number"] {
  -moz-appearance: textfield !important;
}
.dv-cm__form .gform_wrapper select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  height: auto !important;
  line-height: 1.4 !important;
  padding: 14px 40px 14px 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
  background-color: rgba(255,255,255,0.06) !important;
}
.dv-cm__form .gform_wrapper .ginput_container_select {
  position: relative !important;
  margin-top: 0 !important;
  padding: 0 !important;
}
.dv-cm__form .gform_wrapper select option {
  background: #1a1a1a !important;
  color: #ffffff !important;
}
.dv-cm__form .gform_wrapper .gfield {
  margin-bottom: 16px !important;
}
.dv-cm__form .gform_wrapper .gfield input,
.dv-cm__form .gform_wrapper .gfield select,
.dv-cm__form .gform_wrapper .gfield textarea {
  width: 100% !important;
}
.dv-cm__form .gform_wrapper input:focus,
.dv-cm__form .gform_wrapper textarea:focus,
.dv-cm__form .gform_wrapper select:focus {
  border-color: var(--bright-purple) !important;
  outline: none;
}
.dv-cm__form .gform_wrapper label,
.dv-cm__form .gform_wrapper .gfield_label,
.dv-cm__form .gform_wrapper .ginput_complex label {
  color: rgba(255,255,255,0.7) !important;
  font-size: 13px !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.dv-cm__form .gform_wrapper .gform_button,
.dv-cm__form .gform_wrapper input[type="submit"] {
  background: var(--lime) !important;
  color: #1a0e1e !important;
  font-family: inherit !important;
  font-size: 15px !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 40px !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.dv-cm__form .gform_wrapper .gform_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(214,244,0,0.22);
}
.dv-cm__form .gform_wrapper .gfield_description,
.dv-cm__form .gform_wrapper .ginput_preview,
.dv-cm__form .gform_wrapper .gform_fileupload_rules {
  color: rgba(255,255,255,0.55) !important;
}
.dv-cm__form .gform_wrapper .validation_message {
  color: #ff6b6b !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .dv-cm__section { padding: 56px 32px; margin: 0 8px; margin-top: 16px; }
  .dv-cm__hero { grid-template-columns: 1fr; min-height: auto; margin-top: 0; }
  .dv-cm__hero-img { height: 340px; border-radius: 16px; margin: 0 20px 20px; }
  .dv-cm__hero-content { padding: 48px 32px 32px; }
  .dv-cm__cards { grid-template-columns: 1fr 1fr; gap: 14px; }
  .dv-cm__steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .dv-cm__section { padding: 40px 20px; margin: 0 6px; margin-top: 14px; }
  .dv-cm__hero { margin-top: 0; }
  .dv-cm__hero-img { height: 280px; border-radius: 14px; margin: 0 16px 16px; }
  .dv-cm__hero-content { padding: 36px 20px 24px; }
  .dv-cm__cards { grid-template-columns: 1fr; }
  .dv-cm__steps { grid-template-columns: 1fr; }
  .dv-cm__how-title { font-size: 28px; }
}

/* Empty states on dark careers sections stay legible. */
.careers-jobs .card-grid__empty,
.careers-teams .card-grid__empty,
.careers-benefits .card-grid__empty { color: rgba(255, 255, 255, 0.7); }

/* ==========================================================================
   Internship Signup page (.dv-isu-*) — ported verbatim from the Elementor
   source for the `internship-signup` page (WXR export 2026-07-01).
   Three full-bleed two-column sections: hero + signup form, 8-week program
   accordion, and the "Our Story" closing band.
   ========================================================================== */

.dv-isu-hero,
.dv-isu-program,
.dv-isu-story {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;                 /* prod separates the two panels by 10px (were flush) */
	align-items: stretch;
	min-height: 92vh;
}

/* ---- Hero ---- */
.dv-isu-hero__panel {
	background: var(--dark);
	color: #fff;
	display: flex;
	align-items: center;
	padding: clamp(3rem, 7vw, 7rem) clamp(1.5rem, 5vw, 5rem);
}
.dv-isu-hero__inner { max-width: 36rem; width: 100%; }
.dv-isu-hero__title {
	font-size: clamp(2.4rem, 4.6vw, 4rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--beige);
	margin: 0 0 1.25rem;
}
.dv-isu-hero__lede {
	font-size: 1.15rem;
	line-height: 1.5;
	color: #fff;
	margin: 0 0 2.25rem;
}
.dv-isu-hero__photo {
	background-size: cover;
	background-position: center;
}
.dv-isu-hero__form { max-width: 734px; padding: 37px; }
.dv-isu-hero__form .gform_wrapper { max-width: 100% !important; margin: 0 !important; }
.dv-isu-hero__form .gform_wrapper .gform_fields {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	grid-row-gap: 14px !important;
	grid-column-gap: 14px !important;
}
.dv-isu-hero__form .gform_wrapper .gfield--width-full,
.dv-isu-hero__form .gform_wrapper .gform-footer { grid-column: 1 / -1; }
.dv-isu-hero__form .gform_wrapper input[type="text"],
.dv-isu-hero__form .gform_wrapper input[type="email"],
.dv-isu-hero__form .gform_wrapper input[type="tel"],
.dv-isu-hero__form .gform_wrapper textarea,
.dv-isu-hero__form .gform_wrapper select {
	background: #fff !important;
	border: 0 !important;
	border-radius: 13px !important;
	padding: 13px 14px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	color: #464646 !important;
	width: 100% !important;
}
.dv-isu-hero__form .gform_wrapper input::placeholder,
.dv-isu-hero__form .gform_wrapper textarea::placeholder {
	color: rgba(38, 20, 20, 0.4) !important;
	opacity: 1;
}
.dv-isu-hero__form .gform_wrapper label,
.dv-isu-hero__form .gform_wrapper .gfield_label {
	color: #fff !important;
	font-size: 16px !important;
	line-height: 20px;
	font-weight: 600 !important;
	font-family: inherit;
	padding-block-end: 6px !important;
	display: block;
}
.dv-isu-hero__form .gform_wrapper .gfield_required { color: var(--lime) !important; }
.dv-isu-hero__form .gform_wrapper .gform-field-label--type-sub,
.dv-isu-hero__form .gform_wrapper .gform_validation_container,
.dv-isu-hero__form .gform_wrapper .gform_required_legend,
.dv-isu-hero__form .gform_wrapper .gfield_required_text,
.dv-isu-hero__form .gform_wrapper .gform_title,
.dv-isu-hero__form .gform_wrapper .gform_description { display: none !important; }
.dv-isu-hero__form .gform_wrapper .gform_footer { padding: 0 !important; margin: 0; }
.dv-isu-hero__form .gform_wrapper .gform_button,
.dv-isu-hero__form .gform_wrapper input[type="submit"] {
	background: var(--lime) !important;
	color: #000 !important;
	border: 0 !important;
	border-radius: 32px !important;
	width: 100px !important;
	padding: 8px 12px !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.dv-isu-hero__form .gform_wrapper .gform_button:hover,
.dv-isu-hero__form .gform_wrapper input[type="submit"]:hover {
	background: #fff !important;
	color: #000 !important;
}

/* ---- Program (accordion) section ---- */
.dv-isu-program__photo {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 85vh;
	padding: 24px;
	border-radius: 10px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}
.dv-isu-program__overlay {
	width: 100%;
	max-width: 700px;
	margin-top: -10px;
	padding: 30px;
	border-radius: 0 0 10px 10px;
	background: linear-gradient(104deg, var(--indigo) 15%, var(--lavender-2) 88%);
}
.dv-isu-program__panel {
	background: var(--beige);
	color: var(--purple);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 85vh;
	padding: 40px 24px;
	border-radius: 10px;
}
.dv-isu-program__inner { max-width: 700px; width: 100%; }
.dv-isu-program__title {
	font-size: clamp(2rem, 3.8vw, 3.2rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--purple);
	margin: 0 0 1.25rem;
}
.dv-isu-program__lede {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--purple);
	/* no margin: prod gives every paragraph the same 0.9rem gap (shared p rule) */
}

/* Accordion: internship variant (white cards on the purple panel). */
.accordion--internship { display: flex; flex-direction: column; gap: 12px; }
.accordion--internship .accordion__item {
	background: #fff;
	color: var(--dark);
	border: 0;
	border-radius: 10px;
	overflow: hidden;
	transition: background 0.2s, color 0.2s;
}
.accordion--internship .accordion__item:hover {
	background: var(--indigo);
	color: #fff;
}
.accordion--internship .accordion__item[open] {
	background: linear-gradient(135deg, var(--indigo), var(--lavender-2));
	color: #fff;
}
.accordion--internship .accordion__head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
}
.accordion--internship .accordion__head::-webkit-details-marker { display: none; }
.accordion--internship .accordion__title {
	font-size: 1.1rem;
	line-height: 1.2;
	flex: 1;
}
.accordion--internship .accordion__plus {
	position: relative;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}
.accordion--internship .accordion__plus::before,
.accordion--internship .accordion__plus::after {
	content: "";
	position: absolute;
	background: currentColor;
	transition: transform 0.2s;
}
.accordion--internship .accordion__plus::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.accordion--internship .accordion__plus::after  { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.accordion--internship .accordion__item[open] .accordion__plus::after { transform: translateX(-50%) scaleY(0); }
.accordion--internship .accordion__body {
	padding: 0 24px 22px 54px;
	color: var(--beige);
	font-size: 0.98rem;
	line-height: 1.55;
}
.accordion--internship .accordion__body p { margin: 0; }

/* ---- Our Story band ---- */
.dv-isu-story__panel {
	background: var(--light-blue);
	color: var(--dark);
	display: flex;
	align-items: center;
	padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem);
}
.dv-isu-story__inner { max-width: 34rem; width: 100%; }
.dv-isu-story__title {
	font-size: clamp(2rem, 3.8vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--dark);
	margin: 0 0 1.25rem;
}
.dv-isu-story__text {
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(38, 20, 20, 0.8);
	/* no margin: prod gives every paragraph the same 0.9rem gap (shared p rule) */
}
.dv-isu-story__btn { font-weight: 600; }
.dv-isu-story__photo {
	background-size: cover;
	background-position: center;
}

/* ---- Responsive ---- */
/* 767, not 900: prod holds all three rows two-up through tablet, and stacking at 900 made
   the page 1105px too tall at 768. */
@media (max-width: 767px) {
	.dv-isu-hero,
	.dv-isu-program,
	.dv-isu-story {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.dv-isu-hero__photo { display: none; }
	.dv-isu-program__photo { min-height: 340px; }
	.dv-isu-story__photo { min-height: 300px; }  /* prod mobile: Our Story text first, photo below (was order:-1) */
	.dv-isu-hero__panel,
	.dv-isu-program__panel,
	.dv-isu-story__panel { padding: clamp(3rem, 10vw, 5rem) 1.5rem; }
}
@media (max-width: 560px) {
	.dv-isu-hero__form .gform_wrapper .gform_fields { grid-template-columns: 1fr; }
}

/* Lenis smooth scroll (bundled lib; init in site.js sets html.lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }