:root {
  --paper: #f4f2ec;
  --paper-2: #ebe8df;
  --ink: #101214;
  --muted: #62666a;
  --line: rgba(16,18,20,.13);
  --violet: #7557ff;
  --violet-soft: #d9d1ff;
  --mint: #c4ff63;
  --cyan: #79d8ff;
  --header-h: 86px;
  --side: clamp(22px, 4.4vw, 72px);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 105px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, textarea { font: inherit; }

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 0 var(--side);
  border-bottom: 1px solid var(--line);
  background: rgba(244,242,236,.91);
  backdrop-filter: blur(18px);
}

.brand {
  justify-self: start;
  display: inline-flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
}
.brand-mark {
  position: relative;
  width: 31px;
  height: 31px;
  display: block;
  border: 1px solid var(--ink);
  border-radius: 50%;
}
.brand-mark::before, .brand-mark::after, .brand-mark i {
  content: "";
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink);
}
.brand-mark::before { top: 3px; left: 12px; }
.brand-mark::after { bottom: 4px; right: 4px; background: var(--violet); }
.brand-mark i:nth-child(1) { left: -3px; top: 13px; background: var(--mint); }
.brand-mark i:nth-child(2) { display:none; }
.brand-mark i:nth-child(3) { display:none; }
.brand-word {
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -.04em;
}
.brand-word span {
  color: var(--muted);
  font-weight: 450;
}

.desktop-nav {
  justify-self: center;
  display: flex;
  gap: 8px;
  align-items: center;
}
.desktop-nav a {
  padding: 10px 12px;
  color: #4b4e51;
  text-decoration: none;
  font-size: 13px;
}
.desktop-nav a:hover { color: var(--ink); }

.header-actions {
  justify-self: end;
  display: flex;
  gap: 13px;
  align-items: center;
}
.text-link, .underlink {
  text-decoration: underline;
  text-decoration-color: rgba(16,18,20,.35);
  text-underline-offset: 5px;
  font-size: 12px;
}
.pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 740;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.pill:hover { transform: translateY(-1px); }
.pill-dark { color: #fff; background: var(--ink); }
.pill-accent { color: #fff; background: var(--violet); }
.pill-light { color: var(--ink); background: var(--paper); }

.menu-button {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
}
.menu-button span {
  display:block; width:16px; height:1px; margin:4px auto; background:var(--ink);
}

.mobile-menu {
  display:none;
  position: fixed;
  z-index:45;
  inset: var(--header-h) 0 0;
  padding: 30px var(--side);
  background: var(--paper);
}
.mobile-menu.open { display:grid; align-content:start; }
.mobile-menu a {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  text-decoration:none;
  font-size:18px;
}

.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.hero-grid {
  position:absolute; inset:0;
  opacity:.45;
  background-image:
    linear-gradient(rgba(16,18,20,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,18,20,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}
.hero-copy {
  position:relative; z-index:3;
  display:flex; flex-direction:column; justify-content:center;
  padding: 84px 5vw 92px var(--side);
}
.eyebrow, .section-label, .mini-label {
  display:flex; align-items:center; gap:10px;
  color:#6d7175;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.eyebrow span {
  width:18px; height:1px; background:var(--violet);
}
.hero h1 {
  max-width: 740px;
  margin: 22px 0 0;
  font-size: clamp(52px, 7.7vw, 112px);
  line-height: .86;
  letter-spacing: -.075em;
  font-weight: 720;
}
.hero h1 em {
  display:block;
  color:var(--violet);
  font-style:normal;
}
.hero-lead {
  max-width: 690px;
  margin: 34px 0 0;
  color: #4e5357;
  font-size: clamp(16px,1.35vw,20px);
  line-height: 1.62;
}
.hero-actions { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top:30px; }
.hero-proof {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:54px;
  border:1px solid var(--line);
  background:var(--line);
}
.hero-proof > div {
  min-height:104px;
  padding:18px;
  background:rgba(244,242,236,.88);
}
.hero-proof strong { display:block; font-size:14px; }
.hero-proof span { display:block; margin-top:7px; color:var(--muted); font-size:10px; line-height:1.45; }

.hero-visual {
  position:relative; min-height:680px;
  background:
    radial-gradient(circle at 20% 18%, rgba(121,216,255,.35), transparent 30%),
    radial-gradient(circle at 80% 72%, rgba(117,87,255,.32), transparent 34%),
    #17191d;
}
.photo-shell { position:absolute; inset:7% 7% 7% 5%; overflow:hidden; border-radius:30px; }
.photo-shell img { width:100%; height:100%; object-fit:cover; filter:grayscale(.2) contrast(1.03); }
.photo-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(145deg, rgba(196,255,99,.10), transparent 34%),
    linear-gradient(0deg, rgba(16,18,20,.48), transparent 56%);
}
.floating-node {
  position:absolute; z-index:4;
  display:flex; gap:8px; align-items:center;
  padding:10px 13px;
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(16,18,20,.66);
  backdrop-filter: blur(14px);
  font-size:11px;
}
.floating-node span { color:var(--mint); font-size:9px; }
.node-a { left:2%; top:18%; }
.node-b { right:2%; top:47%; }
.node-c { left:12%; bottom:12%; }
.scroll-cue {
  position:absolute; z-index:4; bottom:22px; left:var(--side);
  display:flex; gap:9px; align-items:center;
  color:#717579; text-decoration:none; font-size:9px;
  text-transform:uppercase; letter-spacing:.12em; font-weight:800;
}
.scroll-cue i { width:18px; height:28px; border:1px solid var(--line); border-radius:999px; position:relative; }
.scroll-cue i::after { content:""; position:absolute; width:3px;height:3px;border-radius:50%;background:var(--violet);left:7px;top:6px; animation:scroll 1.7s ease-in-out infinite; }
@keyframes scroll { 50% { transform:translateY(10px); } }

.intro-section, .technology-section {
  padding: 120px var(--side);
  display:grid;
  grid-template-columns: 240px minmax(0,1fr);
  gap:clamp(45px,8vw,120px);
  border-bottom:1px solid var(--line);
}
.intro-copy { max-width:920px; }
.kicker { margin:0 0 16px; color:var(--violet); font-size:13px; font-weight:750; }
.intro-copy h2, .section-heading h2, .tech-copy h2, .contact-band h2 {
  margin:0;
  max-width:980px;
  font-size:clamp(34px,4.7vw,68px);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:650;
}
.intro-copy > p:last-child, .section-heading p, .tech-copy p {
  max-width:800px; margin:28px 0 0; color:var(--muted); font-size:16px; line-height:1.72;
}

.help-section, .work-section, .thinking-section {
  padding:120px var(--side);
  border-bottom:1px solid var(--line);
}
.section-heading {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:clamp(45px,8vw,120px);
  margin-bottom:55px;
}
.help-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.help-card {
  position:relative;
  overflow:hidden;
  padding:16px 24px 28px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#f9f7f2;
}
.card-image {
  height:230px; margin:0 -8px 24px; overflow:hidden; border-radius:14px;
  background:linear-gradient(135deg,var(--violet-soft),#fff 55%,#d9ffd1);
}
.card-image img { width:100%;height:100%;object-fit:cover; }
.card-number { color:var(--violet);font-size:9px;font-weight:850;letter-spacing:.12em; }
.help-card h3 { margin:10px 0 0; font-size:30px; letter-spacing:-.045em; }
.help-card .question { min-height:48px; margin:10px 0 20px; color:#3e4246; font-weight:650; }
.help-card p { color:var(--muted);font-size:12px;line-height:1.62; }
.help-card p strong { color:var(--ink); }

.technology-section {
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  align-items:center;
  background:#111317;
  color:#fff;
}
.technology-section .section-label { color:#9da0a5; }
.tech-copy p { color:#aeb2b6; }
.tech-orbit {
  position:relative;
  width:min(620px,50vw);
  aspect-ratio:1;
  justify-self:end;
}
.orbit { position:absolute;border:1px solid rgba(255,255,255,.15);border-radius:50%;inset:8%; }
.orbit-2 { inset:26%; border-color:rgba(196,255,99,.24); }
.orbit-center, .tech-node {
  position:absolute;display:grid;place-items:center;border-radius:50%;
}
.orbit-center {
  width:118px;height:118px;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--paper);color:var(--ink);font-size:28px;font-weight:800;
}
.tech-node {
  min-width:70px;height:70px;padding:0 10px;border:1px solid rgba(255,255,255,.22);
  background:#1d2025;color:#fff;font-size:11px;font-weight:700;
}
.n1{left:7%;top:45%}.n2{left:32%;top:7%}.n3{right:1%;top:30%}.n4{right:15%;bottom:9%}.n5{left:26%;bottom:3%}

.case-study {
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  min-height:540px;
  margin-top:18px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#f9f7f2;
}
.case-study.reverse .case-image { order:2; }
.case-image { min-height:420px; background:var(--paper-2); }
.case-image img { width:100%;height:100%;object-fit:cover; }
.case-copy { padding:clamp(34px,5vw,72px); align-self:center; }
.case-tag { color:var(--violet);font-size:9px;font-weight:850;letter-spacing:.13em;text-transform:uppercase; }
.case-copy h3 { max-width:600px;margin:13px 0 30px;font-size:clamp(27px,3vw,44px);line-height:1.04;letter-spacing:-.045em; }
.case-block { display:grid;grid-template-columns:82px 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--line); }
.case-block b { font-size:10px;text-transform:uppercase;letter-spacing:.1em; }
.case-block p { margin:0;color:var(--muted);font-size:12px;line-height:1.65; }

.article-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
.article-grid a {
  min-height:240px;padding:25px;border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;text-decoration:none;background:#f9f7f2;
}
.article-grid a:hover { border-color:rgba(117,87,255,.45); }
.article-grid span { color:var(--violet);font-size:9px;font-weight:850; }
.article-grid h3 { margin:35px 0 auto;font-size:25px;line-height:1.08;letter-spacing:-.035em; }
.article-grid i { margin-top:25px;color:var(--muted);font-size:10px;font-style:normal; }

.contact-band {
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:50px;align-items:end;
  padding:110px var(--side);
  color:#fff;background:var(--violet);
}
.contact-band .section-label { color:rgba(255,255,255,.62);margin-bottom:16px; }
.contact-band h2 { max-width:820px; }
.contact-actions { display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:flex-end; }
.underlink.light { color:#fff;text-decoration-color:rgba(255,255,255,.5); }

.site-footer {
  min-height:110px;
  display:grid;grid-template-columns:1fr auto 1fr;gap:25px;align-items:center;
  padding:20px var(--side);
  border-top:1px solid var(--line);
  background:#101214;color:#fff;
}
.footer-brand .brand-mark { border-color:#fff; }
.footer-brand .brand-mark::before,.footer-brand .brand-mark i { background:#fff; }
.footer-brand .brand-word span { color:#8d9297; }
.footer-links { display:flex;gap:18px; }
.footer-links a { color:#a8adb2;text-decoration:none;font-size:10px; }
.copyright { justify-self:end;color:#777c81;font-size:10px; }

.contact-main {
  min-height:calc(100vh - var(--header-h) - 110px);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:clamp(50px,9vw,140px);
  align-items:center;
  padding:90px var(--side);
}
.contact-panel { max-width:820px; }
.contact-panel h1 { margin:20px 0 0;font-size:clamp(48px,6.5vw,92px);line-height:.9;letter-spacing:-.065em; }
.contact-panel > p { max-width:700px;margin:30px 0;color:var(--muted);font-size:17px;line-height:1.7; }
.contact-detail-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:35px 0; }
.contact-detail-grid a { padding:22px;border:1px solid var(--line);border-radius:16px;text-decoration:none;background:#f9f7f2; }
.contact-detail-grid span { display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.11em; }
.contact-detail-grid strong { display:block;margin-top:8px;font-size:14px; }
.contact-side { padding:30px;border-left:1px solid var(--line); }
.contact-side ol { list-style:none;margin:25px 0 0;padding:0; }
.contact-side li { display:grid;grid-template-columns:45px 1fr;gap:12px;padding:20px 0;border-top:1px solid var(--line); }
.contact-side li b { color:var(--violet);font-size:9px; }
.contact-side li span { font-size:15px;line-height:1.4; }

@media (max-width: 1050px) {
  .desktop-nav { display:none; }
  .site-header { grid-template-columns:1fr auto; }
  .header-actions .text-link { display:none; }
  .menu-button { display:block; }
  .hero { grid-template-columns:1fr; }
  .hero-visual { min-height:55vw; }
  .hero-copy { min-height:650px; padding-right:var(--side); }
  .intro-section,.section-heading { grid-template-columns:180px 1fr; gap:45px; }
  .help-grid { grid-template-columns:1fr; }
  .help-card { display:grid;grid-template-columns:230px 1fr;column-gap:28px; }
  .card-image { grid-row:1 / span 6; height:100%; min-height:260px; }
  .technology-section { grid-template-columns:1fr; }
  .tech-orbit { justify-self:center;width:min(620px,82vw); }
  .article-grid { grid-template-columns:1fr; }
}

@media (max-width: 720px) {
  :root { --side:20px; --header-h:76px; }
  .site-header { height:var(--header-h); }
  .header-actions .pill { display:none; }
  .brand-word { font-size:19px; }
  .hero { min-height:auto; }
  .hero-copy { min-height:auto;padding:70px var(--side) 74px; }
  .hero h1 { font-size:clamp(54px,17vw,82px); }
  .hero-lead { font-size:15px; }
  .hero-proof { grid-template-columns:1fr; }
  .hero-visual { min-height:500px; }
  .photo-shell { inset:6%; }
  .scroll-cue { display:none; }
  .intro-section,.help-section,.work-section,.thinking-section,.technology-section { padding:78px var(--side); }
  .intro-section,.section-heading { grid-template-columns:1fr; gap:24px; }
  .intro-copy h2,.section-heading h2,.tech-copy h2,.contact-band h2 { font-size:clamp(34px,11vw,48px); }
  .intro-copy > p:last-child,.section-heading p,.tech-copy p { font-size:14px; }
  .help-card { display:block; }
  .card-image { height:240px;min-height:0; }
  .tech-orbit { width:90vw;max-width:460px; }
  .tech-node { min-width:56px;height:56px;font-size:9px; }
  .orbit-center { width:90px;height:90px;font-size:22px; }
  .case-study { grid-template-columns:1fr; }
  .case-study.reverse .case-image { order:0; }
  .case-copy { padding:32px 22px; }
  .case-block { grid-template-columns:1fr;gap:7px; }
  .contact-band { grid-template-columns:1fr;align-items:start;padding:78px var(--side); }
  .contact-actions { justify-content:flex-start; }
  .site-footer { grid-template-columns:1fr;gap:20px; }
  .footer-links { flex-wrap:wrap; }
  .copyright { justify-self:start; }
  .contact-main { grid-template-columns:1fr;padding:70px var(--side); }
  .contact-panel h1 { font-size:clamp(48px,15vw,70px); }
  .contact-detail-grid { grid-template-columns:1fr; }
  .contact-side { padding:25px 0;border-left:0;border-top:1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .scroll-cue i::after { animation:none; }
  .pill { transition:none; }
}

/* =========================================================
   DOSS ORIGIN STORY
   ========================================================= */
.origin-section {
  padding: 120px var(--side);
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(45px, 8vw, 120px);
  border-bottom: 1px solid var(--line);
  background: #fbfaf6;
}

.origin-aside {
  align-self: stretch;
}

.origin-signal {
  position: sticky;
  top: 135px;
  display: grid;
  gap: 13px;
  margin-top: 45px;
  max-width: 145px;
  color: #767a7d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.origin-signal i {
  width: 1px;
  height: 35px;
  margin-left: 5px;
  background: linear-gradient(var(--violet), rgba(117,87,255,.12));
}

.origin-copy {
  max-width: 940px;
}

.origin-copy h2 {
  margin: 0;
  font-size: clamp(34px, 4.7vw, 68px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 650;
}

.origin-copy > p {
  max-width: 820px;
  margin: 27px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.origin-callout {
  margin-top: 36px;
  padding: 28px 30px;
  border: 1px solid rgba(117,87,255,.19);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(117,87,255,.075), rgba(121,216,255,.05)),
    #f7f5f0;
}

.origin-callout strong {
  display: block;
  font-size: 21px;
  letter-spacing: -.03em;
}

.origin-callout p {
  margin: 10px 0 0;
  max-width: 750px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.origin-copy .regulated-note {
  padding-left: 18px;
  border-left: 2px solid var(--mint);
  color: #4d5154;
}

/* =========================================================
   DETAILED EDUCATE / EXPERIENCE / EMPOWER
   ========================================================= */
.help-grid.detailed .help-card {
  padding-bottom: 30px;
}

.service-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.service-list li {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}

.service-list strong,
.service-list span {
  display: block;
}

.service-list strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 760;
}

.service-list span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

/* =========================================================
   HOW TO ENGAGE DOSS
   ========================================================= */
.engagement-section {
  padding: 120px var(--side);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(196,255,99,.08), transparent 30%),
    var(--paper);
}

.engagement-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}

.engagement-steps article {
  min-height: 300px;
  padding: 28px 25px;
  background: #f9f7f2;
}

.engagement-steps article > span {
  color: var(--violet);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}

.engagement-steps h3 {
  margin: 38px 0 0;
  max-width: 190px;
  font-size: 23px;
  line-height: 1.03;
  letter-spacing: -.04em;
}

.engagement-steps p {
  margin: 17px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.engagement-cta {
  display: flex;
  gap: 30px;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding: 24px 0 0;
}

.engagement-cta p {
  margin: 0;
  color: #484c50;
  font-size: 13px;
}

.engagement-cta strong {
  color: var(--ink);
}

/* Remove archive-specific styles from visual flow; safe to leave the old
   selectors in place for backward compatibility with no active markup. */

@media (max-width: 1050px) {
  .origin-section {
    grid-template-columns: 180px 1fr;
    gap: 45px;
  }

  .engagement-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .engagement-steps article {
    min-height: 250px;
  }
}

@media (max-width: 720px) {
  .origin-section,
  .engagement-section {
    padding: 78px var(--side);
  }

  .origin-section {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .origin-signal {
    display: none;
  }

  .origin-copy h2 {
    font-size: clamp(34px, 11vw, 48px);
  }

  .origin-copy > p {
    font-size: 14px;
  }

  .engagement-steps {
    grid-template-columns: 1fr;
  }

  .engagement-steps article {
    min-height: 0;
  }

  .engagement-steps h3 {
    margin-top: 20px;
  }

  .engagement-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   HELP CARD — CRISP CSS-NATIVE VISUALS
   Replaces low-resolution raster art in Educate / Experience / Empower.
   ========================================================= */
.card-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 18%, rgba(121,216,255,.38), transparent 34%),
    radial-gradient(circle at 80% 78%, rgba(117,87,255,.28), transparent 38%),
    linear-gradient(145deg, #f7f7f2, #ebe7ff 58%, #e9f8ff);
}

.visual-grid {
  position: absolute;
  inset: 0;
  opacity: .36;
  background-image:
    linear-gradient(rgba(16,18,20,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,18,20,.075) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(135deg, #000, transparent 78%);
}

.visual-chip {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 10px;
  border: 1px solid rgba(16,18,20,.15);
  border-radius: 999px;
  color: #34373a;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.card-visual-educate .chip-a { left: 8%; top: 16%; }
.card-visual-educate .chip-b { right: 8%; top: 31%; }
.card-visual-educate .chip-c { left: 18%; bottom: 12%; }

.visual-sheet {
  position: absolute;
  z-index: 2;
  width: 42%;
  height: 48%;
  border: 1px solid rgba(16,18,20,.13);
  border-radius: 15px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 40px rgba(57,46,114,.10);
}

.visual-sheet i {
  display: block;
  height: 7px;
  margin: 13px 16px 0;
  border-radius: 999px;
  background: rgba(117,87,255,.18);
}
.visual-sheet i:nth-child(2) { width: 60%; background: rgba(121,216,255,.34); }
.visual-sheet i:nth-child(3) { width: 72%; background: rgba(196,255,99,.55); }

.sheet-a { left: 23%; top: 23%; transform: rotate(-7deg); }
.sheet-b { left: 39%; top: 34%; transform: rotate(8deg); }

.visual-focus-ring {
  position: absolute;
  z-index: 3;
  width: 78px;
  height: 78px;
  right: 11%;
  bottom: 8%;
  border: 11px solid rgba(117,87,255,.18);
  border-top-color: rgba(117,87,255,.86);
  border-radius: 50%;
}

.prototype-window {
  position: absolute;
  z-index: 3;
  width: 52%;
  height: 57%;
  left: 24%;
  top: 22%;
  padding: 15px;
  border: 1px solid rgba(16,18,20,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 45px rgba(57,46,114,.12);
}

.prototype-window > span {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 4px;
  border-radius: 50%;
  background: rgba(16,18,20,.18);
}

.prototype-row {
  height: 8px;
  margin-top: 18px;
  border-radius: 999px;
  background: rgba(117,87,255,.22);
}
.prototype-row.short { width: 68%; margin-top: 10px; background: rgba(121,216,255,.38); }
.prototype-action {
  width: 45%;
  height: 24px;
  margin-top: 20px;
  border-radius: 999px;
  background: var(--violet);
}

.flow-node {
  position: absolute;
  z-index: 4;
  width: 15px;
  height: 15px;
  border: 3px solid #f9f7f2;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 1px rgba(16,18,20,.14);
}
.flow-a { left: 9%; top: 28%; }
.flow-b { right: 9%; top: 48%; background: var(--cyan); }
.flow-c { left: 17%; bottom: 17%; background: var(--violet); }

.flow-line {
  position: absolute;
  z-index: 1;
  height: 1px;
  transform-origin: left center;
  background: rgba(16,18,20,.22);
}
.line-a { width: 29%; left: 12%; top: 32%; transform: rotate(19deg); }
.line-b { width: 27%; right: 12%; top: 53%; transform: rotate(-13deg); }
.chip-proof { right: 8%; bottom: 10%; }

.empower-core {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: #fff;
  background: var(--violet);
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 0 0 16px rgba(117,87,255,.09);
}

.empower-node {
  position: absolute;
  z-index: 4;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(16,18,20,.13);
  border-radius: 50%;
  color: #3e4246;
  background: rgba(255,255,255,.82);
  font-size: 9px;
  font-weight: 800;
}
.en-a { left: 10%; top: 18%; }
.en-b { right: 10%; top: 22%; }
.en-c { left: 12%; bottom: 13%; }
.en-d { right: 11%; bottom: 14%; }

.empower-line {
  position: absolute;
  z-index: 1;
  width: 31%;
  height: 1px;
  background: rgba(16,18,20,.2);
  transform-origin: left center;
}
.el-a { left: 25%; top: 39%; transform: rotate(28deg); }
.el-b { left: 54%; top: 45%; transform: rotate(-24deg); }
.el-c { left: 24%; top: 67%; transform: rotate(-28deg); }
.el-d { left: 54%; top: 61%; transform: rotate(24deg); }

/* =========================================================
   CONTACT PAGE — FORM FIRST
   ========================================================= */
.contact-main-form {
  min-height: calc(100vh - var(--header-h) - 110px);
  grid-template-columns: minmax(0,.85fr) minmax(500px,1.15fr);
  align-items: start;
  gap: clamp(55px, 8vw, 120px);
  padding-top: 78px;
  padding-bottom: 90px;
}

.contact-intro {
  position: sticky;
  top: calc(var(--header-h) + 42px);
  align-self: start;
}

.contact-intro h1 {
  margin: 20px 0 0;
  max-width: 720px;
  font-size: clamp(46px, 5.7vw, 82px);
  line-height: .91;
  letter-spacing: -.062em;
}

.contact-intro > p {
  max-width: 690px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.72;
}

.contact-direct {
  margin-top: 35px;
  padding: 23px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.contact-direct strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(18px, 2vw, 25px);
  letter-spacing: -.025em;
  user-select: text;
}

.contact-direct p {
  max-width: 580px;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.contact-intro .contact-side {
  margin-top: 22px;
  padding: 0;
  border-left: 0;
}

.contact-form-shell {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0, rgba(117,87,255,.085), transparent 32%),
    #f9f7f2;
}

.contact-form-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 29px;
}

.contact-form-heading .mini-label {
  grid-column: 1 / -1;
}

.contact-form-heading h2 {
  margin: 0;
  max-width: 600px;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -.045em;
}

.contact-form-heading > p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
}

.doss-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
}

.doss-field {
  display: grid;
  gap: 8px;
}

.doss-field label {
  color: #35383b;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .02em;
}

.doss-field label span {
  color: #85898c;
  font-weight: 500;
}

.doss-field input,
.doss-field select,
.doss-field textarea {
  width: 100%;
  min-height: 49px;
  padding: 12px 13px;
  border: 1px solid rgba(16,18,20,.16);
  border-radius: 11px;
  outline: none;
  color: var(--ink);
  background: rgba(255,255,255,.72);
  font-size: 13px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.doss-field textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.55;
}

.doss-field input:focus,
.doss-field select:focus,
.doss-field textarea:focus {
  border-color: rgba(117,87,255,.62);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(117,87,255,.09);
}

.doss-field input[aria-invalid="true"],
.doss-field textarea[aria-invalid="true"] {
  border-color: #b83535;
}

.doss-message-field {
  margin-top: 20px;
}

.doss-message-meta {
  min-height: 17px;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  color: #85898c;
  font-size: 9px;
}

.doss-field-error {
  color: #9e3030;
}

.doss-form-actions {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 22px;
}

.doss-submit {
  border: 0;
  cursor: pointer;
}

.doss-submit:disabled {
  opacity: .62;
  cursor: wait;
  transform: none;
}

.doss-form-status {
  margin: 0;
  max-width: 390px;
  color: #8c3030;
  font-size: 10px;
  line-height: 1.5;
}

.doss-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.doss-contact-success {
  min-height: 430px;
  display: grid;
  align-content: center;
  justify-items: start;
}

.doss-contact-success[hidden] {
  display: none;
}

.success-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  border-radius: 50%;
  color: #fff;
  background: var(--violet);
  font-size: 19px;
}

.doss-contact-success h2 {
  margin: 12px 0 0;
  font-size: clamp(34px, 4.5vw, 54px);
  line-height: .96;
  letter-spacing: -.05em;
}

.doss-contact-success p {
  max-width: 560px;
  margin: 20px 0 28px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 1050px) {
  .contact-main-form {
    grid-template-columns: 1fr;
  }

  .contact-intro {
    position: static;
  }
}

@media (max-width: 720px) {
  .contact-main-form {
    padding: 56px var(--side) 70px;
  }

  .contact-intro h1 {
    font-size: clamp(46px, 14vw, 68px);
  }

  .contact-intro > p {
    font-size: 14px;
  }

  .contact-form-shell {
    padding: 25px 18px;
    border-radius: 20px;
  }

  .contact-form-heading {
    grid-template-columns: 1fr;
  }

  .doss-form-grid {
    grid-template-columns: 1fr;
  }

  .doss-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .doss-submit {
    width: 100%;
  }
}

/* =========================================================
   SEO / AI DISCOVERY CONTENT PAGES
   Static, crawlable long-form pages that retain the doss design system.
   ========================================================= */

.desktop-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 760;
}

.mobile-menu a[aria-current="page"] {
  color: var(--violet);
}

.section-deep-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 20px;
  color: var(--ink);
  text-decoration: none;
  font-size: 11px;
  font-weight: 760;
}

.section-deep-link span {
  color: var(--violet);
  transition: transform .18s ease;
}

.section-deep-link:hover span {
  transform: translateX(3px);
}

.content-page {
  background: var(--paper);
}

.page-hero {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  display: grid;
  align-content: center;
  padding: 90px var(--side) 80px;
  border-bottom: 1px solid var(--line);
}

.page-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .62;
  background:
    radial-gradient(circle at 78% 24%, rgba(117,87,255,.13), transparent 27%),
    radial-gradient(circle at 66% 79%, rgba(121,216,255,.16), transparent 26%),
    linear-gradient(rgba(16,18,20,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,18,20,.035) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
  mask-image: linear-gradient(90deg, #000 0 67%, transparent 94%);
}

.breadcrumb {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 46px;
  color: #7b7f82;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--violet);
}

.page-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 980px;
}

.page-hero-copy h1 {
  max-width: 980px;
  margin: 20px 0 0;
  font-size: clamp(47px, 7vw, 96px);
  line-height: .89;
  letter-spacing: -.068em;
  font-weight: 690;
}

.page-hero-copy h1 em {
  color: var(--violet);
  font-style: normal;
}

.page-hero-copy > p {
  max-width: 800px;
  margin: 31px 0 0;
  color: #53585c;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.68;
}

.page-hero-signal {
  position: absolute;
  z-index: 2;
  right: clamp(25px, 7vw, 120px);
  top: 50%;
  width: min(28vw, 400px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 1px solid rgba(16,18,20,.08);
  border-radius: 50%;
}

.page-hero-signal::before,
.page-hero-signal::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(117,87,255,.16);
  border-radius: 50%;
}
.page-hero-signal::before { inset: 17%; }
.page-hero-signal::after { inset: 34%; }

.page-hero-signal i {
  position: absolute;
  z-index: 2;
  width: 11px;
  height: 11px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 1px rgba(16,18,20,.08);
}
.page-hero-signal i:nth-child(1) { left: 8%; top: 42%; background: var(--mint); }
.page-hero-signal i:nth-child(2) { right: 11%; top: 24%; background: var(--cyan); }
.page-hero-signal i:nth-child(3) { right: 17%; bottom: 19%; }
.page-hero-signal i:nth-child(4) { left: 25%; bottom: 10%; background: #fff; }
.page-hero-signal span {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-size: 18px;
  font-weight: 850;
}

.page-shell {
  max-width: 1500px;
  margin: 0 auto;
}

.content-section {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(45px, 8vw, 120px);
  padding: 105px var(--side);
  border-bottom: 1px solid var(--line);
}

.content-kicker {
  color: #73777a;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.content-section h2,
.page-cta h2 {
  max-width: 970px;
  margin: 0;
  font-size: clamp(32px, 4.3vw, 60px);
  line-height: .99;
  letter-spacing: -.052em;
  font-weight: 650;
}

.content-section > div:last-child > p {
  max-width: 860px;
  margin: 25px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.76;
}

.detail-grid {
  display: grid;
  gap: 12px;
  margin-top: 38px;
}
.detail-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.detail-grid article,
.question-list article {
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #f9f7f2;
}

.detail-grid h3,
.question-list h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.16;
  letter-spacing: -.025em;
}

.detail-grid p,
.question-list p {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.question-section {
  background: #fbfaf6;
}

.question-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 36px;
}

.page-cta {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 50px;
  align-items: end;
  padding: 100px var(--side);
  color: #fff;
  background: var(--violet);
}

.page-cta .section-label {
  margin-bottom: 17px;
  color: rgba(255,255,255,.64);
}

.page-cta h2 {
  max-width: 820px;
}

.page-cta-actions {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.page-cta .pill-accent {
  color: var(--ink);
  background: var(--paper);
}

.page-cta .underlink {
  color: #fff;
  text-decoration-color: rgba(255,255,255,.46);
}

/* How-to-engage */
.engage-detail {
  border-bottom: 1px solid var(--line);
}

.engage-detail > article {
  display: grid;
  grid-template-columns: 105px minmax(0,1fr);
  gap: 35px;
  padding: 66px var(--side);
  border-top: 1px solid var(--line);
}

.engage-detail > article:first-child {
  border-top: 0;
}

.engage-detail > article > span {
  color: var(--violet);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

.engage-detail h2 {
  margin: 0;
  font-size: clamp(31px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -.05em;
}

.engage-detail p {
  max-width: 830px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.engage-detail .micro-note {
  padding-left: 16px;
  border-left: 2px solid var(--mint);
  color: #4d5154;
  font-size: 12px;
}

/* Use cases */
.case-detail {
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  min-height: 660px;
  border-bottom: 1px solid var(--line);
}

.case-detail.reverse .case-detail-media {
  order: 2;
}

.case-detail-media {
  min-height: 520px;
  overflow: hidden;
  background: var(--paper-2);
}

.case-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-detail-copy {
  align-self: center;
  padding: clamp(50px, 7vw, 105px);
}

.case-detail-copy h2 {
  max-width: 680px;
  margin: 15px 0 36px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: .98;
  letter-spacing: -.052em;
}

.case-facts {
  margin: 0;
}

.case-facts > div {
  display: grid;
  grid-template-columns: 125px minmax(0,1fr);
  gap: 22px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.case-facts dt {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.case-facts dd {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 1050px) {
  .page-hero-signal {
    opacity: .46;
    width: 43vw;
  }

  .content-section {
    grid-template-columns: 170px minmax(0,1fr);
    gap: 42px;
  }

  .detail-grid.three {
    grid-template-columns: 1fr;
  }

  .case-detail {
    grid-template-columns: 1fr;
  }

  .case-detail.reverse .case-detail-media {
    order: 0;
  }
}

@media (max-width: 720px) {
  .page-hero {
    min-height: 560px;
    padding: 65px var(--side) 62px;
  }

  .breadcrumb {
    margin-bottom: 35px;
  }

  .page-hero-copy h1 {
    font-size: clamp(46px, 14vw, 68px);
  }

  .page-hero-copy > p {
    font-size: 15px;
  }

  .page-hero-signal {
    right: -30%;
    width: 90vw;
    opacity: .18;
  }

  .content-section {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 75px var(--side);
  }

  .content-section h2,
  .page-cta h2 {
    font-size: clamp(34px, 11vw, 48px);
  }

  .detail-grid.two,
  .question-list {
    grid-template-columns: 1fr;
  }

  .page-cta {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 75px var(--side);
  }

  .page-cta-actions {
    justify-content: flex-start;
  }

  .engage-detail > article {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 55px var(--side);
  }

  .case-detail-media {
    min-height: 360px;
  }

  .case-detail-copy {
    padding: 48px var(--side);
  }

  .case-facts > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}