/* About page - Home theme parity (dark + light), beats Webflow overrides */
:root {
  --pr-bg: #09090b;
  --pr-ink: #e6e6e6;
  --pr-muted: #a1a1aa;
  --pr-soft: #71717a;
  --pr-line: #27272a;
  --pr-panel: #141416;
  --pr-accent: #60a5fa;
  --pr-nav: rgba(230, 230, 230, 0.88);
}

html.is-light,
html[data-theme="light"] {
  --pr-bg: #ffffff;
  --pr-ink: #111827;
  --pr-muted: #6b7280;
  --pr-soft: #9ca3af;
  --pr-line: #e5e7eb;
  --pr-panel: #f8fafc;
  --pr-accent: #1d4ed8;
  --pr-nav: rgba(17, 24, 39, 0.82);
}

/* Beat Webflow .body / .about-praga white shells immediately (no JS gate) */
html,
html body,
html body.body,
body.body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--pr-bg) !important;
  color: var(--pr-ink) !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

.about-praga,
section.about-praga {
  background: transparent !important;
  color: var(--pr-ink) !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Ungated type colors so FOUC never shows Webflow dark-blue on white/black */
.about-heading-2-dark,
h1.about-heading-2-dark,
.about-heading-2,
.about-heading-2.black,
h2.about-heading-2,
.about-section-title,
.BLACK {
  color: var(--pr-ink) !important;
}
.about-eyebrow,
p.about-eyebrow {
  color: var(--pr-accent) !important;
}
.hero_paragraph-dark,
.hero_paragraph-dark.smaller,
.about-heading-3,
h4.about-heading-3,
.paragraph-14,
.paragraph-15,
.paragraph-16 {
  color: var(--pr-muted) !important;
}
.hero_paragraph-dark strong,
.heading-style-h4,
h1.heading-style-h4 {
  color: var(--pr-ink) !important;
}
.heading-style-h4,
h1.heading-style-h4 {
  color: var(--pr-accent) !important;
}

/* Dot field */
html body.body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--pr-ink) 28%, transparent) 1px,
    transparent 1.5px
  );
  background-size: 18px 18px;
}
html.is-light body.body::before,
html[data-theme="light"] body.body::before {
  opacity: 0.22;
}

body.pr-pc-ready > *:not(.pr-pc-nav) {
  position: relative;
  z-index: 1;
}

/* Hide legacy Site Navigation + Site Footer hard */
.navigation,
section.navigation,
#site-nav,
.Footer-Subscribe,
section.Footer-Subscribe,
.footer-subscribe,
.Footer.Subscribe,
.footer-name,
.footer-copyright,
.footer-social-link-three,
.footer-legal-link,
[class*="footer-name"],
[class*="Footer Name"],
[class*="footer-copyright"],
[class*="Footer Copyright"],
[class*="footer-social-link"],
[class*="footer-legal"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Nav - explicit theme tokens (fixes light-mode ghost links) */
.pr-pc-nav {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  padding: 22px 28px;
  border-bottom: 1px solid color-mix(in srgb, var(--pr-line) 80%, transparent);
  background: color-mix(in srgb, var(--pr-bg) 90%, transparent);
  color: var(--pr-nav) !important;
}
.pr-pc-links {
  gap: 20px;
}
.pr-pc-links a,
.pr-pc-brand,
.pr-pc-theme {
  color: var(--pr-nav) !important;
}
.pr-pc-links a {
  font-size: 11px;
  letter-spacing: 0.14em;
  opacity: 0.72;
  text-decoration: none;
}
.pr-pc-links a:hover {
  opacity: 1;
}
.pr-pc-links a.is-active {
  opacity: 1;
  color: var(--pr-ink) !important;
}
.pr-pc-brand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  opacity: 1;
  text-decoration: none;
}
.pr-pc-theme {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
}

/* Main About shell spacing - Home-like vertical rhythm */
body.pr-pc-ready .about-praga,
body.pr-pc-ready section.about-praga {
  padding: 64px 0 120px !important;
}

.about-praga > .w-container,
.about-praga .container-77,
.container-77 {
  max-width: 1040px !important;
  width: min(1040px, calc(100% - 56px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hierarchy - Home eyebrow / title language */
.about-eyebrow,
p.about-eyebrow {
  margin: 0 0 14px !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.about-heading-2-dark,
h1.about-heading-2-dark {
  margin: 0 0 20px !important;
  max-width: 16ch;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(2.35rem, 5.2vw, 3.5rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
}

.hero_paragraph-dark,
.hero_paragraph-dark.smaller,
p.hero_paragraph-dark {
  margin: 0 0 72px !important;
  max-width: 38rem !important;
  padding-bottom: 0 !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.6 !important;
}
.hero_paragraph-dark strong {
  color: var(--pr-ink) !important;
  font-weight: 600 !important;
}

/* Section titles (Work history, Education, etc.) */
.about-section-title,
.about-heading-2,
.about-heading-2.black,
h2.about-heading-2,
h2.black {
  margin: 72px 0 8px !important;
  padding-bottom: 18px !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(1.15rem, 2vw, 1.35rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  border-bottom: 1px solid var(--pr-line) !important;
  max-width: 48rem !important;
}
/* Soft Skills / Hard Skills / My story in columns - no rule under every h2 in sidebar */
.columns-5 .about-section-title,
.columns-5 .about-heading-2,
.columns-5 h2.about-heading-2,
.columns-5 h2.black {
  margin: 0 0 12px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem) !important;
}
.columns-5 .w-col:first-child .about-section-title:not(:first-child),
.columns-5 .w-col:first-child h2.about-heading-2:not(:first-child) {
  margin-top: 28px !important;
}

.about-heading-3,
h4.about-heading-3 {
  margin: 0 0 14px !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.55 !important;
}
.about-heading-3.center {
  max-width: 46rem;
  text-align: left !important;
}

.hero_paragraph-dark.level-3,
p.hero_paragraph-dark.level-3,
.hero_paragraph-dark-level-3 {
  max-width: 38rem !important;
  margin: 0 0 20px !important;
  font-size: 1.05rem !important;
  color: var(--pr-muted) !important;
}

.columns-5,
.w-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 8px !important;
}
.columns-5 .w-col {
  padding-left: 0 !important;
  padding-right: 36px !important;
}
.columns-5 .w-col:last-child {
  padding-right: 0 !important;
}

/* Experience / education - premium list rows (no white cards) */
.experience,
.w-layout-hflex.experience {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 48rem !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--pr-ink) !important;
}

.exp-link-block,
a.exp-link-block {
  display: block !important;
  width: 100% !important;
  max-width: 48rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--pr-ink) !important;
  text-decoration: none !important;
  line-height: 1.45 !important;
  transition: opacity 0.2s ease;
}
.exp-link-block:hover {
  opacity: 1 !important;
}

/* Flatten Webflow card shell → list row */
.experi_blocl,
.experi_blocl-smaller,
.w-layout-hflex.experi_blocl,
.w-layout-hflex.experi_blocl-smaller,
.exp-link-block .experi_blocl,
.exp-link-block .experi_blocl-smaller {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--pr-line) 85%, transparent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 22px 0 !important;
  margin: 0 !important;
  align-items: flex-start !important;
  gap: 18px !important;
  /* Beat Webflow IX opacity:0 so rows never vanish */
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition: border-color 0.2s ease;
}
.experi_blocl:hover,
.experi_blocl-smaller:hover,
.exp-link-block:hover .experi_blocl,
.exp-link-block:hover .experi_blocl-smaller {
  background: transparent !important;
  background-color: transparent !important;
  border-color: color-mix(in srgb, var(--pr-ink) 22%, transparent) !important;
  opacity: 1 !important;
}
.exp-link-block:last-child .experi_blocl,
.exp-link-block:last-child .experi_blocl-smaller,
.marcquee > .exp-link-block:last-of-type .experi_blocl {
  border-bottom: 0 !important;
}

/* Logo tile */
.ico_experience,
.exp-link-block .ico_experience {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  margin-top: 2px !important;
  padding: 7px !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--pr-line) 90%, transparent) !important;
  background: var(--pr-panel) !important;
}

.experience_wrap,
.w-layout-vflex.experience_wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  background: transparent !important;
  color: var(--pr-ink) !important;
  flex: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* Role / degree - primary */
.text_experience,
.text_experience._10padding,
.text_experience._10padding.black,
.text_experience.black {
  color: var(--pr-ink) !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  background: transparent !important;
  margin: 0 0 2px !important;
  padding-left: 0 !important;
  width: auto !important;
}

/* Company + dates row */
.experience_wrap1,
.w-layout-hflex.experience_wrap1 {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 6px 16px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Industry + tenure row */
.experience_wrap2,
.experience_wrap2.black,
.w-layout-hflex.experience_wrap2 {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 4px 16px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 2px 0 0 !important;
  background: transparent !important;
  color: var(--pr-soft) !important;
}

/* Company name */
.text_experience_next,
.text_experience_next.black {
  color: var(--pr-muted) !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.4 !important;
  background: transparent !important;
}

/* Dates - quieter, right-aligned when room */
.text_experience_next.black:last-child,
.experience_wrap1 > .text_experience_next:last-child {
  color: var(--pr-soft) !important;
  font-weight: 400 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.01em !important;
  text-align: right !important;
  margin-left: auto !important;
}

/* Industry + duration */
.text_experience_next2,
.text_experience_next2.black {
  color: var(--pr-soft) !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
  background: transparent !important;
}
.experience_wrap2 > .text_experience_next2:last-child {
  margin-left: auto !important;
  text-align: right !important;
}


/* Kill Webflow scroll IX opacity:0 on About content */
.about-praga [style*="opacity"],
.about-praga [data-w-id],
.about-heading-2-dark,
.hero_paragraph-dark,
.about-section-title,
.about-heading-3,
.hero_paragraph-dark-level-3 {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Catch-all wraps stay themed */
[class*="experience_wrap"],
[class*="text_experience"] {
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Milestones - kill pastel layout353 cards (root dark-mode contrast bug) */
.marcquee,
[class*="Marcquee"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 24px !important;
}

.layout353_content-item,
.layout353_content-item.content-item-1,
.layout353_content-item.content-item-2,
.layout353_content-item.content-item-3,
[class*="layout353_content-item"],
[class*="content-item-"] {
  color: var(--pr-ink) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  top: auto !important;
}
.layout353_content-item:hover,
.layout353_content-item.content-item-1:hover,
.layout353_content-item.content-item-2:hover,
.layout353_content-item.content-item-3:hover {
  transform: none !important;
  background: transparent !important;
}

.heading-style-h4,
h1.heading-style-h4 {
  margin: 8px 0 8px !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  background: transparent !important;
  border: 0 !important;
}

.paragraph-14,
.paragraph-15,
.paragraph-16,
p.paragraph-14,
p.paragraph-15,
p.paragraph-16 {
  margin: 0 0 8px !important;
  max-width: 36rem !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.about-praga [class*="card"],
.about-praga [class*="Card"],
.about-praga .w-layout-blockcontainer {
  background: transparent !important;
  box-shadow: none !important;
}

.about-praga a:not(.pr-pc-links a):not(.pr-pc-brand):not(.pr-site-footer a):not(.pr-site-footer-1 a) {
  color: var(--pr-ink) !important;
}

.about-praga p,
.about-praga li,
.about-praga .paragraph,
.about-praga .text-block {
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: var(--pr-muted) !important;
}
.about-praga .about-eyebrow,
.about-praga p.about-eyebrow {
  color: var(--pr-accent) !important;
}

.aboutgalleryimage,
[class*="AboutGallery"],
[class*="aboutgallery"] {
  border-radius: 8px !important;
  border: 1px solid var(--pr-line) !important;
}

/* Footer socials - force token colors (Webflow `a` was winning in light mode) */
.pr-site-footer,
.pr-site-footer-1 {
  background: var(--pr-ft-bg, #000) !important;
  color: var(--pr-ft-ink, #fff) !important;
}
html.is-light .pr-site-footer,
html.is-light .pr-site-footer-1,
html[data-theme="light"] .pr-site-footer,
html[data-theme="light"] .pr-site-footer-1 {
  --pr-ft-bg: #ffffff;
  --pr-ft-ink: #0a0a0a;
  --pr-ft-muted: rgba(10, 10, 10, 0.55);
  --pr-ft-soft: rgba(10, 10, 10, 0.38);
  background: #ffffff !important;
  color: #0a0a0a !important;
  border-top: 1px solid var(--pr-line);
}
.pr-site-footer__socials a,
.pr-site-footer__social-link {
  color: var(--pr-ft-muted, rgba(255, 255, 255, 0.55)) !important;
}
html.is-light .pr-site-footer__socials a,
html.is-light .pr-site-footer__social-link,
html[data-theme="light"] .pr-site-footer__socials a,
html[data-theme="light"] .pr-site-footer__social-link {
  color: rgba(10, 10, 10, 0.55) !important;
}
.pr-site-footer__socials a:hover,
.pr-site-footer__social-link:hover {
  color: var(--pr-ft-ink, #fff) !important;
}
html.is-light .pr-site-footer__socials a:hover,
html.is-light .pr-site-footer__social-link:hover,
html[data-theme="light"] .pr-site-footer__socials a:hover,
html[data-theme="light"] .pr-site-footer__social-link:hover {
  color: #0a0a0a !important;
}
.pr-site-footer__meta,
.pr-site-footer__meta-1 {
  color: var(--pr-ft-soft, rgba(255, 255, 255, 0.38)) !important;
}
html.is-light .pr-site-footer__meta,
html.is-light .pr-site-footer__meta-1,
html[data-theme="light"] .pr-site-footer__meta,
html[data-theme="light"] .pr-site-footer__meta-1 {
  color: rgba(10, 10, 10, 0.38) !important;
}

@media (max-width: 767px) {
  body.pr-pc-ready .about-praga {
    padding: 36px 0 88px !important;
  }
  .about-praga > .w-container,
  .container-77 {
    width: calc(100% - 32px) !important;
  }
  .columns-5 .w-col {
    padding-right: 0 !important;
  }
  .about-section-title,
  .about-heading-2,
  h2.about-heading-2,
  h2.black {
    margin-top: 56px !important;
  }
  .experi_blocl,
  .experi_blocl-smaller,
  .exp-link-block .experi_blocl {
    gap: 14px !important;
    padding: 18px 0 !important;
  }
  .ico_experience,
  .exp-link-block .ico_experience {
    width: 40px !important;
    height: 40px !important;
    padding: 6px !important;
  }
  .experience_wrap1,
  .experience_wrap2,
  .w-layout-hflex.experience_wrap1,
  .w-layout-hflex.experience_wrap2 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .text_experience_next.black:last-child,
  .experience_wrap1 > .text_experience_next:last-child,
  .experience_wrap2 > .text_experience_next2:last-child {
    margin-left: 0 !important;
    text-align: left !important;
  }
  .pr-pc-nav {
    padding: 18px 14px;
    letter-spacing: 0.1em;
  }
  .pr-pc-links {
    gap: 12px;
  }
}