/* ==========================================================================
   TopoMatters — design system
   Brand: Terra Orange #FF7D2B · Water Blue #03A6EB · Dark Blue #002473
   Type:  Mona Sans (Black for headings/marks, Regular for body); Futura fallback
   ========================================================================== */

:root {
  --orange: #ff7d2b;
  --orange-600: #ec6512;
  --blue: #03a6eb;
  --blue-600: #0089c4;
  --navy: #002473;
  --navy-900: #001233;
  --navy-800: #00194f;
  --ink: #0b1630;
  --ink-2: #3a4663;
  --muted: #6a7590;
  --line: #e2e7f0;
  --paper: #ffffff;
  --tint: #f4f7fb;

  --font: "Mona Sans", Futura, "Futura PT", "Century Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(0, 18, 51, .06), 0 8px 24px rgba(0, 18, 51, .08);
  --shadow-lg: 0 24px 60px rgba(0, 18, 51, .18);
  --container: 1200px;
  --header-h: 80px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--blue-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
h1, h2, h3 { font-weight: 900; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--navy-900); text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; line-height: 1.25; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.narrow { max-width: 780px; }
.muted { color: var(--muted); }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }
.hp { position: absolute !important; left: -9999px !important; }

/* ---------- Brand logo (supplied artwork, never recolored) ---------- */
.brand { display: inline-flex; align-items: center; flex: none; border-radius: 12px; transition: background .2s, padding .2s; }
.brand img { height: 56px; width: auto; }
.brand--plate { background: #fff; padding: 8px 12px; }
.brand--plate img { height: 64px; }

/* ---------- Brand service marks (brand guide §03) ---------- */
.mark { display: inline-flex; align-items: baseline; font-weight: 900; letter-spacing: -.01em; line-height: 1; white-space: nowrap; font-size: 1.1rem; }
.mark__topo { color: var(--orange); }
.mark__desc { color: var(--blue); }
.mark__sym { font-size: .5em; color: currentColor; opacity: .8; margin-left: 1px; transform: translateY(-.55em); font-weight: 700; }
.mark__tag { margin-left: .7em; font-size: .62em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.mark--lg { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }

/* ---------- Buttons ---------- */
.btn { --bg: var(--orange); --fg: #fff; display: inline-flex; align-items: center; gap: .55em; padding: .85em 1.35em; border-radius: 999px; font-weight: 700; font-size: .98rem; text-decoration: none; color: var(--fg); background: var(--bg); border: 1.5px solid transparent; cursor: pointer; transition: transform .2s var(--ease), background .2s, box-shadow .2s, color .2s; font-family: inherit; line-height: 1.1; }
.btn .icon { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease); }
.btn:hover { color: var(--fg); transform: translateY(-1px); }
.btn:hover .icon { transform: translateX(3px); }
.btn--primary { box-shadow: 0 8px 22px rgba(255, 125, 43, .35); }
.btn--primary:hover { --bg: var(--orange-600); }
.btn--secondary { --bg: transparent; --fg: var(--navy); border-color: currentColor; }
.btn--secondary:hover { --bg: var(--navy); --fg: #fff; border-color: var(--navy); }
.btn--ghost { --bg: transparent; --fg: var(--navy); padding-inline: 0; }
.btn[data-size="sm"] { padding: .62em 1.05em; font-size: .9rem; }
.page-hero .btn--secondary, .hero .btn--secondary, .section--dark .btn--secondary { --fg: #fff; }
.page-hero .btn--secondary:hover, .hero .btn--secondary:hover, .section--dark .btn--secondary:hover { --bg: #fff; --fg: var(--navy); border-color: #fff; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 4px 20px rgba(0, 18, 51, .06); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.nav { flex: 1; }
.nav__list { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: 10px; font: 600 .96rem var(--font); color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
.nav__link .icon { width: 16px; height: 16px; transition: transform .2s; }
.nav__link:hover, .nav__link.is-active, .nav__item.is-active > .nav__link { color: var(--navy); background: var(--tint); }
.nav__menu { position: absolute; top: calc(100% + 8px); left: -8px; width: 380px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s var(--ease); }
.nav__item--has-menu:hover .nav__menu, .nav__item--has-menu:focus-within .nav__menu, .nav__trigger[aria-expanded="true"] + .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__item--has-menu:hover .nav__trigger .icon { transform: rotate(180deg); }
.nav__menu-link { display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.nav__menu-link strong { display: block; font-weight: 700; color: var(--navy-900); }
.nav__menu-link span { font-size: .86rem; color: var(--muted); }
.nav__menu-link:hover { background: var(--tint); }
.nav__mobile-cta { display: none; }
.site-header__actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.header-phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .95rem; color: var(--navy); text-decoration: none; }
.header-phone .icon { width: 18px; height: 18px; color: var(--orange); }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; place-items: center; }
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle .icon--close { display: none; }
.nav-open .nav-toggle .icon--menu { display: none; }
.nav-open .nav-toggle .icon--close { display: block; }

@media (max-width: 1080px) { .header-phone span { display: none; } }
@media (max-width: 960px) {
  :root { --header-h: 72px; }
  .brand img { height: 48px; }
  .nav-toggle { display: grid; }
  .site-header__actions .btn { display: none; }
  .nav { position: fixed; top: var(--header-h); left: 0; right: 0; height: calc(100dvh - var(--header-h)); background: #fff; padding: 20px; overflow-y: auto; transform: translateX(100%); transition: transform .28s var(--ease); }
  .nav-open .nav { transform: none; }
  .nav__list { flex-direction: column; gap: 2px; }
  .nav__link { width: 100%; justify-content: space-between; font-size: 1.1rem; padding: 14px 12px; }
  .nav__menu { position: static; width: auto; box-shadow: none; border: 0; padding: 0 0 8px 8px; opacity: 1; visibility: visible; transform: none; display: none; }
  .nav__trigger[aria-expanded="true"] + .nav__menu { display: block; }
  .nav__item--has-menu:hover .nav__trigger .icon { transform: none; }
  .nav__trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .nav__mobile-cta { display: grid; gap: 14px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
  .nav__mobile-cta .btn { justify-content: center; }
  .nav__phone { display: flex; gap: 8px; justify-content: center; font-weight: 700; color: var(--navy); text-decoration: none; }
  .nav__phone .icon { width: 20px; }
  body.nav-open { overflow: hidden; }
  /* backdrop-filter creates a containing block for fixed children — drop it while the drawer is open */
  .nav-open .site-header, .page-home.nav-open .site-header:not(.is-scrolled) { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .page-home.nav-open .site-header:not(.is-scrolled) .header-phone { color: var(--navy); }
}

/* ---------- Hero (home) ---------- */
.hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(1200px 600px at 80% -10%, #003aa8 0%, transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 70%); margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); }
.page-home .site-header:not(.is-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.page-home .site-header:not(.is-scrolled) .nav__link, .page-home .site-header:not(.is-scrolled) .header-phone { color: #fff; }
.page-home .site-header:not(.is-scrolled) .nav__link:hover { background: rgba(255, 255, 255, .1); }
/* logo keeps its own colors: give it a white plate while over the dark hero */
.page-home .site-header:not(.is-scrolled) .brand { background: #fff; padding: 4px 8px; }
.page-home .site-header:not(.is-scrolled) .brand img { height: 50px; }
@media (max-width: 960px) {
  .page-home .site-header:not(.is-scrolled) .nav__link { color: var(--ink); }
  .page-home .site-header:not(.is-scrolled) .brand img { height: 44px; }
}
.hero__art { position: absolute; inset: -5%; background-size: cover; background-position: center; opacity: .9; animation: drift 60s linear infinite alternate; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-2%, -3%, 0) scale(1.12); } }
.hero__glow { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 18, 51, .92) 0%, rgba(0, 18, 51, .55) 55%, rgba(0, 18, 51, .15) 100%); }
.hero__inner { position: relative; padding: clamp(80px, 12vw, 150px) 0 clamp(60px, 8vw, 110px); max-width: 920px; margin-left: max(20px, calc((100% - var(--container)) / 2)); }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .8); padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .04); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(255, 125, 43, .7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(255, 125, 43, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 125, 43, 0); } }
.hero__title { color: #fff; margin-top: 22px; font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
.hero__shout { display: block; color: var(--orange); }
.hero__lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 640px; color: rgba(255, 255, 255, .85); }
.hero__marks { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 0; margin: 40px 0 0; }
.hero__marks .mark { font-size: 1.05rem; }
.hero__marks .mark__tag { color: #fff; }
.hero__stats { position: relative; border-top: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 18, 51, .55); backdrop-filter: blur(6px); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 22px 20px; border-left: 1px solid rgba(255, 255, 255, .1); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat strong { display: block; font-size: 1.6rem; font-weight: 900; color: #fff; letter-spacing: -.02em; }
.stat span { font-size: .88rem; color: rgba(255, 255, 255, .7); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(3) { border-left: 0; padding-left: 0; } .stat { border-top: 1px solid rgba(255, 255, 255, .08); } }

/* ---------- Page hero ---------- */
.page-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 80%); }
.page-hero__art { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .75; mask-image: linear-gradient(90deg, transparent 0%, #000 55%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.page-hero__inner { position: relative; padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 7vw, 96px); }
.page-hero h1 { color: #fff; max-width: 900px; }
.page-hero .lead { max-width: 700px; }
.page-hero .mark__tag { color: #fff; }
.price-pill { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 32px; padding: 14px 20px; border-radius: var(--radius); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); font-size: .92rem; color: rgba(255, 255, 255, .8); }
.price-pill strong { font-size: 1.8rem; color: var(--orange); font-weight: 900; }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section--tint { background: var(--tint); }
.section--dark { background: var(--navy-900); color: rgba(255, 255, 255, .82); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead { color: rgba(255, 255, 255, .75); }
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.section-head-row .section-head { margin-bottom: 0; }
.kicker { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-600); margin-bottom: 14px; }
.kicker--light { color: var(--orange); }
.lead { font-size: 1.16rem; color: var(--ink-2); }
.lead--light { color: rgba(255, 255, 255, .82); }

.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1080px) { .grid--4, .grid--5, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split--form { align-items: start; grid-template-columns: .8fr 1.2fr; }
@media (max-width: 900px) { .split, .split--form { grid-template-columns: 1fr; } }

/* ---------- Cards ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); }
.card > .icon { width: 34px; height: 34px; color: var(--orange); margin-bottom: 16px; }
.card p:last-child { margin-bottom: 0; }
.card--outline { box-shadow: none; background: transparent; }
.section--tint .card--outline { background: #fff; }

.pillar { position: relative; display: flex; flex-direction: column; padding: 30px 26px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink-2); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; overflow: hidden; }
.pillar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--orange), var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; color: var(--ink-2); }
.pillar:hover::after { transform: none; }
.pillar__num { font-weight: 900; font-size: .9rem; color: var(--blue); }
.pillar__kicker { margin: 14px 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pillar h3 { font-size: 1.32rem; }
.pillar p { font-size: .97rem; flex: 1; }
.pillar__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--orange-600); }
.pillar__cta .icon { width: 18px; transition: transform .2s; }
.pillar:hover .pillar__cta .icon { transform: translateX(4px); }

.feature-list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 22px; }
.feature-list li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; }
.feature-list .icon { width: 48px; height: 48px; padding: 11px; border-radius: 14px; background: rgba(255, 125, 43, .1); color: var(--orange-600); }
.feature-list h3 { margin-bottom: 4px; }
.feature-list p { margin: 0; color: var(--ink-2); }
.feature-list--light .icon { background: rgba(3, 166, 235, .14); color: var(--blue); }
.feature-list--light p { color: rgba(255, 255, 255, .72); }

.qc-card { margin: 0; padding: 28px; border-radius: var(--radius-lg); background: var(--navy-900); color: #fff; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.qc-card::before { content: ""; position: absolute; inset: 0; background: url('/assets/img/generated/cta-contours.svg') center/cover; opacity: .35; }
.qc-card > * { position: relative; }
.qc-card figcaption { font-weight: 800; font-size: 1.05rem; margin-bottom: 14px; }
.qc-card__row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: .95rem; color: rgba(255, 255, 255, .75); }
.qc-card__row strong { color: #fff; text-align: right; }
.qc-card__row .ok { color: var(--blue); }
.qc-card__bars { display: flex; align-items: flex-end; gap: 4px; height: 70px; margin: 22px 0 12px; }
.qc-card__bars span { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(var(--blue), rgba(3, 166, 235, .25)); }
.qc-card__note { font-size: .82rem; color: rgba(255, 255, 255, .6); margin: 0; }

.capabilities { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.capabilities li { padding: 26px 0; border-bottom: 1px solid var(--line); font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 800; color: var(--navy-900); letter-spacing: -.01em; display: flex; align-items: center; gap: 14px; }
.capabilities li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--orange); flex: none; }
@media (max-width: 760px) { .capabilities { grid-template-columns: 1fr 1fr; } }

.diff__item { padding-top: 22px; border-top: 3px solid var(--navy); }
.diff__item:nth-child(even) { border-color: var(--orange); }
.diff__item p { color: var(--ink-2); font-size: .96rem; }

/* ---------- Projects ---------- */
.project-card { border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .25s var(--ease), box-shadow .25s; }
.section--dark .project-card { background: var(--navy-800); border-color: rgba(255, 255, 255, .08); }
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.project-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--navy-900); overflow: hidden; }
.project-card__media img, .project-card__art { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; transition: transform .6s var(--ease); }
.project-card:hover .project-card__art, .project-card:hover img { transform: scale(1.06); }
.chip { position: absolute; left: 14px; top: 14px; padding: 5px 11px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: rgba(255, 255, 255, .92); color: var(--navy); }
.project-card__body { padding: 20px 22px 22px; }
.project-card__body h3 { margin-bottom: 4px; }
.project-card__body p { margin: 0; color: var(--muted); }
.section--dark .project-card__body p { color: rgba(255, 255, 255, .62); }
.project-card.is-hidden, .post-card.is-hidden { display: none; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filter { font: 600 .92rem var(--font); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; transition: .15s; }
.filter span { color: var(--muted); font-weight: 500; margin-left: 2px; }
.filter:hover { border-color: var(--navy); color: var(--navy); }
.filter.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.filter.is-active span { color: rgba(255, 255, 255, .7); }

/* ---------- Posts ---------- */
.post-card { display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink-2); transition: transform .25s var(--ease), box-shadow .25s; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--ink-2); }
.post-card__meta { font-size: .82rem; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.post-card p { flex: 1; font-size: .97rem; }
.post-card__cta { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--orange-600); }
.post-card__cta .icon { width: 18px; }
.post__head { padding: clamp(48px, 7vw, 96px) 0 24px; background: linear-gradient(var(--tint), #fff); }
.post__back { display: inline-block; margin-bottom: 28px; font-weight: 600; text-decoration: none; }
.post__meta { color: var(--muted); font-weight: 500; }
.post__hero img { border-radius: var(--radius-lg); }
.prose { padding-bottom: 80px; font-size: 1.08rem; }
.prose h2 { font-size: 1.7rem; margin-top: 1.8em; }
.prose h3 { margin-top: 1.6em; }
.prose img { border-radius: var(--radius); margin: 1.5em 0; height: auto; }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--orange); font-size: 1.2rem; color: var(--navy); }
.prose li { margin-bottom: .45em; }
.prose code { background: var(--tint); padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.prose pre { background: var(--navy-900); color: #e6ecf7; padding: 20px; border-radius: var(--radius); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }

/* ---------- Lists, steps, packages ---------- */
.checklist { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.checklist .icon { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: rgba(3, 166, 235, .14); color: var(--blue-600); margin-top: 2px; }

.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.steps li { counter-increment: s; position: relative; padding: 56px 20px 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); font-weight: 700; color: var(--navy-900); line-height: 1.35; }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; top: 18px; left: 20px; font-weight: 900; color: var(--orange); }
.steps--compact { grid-template-columns: 1fr; gap: 10px; }
.steps--compact li { padding: 16px 18px 16px 64px; }
.steps--compact li::before { top: 16px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.packages { align-items: stretch; }
.package { position: relative; display: flex; flex-direction: column; padding: 34px 30px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; }
.package--featured { border: 2px solid var(--orange); box-shadow: 0 24px 60px rgba(255, 125, 43, .16); }
.package__badge { position: absolute; top: -13px; left: 28px; padding: 4px 12px; border-radius: 999px; background: var(--orange); color: #fff; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.package h3 { font-size: 1.45rem; }
.package__tagline { font-weight: 700; color: var(--blue-600); margin-top: -6px; }
.package .checklist { flex: 1; }
.package__deliv { font-size: .9rem; color: var(--muted); padding-top: 14px; border-top: 1px dashed var(--line); }
.package .btn { align-self: flex-start; }

.pipeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.pipeline__step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.pipeline__n { font-weight: 900; font-size: 1.6rem; color: var(--blue); line-height: 1; }
.pipeline__step h3 { margin-bottom: 6px; }
.pipeline__step p { margin: 0; color: var(--ink-2); }
@media (max-width: 800px) { .pipeline { grid-template-columns: 1fr; } }

.faq { display: grid; gap: 12px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 22px; font-weight: 700; color: var(--navy-900); font-size: 1.05rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { width: 22px; flex: none; transition: transform .2s; color: var(--orange); }
.faq__item[open] summary .icon { transform: rotate(180deg); }
.faq__a { padding: 0 22px 18px; color: var(--ink-2); }

.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 18px; }
.tag-list li { padding: 5px 12px; border-radius: 999px; background: var(--tint); font-size: .86rem; font-weight: 600; color: var(--ink-2); }

.scene-panel { padding: 34px; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--navy), var(--navy-900)); color: rgba(255, 255, 255, .8); }
.scene-panel h3 { color: #fff; font-size: 1.6rem; }
.scene-links { display: flex; flex-wrap: wrap; gap: 10px; }
.scene-panel .btn--secondary { --fg: #fff; }

/* ---------- Founder ---------- */
.founder { display: grid; grid-template-columns: 360px 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.founder__photo { position: relative; aspect-ratio: 6 / 7; border-radius: var(--radius-lg); overflow: hidden; background: url('/assets/img/generated/tile-3.svg') center/cover, var(--navy-900); }
.founder__photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.founder__initials { position: absolute; inset: 0; display: grid; place-items: center; font-size: 5rem; font-weight: 900; color: rgba(255, 255, 255, .9); letter-spacing: -.04em; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } .founder__photo { max-width: 360px; } }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--navy) 0%, var(--navy-900) 100%); color: #fff; padding: clamp(64px, 8vw, 100px) 0; }
.cta-band__art { position: absolute; inset: 0; background: url('/assets/img/generated/cta-contours.svg') center/cover; opacity: .6; }
.cta-band__inner { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.cta-band h2 { color: #fff; }
.cta-band__actions { display: grid; gap: 22px; justify-items: start; }
.cta-band__phone { display: flex; gap: 12px; align-items: center; color: #fff; text-decoration: none; font-size: .92rem; }
.cta-band__phone .icon { width: 44px; height: 44px; padding: 11px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: var(--orange); }
.cta-band__phone span { display: grid; color: rgba(255, 255, 255, .7); }
.cta-band__phone strong { color: #fff; font-size: 1.25rem; }
.cta-band__phone:hover { color: #fff; }
@media (max-width: 860px) { .cta-band__inner { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; padding: clamp(24px, 4vw, 40px); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; color: var(--navy-900); }
.form input, .form select, .form textarea { font: 400 1rem var(--font); padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s; width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(3, 166, 235, .15); }
.form .is-invalid { border-color: #d43c3c; }
.form label.check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-weight: 400; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.form label.check input { width: 18px; height: 18px; margin-top: 2px; }
.form .btn { justify-self: start; }
.form__status { margin: 0; font-weight: 600; min-height: 1.5em; }
.form__status.is-ok { color: #138a52; }
.form__status.is-err { color: #c0392b; }
.contact-aside { display: grid; gap: 16px; }
.contact-tile { display: flex; gap: 14px; align-items: center; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--navy-900); color: #fff; text-decoration: none; transition: transform .2s; }
.contact-tile:hover { color: #fff; transform: translateY(-2px); }
.contact-tile .icon { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: rgba(255, 125, 43, .16); color: var(--orange); flex: none; }
.contact-tile span { display: grid; font-size: .85rem; color: rgba(255, 255, 255, .7); }
.contact-tile strong { color: #fff; font-size: 1.1rem; word-break: break-all; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, .7); padding: 72px 0 28px; font-size: .94rem; }
.site-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.site-footer a:hover { color: var(--orange); }
.site-footer__top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.site-footer__brand .brand { margin-bottom: 20px; }
.site-footer__tag { max-width: 320px; }
.site-footer__contact { display: grid; gap: 8px; }
.site-footer__contact a, .site-footer__social a { display: inline-flex; gap: 8px; align-items: center; }
.site-footer__contact .icon { width: 18px; color: var(--orange); }
.site-footer__social { display: flex; gap: 10px; }
.site-footer__social .icon { width: 26px; height: 26px; }
.site-footer h3 { color: #fff; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; font-size: .82rem; color: rgba(255, 255, 255, .5); }
.site-footer__bottom p { margin: 0; }
@media (max-width: 1000px) { .site-footer__top { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.icon { width: 1em; height: 1em; flex: none; }

/* === TopoMatters update round 1 === */
/* Home hero LiDAR scan canvas */
.hero__scan { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 760px) { .hero__scan { opacity: .55; } }
/* Form confirmation dialog */
body.thanks-open { overflow: hidden; }
.thanks { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.thanks[hidden] { display: none; }
.thanks__backdrop { position: absolute; inset: 0; background: rgba(0, 18, 51, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.thanks__panel { position: relative; width: min(100%, 460px); padding: 36px 32px 30px; border-radius: var(--radius-lg); background: #fff; text-align: center; box-shadow: var(--shadow-lg); animation: thanks-in .35s var(--ease); }
.thanks__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: rgba(3, 166, 235, .14); color: var(--blue-600); }
.thanks__icon svg { width: 32px; height: 32px; }
.thanks__panel h2 { font-size: 1.55rem; margin-bottom: .4em; }
.thanks__panel p { color: var(--ink-2); }
.thanks__call { font-size: .95rem; }
.thanks__panel .btn { justify-content: center; margin-top: 6px; }
@keyframes thanks-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* === hero scan: keep text clear === */
@media (min-width: 900px) { .hero__scan { -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 58%); mask-image: linear-gradient(90deg, transparent 22%, #000 58%); } }

/* === hero scan: narrow screens === */
@media (min-width: 900px) and (max-width: 1199px) { .hero__scan { -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 75%); mask-image: linear-gradient(90deg, transparent 45%, #000 75%); } }

/* === hero scan: off on phones === */
@media (max-width: 899px) { .hero__scan { display: none; } }

/* === TopoMatters: Close form embed === */
.close-embed { padding: clamp(24px, 4vw, 40px); min-height: 360px; }
.close-embed close-form { display: block; width: 100%; font-family: var(--font); }
.close-embed__fallback { margin: 0; padding: 14px 16px; border-radius: var(--radius); background: var(--tint); color: var(--ink-2); line-height: 1.55; }
.close-embed__fallback a { font-weight: 700; }
.close-embed--off { min-height: 0; }
/* === end Close form embed === */

/* === hero scan: hide static contours === */
/* The background contour artwork conflicts with the animated TIN and contours, so it is hidden whenever the animation is running.
   Phones and small screens have no animation, so they keep it. To remove it everywhere, delete the .hero--scan prefix on this rule. */
.hero--scan .hero__art { display: none; }

/* === home: sustaining member badge === */
.hero__badge { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 28px 0 0; padding: 10px 18px 10px 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; font-size: .95rem; line-height: 1.3; transition: background .2s, border-color .2s; }
.hero__badge::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 125, 43, .25); }
.hero__badge strong { font-weight: 800; letter-spacing: .01em; }
.hero__badge span { color: rgba(255, 255, 255, .85); }
.hero__badge:hover { background: rgba(255, 255, 255, .13); border-color: var(--orange); color: #fff; }
.hero__badge + .hero__marks { margin-top: 26px; }

/* === hero marks: 2 x 2 === */
.hero__marks { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 18px 56px; }
@media (max-width: 719px) { .hero__marks { grid-template-columns: 1fr; gap: 14px; } }

/* === TopoMatters: QC histogram + TopoMissions === */
.qc-hist-wrap { container-type: inline-size; }
.qc-hist--narrow { display: none; }
@container (max-width: 470px) { .qc-hist--wide { display: none; } .qc-hist--narrow { display: block; } .qc-hist--narrow .qc-hist { max-width: 400px; margin-inline: auto; } }
.qc-hist { display: block; width: 100%; height: auto; margin: 18px 0 6px; overflow: visible; }
.qc-hist text { fill: rgba(255, 255, 255, .8); font: 600 17px var(--font); }
.qc-hist .qc-hist__title { fill: rgba(255, 255, 255, .95); font-weight: 700; }
.qc-hist__grid { stroke: rgba(255, 255, 255, .13); stroke-width: 1; }
.qc-hist__axis { stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; }
.qc-hist__bar { stroke: #001233; stroke-width: 1; transform-box: fill-box; transform-origin: 50% 100%; transition: transform .7s var(--ease); transition-delay: calc(var(--i) * 14ms + 150ms); }
[data-reveal]:not(.is-in) .qc-hist__bar { transform: scaleY(0); }
.qc-hist__lim { stroke-width: 1.8; stroke-dasharray: 7 6; opacity: .95; }
.qc-hist .z-core { fill: #03a6eb; }
.qc-hist .lim-in { stroke: #bfe9ff; }
.qc-hist .lim-core { stroke: #03a6eb; }
.qc-hist .lim-flag { stroke: var(--orange); }
.qc-hist .z-in { fill: #9fd8f5; }
.qc-hist .z-flag { fill: var(--orange); }
.qc-hist .z-out { fill: #ff5d73; }
.qc-hist__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 12px 0 8px; font-size: .95rem; color: rgba(255, 255, 255, .88); }
.qc-hist__legend i { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.qc-hist__legend i.z-core { background: #03a6eb; }
.qc-hist__legend i.z-in { background: #9fd8f5; }
.qc-hist__legend i.z-flag { background: var(--orange); }
.qc-hist__legend i.z-out { background: #ff5d73; }
.qc-hist__note { margin: 6px 0 12px; font-size: .88rem; color: rgba(255, 255, 255, .68); }
.mark-line { margin: 30px 0 0; }
.mark-line .mark { font-size: 1.35rem; white-space: normal; flex-wrap: wrap; row-gap: 6px; }
.mark-line .mark__tag { color: #fff; }
@media (prefers-reduced-motion: reduce) { .qc-hist__bar { transition: none; } }

/* === home pillars: balanced cards === */
/* Cause of the uneven gaps: the rule ".pillar p { flex: 1 }" also matched the small kicker line, so spare height was split
   between the kicker and the description. Now only the description grows, and on modern browsers the four cards share
   rows (number, kicker, title, description, link), so titles, descriptions and links line up across the row. */
.pillar__kicker { flex: none; letter-spacing: .1em; }
.pillar h3 { text-wrap: balance; }
@supports (grid-template-rows: subgrid) {
  .pillars .pillar { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .pillars .pillar__cta { justify-self: start; align-self: end; }
}

/* === TopoMatters: QC TIN conformance heatmap === */
.qc-heat-wrap { container-type: inline-size; }
.qc-heat { display: block; width: 100%; height: auto; margin: 14px 0 6px; overflow: visible; }
.qc-heat__title { margin: 20px 0 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.005em; color: #fff; }
.qc-heat__site { fill: rgba(3, 166, 235, .07); stroke: rgba(191, 233, 255, .55); stroke-width: 1.6; }
.qc-heat__mesh path { fill: none; stroke: rgba(191, 233, 255, .34); stroke-width: .9; stroke-linejoin: round; }
.qc-heat__glow { pointer-events: none; transition: opacity .7s ease .5s; }
.qc-heat__s { stroke: #001233; stroke-width: .8; transition: opacity .5s ease, transform .5s var(--ease); transform-box: fill-box; transform-origin: center; }
.qc-heat-wrap.is-live .qc-heat__s { transition-delay: calc(var(--d) * 650ms + 120ms); }
.qc-heat__s.p { fill: #35d07f; opacity: .72; }
.qc-heat__s.s { fill: #3d7bff; }
.qc-heat__s.m { fill: #FFA21F; }
.qc-heat__s.miss { stroke: #fff; stroke-width: 1.4; }
/* The squares wait, hidden, until the map itself has scrolled into view (a small script in main.js adds is-armed, then is-live
   a moment after the map is on screen). Without JavaScript, or with reduced motion, nothing is armed and the map just shows. */
.qc-heat-wrap.is-armed:not(.is-live) .qc-heat__s { opacity: 0; transform: scale(.4); transition: none; }
.qc-heat-wrap.is-armed:not(.is-live) .qc-heat__glow { opacity: 0; transition: none; }
/* the tolerance-band table, laid out like a conformance report legend */
.qc-heat__table { margin: 14px 0 4px; }
.qc-heat__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.qc-heat__head h4 { margin: 0; font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.qc-heat__head span { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.qc-heat__table ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.qc-heat__table li { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; font-size: .98rem; font-weight: 600; color: rgba(255, 255, 255, .92); }
.qc-heat__table li i { width: 24px; height: 24px; border-radius: 3px; border: 2px solid #fff; box-sizing: border-box; }
.qc-heat__table li i.p { background: #35d07f; }
.qc-heat__table li i.s { background: #3d7bff; }
.qc-heat__table li i.m { background: #FFA21F; }
.qc-heat__table li i.x { background: transparent; border: 2px dashed rgba(255, 255, 255, .5); }
.qc-heat__table li b { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.qc-heat__table li b.p { color: #35d07f; }
.qc-heat__table li b.s { color: #7fa6ff; }
.qc-heat__table li b.m { color: #FFB955; }
.qc-heat__table li b.x { color: rgba(255, 255, 255, .55); font-weight: 600; font-size: .95rem; }
.qc-heat__table li.none { color: rgba(255, 255, 255, .7); }
.qc-heat__note { margin: 12px 0 10px; font-size: .88rem; color: rgba(255, 255, 255, .68); }
@container (max-width: 400px) { .qc-heat__table li { font-size: .92rem; gap: 10px; } .qc-heat__head span { display: none; } }
@media (prefers-reduced-motion: reduce) { .qc-heat__s { transition: none; } }
/* === end QC TIN conformance heatmap === */

/* === TopoMatters: home trust steps === */
.trust-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; position: relative; }
.trust-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding-bottom: 22px; position: relative; }
.trust-steps li:last-child { padding-bottom: 0; }
.trust-steps li::before { content: ""; position: absolute; left: 23px; top: 50px; bottom: 2px; width: 2px; background: linear-gradient(var(--orange), rgba(255, 125, 43, .15)); border-radius: 2px; }
.trust-steps li:last-child::before { display: none; }
.trust-steps__n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 125, 43, .12); color: var(--orange-600); font-weight: 900; font-size: .95rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.trust-steps h3 { margin: 2px 0 4px; }
.trust-steps p { margin: 0; color: var(--ink-2); }
.trust-close { margin: 30px 0 18px; padding-left: 18px; border-left: 3px solid var(--orange); font-size: 1.08rem; font-weight: 600; color: var(--navy-900); line-height: 1.5; max-width: 560px; }
/* The QC card stays beside the steps while you read down the longer left column (wide screens only). */
@media (min-width: 901px) { .split:has(.trust-steps) { align-items: start; } .split:has(.trust-steps) > .qc-card { position: sticky; top: 104px; } }
/* === end home trust steps === */


/* === TopoMatters: transparent logo === */
/* The logo PNG has a transparent background now, so the same file sits on the white header, the dark hero and the dark footer.
   The white plates are gone, and the logo is one size in every header state (it used to jump when the page scrolled).
   To change the sizes, edit the "height" values below (desktop, phones and tablets, footer). On desktop the header is 88 px tall so the logo has
   room: --header-h sets that. */
.brand img, .page-home .site-header:not(.is-scrolled) .brand img { height: 68px; }
.brand--plate, .page-home .site-header:not(.is-scrolled) .brand { background: transparent; padding: 0; }
@media (min-width: 961px) { :root { --header-h: 88px; } }
@media (max-width: 960px) { .brand img, .page-home .site-header:not(.is-scrolled) .brand img { height: 50px; } }
.site-footer .brand--plate img { height: 64px; }
/* === end transparent logo === */


/* contact-form-optin-fix v2 */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: auto !important; appearance: auto !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  flex: 0 0 18px !important;
  width: 18px !important; min-width: 18px !important; max-width: 18px !important;
  height: 18px !important; min-height: 18px !important;
  margin: 2px 10px 0 0 !important; padding: 0 !important;
  border-radius: 3px;
  accent-color: #FF7D2B;
  opacity: 1 !important; position: static !important; clip: auto !important;
}
label:has(> input[type="checkbox"]) { display: flex !important; align-items: flex-start; overflow: visible !important; }

/* founder-photo */
.founder-photo-img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 30%; border-radius:inherit; }

/* mobile-overflow-fix */
html { overflow-x: hidden; max-width: 100%; }
body { overflow-x: clip; max-width: 100%; position: relative; }