/* ==========================================================================
   לינוי ברזני — Landing page
   ========================================================================== */

:root {
  --bg: #FBF5F0;
  --bg-alt: #F7EAE0;
  --surface: #FFFFFF;
  --surface-2: #FFFBF8;
  --ink: #1D2440;
  --ink-2: #3B4059;
  --muted: #756D70;
  --line: #F0E3D9;
  --line-strong: #E5D1C2;

  --accent: #C99C6E;
  --accent-ink: #8C6239;
  --accent-soft: #F7E8DA;
  --sage: #56705F;
  --sage-soft: #E3EAE4;
  --error: #A8402C;

  --dark: #1D2440;
  --dark-2: #252D4D;
  --dark-3: #2C3558;
  --dark-line: #39436B;
  --on-dark: #F7EFE7;
  --on-dark-muted: #BDB6C0;

  --font-display: "Heebo", "Assistant", system-ui, -apple-system, sans-serif;
  --font-body: "Assistant", "Heebo", system-ui, -apple-system, sans-serif;
  /* numbers & small technical labels — same family as headings, tabular figures */
  --font-mono: "Heebo", system-ui, sans-serif;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px rgba(22, 23, 27, .04), 0 2px 8px rgba(22, 23, 27, .04);
  --shadow: 0 1px 2px rgba(22, 23, 27, .04), 0 14px 34px -10px rgba(22, 23, 27, .12);
  --shadow-lg: 0 2px 4px rgba(22, 23, 27, .03), 0 40px 80px -28px rgba(22, 23, 27, .22);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(88px, 11vw, 150px);
  --header-h: 76px;
}

/* ---------- Reset & base ---------- */
*, *::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;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
strong { font-weight: 600; color: var(--ink); }
::selection { background: var(--accent-soft); color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 12px; right: 12px; z-index: 200;
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px;
  transform: translateY(-160%); transition: transform .25s var(--ease);
}
.skip-link:focus { transform: none; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }

/* line icons */
svg path, svg circle, svg rect { vector-effect: non-scaling-stroke; }
.pain-ico svg, .btn svg, .link-arrow svg, .note svg, .hub-mark svg,
.bubble-tag svg, .to-top svg, .wa-float svg {
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.display em, .h2 em { font-style: normal; color: var(--accent); }
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -.025em;
}
.h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .875rem; font-weight: 500; color: var(--muted);
  margin-bottom: 22px;
}
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.eyebrow-num {
  font-family: var(--font-mono); font-size: .75rem; color: var(--accent-ink);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 9px; line-height: 1.6;
}
.eyebrow-dark { color: var(--on-dark-muted); }
.eyebrow-dark .eyebrow-num { color: var(--gold-light); border-color: var(--dark-line); }

.section-head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 72px); }
.section-head-center { margin-inline: auto; text-align: center; }
.section-lead { margin-top: 20px; font-size: 1.2rem; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 14px 26px;
  border-radius: 999px; border: 1px solid transparent;
  font-size: 1rem; font-weight: 500; line-height: 1.3;
  cursor: pointer; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(-4px); }
.btn-primary { background: var(--ink); color: var(--bg); box-shadow: 0 10px 24px -12px rgba(22, 23, 27, .5); }
.btn-primary:hover { background: #000; box-shadow: 0 14px 30px -12px rgba(22, 23, 27, .55); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { min-height: 42px; padding: 9px 20px; font-size: .9375rem; }
.btn-block { width: 100%; }
.btn-wa { margin-top: 32px; background: transparent; color: var(--on-dark); border-color: var(--dark-line); }
.btn-wa:hover { border-color: var(--on-dark-muted); }
.btn-wa[hidden] { display: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 500;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.link-arrow svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.link-arrow:hover svg { transform: translateX(-4px); }

/* ---------- Chips & skeletons (used in illustrations) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .6875rem; font-weight: 500; line-height: 1;
  padding: 6px 10px; border-radius: 999px;
  background: var(--bg-alt); color: var(--ink-2); white-space: nowrap;
}
.chip-accent { background: var(--accent-soft); color: var(--accent-ink); }
.chip-sage { background: var(--sage-soft); color: var(--sage); }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.sk { display: grid; gap: 6px; flex: 1; min-width: 0; }
.sk b, .sk i { display: block; height: 7px; border-radius: 4px; width: var(--w, 60%); }
.sk b { background: #DCD5CA; }
.sk i { background: #ECE7DF; height: 6px; }
.sk-line { display: block; height: 6px; border-radius: 4px; width: var(--w, 80%); background: #E6DFD4; }

.avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #E9D8C8, #C9A88C); }
.avatar-2 { background: linear-gradient(135deg, #DCE5DE, #9DB3A4); }
.avatar-3 { background: linear-gradient(135deg, #E6E1D9, #B9B0A2); }
.avatar-lg { width: 40px; height: 40px; }

.visual-caption {
  position: absolute; bottom: -44px; left: 0;
  font-size: .75rem; color: var(--muted); letter-spacing: .01em;
}
.visual-caption::before { content: ""; display: inline-block; width: 18px; height: 1px; background: currentColor; vertical-align: middle; margin-left: 8px; opacity: .6; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), height .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(251, 245, 240, .82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--line);
  --header-h: 66px;
}
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 34px; height: 34px; color: var(--ink); }
.brand-mark-accent { fill: var(--accent); }
.brand-text { display: grid; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.brand-tag { font-size: .6875rem; color: var(--muted); letter-spacing: .02em; }

.main-nav { display: flex; align-items: center; gap: 36px; }
.main-nav ul { display: flex; gap: 30px; }
.main-nav ul a { font-size: .9375rem; color: var(--ink-2); position: relative; padding-block: 6px; transition: color .25s var(--ease); }
.main-nav ul a::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.main-nav ul a:hover { color: var(--ink); }
.main-nav ul a:hover::after { transform: scaleX(1); }

.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.nav-toggle span:first-child { top: 17px; }
.nav-toggle span:last-child { top: 25px; }
.nav-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* ==========================================================================
   Intro
   ========================================================================== */
.intro { padding-top: clamp(40px, 6vw, 80px); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 110px); align-items: center; }

.questions { display: grid; }
.question { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; align-items: start; padding-block: 26px; border-bottom: 1px solid var(--line); }
.question:first-child { padding-top: 0; }
.question:last-child { border-bottom: 0; padding-bottom: 0; }
.question p { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.45; color: var(--ink-2); }
.question strong { font-weight: 500; color: var(--ink); background: linear-gradient(transparent 64%, var(--accent-soft) 64%); }
.question .thought {
  position: relative; margin-top: 14px; padding: 18px 22px 18px 26px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  border-radius: 20px; border-start-start-radius: 4px;
  color: var(--ink);
}
.thought::after {
  content: ""; position: absolute; left: 22px; bottom: -11px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
}

.pivot {
  margin-top: clamp(72px, 9vw, 120px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start;
}
.pivot-line { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.22; color: var(--ink); }
.pivot-line em { font-style: normal; color: var(--accent); }
.pivot-body > p { font-size: 1.125rem; line-height: 1.75; color: var(--ink-2); }
.benefits { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.benefits li {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  font-weight: 500; font-size: 1rem; line-height: 1.4; color: var(--ink);
}
.benefit-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.benefit-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* converge diagram */
.converge { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 300px; }
.converge-sources { display: flex; flex-direction: column; justify-content: space-between; height: 240px; position: relative; z-index: 1; }
.source-pill {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font-size: .875rem; color: var(--ink-2); box-shadow: var(--shadow-sm); white-space: nowrap;
}
.sp-ico { width: 18px; height: 18px; border-radius: 6px; flex: none; }
.sp-wa { background: #DDE8DF; box-shadow: inset 0 0 0 5px #DDE8DF, inset 0 0 0 9px var(--sage); border-radius: 50%; }
.sp-mail { background: var(--accent-soft); box-shadow: inset 0 -6px 0 0 #E3CDB8; }
.sp-sheet { background: linear-gradient(var(--line-strong) 1px, transparent 1px) 0 0 / 100% 6px, var(--bg-alt); }
.sp-sys { background: var(--bg-alt); box-shadow: inset 0 0 0 1.5px var(--line-strong); border-radius: 50%; }
.converge-lines { width: 100%; height: 240px; min-width: 60px; }
.converge-lines path { fill: none; stroke: var(--line-strong); stroke-width: 1.25; }
.converge-lines path.flow { stroke: var(--accent); stroke-width: 1.75; stroke-linecap: round; stroke-dasharray: 5 100; stroke-dashoffset: 105; opacity: 0; }
.is-in .converge-lines path.flow { opacity: 1; animation: dash 3.6s linear infinite; }
.is-in .converge-lines path.flow:nth-of-type(6) { animation-delay: -.9s; }
.is-in .converge-lines path.flow:nth-of-type(7) { animation-delay: -1.8s; }
.is-in .converge-lines path.flow:nth-of-type(8) { animation-delay: -2.7s; }
.converge-hub {
  position: relative; z-index: 1; width: 168px;
  background: var(--ink); color: var(--bg); border-radius: var(--radius);
  padding: 22px 20px; display: grid; gap: 4px; box-shadow: var(--shadow-lg);
}
.converge-hub::after { content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.hub-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; margin-bottom: 10px; }
.hub-mark svg { width: 16px; height: 16px; color: #fff; stroke-width: 2; }
.hub-title { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; }
.hub-sub { font-size: .75rem; color: rgba(246, 243, 238, .66); }
.hub-lines { display: grid; gap: 6px; margin-top: 14px; }
.hub-lines i { height: 5px; border-radius: 3px; background: rgba(246, 243, 238, .16); }
.hub-lines i:nth-child(2) { width: 80%; }
.hub-lines i:nth-child(3) { width: 55%; }

.statement {
  margin-top: clamp(56px, 7vw, 96px);
  padding: clamp(36px, 5vw, 56px) clamp(28px, 5vw, 64px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  position: relative; overflow: hidden;
}
.statement::before { content: ""; position: absolute; top: clamp(36px, 5vw, 56px); bottom: clamp(36px, 5vw, 56px); right: 0; width: 3px; border-radius: 3px 0 0 3px; background: var(--accent); }
.statement-not { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.4; color: var(--muted); }
.statement-yes { margin-top: 6px; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.25; color: var(--ink); }
.statement-around { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.statement-around li {
  display: grid; gap: 10px; padding: 18px 20px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.45; color: var(--ink);
}
.statement-around span { font-family: var(--font-mono); font-size: .75rem; font-weight: 400; color: var(--accent-ink); }

/* ==========================================================================
   Challenges
   ========================================================================== */
.challenges { background: var(--bg-alt); }
.pain-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: pain; }
.pain {
  position: relative; counter-increment: pain;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px 30px; min-height: 210px; display: flex; flex-direction: column; gap: 28px;
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.pain::after {
  content: counter(pain, decimal-leading-zero);
  position: absolute; top: 28px; left: 26px; font-family: var(--font-mono); font-size: .75rem; color: var(--muted);
}
.pain:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.pain p { font-size: 1.0625rem; line-height: 1.55; color: var(--ink); margin-top: auto; }
.pain-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--bg); display: grid; place-items: center; color: var(--accent-ink); }
.pain-ico svg { width: 22px; height: 22px; }
.pain-cta { background: var(--ink); border-color: var(--ink); color: var(--bg); justify-content: space-between; }
.pain-cta::after { content: none; }
.pain-cta:hover { border-color: var(--ink); }
.pain .pain-cta-title { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.2; color: var(--bg); margin-top: 0; }
.pain-cta .link-arrow { align-self: flex-start; color: var(--bg); }

.verbs { margin-top: clamp(64px, 8vw, 100px); }
.verbs-intro { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.6; color: var(--muted); }
.verbs-intro strong { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.3; color: var(--ink); }
.verbs-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.verbs-grid li {
  position: relative; display: grid; gap: 10px; padding: 24px 24px 4px;
  font-family: var(--font-display); font-weight: 300; letter-spacing: -.02em; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; color: var(--ink);
}
.verbs-grid li:first-child { padding-right: 0; }
.verbs-grid li + li { border-right: 1px solid var(--line-strong); }
.verbs-grid li::before {
  content: ""; position: absolute; top: -1px; right: 0; width: 48px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: right; transition: transform .9s var(--ease);
}
.verbs-grid li + li::before { right: 24px; }
.verbs.is-in .verbs-grid li::before { transform: scaleX(1); }
.verbs.is-in .verbs-grid li:nth-child(2)::before { transition-delay: .15s; }
.verbs.is-in .verbs-grid li:nth-child(3)::before { transition-delay: .3s; }
.verbs.is-in .verbs-grid li:nth-child(4)::before { transition-delay: .45s; }
.verbs-grid span { font-family: var(--font-mono); font-size: .75rem; color: var(--accent-ink); }
.verbs-outro { margin-top: 28px; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--ink-2); }

/* ==========================================================================
   Services
   ========================================================================== */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.svc {
  grid-column: span 5;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px; display: flex; flex-direction: column;
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.svc:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.svc-wide { grid-column: span 7; }
.svc-full { grid-column: 1 / -1; }
.svc-viz {
  height: 168px; border-radius: 18px; background: var(--bg); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.svc-body { padding: 30px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.svc-num { font-family: var(--font-mono); font-size: .75rem; color: var(--accent-ink); margin-bottom: 14px; }
.svc-quiet .svc-num { font-family: var(--font-body); }
.svc-lead { margin-top: 10px; color: var(--ink-2); font-size: 1.0625rem; }
.svc-text { margin-top: 14px; color: var(--muted); font-size: 1rem; }

.checks { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.checks-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.checks li { position: relative; padding-right: 28px; font-size: .9688rem; line-height: 1.55; color: var(--ink-2); }
.checks li::before {
  content: ""; position: absolute; right: 0; top: 4px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--accent-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A4F31' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* viz: flow */
.viz-flow { gap: 0; padding-inline: 24px; }
.vf-node {
  display: grid; justify-items: center; gap: 10px;
  font-size: .8125rem; font-weight: 500; color: var(--ink-2);
}
.vf-ico {
  width: 54px; height: 54px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); position: relative;
}
.vf-send { background: var(--ink); border-color: var(--ink); }
.vf-link { flex: 1; max-width: 110px; height: 1px; background: repeating-linear-gradient(to left, var(--line-strong) 0 5px, transparent 5px 10px); position: relative; margin-bottom: 30px; }
.vf-link i { position: absolute; top: -3px; right: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0; }
.is-in .vf-link i { animation: travel 2.6s var(--ease) infinite; }
.is-in .vf-link + .vf-node + .vf-link i { animation-delay: 1.3s; }

/* viz: chat */
.viz-chat { flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding: 0 26px; }
.bubble { font-size: .8125rem; line-height: 1.45; padding: 10px 14px; border-radius: 14px; max-width: 78%; }
.bubble-in { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-top-right-radius: 4px; color: var(--ink-2); }
.bubble-ai { align-self: flex-end; width: 70%; background: var(--ink); border-top-left-radius: 4px; display: grid; gap: 7px; }
.bubble-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .6875rem; color: var(--gold-light); font-weight: 500; }
.bubble-tag svg { width: 13px; height: 13px; }

/* viz: board */
.viz-board { gap: 10px; padding: 22px; align-items: stretch; }
.vb-col { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.vb-head { font-size: .6875rem; font-weight: 500; color: var(--muted); margin-bottom: 2px; }
.vb-col i { height: 18px; border-radius: 6px; background: var(--bg-alt); }
.vb-col i.short { width: 70%; }
.vb-col i.accent { background: var(--accent-soft); box-shadow: inset -3px 0 0 var(--accent); }
.vb-col i.sage { background: var(--sage-soft); }

/* viz: blueprint */
.viz-blueprint {
  background:
    linear-gradient(rgba(122, 79, 49, .07) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(122, 79, 49, .07) 1px, transparent 1px) 0 0 / 16px 16px,
    var(--accent-soft);
}
.bp-frame { position: relative; width: 74%; max-width: 380px; height: 104px; display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.bp-block { border: 1.5px dashed rgba(122, 79, 49, .45); border-radius: 8px; background: rgba(255, 255, 255, .55); }
.bp-a { grid-row: span 2; }
.bp-b { background: rgba(255, 255, 255, .85); border-style: solid; border-color: rgba(122, 79, 49, .35); }
.bp-d { display: none; }
.bp-dim { position: absolute; border-color: var(--accent-ink); }
.bp-dim-x { top: -18px; inset-inline: 0; height: 8px; border-inline: 1px solid; }
.bp-dim-x::before { content: ""; position: absolute; top: 4px; inset-inline: 0; height: 1px; background: var(--accent-ink); opacity: .5; }
.bp-dim-x i { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .6875rem; font-weight: 500; color: var(--accent-ink); background: var(--accent-soft); padding: 0 8px; line-height: 1.4; }
.bp-dim-y { left: -18px; top: 0; bottom: 0; width: 8px; border-block: 1px solid; }
.bp-dim-y::before { content: ""; position: absolute; left: 4px; inset-block: 0; width: 1px; background: var(--accent-ink); opacity: .5; }

.svc-feature { background: var(--surface); }
.fit-list { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.fit-list li { padding: 7px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: .9375rem; font-weight: 500; }
.scale { margin-top: auto; padding-top: 32px; display: grid; gap: 12px; }
.scale-labels { display: flex; justify-content: space-between; gap: 24px; font-size: .875rem; line-height: 1.5; color: var(--muted); }
.scale-labels span { max-width: 50%; }
.scale-labels span:last-child { text-align: left; }
.scale-labels strong { font-weight: 600; color: var(--ink-2); }
.scale-track { display: block; height: 4px; border-radius: 4px; background: var(--bg-alt); position: relative; overflow: hidden; }
.scale-track i { position: absolute; inset: 0; background: linear-gradient(to left, var(--accent), var(--ink)); transform: scaleX(0); transform-origin: right; transition: transform 1.6s var(--ease) .3s; }
.is-in .scale-track i { transform: scaleX(1); }

/* marketing (quiet) */
.svc-quiet {
  background: transparent; border-style: dashed; border-color: var(--line-strong);
  padding: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px);
}
.svc-quiet:hover { box-shadow: none; }
.svc-quiet-side { display: grid; gap: 22px; align-content: start; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tags li { font-size: .875rem; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); background: var(--surface); }
.note { display: flex; gap: 12px; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; }
.note-title { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.note svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent-ink); }

.inline-cta {
  margin-top: clamp(48px, 6vw, 72px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-top: 36px; border-top: 1px solid var(--line);
}
.inline-cta p { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.4; max-width: 34ch; }

/* ==========================================================================
   Approach (dark)
   ========================================================================== */
.approach { background: var(--dark); color: var(--on-dark); overflow: hidden; }
.approach::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 15% 50%, rgba(155, 107, 71, .14), transparent 70%);
}
.approach .h2 em { color: var(--gold-light); }
.approach-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
.approach-copy .section-head { margin-bottom: 36px; }
.approach-copy p { color: var(--on-dark-muted); }
.approach-copy p + p { margin-top: 14px; }
.approach-kicker { font-size: 1.0625rem; }
.approach-copy .approach-lead { margin-top: 4px; margin-bottom: 24px; font-family: var(--font-display); font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.3; color: var(--on-dark); }
.approach-copy strong { font-weight: 500; color: var(--on-dark); }
.approach-copy .list-lead { margin-top: 20px; font-weight: 500; color: var(--on-dark); }
.ux-list { margin-top: 32px; border-top: 1px solid var(--dark-line); }
.ux-list li { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--dark-line); font-size: 1.0625rem; color: var(--on-dark); }
.ux-num { font-family: var(--font-mono); font-size: .75rem; color: var(--gold-light); flex: none; }
.approach-close em { font-style: normal; color: var(--gold-light); }
.approach-close { margin-top: 32px; font-family: var(--font-display); font-weight: 300; font-size: 1.4rem; line-height: 1.45; color: var(--on-dark) !important; }

.layers { position: relative; }
.layers-switch {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; margin-bottom: 20px;
  background: var(--dark-2); border: 1px solid var(--dark-line); border-radius: 999px;
}
.layers-btn {
  position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer;
  padding: 10px 22px; border-radius: 999px; font-size: .9375rem; color: var(--on-dark-muted);
  transition: color .35s var(--ease);
}
.layers-btn.is-active { color: var(--ink); }
.layers-thumb {
  position: absolute; top: 5px; bottom: 5px; right: 5px; width: calc(50% - 5px);
  background: var(--on-dark); border-radius: 999px; transition: transform .5s var(--ease);
}
.layers-switch[data-active="front"] .layers-thumb { transform: translateX(-100%); }

.layers-stage {
  position: relative; min-height: 420px;
  border: 1px solid var(--dark-line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--dark-2), var(--dark));
  overflow: hidden;
}
.layer {
  position: absolute; inset: 0; padding: clamp(24px, 4vw, 40px);
  display: flex; flex-direction: column; justify-content: center;
  transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
}
.layers-stage[data-active="front"] .layer-back,
.layers-stage[data-active="back"] .layer-front { opacity: 0; transform: scale(.97); filter: blur(4px); pointer-events: none; }

.layer-back {
  background:
    linear-gradient(rgba(238, 235, 229, .04) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(238, 235, 229, .04) 1px, transparent 1px) 0 0 / 22px 22px;
}
.code-line { font-family: var(--font-mono); font-size: .75rem; color: var(--on-dark-muted); direction: ltr; text-align: left; margin-bottom: 22px; }
.code-line span { color: var(--gold-light); }
.logic { display: grid; gap: 10px; position: relative; }
.logic::before { content: ""; position: absolute; right: 31px; top: 20px; bottom: 20px; width: 1px; background: repeating-linear-gradient(to bottom, var(--dark-line) 0 4px, transparent 4px 8px); }
.logic li {
  position: relative; display: flex; align-items: center; gap: 14px;
  background: var(--dark-3); border: 1px solid var(--dark-line); border-radius: 12px;
  padding: 12px 14px; font-size: .9375rem; color: var(--on-dark);
}
.logic-tag {
  flex: none; min-width: 36px; text-align: center; font-size: .6875rem; font-weight: 500;
  padding: 4px 8px; border-radius: 6px; background: var(--dark); border: 1px solid var(--dark-line); color: var(--on-dark-muted);
}
.logic-tag-ai { color: var(--gold-light); border-color: rgba(214, 179, 148, .35); font-family: var(--font-mono); }

.layer-front { align-items: center; }
.ui-card {
  width: 100%; max-width: 360px; background: var(--surface); color: var(--ink);
  border-radius: 22px; padding: 26px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
  display: grid; gap: 22px;
}
.ui-card-head { display: flex; align-items: center; justify-content: space-between; }
.ui-card-title { font-family: var(--font-display); font-size: 1.35rem; }
.ui-person { display: flex; align-items: center; gap: 14px; }
.ui-meta { display: grid; border-top: 1px solid var(--line); }
.ui-meta div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.ui-meta dt { color: var(--muted); }
.ui-meta dd { font-weight: 500; }
.ui-btn { display: grid; place-items: center; height: 46px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: .9375rem; font-weight: 500; }
.visual-caption-dark { position: static; margin-top: 16px; color: var(--on-dark-muted); }

/* ==========================================================================
   About
   ========================================================================== */
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 110px); align-items: start; }
.about-aside { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 18px; }
.portrait {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(160deg, #E9DFD2 0%, #D8C7B4 55%, #C2A98F 100%);
  display: grid; place-items: center;
}
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait-mono { font-family: var(--font-display); font-size: clamp(4rem, 9vw, 7rem); color: rgba(22, 23, 27, .78); letter-spacing: .04em; }
.portrait figcaption {
  position: absolute; bottom: 16px; right: 16px; left: 16px;
  background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 12px; padding: 10px 14px; font-size: .8125rem; color: var(--ink-2);
}
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.fact:first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; }
.fact dt { font-weight: 600; font-size: 1rem; }
.fact dd { font-size: .8125rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.fact-big { font-family: var(--font-display); font-weight: 300 !important; font-size: 3.4rem !important; line-height: 1; color: var(--accent); }
.fact:first-child dd { margin-top: 0; font-size: .9375rem; color: var(--ink-2); }

.prose-lead { font-size: 1.25rem; line-height: 1.6; color: var(--ink); max-width: 62ch; }
.about-block { margin-top: clamp(40px, 5vw, 56px); display: grid; gap: 14px; color: var(--ink-2); }
.about-label { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--accent-ink); }
.about-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.list-lead { font-weight: 500; color: var(--ink); }
.dash-list { display: grid; gap: 10px; }
.dash-list li { position: relative; padding-right: 26px; }
.dash-list li::before { content: ""; position: absolute; right: 0; top: .85em; width: 14px; height: 1px; background: var(--accent); }
.insight, .belief { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.4; color: var(--ink); }
.insight { padding-right: 20px; border-right: 2px solid var(--accent); }
.insight-steps { margin-top: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: ins; }
.insight-steps li {
  counter-increment: ins; display: flex; align-items: baseline; gap: 12px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  font-size: .9688rem; font-weight: 500; line-height: 1.5; color: var(--ink);
}
.insight-steps li::before { content: counter(ins, decimal-leading-zero); flex: none; font-family: var(--font-mono); font-size: .75rem; font-weight: 400; color: var(--accent-ink); }
.worlds-caption { font-weight: 500; color: var(--ink); }
.checks-plain { margin-top: 0; padding-top: 0; border-top: 0; }
.orgs { margin-block: 44px; }
.orgs-label { font-size: .9375rem; color: var(--muted); margin-bottom: 16px; }
.orgs-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.orgs-list li {
  display: grid; place-items: center; min-height: 72px; padding: 12px; text-align: center;
  border-bottom: 1px solid var(--line); border-left: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1.25rem; color: var(--ink-2); line-height: 1.2;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.orgs-list li:hover { color: var(--ink); background: var(--surface); }

.worlds { margin-block: 10px 4px; display: flex; align-items: center; gap: 16px; font-size: .9375rem; font-weight: 500; }
.worlds span:not(.worlds-join) { padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); white-space: nowrap; }
.worlds-join { flex: 1; max-width: 120px; height: 1px; background: var(--accent); position: relative; }
.worlds-join::before, .worlds-join::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.worlds-join::before { right: 0; }
.worlds-join::after { left: 0; }

.pull-quote {
  font-weight: 300;
  margin-top: clamp(80px, 10vw, 130px); text-align: center; max-width: 980px; margin-inline: auto;
  font-family: var(--font-display); font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.4; color: var(--muted);
}
.pull-quote::before { content: "”"; display: block; font-size: 4.5rem; line-height: .6; color: var(--accent); margin-bottom: 18px; }
.pull-quote em { font-style: normal; font-weight: 400; color: var(--ink); }

/* ==========================================================================
   Process
   ========================================================================== */
.process { background: var(--bg-alt); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; padding-top: 44px; }
.steps::before, .steps::after { content: ""; position: absolute; top: 7px; right: 0; left: 0; height: 1px; }
.steps::before { background: var(--line-strong); }
.steps::after { background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 1.8s var(--ease) .2s; }
.steps.is-in::after { transform: scaleX(1); }
.step { position: relative; padding-left: 12px; }
.step-dot {
  position: absolute; top: -44px; right: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg-alt); border: 1.5px solid var(--accent);
}
.step-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .5s var(--ease); }
.steps.is-in .step:nth-child(1) .step-dot::after { transform: scale(1); transition-delay: .3s; }
.steps.is-in .step:nth-child(2) .step-dot::after { transform: scale(1); transition-delay: .75s; }
.steps.is-in .step:nth-child(3) .step-dot::after { transform: scale(1); transition-delay: 1.2s; }
.steps.is-in .step:nth-child(4) .step-dot::after { transform: scale(1); transition-delay: 1.65s; }
.step-num { display: block; font-family: var(--font-display); font-weight: 200; font-size: 3.4rem; line-height: 1; color: var(--line-strong); margin-bottom: 22px; }
.step .h3 { margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 1rem; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { padding-bottom: clamp(72px, 9vw, 120px); }
.contact-panel {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 72px);
  background: var(--dark); color: var(--on-dark); border-radius: clamp(24px, 3vw, 36px);
  padding: clamp(28px, 5vw, 72px); position: relative; overflow: hidden;
}
.contact-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 90% 0%, rgba(155, 107, 71, .2), transparent 70%);
}
.contact-copy { position: relative; display: flex; flex-direction: column; }
.contact-copy .h2 { margin-bottom: 28px; }
.contact-copy p:not(.eyebrow) { color: var(--on-dark-muted); }
.contact-copy p + p { margin-top: 12px; }
.contact-copy p.contact-lead { font-size: 1.125rem; color: var(--on-dark); }
.contact-lead strong { font-weight: 600; color: var(--gold-light); }
.exchange { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.exchange-col { padding: 18px 20px; border: 1px solid var(--dark-line); border-radius: 16px; background: rgba(255, 255, 255, .02); }
.contact-copy p.exchange-title { margin-bottom: 12px; font-size: .875rem; font-weight: 600; color: var(--gold-light); }
.exchange ul { display: grid; gap: 9px; }
.exchange li { position: relative; padding-right: 18px; font-size: .9688rem; line-height: 1.5; color: var(--on-dark); }
.exchange li::before { content: ""; position: absolute; right: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.contact-small-big strong { color: var(--on-dark); font-weight: 600; }
.contact-small-big { margin-top: 28px !important; padding-top: 28px; border-top: 1px solid var(--dark-line); color: var(--on-dark) !important; font-size: 1.125rem; }
.contact-punch { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.35; color: var(--gold-light) !important; }
.btn-wa { align-self: flex-start; }
.btn-wa svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }

.contact-form {
  position: relative; background: var(--surface); color: var(--ink);
  border-radius: var(--radius-lg); padding: clamp(24px, 3.5vw, 40px);
  display: grid; gap: 18px; align-content: start;
}
.form-intro { font-size: .9375rem; color: var(--muted); margin-bottom: 4px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field label, .field legend { font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.req { color: var(--accent-ink); }
.opt { font-weight: 400; color: var(--muted); font-size: .8125rem; }
.field input, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 16px;
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 1rem; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.field input[dir="ltr"] { text-align: right; }
.field input[dir="ltr"]:not(:placeholder-shown) { text-align: left; }
.field textarea { resize: vertical; min-height: 112px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: #A39E95; }
.field input:hover, .field textarea:hover { border-color: #BDB4A6; }
.field input:focus, .field textarea:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field input[aria-invalid="true"] { border-color: var(--error); }
.field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(168, 64, 44, .12); }
.field-error { font-size: .8125rem; color: var(--error); min-height: 0; }
.field-error:empty { display: none; }

.field-choice { border: 0; padding: 0; margin: 0; }
.field-choice legend { padding: 0; margin-bottom: 9px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 18px;
  border: 1px solid var(--line-strong); border-radius: 999px; font-size: .9375rem; color: var(--ink-2);
  transition: all .25s var(--ease);
}
.choice span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line-strong); transition: all .25s var(--ease); }
.choice:hover span { border-color: #BDB4A6; }
.choice input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.choice input:checked + span::before { background: var(--accent); border-color: var(--accent); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.contact-form .btn-primary { margin-top: 6px; min-height: 56px; }
.contact-form .btn-primary[disabled] { opacity: .6; cursor: progress; }
.form-privacy { font-size: .8125rem; color: var(--muted); text-align: center; }
.form-status:empty { display: none; }
.form-status { padding: 14px 16px; border-radius: var(--radius-sm); font-size: .9375rem; line-height: 1.55; }
.form-status.is-success { background: var(--sage-soft); color: #2F4537; }
.form-status.is-error { background: #F6E3DE; color: #7D2E1F; }
.form-status.is-info { background: var(--accent-soft); color: var(--accent-ink); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { padding-top: clamp(48px, 6vw, 72px); padding-bottom: 32px; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; padding-bottom: 40px; }
.footer-name { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.footer-tag { color: var(--muted); margin-top: 6px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer-nav a { color: var(--ink-2); font-size: .9375rem; transition: color .25s var(--ease); }
.footer-nav a:hover { color: var(--accent-ink); }
.footer-bottom { background: linear-gradient(var(--line), var(--line)) top center / calc(100% - var(--gutter) * 2) 1px no-repeat; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; font-size: .8125rem; color: var(--muted); flex-wrap: wrap; }
.to-top { display: inline-flex; align-items: center; gap: 8px; }
.to-top svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.to-top:hover svg { transform: translateY(-3px); }

.wa-float {
  position: fixed; bottom: 22px; left: 22px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg);
  transition: transform .35s var(--ease);
}
.wa-float:hover { transform: translateY(-3px); }
.wa-float[hidden] { display: none; }
.wa-float svg { width: 24px; height: 24px; }

/* ==========================================================================
   Motion
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.is-in { opacity: 1; transform: none; }


@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); } 50% { box-shadow: 0 0 0 7px rgba(242, 232, 222, .4); } }
@keyframes dash { from { stroke-dashoffset: 105; } to { stroke-dashoffset: 0; } }
@keyframes travel { 0% { right: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { right: calc(100% - 7px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .converge-lines path.flow, .vf-link i { display: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .intro-grid { grid-template-columns: 1fr; }
  .pivot { grid-template-columns: 1fr; }
  .converge { max-width: 520px; width: 100%; }
  .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc, .svc-wide { grid-column: span 6; }
  .checks-2col { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: 1fr; }
  .layers { max-width: 600px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-aside { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .facts { grid-template-columns: 1fr; }
  .fact:first-child { grid-column: auto; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; padding-top: 0; }
  .steps::before, .steps::after { display: none; }
  .step { padding-top: 30px; border-top: 1px solid var(--line-strong); }
  .step-dot { top: -8px; }
  .contact-panel { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; z-index: 2; }
  .main-nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; justify-content: center; align-items: stretch; gap: 40px;
    padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
    background: var(--bg);
    opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
  }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav ul li { border-bottom: 1px solid var(--line); }
  .main-nav ul a { display: block; padding: 18px 0; font-family: var(--font-display); font-size: 1.9rem; color: var(--ink); }
  .main-nav ul a::after { display: none; }
  .main-nav .btn { align-self: stretch; min-height: 56px; font-size: 1.0625rem; }
  .nav-open .main-nav { opacity: 1; visibility: visible; }
  .nav-open { overflow: hidden; }
  /* backdrop-filter would turn the header into the containing block of the fixed menu */
  .nav-open .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
  .brand { position: relative; z-index: 2; }
  .svc, .svc-wide { grid-column: 1 / -1; }
  .svc-quiet { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .visual-caption { bottom: -34px; }

  .converge { height: 240px; }
  .converge-sources { height: 200px; }
  .source-pill { height: 34px; font-size: .75rem; gap: 7px; padding: 0 10px 0 12px; }
  .sp-ico { width: 14px; height: 14px; }
  .converge-lines { height: 200px; }
  .converge-lines { min-width: 36px; }
  .converge-hub { width: 118px; padding: 14px 12px; }
  .hub-mark { width: 26px; height: 26px; margin-bottom: 6px; }
  .hub-title { font-size: 1.1rem; }

  .question { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-block: 20px; }
  .benefits, .statement-around, .insight-steps, .exchange { grid-template-columns: 1fr; }
  .statement-around li { grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; padding: 14px 16px; }
  .verbs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; gap: 0 16px; }
  .verbs-grid li, .verbs-grid li:first-child { padding: 18px 0 14px; border-top: 1px solid var(--line-strong); border-right: 0 !important; }
  .verbs-grid li::before, .verbs-grid li + li::before { right: 0; }
  .scale-labels { font-size: .8125rem; }
  .pain-grid { grid-template-columns: 1fr; gap: 12px; }
  .pain { min-height: 0; flex-direction: row; align-items: center; gap: 18px; padding: 20px 20px 20px 52px; }
  .pain::after { top: 50%; left: 20px; transform: translateY(-50%); }
  .pain p { margin-top: 0; font-size: 1rem; }
  .pain-ico { flex: none; }
  .pain-cta { flex-direction: column; align-items: flex-start; padding: 24px; }

  .svc { padding: 10px; border-radius: var(--radius); }
  .svc-viz { height: 140px; border-radius: 14px; }
  .svc-body { padding: 22px 14px 16px; }
  .vf-ico { width: 46px; height: 46px; }
  .viz-flow { padding-inline: 14px; }
  .inline-cta .btn { width: 100%; }

  .layers-switch { display: grid; width: 100%; }
  .layers-btn { padding: 10px 12px; }
  .layers-stage { min-height: 400px; }
  .logic li { font-size: .875rem; padding: 10px 12px; }

  .about-aside { grid-template-columns: 1fr; }
  .portrait { aspect-ratio: 5 / 4; }
  .orgs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orgs-list li { font-size: 1.1rem; min-height: 60px; }
  .worlds { gap: 10px; font-size: .8125rem; }
  .worlds span:not(.worlds-join) { padding: 8px 12px; }
  .worlds-join { min-width: 24px; }

  .steps { grid-template-columns: 1fr; row-gap: 40px; }
  .step-num { font-size: 2.6rem; margin-bottom: 14px; }

  .field-row { grid-template-columns: 1fr; }
  .contact-panel { padding: 28px 16px 16px; margin-inline: calc(var(--gutter) * -0.5); }
  .contact-copy { padding-inline: 8px; }
  .contact-form { padding: 22px 18px; border-radius: var(--radius); }

  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Theme layer — warm cream, deep navy & champagne gold
   ========================================================================== */
:root {
  --gold: #C99C6E;
  --gold-light: #E8C9A6;
  --gold-grad: linear-gradient(135deg, #F0D6B6 0%, #CFA273 52%, #B4835A 100%);
  --navy: #1D2440;
  --navy-2: #283053;
  --shadow-card: 0 2px 6px rgba(29, 36, 64, .03), 0 24px 48px -26px rgba(150, 100, 62, .38);
  --shadow-float: 0 2px 6px rgba(29, 36, 64, .04), 0 36px 70px -30px rgba(120, 80, 50, .42);
  --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F0D6B6'/%3E%3Cstop offset='.5' stop-color='%23CFA273'/%3E%3Cstop offset='1' stop-color='%23B4835A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 0c.9 6.6 4.5 10.2 12 12-7.5 1.8-11.1 5.4-12 12-.9-6.6-4.5-10.2-12-12C7.5 10.2 11.1 6.6 12 0z' fill='url(%23g)'/%3E%3C/svg%3E");
  --gold-arcs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none'%3E%3Cpath d='M-40 540 C 360 300 820 600 1480 170' fill='none' stroke='%23C99C6E' stroke-opacity='.55' stroke-width='1.5'/%3E%3Cpath d='M-40 580 C 420 370 860 640 1480 230' fill='none' stroke='%23C99C6E' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E");
}

body { background: var(--bg); }
::selection { background: var(--gold-light); }
:focus-visible { outline-color: var(--gold); }

/* ---- type accents */
.display, .h2 { font-weight: 700; letter-spacing: -.03em; }
.display em, .h2 em, .pivot-line em, .contact-punch {
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.approach .h2 em { color: transparent; }
.contact-copy p.contact-punch { color: transparent; }
.section-head .h2::after {
  content: ""; display: block; width: 92px; height: 12px; margin-top: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 12'%3E%3Cpath d='M2 8 C 26 2 64 2 90 7' fill='none' stroke='%23C99C6E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.section-head-center .h2::after { margin-inline: auto; }
.process .section-head { max-width: none; }
.process .section-head .h2 { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 36px); }
.process .section-head .h2::before, .process .section-head .h2::after {
  content: ""; display: block; flex: 1; width: auto; max-width: 260px; height: 1px; margin: 0;
  background: linear-gradient(to left, transparent, var(--gold));
}
.process .section-head .h2::after { background: linear-gradient(to right, transparent, var(--gold)); }

.eyebrow-dot { background: var(--gold); box-shadow: 0 0 0 5px var(--accent-soft); }
.eyebrow-num { border-color: var(--gold-light); color: var(--accent-ink); background: rgba(255, 255, 255, .6); }
.eyebrow-dark .eyebrow-num { background: rgba(255, 255, 255, .06); border-color: var(--dark-line); color: var(--gold-light); }

/* ---- buttons */
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 14px 30px -14px rgba(29, 36, 64, .6); }
.btn-primary:hover { background: var(--navy-2); box-shadow: 0 18px 34px -14px rgba(29, 36, 64, .6); transform: translateY(-1px); }
.btn-ghost { background: rgba(255, 255, 255, .65); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--gold); }
.btn-gold { background: var(--gold-grad); color: var(--navy); font-weight: 600; box-shadow: 0 14px 30px -14px rgba(180, 131, 90, .8), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -14px rgba(180, 131, 90, .9), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn .btn-cal { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- sparkles */
.sparkle {
  position: absolute; z-index: 1; width: 36px; height: 36px; pointer-events: none;
  background: var(--sparkle) center / contain no-repeat;
  animation: twinkle 5s ease-in-out infinite;
}
.sparkle-cta { top: 22px; left: 22px; width: 30px; height: 30px; animation-delay: -1.5s; }
.sparkle-contact { top: 28px; left: 32px; width: 34px; height: 34px; animation-delay: -2.5s; }
.sparkle-footer { position: relative; display: inline-block; width: 30px; height: 30px; margin-bottom: 6px; }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(.8) rotate(14deg); opacity: .7; } }

/* ---- wave dividers (shape filled with the previous section's colour) */
.wave {
  position: absolute; top: -1px; left: 0; right: 0; z-index: 1; pointer-events: none;
  height: clamp(36px, 6vw, 92px); background: var(--wave, var(--bg));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 92' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V40C1180 92 900 98 640 64C400 32 190 30 0 70Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 92' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V40C1180 92 900 98 640 64C400 32 190 30 0 70Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.wave-b {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 92' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V66C1220 30 980 24 720 52C470 80 230 88 0 42Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 92' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V66C1220 30 980 24 720 52C470 80 230 88 0 42Z'/%3E%3C/svg%3E");
}
.challenges { --wave: var(--bg); }
.services { --wave: var(--bg-alt); }
.approach { --wave: var(--bg); }
.about { --wave: var(--dark); }
.process { --wave: var(--bg); }
.contact { --wave: var(--bg-alt); }
.site-footer { --wave: var(--bg); }

/* ---- header */
.brand-mark { width: 36px; height: 36px; }
.site-header.is-scrolled { background: rgba(251, 245, 240, .86); }

/* ---- shared card look */
.pain, .svc, .fact, .benefits li, .statement, .statement-around li, .insight-steps li,
.source-pill, .note, .contact-form, .question .thought, .tags li {
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
.pain, .svc, .fact, .benefits li, .statement, .insight-steps li, .question .thought, .note { background: rgba(255, 255, 255, .82); }

/* intro */
.question strong { background: linear-gradient(transparent 64%, var(--accent-soft) 64%); }
.converge-hub { background: var(--navy); }
.hub-mark { background: var(--gold-grad); }
.converge-hub::after { background: var(--gold); }
.converge-lines path { stroke: var(--line-strong); }
.converge-lines path.flow { stroke: var(--gold); }
.benefit-ico { border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, var(--accent-soft)); color: var(--navy); box-shadow: inset 0 0 0 1px var(--line-strong); }
.statement { border-color: #fff; }
.statement::before { width: 4px; background: var(--gold-grad); }
.statement-around li { background: var(--bg); box-shadow: none; }

/* challenges */
.pain { align-items: center; text-align: center; gap: 20px; padding: 36px 24px 30px; border-radius: 24px; border-color: #fff; }
.pain p { margin-top: 0; }
.pain-ico { width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, var(--accent-soft)); color: var(--navy); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pain-ico svg { width: 26px; height: 26px; stroke-width: 1.4; }
.pain::after { top: 18px; left: 20px; color: var(--gold); }
.pain-cta { background: var(--navy); border-color: var(--navy); justify-content: center; gap: 22px; overflow: hidden; }
.pain-cta::before { content: ""; position: absolute; inset: 0; background: var(--gold-arcs) center bottom / 220% 100% no-repeat; opacity: .8; pointer-events: none; }
.pain-cta .link-arrow { align-self: center; color: var(--gold-light); position: relative; }
.pain .pain-cta-title { position: relative; }
.verbs-grid li::before { background: var(--gold-grad); }
.verbs-grid span { color: var(--gold); }

/* services */
.svc { border-color: #fff; border-radius: 28px; }
.svc-viz { background: linear-gradient(160deg, #FDF7F2 0%, #F6E5D8 100%); }
.svc-num { color: var(--gold); }
.checks li::before {
  border-radius: 6px;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.vf-ico { border-color: #fff; box-shadow: var(--shadow-card); }
.vf-send { background: var(--navy); border-color: var(--navy); }
.vf-link i { background: var(--gold); }
.bubble-ai { background: var(--navy); }
.vb-col { border-color: #fff; box-shadow: var(--shadow-card); }
.vb-col i.accent { box-shadow: inset -3px 0 0 var(--gold); }
.scale-track i { background: linear-gradient(to left, var(--gold), var(--navy)); }
.fit-list li { background: var(--accent-soft); }
.svc-quiet { background: rgba(255, 255, 255, .45); border: 1px solid var(--gold-light); box-shadow: none; }
.tags li { background: #fff; border-color: var(--line); }

.inline-cta {
  position: relative; overflow: hidden; border-top: 0;
  padding: clamp(30px, 4vw, 48px) clamp(24px, 5vw, 64px);
  background: var(--navy); border-radius: 30px; box-shadow: var(--shadow-float);
}
.inline-cta::before { content: ""; position: absolute; inset: 0; background: var(--gold-arcs) center / 100% 100% no-repeat; pointer-events: none; }
.inline-cta p, .inline-cta .btn { position: relative; }
.inline-cta p { color: var(--on-dark); font-weight: 300; }

/* approach (navy) */
.approach { background: var(--navy); }
.approach::before {
  background:
    var(--gold-arcs) center bottom / 100% 34% no-repeat,
    radial-gradient(ellipse 50% 60% at 15% 50%, rgba(201, 156, 110, .16), transparent 70%);
}
.layers-switch { background: var(--dark-2); }
.layers-thumb { background: var(--gold-grad); }
.layers-btn.is-active { color: var(--navy); font-weight: 600; }
.layers-stage { background: linear-gradient(180deg, var(--dark-2), var(--navy)); }
.ui-card { border-radius: 24px; }
.ui-btn { background: var(--navy); }

/* about */
.portrait { background: radial-gradient(ellipse 80% 60% at 70% 20%, rgba(255, 255, 255, .7), transparent 60%), linear-gradient(160deg, #F7E6DA 0%, #EBCDB3 55%, #D6AE8A 100%); box-shadow: var(--shadow-float); }
.portrait-mono { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: saturate(1.1) brightness(.85); }
.fact { border-color: #fff; }
.fact-big { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.about-label { color: var(--accent-ink); }
.dash-list li::before { background: var(--gold); }
.insight { border-right: 3px solid; border-image: var(--gold-grad) 1; }
.insight-steps li { border-color: #fff; }
.insight-steps li::before { color: var(--gold); }
.orgs-list { gap: 10px; border: 0; }
.orgs-list li { border: 1px solid #fff; border-radius: 16px; background: rgba(255, 255, 255, .82); box-shadow: var(--shadow-card); color: var(--navy); font-weight: 500; }
.worlds span:not(.worlds-join) { border-color: var(--gold-light); }
.worlds-join, .worlds-join::before, .worlds-join::after { background: var(--gold); }
.pull-quote::before { content: ""; width: 42px; height: 42px; margin: 0 auto 26px; background: var(--sparkle) center / contain no-repeat; animation: twinkle 5s ease-in-out infinite; }

/* process — gold badges on soft cards */
.steps { padding-top: 0; gap: 20px; }
.steps::before, .steps::after { top: 27px; left: 10%; right: 10%; }
.steps::after { background: var(--gold-grad); height: 2px; top: 26px; }
.step {
  z-index: 1; margin-top: 27px; padding: 50px 22px 28px; text-align: center;
  background: rgba(255, 255, 255, .85); border: 1px solid #fff; border-radius: 24px; box-shadow: var(--shadow-card);
}
.step-dot { display: none; }
.step-num {
  position: absolute; top: -27px; left: 50%; translate: -50% 0;
  width: 54px; height: 54px; margin: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-grad); color: #fff; font-size: 1.1rem; font-weight: 600; line-height: 1;
  box-shadow: 0 0 0 7px var(--bg-alt), 0 12px 24px -8px rgba(180, 131, 90, .7);
  scale: .6; opacity: 0; transition: scale .6s var(--ease), opacity .6s var(--ease);
}
.steps.is-in .step-num { scale: 1; opacity: 1; }
.steps.is-in .step:nth-child(2) .step-num { transition-delay: .45s; }
.steps.is-in .step:nth-child(3) .step-num { transition-delay: .9s; }
.steps.is-in .step:nth-child(4) .step-num { transition-delay: 1.35s; }

/* contact */
.contact-panel { background: var(--navy); box-shadow: var(--shadow-float); }
.contact-panel::before {
  background:
    var(--gold-arcs) center bottom / 100% 26% no-repeat,
    radial-gradient(ellipse 50% 50% at 90% 0%, rgba(201, 156, 110, .22), transparent 70%);
}
.contact-form { border-radius: 28px; }
.field input:focus, .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px var(--accent-soft); }
.choice input:checked + span { background: var(--navy); border-color: var(--navy); }
.choice input:checked + span::before { background: var(--gold); border-color: var(--gold); }
.exchange li::before { background: var(--gold); }

/* footer (navy band) */
.site-footer {
  position: relative; overflow: hidden; margin-top: 0;
  padding-top: clamp(80px, 9vw, 130px);
  background: var(--navy); color: var(--on-dark);
}
.site-footer::before { content: ""; position: absolute; inset: 0; background: var(--gold-arcs) center bottom / 100% 80% no-repeat; opacity: .7; pointer-events: none; }
.site-footer .container { position: relative; }
.footer-tag, .footer-bottom { color: var(--on-dark-muted); }
.footer-nav a { color: var(--on-dark); }
.footer-nav a:hover { color: var(--gold-light); }
.footer-bottom { background-image: linear-gradient(var(--dark-line), var(--dark-line)); }
.to-top:hover { color: var(--gold-light); }

.wa-float { background: var(--gold-grad); color: var(--navy); }

@media (max-width: 1080px) {
  .steps { row-gap: 52px; }
  .step { border-top: 1px solid #fff; padding-top: 50px; }
}
@media (max-width: 640px) {
  .pain { flex-direction: column; text-align: center; align-items: center; gap: 0; padding: 30px 22px; min-height: 170px; }
  .pain-cta { align-items: flex-start; }
  .pain-cta .link-arrow { align-self: flex-start; }
  .inline-cta { border-radius: 24px; }
  .process .section-head .h2::before, .process .section-head .h2::after { max-width: 48px; }
  .sparkle-contact { top: 18px; left: 18px; width: 26px; height: 26px; }
  .sparkle-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .step-num { scale: 1; opacity: 1; }
}

/* spacing tune for the themed layout */
.contact { padding-bottom: clamp(56px, 7vw, 96px); }

/* ==========================================================================
   Hero — linoy webDesign (champagne gold stage, 1672×941 proportions)
   ========================================================================== */
/* Dorian CLM (Culmus, GNU GPL + font exception) — hero headline */
@font-face {
  font-family: "Dorian CLM";
  src: url("../fonts/dorianclm-book-webfont.woff") format("woff"), url("../fonts/dorianclm-book-webfont.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --hl-ink: #3A2D21;
  --hl-ink-2: #4E3E2E;
  --hl-gold-dark: #8C5E30;
  --hl-metal:
    linear-gradient(180deg, #F7DFBD 0%, #F2D2A5 8%, #E9BD85 19%, #DFAD70 34%, #D39B5E 52%, #C58B4F 70%, #B77B40 87%, #A96E35 100%) padding-box,
    linear-gradient(180deg, #FFF1D6 0%, #E9C18D 8%, #B77C40 19%, #F4D5A7 35%, #D5A36B 65%, #8E5728 88%, #F0C58C 100%) border-box;
}

/* ---- metallic gold button */
.btn-metal {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 100px;
  border: 2px solid transparent; background: var(--hl-metal);
  color: #261708; font-weight: 500; letter-spacing: 0;
  text-shadow: 0 1px 1px rgba(255, 229, 190, .35);
  box-shadow:
    inset 0 2px 2px rgba(255, 250, 231, .95),   /* top metallic reflection */
    inset 0 5px 8px rgba(255, 229, 184, .48),   /* upper inner shine */
    inset 0 -5px 8px rgba(103, 58, 21, .35),    /* dark lower edge */
    0 1px 2px rgba(104, 65, 29, .5),            /* outer rim */
    0 9px 14px rgba(94, 59, 28, .24),           /* floating shadow */
    0 17px 25px rgba(104, 69, 35, .13);         /* ambient shadow */
  transition: all .3s ease;
}
/* extra metallic reflection, kept under the label */
.btn-metal::before {
  content: ""; position: absolute; z-index: -1; inset: 3px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .12) 12%, transparent 32%, transparent 75%, rgba(117, 67, 27, .1) 100%);
}
.btn-metal::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: skewX(-20deg); transition: left .9s var(--ease);
}
.btn-metal:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-metal:active { transform: translateY(1px); }
.btn-metal:hover::after { left: 125%; }

/* ---- header: logo left, CTA right (as in the reference) */
.site-header { height: 100px; }
.site-header.is-scrolled { height: 70px; }
.header-inner { max-width: none; padding-inline: clamp(20px, 7.2vw, 120px); flex-direction: row-reverse; }

/* clean wordmark: linoy / webDesign with a small gold star */
.logo { display: block; flex: none; transform-origin: left center; transition: transform .45s var(--ease); }
.logo img { display: block; width: 160px; height: auto; }
.site-header.is-scrolled .logo { transform: scale(.78); }

.header-cta { min-height: 52px; padding: 0 28px; font-size: 17px; gap: 12px; }
.btn.header-cta .btn-cal { width: 1.45em; height: 1.45em; stroke-width: 1.5; }

@media (min-width: 861px) {
  .main-nav { flex-direction: row-reverse; gap: clamp(32px, 11.6vw, 196px); }
  .main-nav ul { gap: 0; }
  .main-nav ul li + li { border-right: 1px solid #CDB494; }
  .main-nav ul a { display: block; white-space: nowrap; padding: 2px clamp(12px, 1.6vw, 28px); font-family: var(--font-display); font-size: clamp(15px, 1.25vw, 21px); color: var(--hl-ink); line-height: 1.2; }
  .main-nav ul a::after { left: clamp(12px, 1.6vw, 28px); right: clamp(12px, 1.6vw, 28px); bottom: -6px; background: var(--gold); }
  .main-nav ul a:hover { color: var(--hl-gold-dark); }
}

/* ---- stage: the whole hero fits one screen (100svh, header + copy + benefits).
   .hl-scene and .hl-stage share one box with the photo's exact 1672×941 proportions,
   sized like object-fit: cover from container units, so photo, vector art, live screen
   and copy stay registered to each other at every viewport. */
.hl {
  position: relative; overflow: hidden; height: 100vh; height: 100svh; min-height: 620px; color: var(--hl-ink);
  background: linear-gradient(90deg, #E7C7A4 0%, #F0D6B8 45%, #F4DDC2 100%);
}
.hl-frame { position: relative; height: 100%; max-width: 195svh; margin-inline: auto; container-type: size; }
.hl-media { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.hl-scene, .hl-stage {
  position: absolute; aspect-ratio: 1672 / 941;
  width: max(100cqw, 177.683cqh);
  left: calc((100cqw - max(100cqw, 177.683cqh)) * .68);
  top: calc((100cqh - max(100cqw, 177.683cqh) * .5628) * .5);
}
.hl-photo, .hl-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hl-photo img { object-fit: cover; }
.hl-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.hl-art path { vector-effect: none; }
.hl-ribbon { shape-rendering: geometricPrecision; }
.rb-line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 2.4s var(--ease) .2s forwards; }
@media (prefers-reduced-motion: reduce) { .rb-line { stroke-dashoffset: 0; animation: none; } }
.hl-art-line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 2.6s var(--ease) .2s forwards; }
.hl-art-line-2 { animation-delay: .5s; }
.hl-art-line-3 { animation-delay: .9s; }
.hl-art-line-4 { animation-delay: .7s; }
@media (min-aspect-ratio: 39 / 20) {
  .hl-media { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
}
.hl-stage { z-index: 2; pointer-events: none; container-type: inline-size; }
.hl-copy, .hl-benefits { pointer-events: auto; }

/* ---- copy (right, inside the light panel of the photo) */
.hl-copy { position: absolute; z-index: 2; right: 4.4%; top: 25%; width: 38.6%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hl-title { position: relative; margin: 0; direction: rtl; font-size: inherit; }
/* Metallic title, three stacked layers of the same word:
   span     – dark bronze body + stacked text-shadows → bevelled lower edge and cast shadow
   ::before – champagne-gold face (multi-band metal), lifted .022em so the bevel shows below
   ::after  – top light catch + slow travelling sheen */
.hl-title .hl-line { display: block; white-space: nowrap; }
.hl-title .hl-w {
  position: relative; display: inline-block;
  font-family: "Suez One", "Frank Ruhl Libre", serif; font-weight: 400; font-synthesis: none;
  font-size: 5.2cqw; line-height: 1.18; letter-spacing: 0; white-space: nowrap;
  text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased;
  color: #6E4723;
  text-shadow:
    0 .012em 0 #603C1D, 0 .022em 0 #54331A,
    0 .03em .02em rgba(58, 34, 14, .38),
    0 .06em .07em rgba(90, 56, 24, .26),
    0 .14em .22em rgba(110, 72, 34, .16);
}
.hl-title .hl-w::before,
.hl-title .hl-w::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  pointer-events: none;
}
.hl-title .hl-w::before {
  transform: translateY(-.022em);
  background:
    linear-gradient(100deg, rgba(255, 246, 226, 0) 20%, rgba(255, 246, 226, .35) 38%, rgba(255, 246, 226, 0) 52%, rgba(255, 246, 226, 0) 70%, rgba(255, 240, 210, .28) 84%, rgba(255, 246, 226, 0) 95%),
    radial-gradient(ellipse 90% 140% at 50% 55%, rgba(255, 238, 205, .38), rgba(255, 238, 205, .2) 60%, rgba(255, 238, 205, .1) 100%),
    linear-gradient(180deg,
      #FFF0D2 0%, #F2D3A0 12%, #DCB078 28%, #C99B62 45%, #BC8B53 60%,
      #B08048 78%, #A0703B 93%, #A87843 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .5px rgba(120, 78, 36, .55);
}
.hl-title .hl-w::after {
  transform: translateY(-.022em);
  background:
    linear-gradient(105deg, transparent 42%, rgba(255, 252, 240, .85) 50%, transparent 58%) 130% 0 / 260% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 252, 244, .75) 0%, rgba(255, 252, 244, 0) 14%) 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  animation: hl-sheen 8s ease-in-out 1.6s infinite;
}
.hl-title .hl-line + .hl-line .hl-w::after { animation-delay: 2s; }
.hl-title .hl-w + .hl-w { margin-right: .24em; }
/* "חכם יותר": deeper copper */
.hl-title .hl-w-copper { color: #6A3214; text-shadow: 0 .012em 0 #5C2A10, 0 .022em 0 #4E230C, 0 .03em .02em rgba(60, 24, 6, .4), 0 .06em .07em rgba(96, 44, 16, .28), 0 .14em .22em rgba(120, 60, 24, .16); }
.hl-title .hl-w-copper::before {
  background:
    linear-gradient(100deg, rgba(255, 236, 214, 0) 22%, rgba(255, 236, 214, .32) 40%, rgba(255, 236, 214, 0) 54%),
    radial-gradient(ellipse 90% 140% at 50% 55%, rgba(255, 226, 196, .34), rgba(255, 226, 196, .18) 60%, rgba(255, 226, 196, .08) 100%),
    linear-gradient(180deg, #FCE0BE 0%, #EDB683 14%, #D69660 30%, #BE7A44 46%, #AF6C37 62%, #A2612F 78%, #93552A 90%, #8A4D22 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .5px rgba(110, 50, 20, .55);
}
@keyframes hl-sheen { 0% { background-position: 130% 0, 0 0; } 35%, 100% { background-position: -40% 0, 0 0; } }
/* Sparkle at the start of the first headline line (anchored to that word). Drawn on an 18em box (180px at 1em = 10px),
   so every size below scales with the box's font-size. */
.hl-title-spark {
  position: absolute; top: -5.8cqw; right: -7.6cqw; width: 14cqw; height: 14cqw; font-size: calc(14cqw / 18);
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 255, 245, .95) 0%, rgba(255, 244, 218, .65) 5%, rgba(255, 222, 178, .25) 17%, transparent 43%);
  opacity: .7; animation: hl-spark 5s ease-in-out infinite;
}
/* vertical ray */
.hl-title-spark::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(50% 0%, 50.8% 43%, 53% 48%, 100% 50%, 53% 52%, 50.8% 57%, 50% 100%, 49.2% 57%, 47% 52%, 0% 50%, 47% 48%, 49.2% 43%);
  background: linear-gradient(90deg, transparent 0%, rgba(194, 137, 77, .25) 43%, #FFF2D4 49%, #FFFFFF 50%, #FFF4DF 51%, rgba(215, 166, 108, .35) 57%, transparent 100%);
  filter: drop-shadow(0 0 .3em rgba(255, 248, 225, .8));
}
/* horizontal ray */
.hl-title-spark::after {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(0% 50%, 44% 48.5%, 48% 44%, 50% 0%, 52% 44%, 56% 48.5%, 100% 50%, 56% 51.5%, 52% 56%, 50% 100%, 48% 56%, 44% 51.5%);
  background: linear-gradient(180deg, transparent 0%, rgba(199, 146, 89, .25) 43%, #FFF2D4 49%, #FFFFFF 50%, #FFF1D7 51%, rgba(205, 150, 91, .35) 57%, transparent 100%);
}
/* diagonal reflections */
.hl-spark-core {
  position: absolute; inset: 0;
  background:
    linear-gradient(45deg, transparent 48.8%, rgba(255, 255, 244, .45) 49.7%, rgba(255, 248, 222, .7) 50%, transparent 51.2%),
    linear-gradient(-45deg, transparent 48.8%, rgba(255, 255, 244, .45) 49.7%, rgba(255, 248, 222, .7) 50%, transparent 51.2%);
  filter: blur(.1em);
}
/* white-hot center */
.hl-spark-center {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 1.3em; height: 1.3em; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0%, #FFFEFA 28%, #FFF0CF 55%, rgba(244, 199, 139, .4) 78%, transparent 100%);
  box-shadow: 0 0 .3em .2em #FFFEF4, 0 0 .9em .4em rgba(255, 245, 218, .95), 0 0 2em .8em rgba(255, 223, 174, .65), 0 0 3.5em 1.2em rgba(230, 177, 116, .3);
}
@keyframes hl-spark { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(.88); opacity: .55; } }
.hl-sub { margin-top: max(12px, 1cqw); font-family: var(--font-display); font-weight: 400; font-size: max(20px, 1.85cqw); line-height: 1.3; letter-spacing: -.01em; color: var(--hl-ink); }
.hl-text { position: relative; max-width: 38cqw; margin-top: max(16px, 1.5cqw); font-family: var(--font-display); font-weight: 400; font-size: max(16px, 1.5cqw); line-height: 1.38; color: var(--hl-ink); }
.hl-cta-wrap { margin-top: max(18px, 1.3cqw); }
.hl-cta { min-height: 64px; max-width: 360px; padding: 0 44px; gap: 22px; font-size: 19px; }
.hl-cta .hl-cta-arrow { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.hl-cta:hover .hl-cta-arrow { transform: translateX(4px); }

/* ---- benefits strip (on the marble counter) */
.hl-benefits {
  position: absolute; z-index: 2; left: 30%; right: 3.5%; top: 80.4%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 1.7cqw 4cqw 1.7cqw; border-radius: 40px;
  background: radial-gradient(ellipse at center, rgba(255, 249, 240, .62) 40%, rgba(255, 246, 234, .38) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%);
  mask-composite: intersect;
}
.hl-benefits li { position: relative; display: grid; justify-items: center; align-content: start; text-align: center; padding-inline: .6cqw; }
.hl-benefits li + li::before { content: ""; position: absolute; right: 0; top: -.2cqw; bottom: -.2cqw; width: 1px; background: linear-gradient(rgba(176, 132, 80, 0), #B08450 18%, #B08450 82%, rgba(176, 132, 80, 0)); }
.hl-b-ico { margin-bottom: .55cqw; }
.hl-b-ico svg { width: 2.9cqw; height: 2.9cqw; fill: none; stroke: #9A6B3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hl-benefits strong { font-family: var(--font-display); font-weight: 700; font-size: max(13px, 1.3cqw); line-height: 1.3; color: var(--hl-ink); }
.hl-benefits span:not(.hl-b-ico) { font-family: var(--font-display); font-size: max(12px, 1.12cqw); line-height: 1.35; color: var(--hl-ink-2); }

/* ==========================================================================
   Live dashboard on the laptop screen (640×400 design canvas)
   ========================================================================== */
.dash {
  --dx-ink: #2F2620; --dx-muted: #8C7C6C; --dx-line: #EFE5D8; --dx-gold: #B8894F; --dx-gold-soft: #F4E8D6;
  --dx-metal: linear-gradient(135deg, #EBCB98, #B98549);
  position: absolute; left: 0; top: 0; z-index: 1; width: 640px; height: 400px; overflow: hidden;
  transform-origin: 0 0; backface-visibility: hidden;
  display: grid; grid-template-columns: 46px minmax(0, 1fr);
  background: #FBF7F1; color: var(--dx-ink);
  font-family: var(--font-display); font-size: 10px; line-height: 1.35;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  visibility: hidden;
}
/* Once fitted the screen is opaque at once (the photo's static screen never shows through);
   only the interface fades in, like a display waking up. */
.dash.is-fitted { visibility: visible; }
.dash > .dx-side, .dash > .dx-body { opacity: 0; transition: opacity .9s var(--ease) .15s; }
.dash.is-fitted > .dx-side, .dash.is-fitted > .dx-body { opacity: 1; }
.dash svg { display: block; }
.dash svg path, .dash svg circle { vector-effect: none; }

.dx-side { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 12px; background: linear-gradient(180deg, #3B3029, #2B231D); }
.dx-logo { width: 22px; height: 22px; margin-bottom: 6px; border-radius: 7px; background: var(--dx-metal); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.dx-side i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: rgba(246, 234, 214, .55); }
.dx-side i.is-active { background: rgba(230, 203, 159, .16); color: #F1D9AE; }
.dx-side svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.dx-body { min-width: 0; display: grid; grid-template-rows: 36px 58px 126px minmax(0, 1fr); gap: 8px; padding: 0 10px 10px; }
.dx-top { display: flex; align-items: center; justify-content: space-between; margin: 0 -10px; padding: 0 12px; background: #FFFDFA; border-bottom: 1px solid var(--dx-line); }
.dx-hello { display: flex; align-items: center; gap: 8px; }
.dx-hello b { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.dx-live { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; background: var(--dx-gold-soft); color: #8C6239; font-size: 9px; font-weight: 600; }
.dx-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--dx-gold); animation: dx-pulse 2s ease-in-out infinite; }
.dx-tools { display: flex; align-items: center; gap: 10px; color: var(--dx-muted); }
.dx-search { display: inline-flex; align-items: center; gap: 5px; width: 130px; height: 22px; padding: 0 8px; border-radius: 99px; background: #F4EDE3; font-size: 9px; }
.dx-tools svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dx-bell { position: relative; display: grid; place-items: center; width: 22px; height: 22px; }
.dx-bell svg { width: 14px; height: 14px; }
.dx-bell em { position: absolute; top: -1px; right: -3px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 99px; background: var(--dx-gold); color: #fff; font-size: 8px; font-style: normal; font-weight: 700; line-height: 13px; text-align: center; }
.dx-avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--dx-metal); color: #fff; font-size: 10px; font-weight: 700; }

.dx-card {
  position: relative; min-width: 0; padding: 9px 11px; border-radius: 10px;
  background: #fff; border: 1px solid var(--dx-line);
  box-shadow: 0 1px 2px rgba(80, 55, 30, .04), 0 6px 14px -10px rgba(110, 76, 42, .28);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.dx-card:hover { transform: translateY(-1.5px); box-shadow: 0 1px 2px rgba(80, 55, 30, .05), 0 10px 20px -10px rgba(110, 76, 42, .34); }
.dx-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.dx-head b { font-size: 10.5px; font-weight: 600; }
.dx-chip { padding: 1px 7px; border-radius: 99px; background: #F6F0E7; color: var(--dx-muted); font-size: 8.5px; white-space: nowrap; }
.dx-chip-gold { background: var(--dx-gold-soft); color: #8C6239; font-weight: 600; }

.dx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dx-kpi { display: grid; align-content: center; gap: 1px; padding: 8px 10px; }
.dx-label { font-size: 9px; color: var(--dx-muted); }
.dx-val { font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dx-trend { font-size: 8.5px; color: #9A7444; }
.dx-kpi-ring { display: flex; align-items: center; justify-content: space-between; }
.dx-kpi-ring > div { display: grid; gap: 1px; }
.dx-ring { width: 34px; height: 34px; transform: rotate(-90deg); }
.dx-ring-bg, .dx-ring-fg { fill: none; stroke-width: 5; }
.dx-ring-bg { stroke: #F1E8DC; }
.dx-ring-fg { stroke: var(--dx-gold); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease) .3s; }

.dx-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; min-height: 0; }
.dx-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dx-revenue { display: flex; flex-direction: column; }
.dx-plot { position: relative; flex: 1 1 0; min-height: 0; }
.dx-chart { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dx-grid { fill: none; stroke: #F1E9DE; stroke-width: 1; }
.dx-area { fill: url(#dx-area); opacity: 0; transition: opacity 1.2s var(--ease) 1.2s; }
.dx-line { fill: none; stroke: var(--dx-gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.9s var(--ease) .3s; }
.dx-dot { position: absolute; left: 96%; top: 19.7%; margin: -3.5px 0 0 -3.5px; width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 2px solid var(--dx-gold); opacity: 0; transition: opacity .4s var(--ease) 2s; }
.dx-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--dx-gold); opacity: 0; animation: dx-ring 2.4s ease-out 2.4s infinite; }
.dx-tip { position: absolute; right: 7%; top: 2%; padding: 2px 6px; border-radius: 5px; background: var(--dx-ink); color: #F6EADB; font-size: 8.5px; font-weight: 600; opacity: 0; transform: translateY(3px); transition: opacity .4s var(--ease) 2.2s, transform .4s var(--ease) 2.2s; }
.dx-months { display: flex; flex-direction: row-reverse; justify-content: space-between; padding: 3px 4px 0; color: var(--dx-muted); font-size: 8px; }

.dx-donut-wrap { display: flex; align-items: center; gap: 10px; height: calc(100% - 22px); }
.dx-donut { flex: none; width: 74px; height: 74px; transform: rotate(-90deg); }
.dx-donut-bg { fill: none; stroke: #F4EDE3; stroke-width: 9; }
.dx-seg { fill: none; stroke: var(--c); stroke-width: 9; stroke-dasharray: 0 100; stroke-dashoffset: var(--off); transition: stroke-dasharray .9s var(--ease) calc(var(--d) + .5s); }
.dx-legend { flex: 1; display: grid; gap: 4px; font-size: 9px; }
.dx-legend li { display: flex; align-items: center; gap: 6px; }
.dx-legend li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.dx-legend b { margin-right: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

.dx-leads ul, .dx-auto ul, .dx-tasks ul { display: grid; gap: 6px; }
.dx-leads li { display: flex; align-items: center; gap: 7px; max-height: 26px; transition: opacity .5s var(--ease), transform .5s var(--ease), max-height .5s var(--ease); }
.dx-leads li.is-entering { opacity: 0; transform: translateY(-6px); max-height: 0; }
.dx-ava { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--dx-gold-soft); color: #8C6239; font-size: 9px; font-weight: 700; }
.dx-who { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.dx-who b { font-size: 9.5px; font-weight: 600; }
.dx-who small { font-size: 8px; color: var(--dx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-status { flex: none; padding: 1px 6px; border-radius: 99px; background: #F6F0E7; color: var(--dx-muted); font-size: 8px; }
.dx-status.is-new { background: var(--dx-gold-soft); color: #8C6239; font-weight: 600; }
.dx-status.is-done { background: #EFE8DD; color: #6E5541; }

.dx-auto li { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 9.5px; }
.dx-switch { position: relative; flex: none; width: 26px; height: 15px; padding: 0; border: 0; border-radius: 99px; background: #E6DDD1; cursor: pointer; transition: background .35s var(--ease); }
.dx-switch i { position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(60, 40, 20, .25); transition: transform .35s var(--ease); }
.dx-switch.is-on { background: var(--dx-metal); }
.dx-switch.is-on i { transform: translateX(-11px); }
.dx-switch:focus-visible { outline: 2px solid var(--dx-gold); outline-offset: 2px; }

.dx-progress { height: 6px; margin: 2px 0 9px; border-radius: 99px; background: #F1E8DC; overflow: hidden; }
.dx-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--dx-metal); transition: width 1s var(--ease); }
.dx-tasks li { display: flex; align-items: center; gap: 7px; font-size: 9.5px; transition: color .4s var(--ease); }
.dx-check { flex: none; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid #D9CBB8; transition: background .35s var(--ease), border-color .35s var(--ease); }
.dx-check svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform: scale(0); transition: transform .35s var(--ease); }
.dx-tasks li.is-done { color: var(--dx-muted); text-decoration: line-through; text-decoration-color: rgba(140, 124, 108, .5); }
.dx-tasks li.is-done .dx-check { background: var(--dx-gold); border-color: var(--dx-gold); }
.dx-tasks li.is-done .dx-check svg { transform: scale(1); }

.dx-toast {
  position: absolute; z-index: 3; top: 44px; left: 12px; width: 196px;
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px;
  background: #fff; border: 1px solid var(--dx-line); box-shadow: 0 14px 30px -14px rgba(80, 52, 26, .45);
  opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.dx-toast.is-show { opacity: 1; transform: none; }
.dx-toast-ico { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--dx-gold-soft); color: #8C6239; }
.dx-toast-ico svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dx-toast-txt { display: grid; line-height: 1.25; }
.dx-toast-txt b { font-size: 9.5px; font-weight: 700; }
.dx-toast-txt small { font-size: 8.5px; color: var(--dx-muted); }
.dx-glare { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 38%); }

/* entrance */
.dash.is-live .dx-line { stroke-dashoffset: 0; }
.dash.is-live .dx-area, .dash.is-live .dx-dot { opacity: 1; }
.dash.is-live .dx-tip { opacity: 1; transform: none; }
.dash.is-live .dx-seg { stroke-dasharray: var(--len) 100; }
.dash.is-live .dx-ring-fg { stroke-dashoffset: 13; }
.dash.is-live .dx-progress i { width: var(--p); }
@keyframes dx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes dx-ring { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---- tablet, mobile and tall screens: copy, then the scene with the live screen, then benefits */
@media (max-width: 1080px), (max-aspect-ratio: 3 / 2) {
  .hl { height: auto; min-height: 0; padding-top: 112px; background: linear-gradient(180deg, #FAEBD7 0%, #F6E3CB 100%); }
  .hl-frame { display: flex; flex-direction: column; max-width: none; height: auto; container-type: normal; }
  .hl-stage { display: contents; }
  .hl-copy { position: relative; order: 1; right: auto; top: auto; width: 100%; max-width: 680px; margin-inline: auto; padding-inline: var(--gutter); }
  .hl-media { position: relative; order: 2; inset: auto; aspect-ratio: 16 / 10; margin-top: 36px; }
  .hl-scene { left: calc((100cqw - max(100cqw, 177.683cqh)) * .3); }
  .hl-benefits { position: relative; order: 3; left: auto; right: auto; top: auto; width: 100%; max-width: 780px; margin: 0 auto; padding: 28px var(--gutter) 56px; row-gap: 26px; }
  .hl-title .hl-w { font-size: clamp(33px, 8.6vw, 76px); }
  .hl-title-spark { top: -47px; right: -61px; width: 110px; height: 110px; font-size: 6.11px; }
  .hl-sub { margin-top: 22px; font-size: clamp(22px, 3.4vw, 30px); }
  .hl-text { max-width: 560px; margin-top: 18px; font-size: clamp(16px, 2.3vw, 20px); }
  .hl-cta-wrap { margin-top: 28px; }
  .hl-benefits li { padding-inline: 8px; }
  .hl-benefits li + li::before { top: 0; bottom: 0; }
  .hl-b-ico { margin-bottom: 8px; }
  .hl-b-ico svg { width: 40px; height: 40px; }
  .hl-benefits strong { font-size: 16px; }
  .hl-benefits span:not(.hl-b-ico) { font-size: 14.5px; }
}
@media (max-width: 860px) {
  .main-nav { flex-direction: column; }
  .header-cta { min-height: 54px; font-size: 1.0625rem; }
  .site-header { height: 84px; }
  .logo img { width: 130px; }
}
@media (max-width: 640px) {
  .hl { padding-top: 100px; }
  /* zoom into the laptop so the live screen stays legible */
  .hl-media { aspect-ratio: 1.45; margin-top: 30px; }
  .hl-scene { width: 196cqw; left: -24cqw; top: -46cqh; }
  .hl-title-spark { top: -36px; right: -44px; width: 80px; height: 80px; font-size: 4.44px; }
  .hl-cta { width: 100%; max-width: none; min-height: 56px; padding-inline: 24px; }
  .hl-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-benefits li:nth-child(3)::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hl-title .hl-w::after { animation: none; }
  .hl-art-line { stroke-dashoffset: 0; }
}
.site-header.is-scrolled .header-cta { min-height: 44px; }
@media (min-width: 861px) and (max-width: 1180px) {
  .header-inner { padding-inline: 24px; }
  .main-nav { gap: 20px; }
  .main-nav ul li:last-child { display: none; }
  .main-nav ul a { padding-inline: 12px; font-size: 15px; }
  .main-nav ul a::after { left: 12px; right: 12px; }
  .header-cta { min-height: 46px; padding-inline: 16px; font-size: 14px; }
}
@media (max-width: 1080px), (max-aspect-ratio: 3 / 2) {
  .hl-benefits { width: auto; max-width: 780px; margin: 12px max(8px, calc((100% - 780px) / 2)) 32px; padding: 40px 16px; border-radius: 0; }
}

/* ==========================================================================
   Experience layer — richer champagne, glossy gold, ribbons & illustrations
   ========================================================================== */
:root {
  --bg: #FAF0E5;
  --bg-alt: #F3DFCB;
  --line: #EEDCC8;
  --line-strong: #E0C5A8;
  --muted: #7A6B62;
  --flare: url("../img/flare.svg");
  --gold-text: linear-gradient(135deg, #D9AA6E 0%, #B07A43 48%, #8A5629 100%);
  --gold-face: radial-gradient(circle at 34% 26%, #FFF4DC 0%, #F1CF98 20%, #D7A263 48%, #B07A43 74%, #845427 100%);
  --card-bg: linear-gradient(180deg, #FFFDF9 0%, #FCF1E5 100%);
  --card-border: rgba(214, 168, 112, .42);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 6px rgba(120, 80, 40, .05), 0 28px 50px -30px rgba(140, 90, 45, .55);
  --glow-gold: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(214, 168, 112, .5), 0 34px 60px -28px rgba(160, 105, 50, .62);
  --navy-grad: linear-gradient(180deg, #1C2342 0%, #141A33 100%);
}
.site-header.is-scrolled { background: rgba(250, 240, 229, .88); }

/* ---- type */
.h2 { color: var(--ink); }
.h2 em, .pivot-line em, .display em { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.approach .h2 em, .band-navy .pivot-line em { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; }
/* line · star · line ornament under section titles */
.section-head .h2::after {
  width: 200px; height: 18px; margin-top: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23C99A5E' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23C99A5E'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23C99A5E' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23C99A5E'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='8.25' width='84' height='1.5' fill='url(%23a)'/%3E%3Crect x='116' y='8.25' width='84' height='1.5' fill='url(%23b)'/%3E%3Cpath d='M100 0c.7 5.6 2.8 8 8.5 9-5.7 1-7.8 3.4-8.5 9-.7-5.6-2.8-8-8.5-9 5.7-1 7.8-3.4 8.5-9z' fill='%23C99A5E'/%3E%3C/svg%3E") center / contain no-repeat;
}
.section-head:not(.section-head-center) .h2::after { margin-right: -60px; }
.eyebrow-num { background: var(--gold-face); border: 0; color: #2E1C0C; font-weight: 600; box-shadow: inset 0 1px 1px rgba(255, 249, 232, .9), 0 4px 10px -4px rgba(130, 82, 38, .6); }
.eyebrow-dark .eyebrow-num { background: var(--gold-face); color: #2E1C0C; }

/* ---- the lens-flare star (replaces every sparkle) */
.flare {
  position: absolute; z-index: 2; width: 64px; aspect-ratio: 200 / 260; transform: translate(-50%, -50%);
  background: var(--flare) center / contain no-repeat; pointer-events: none;
  animation: flare 5s ease-in-out infinite;
}
.sparkle { width: 52px; height: 68px; background: var(--flare) center / contain no-repeat; animation: flare 5s ease-in-out infinite; }
.sparkle-cta { top: 6px; left: 18px; }
.sparkle-contact { top: 10px; left: 26px; width: 64px; height: 83px; }
.sparkle-footer { width: 46px; height: 60px; margin-bottom: 0; }
.pull-quote::before { width: 56px; height: 73px; background: var(--flare) center / contain no-repeat; animation: flare 5s ease-in-out infinite; }
.band-navy .flare, .approach .flare, .inline-cta .sparkle, .pain-cta .sparkle, .site-footer .sparkle, .wave-navy .flare { mix-blend-mode: screen; }
@keyframes flare { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .6; scale: .8; } }

/* hero: smaller headline, flare star in place of the old sparkle */
.hl-title .hl-w { font-size: 4.7cqw; }
.hl-title-spark { top: -7.3cqw; right: -7.1cqw; width: 13cqw; height: 16.9cqw; font-size: inherit; background: var(--flare) center / contain no-repeat; opacity: 1; animation: flare 5s ease-in-out infinite; }
.hl-title-spark::before, .hl-title-spark::after, .hl-title-spark > span { display: none; }
/* ---- glossy gold medallion */
.medal, .pain-ico {
  --s: 64px;
  position: relative; isolation: isolate; overflow: hidden; flex: none;
  width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-face);
  box-shadow: inset 0 2px 2px rgba(255, 249, 232, .9), inset 0 -4px 7px rgba(96, 56, 22, .45), 0 1px 1px rgba(110, 70, 30, .4), 0 12px 24px -10px rgba(130, 82, 38, .75);
  color: #5A3816;
}
.medal::before, .pain-ico::before {
  content: ""; position: absolute; z-index: -1; inset: 15%; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #FBE8C6, #DFAE70 62%, #C28C4E);
  box-shadow: inset 0 2px 4px rgba(110, 66, 26, .5), 0 1px 0 rgba(255, 244, 222, .85);
}
.medal::after, .pain-ico::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .7) 50%, transparent 68%);
  transform: translateX(-130%); animation: medal-shine 6s ease-in-out infinite;
}
.medal svg, .pain-ico svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgba(255, 240, 215, .75)); }
.medal-sm { --s: 50px; }
@keyframes medal-shine { 0% { transform: translateX(-130%); } 22%, 100% { transform: translateX(130%); } }

.gold-ico { fill: none; stroke: url(#g-gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- shared card */
.pain, .svc, .fact, .insight-steps li, .orgs-list li, .note, .step, .statement-around li, .tags li {
  background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--shadow-card);
}
.pain, .svc, .statement-around li, .step, .questions .question { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.pain:hover, .svc:hover, .statement-around li:hover, .step:hover, .questions .question:hover { transform: translateY(-5px); box-shadow: var(--glow-gold); border-color: rgba(214, 168, 112, .75); }

/* ---- section dividers: curved edge + flowing gold ribbon (built in main.js) */
.wave { height: clamp(58px, 8.5vw, 132px); background: none; -webkit-mask: none; mask: none; z-index: 3; }
.wave svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wave-fill { fill: var(--wave, var(--bg)); }
.wave-sheen { fill: url(#g-rib-band); opacity: .75; }
.wave-thread { fill: none; stroke: url(#g-rib); stroke-width: 1; opacity: .75; }
.wave-edge { fill: none; stroke: url(#g-rib); stroke-width: 2.6; }
.wave-glint { fill: none; stroke: #FFFDF6; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0 100; }
.js .wave .wave-edge, .js .wave .wave-thread { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 2.4s var(--ease); }
.js .wave .wave-thread { transition-delay: .35s; }
.js .wave.is-in .wave-edge, .js .wave.is-in .wave-thread { stroke-dashoffset: 0; }
.wave.is-in .wave-glint { animation: glint 6.5s ease-in-out 1.8s infinite; }
.wave-flare { width: clamp(48px, 5vw, 78px); }
.wave-end { top: auto; bottom: -1px; transform: scaleY(-1); }
@keyframes glint { 0% { stroke-dasharray: 6 94; stroke-dashoffset: 6; opacity: 0; } 8% { opacity: 1; } 70% { opacity: 1; } 85%, 100% { stroke-dasharray: 6 94; stroke-dashoffset: -94; opacity: 0; } }

/* ---- starry navy */
.stars, .stars::after { position: absolute; inset: 0; pointer-events: none; }
.stars {
  background-image:
    radial-gradient(circle at 33.1% 17.2%, #F6DDB2 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 80.8% 11.8%, #F6DDB2 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 89.3% 23.2%, #FFF6E6 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 42.1% 25.6%, #FFF6E6 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 7.7% 56.2%, rgba(246, 221, 178, .7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 62.2% 92.1%, rgba(246, 221, 178, .7) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 40.1% 94.8%, rgba(246, 221, 178, .7) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 84.4% 30.2%, rgba(246, 221, 178, .7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 13.3% 32.0%, #F6DDB2 0 1px, transparent 1.8px),
    radial-gradient(circle at 57.8% 63.1%, #F6DDB2 0 1px, transparent 1.8px),
    radial-gradient(circle at 54.6% 8.9%, rgba(246, 221, 178, .7) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 21.8% 67.0%, #FFF6E6 0 1.2px, transparent 2.0px),
    radial-gradient(circle at 46.7% 89.8%, #FFF6E6 0 1px, transparent 1.8px),
    radial-gradient(circle at 25.8% 19.9%, #F6DDB2 0 1px, transparent 1.8px),
    radial-gradient(circle at 57.1% 52.4%, rgba(246, 221, 178, .7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 45.1% 60.2%, #F6DDB2 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 51.1% 18.5%, #F6DDB2 0 1px, transparent 1.8px),
    radial-gradient(circle at 91.6% 42.6%, rgba(246, 221, 178, .7) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 57.0% 85.3%, #FFF6E6 0 1px, transparent 1.8px),
    radial-gradient(circle at 68.7% 58.9%, #FFF6E6 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 8.6% 11.8%, #FFF6E6 0 1px, transparent 1.8px),
    radial-gradient(circle at 68.9% 9.1%, rgba(246, 221, 178, .7) 0 1px, transparent 1.8px);
  animation: stars 7s ease-in-out infinite alternate;
}
.stars::after {
  content: "";
  background-image:
    radial-gradient(circle at 57.5% 67.0%, #E8C08A 0 1.2px, transparent 2.0px),
    radial-gradient(circle at 70.8% 86.4%, #FFF6E6 0 1px, transparent 1.8px),
    radial-gradient(circle at 92.3% 36.4%, #FFF6E6 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 49.4% 23.5%, #FFF6E6 0 1px, transparent 1.8px),
    radial-gradient(circle at 72.9% 40.4%, #FFF6E6 0 1.2px, transparent 2.0px),
    radial-gradient(circle at 18.0% 40.8%, #FFF6E6 0 1px, transparent 1.8px),
    radial-gradient(circle at 80.7% 84.2%, rgba(255, 246, 230, .6) 0 1px, transparent 1.8px),
    radial-gradient(circle at 41.9% 36.7%, #FFF6E6 0 1.2px, transparent 2.0px),
    radial-gradient(circle at 16.5% 19.6%, rgba(255, 246, 230, .6) 0 1px, transparent 1.8px),
    radial-gradient(circle at 24.4% 48.6%, #FFF6E6 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 27.2% 3.4%, rgba(255, 246, 230, .6) 0 1.2px, transparent 2.0px),
    radial-gradient(circle at 37.4% 56.2%, rgba(255, 246, 230, .6) 0 1px, transparent 1.8px),
    radial-gradient(circle at 84.5% 92.3%, #E8C08A 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 88.4% 76.3%, #E8C08A 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 40.2% 40.0%, rgba(255, 246, 230, .6) 0 1.2px, transparent 2.0px),
    radial-gradient(circle at 40.4% 20.9%, #E8C08A 0 1px, transparent 1.8px),
    radial-gradient(circle at 17.6% 35.0%, #FFF6E6 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 2.0% 17.2%, #E8C08A 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 60.9% 9.6%, rgba(255, 246, 230, .6) 0 1px, transparent 1.8px),
    radial-gradient(circle at 38.1% 62.6%, rgba(255, 246, 230, .6) 0 1px, transparent 1.8px);
  animation: stars 5s ease-in-out -2.5s infinite alternate-reverse;
}
@keyframes stars { from { opacity: 1; } to { opacity: .35; } }

/* ==========================================================================
   Intro — illustrated questions, navy band, built-around
   ========================================================================== */
.intro {
  padding-top: clamp(64px, 8vw, 110px);
  background:
    radial-gradient(ellipse 45% 320px at 88% 0%, rgba(255, 255, 255, .85), transparent 70%),
    radial-gradient(ellipse 40% 300px at 8% 260px, rgba(232, 192, 138, .25), transparent 70%),
    var(--bg);
}
.questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
/* each card: the question's opening on top, the illustration in the middle, the punchline below (rows shared across the cards) */
.questions .question {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 10px; text-align: center;
  background: var(--q-bg); border: 1px solid var(--q-line); border-radius: 28px; box-shadow: var(--shadow-card);
}
.questions .question:hover { border-color: var(--q-line-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px var(--q-line-hover), 0 34px 60px -28px var(--q-glow); }
.questions .question > * { position: relative; z-index: 1; }
.q-art { position: relative; align-self: center; border-radius: 20px; overflow: hidden; aspect-ratio: 360 / 230; background: var(--q-art); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 18px 34px -24px var(--q-glow); }
.q-art svg { width: 100%; height: 100%; }
.q-line { text-wrap: balance; }
.q-lead { align-self: end; padding: 24px 18px 20px; }
.q-punch { align-self: start; padding: 20px 18px 16px; }
.questions .question p { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 1.45vw, 1.32rem); line-height: 1.5; color: var(--ink-2); }
/* the words that matter stay a little bigger than the rest */
.questions .question strong { font-size: 1.12em; font-weight: 600; color: var(--ink); background: linear-gradient(transparent 62%, var(--q-hl) 62%) right / 100% 100% no-repeat; }
.questions .question .thought { justify-self: center; margin: 14px 8px 8px; padding: 14px 20px; border-radius: 20px; font-weight: 500; background: #fff; border: 1px solid var(--q-line); box-shadow: 0 14px 28px -18px var(--q-glow); }
.questions .thought::after { top: -9px; bottom: auto; left: 64%; width: 10px; height: 10px; border-color: var(--q-line); }

/* a big soft question mark peeking from a different corner of each card */
.questions .question::before {
  content: "?"; position: absolute; z-index: 0; pointer-events: none;
  font: 400 var(--q-size, 200px)/1 "Suez One", serif; color: var(--q-mark);
  opacity: .42; filter: blur(4px); rotate: var(--q-tilt);
  animation: q-drift 9s ease-in-out infinite;
}
.q-1::before { top: -26px; left: -4px; }
.q-2::before { bottom: -30px; right: 6px; animation-delay: -3s; }
.q-3::before { top: -46px; right: -2px; animation-delay: -6s; }
@keyframes q-drift { 0%, 100% { translate: 0 0; } 50% { translate: 6px -10px; } }

/* card tints: honey for lost time, rose gold for the scatter, lavender mist for the "there must be a better way" */
.q-1 { --q-bg: linear-gradient(180deg, #FEF4E6 0%, #F8E0C2 100%); --q-art: #F0CB9E; --q-line: rgba(214, 168, 112, .5); --q-line-hover: rgba(206, 152, 88, .8); --q-glow: rgba(160, 105, 50, .6); --q-hl: rgba(232, 182, 112, .5); --q-pop: #A2652B; --q-mark: #D59A55; --q-tilt: -16deg; --q-size: 210px; }
.q-2 { --q-bg: linear-gradient(180deg, #FDF0EC 0%, #F5D7CE 100%); --q-art: #EFC6B9; --q-line: rgba(214, 150, 132, .5); --q-line-hover: rgba(200, 128, 108, .8); --q-glow: rgba(160, 82, 62, .5); --q-hl: rgba(232, 160, 140, .45); --q-pop: #A8513F; --q-mark: #D4887A; --q-tilt: 14deg; --q-size: 170px; }
.q-3 { --q-bg: linear-gradient(180deg, #F5F4FC 0%, #E1DFF3 100%); --q-art: #D9D7EF; --q-line: rgba(150, 146, 205, .48); --q-line-hover: rgba(122, 118, 190, .8); --q-glow: rgba(70, 66, 140, .45); --q-hl: rgba(160, 156, 220, .42); --q-pop: #4E4F97; --q-mark: #8C8BCB; --q-tilt: 22deg; --q-size: 190px; }
.q-art-1 .qa-bg { fill: url(#qa-bg1); }
.q-art-2 .qa-bg { fill: url(#qa-bg2); }
.q-art-3 .qa-bg { fill: url(#qa-bg3); }

/* sentence by sentence: main.js adds .q-anim, then .is-said with a --t delay on every line and word */
.q-anim .q-line { opacity: 0; }
.q-anim .q-word { display: inline-block; opacity: 0; transform-origin: 50% 70%; }
.q-anim .question strong { background-size: 0 100%; transition: background-size .55s var(--ease) var(--t-hl, 0s); }
.q-anim .question.is-said .q-line { animation: q-line .55s var(--ease) var(--t, 0s) both; }
.q-anim .question.is-said .thought { transform-origin: 64% 0; animation-name: q-bubble; }
.q-anim .question.is-said .q-word { animation: q-pop .62s var(--ease) var(--t, 0s) both; }
.q-anim .question.is-said strong { background-size: 100% 100%; }
@keyframes q-line { from { opacity: 0; translate: 0 12px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes q-bubble { from { opacity: 0; scale: .82; filter: blur(4px); } 60% { opacity: 1; scale: 1.03; filter: blur(0); } to { opacity: 1; scale: 1; } }
@keyframes q-pop {
  0% { opacity: 0; scale: .5; filter: blur(4px); }
  24% { opacity: 1; scale: 1.5; filter: blur(0); color: var(--q-pop); }
  44% { scale: 1.5; color: var(--q-pop); }
  100% { opacity: 1; scale: 1; }
}

/* illustration paint */
.q-art svg *, .target-art svg *, .plane * { vector-effect: none; }
.qa-bg { fill: url(#qa-bgg); }
.qa-skin { fill: #F3CBAA; }
.qa-sleeve { fill: none; stroke: #F5E4D0; stroke-width: 13; stroke-linecap: round; filter: drop-shadow(0 0 .6px #C9A27A) drop-shadow(0 2px 2px rgba(140, 90, 45, .25)); }
.qa-brow { fill: none; stroke: #4A2C18; stroke-width: 2; stroke-linecap: round; }
.qa-eye { fill: none; stroke: #3A2416; stroke-width: 1.7; stroke-linecap: round; }
.qa-mouth { fill: none; stroke: #A8604A; stroke-width: 1.8; stroke-linecap: round; }
.qa-stress { fill: none; stroke: #C99A5E; stroke-width: 2.2; stroke-linecap: round; animation: qa-blink 1.6s ease-in-out infinite; }
.qa-desk { fill: url(#qa-deskg); }
.qa-desk-edge { stroke: #D9AE78; stroke-width: 2; }
.qa-card { filter: url(#qa-shadow); }
.qa-badge { font: 700 9px/1 var(--font-display); fill: #fff; }
.qa-q { font: 400 40px/1 "Suez One", serif; fill: url(#qa-gold); }
.qa-scribble { fill: none; stroke: #2A2F4A; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.is-in .qa-scribble { animation: qa-draw 4.5s ease-in-out .4s infinite; }

.qa-hand-m { animation: spin 1.6s linear infinite; }
.qa-hand-h { animation: spin 19.2s linear infinite; }
.qa-spin { animation: spin 3s linear infinite reverse; }
.qa-pile-top { animation: qa-drop 3.2s var(--ease) infinite; }
.qa-steam { animation: qa-steam 3s ease-in-out infinite; }
.qa-pop { animation: qa-float 4s ease-in-out infinite; }
.qa-pop-2 { animation-delay: -1s; }
.qa-pop-3 { animation-delay: -2.2s; animation-duration: 4.6s; }
.qa-pop-4 { animation-delay: -.6s; animation-duration: 3.6s; }
.qa-pop-5 { animation-delay: -3s; }
.qa-thought { animation: qa-float 5s ease-in-out infinite; }
.qa-dot { animation: qa-blink 2.4s ease-in-out infinite; }
.qa-dot-2 { animation-delay: .4s; }
@keyframes spin { to { rotate: 360deg; } }
@keyframes qa-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes qa-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes qa-drop { 0% { translate: 0 -26px; opacity: 0; } 30% { translate: 0 0; opacity: 1; } 85% { opacity: 1; } 100% { opacity: 1; } }
@keyframes qa-steam { 0%, 100% { opacity: .2; translate: 0 2px; } 50% { opacity: .9; translate: 0 -3px; } }
@keyframes qa-draw { 0% { stroke-dashoffset: 100; } 55%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }

/* navy band */
.band { position: relative; }
.band-navy {
  margin-top: clamp(72px, 9vw, 120px); padding-block: clamp(120px, 13vw, 190px);
  background:
    radial-gradient(ellipse 42% 62% at 20% 52%, rgba(201, 156, 110, .24), transparent 70%),
    radial-gradient(ellipse 46% 60% at 92% 18%, rgba(72, 86, 145, .5), transparent 70%),
    var(--navy-grad);
  color: var(--on-dark); overflow: hidden;
}
.band-navy > .wave { --wave: var(--bg); }
.band-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.band-grid .pivot { order: -1; }
.band-navy .pivot { margin: 0; padding: 0; border: 0; display: block; }
.band-navy .pivot-line { font-weight: 600; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.2; color: var(--on-dark); }
.band-navy .pivot-body { margin-top: 22px; }
.band-navy .pivot-body > p { color: #D3CCD6; font-size: clamp(1.3rem, 1.75vw, 1.5rem); line-height: 1.7; }
.band-navy .pivot-body strong { color: var(--gold-light); font-weight: 600; }
/* the benefits as a workflow: a gold track fills from step to step (right → left) and lands on the goal */
.band-navy .benefits {
  --gap: 10px; --step: 76px; --goal: 108px;
  position: relative; margin-top: 76px; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); gap: var(--gap); align-items: start;
}
.band-navy .benefits::before, .band-navy .benefits::after {
  content: ""; position: absolute; z-index: 0; top: calc(var(--goal) / 2 - 1px); height: 2px; border-radius: 2px;
  right: calc((100% - 3 * var(--gap)) / 4.25 / 2);
  left: calc((100% - 3 * var(--gap)) * 1.25 / 4.25 / 2);
}
.band-navy .benefits::before { background: repeating-linear-gradient(to left, rgba(233, 190, 133, .32) 0 6px, transparent 6px 12px); }
.band-navy .benefits::after {
  background:
    linear-gradient(to left, transparent, #FFF6E2 50%, transparent) 130% 0 / 22% 100% no-repeat,
    linear-gradient(to left, #C99A5E, #F1D3A0 60%, #E9C48F);
  box-shadow: 0 0 10px rgba(246, 217, 168, .65); transform-origin: right;
}
.js .band-navy .benefits::after { scale: 0 1; }
.band-navy .benefits.is-in::after { animation: flow-fill 2.4s linear .45s forwards, flow-shine 2.4s ease-in-out 3.6s infinite; }
.band-navy .benefits li {
  position: relative; z-index: 1; flex-direction: column; justify-content: flex-start; gap: 16px; padding: 0; text-align: center;
  background: none; border: 0; box-shadow: none; color: var(--on-dark); font-size: 1.05rem; font-weight: 500; line-height: 1.4;
}
.band-navy .benefits li + li::before { display: none; }
.band-navy .medal { --s: var(--step); box-shadow: inset 0 2px 2px rgba(255, 249, 232, .9), inset 0 -4px 7px rgba(96, 56, 22, .45), 0 0 0 7px rgba(233, 190, 133, .08), 0 0 38px rgba(233, 190, 133, .38), 0 16px 30px -12px rgba(0, 0, 0, .7); }
.band-navy .benefits li:not(.flow-goal) .medal { margin-top: calc((var(--goal) - var(--step)) / 2); }
.benefits li:nth-child(2) .medal::after { animation-delay: .5s; }
.benefits li:nth-child(3) .medal::after { animation-delay: 1s; }
.benefits li:nth-child(4) .medal::after { animation-delay: 1.5s; }

/* the goal: bigger, brighter, with ripples */
.band-navy .flow-goal .medal {
  --s: var(--goal);
  box-shadow: inset 0 2px 3px rgba(255, 249, 232, .95), inset 0 -6px 10px rgba(96, 56, 22, .45), 0 0 0 9px rgba(233, 190, 133, .13), 0 0 70px rgba(246, 217, 168, .55), 0 22px 38px -12px rgba(0, 0, 0, .75);
}
.band-navy .flow-goal .medal svg { stroke-width: 2; }
.band-navy .benefits .flow-goal::before, .band-navy .benefits .flow-goal::after {
  content: ""; display: block; position: absolute; top: 0; right: auto; left: 0; margin-inline: auto; inset-inline: 0;
  width: var(--goal); height: var(--goal); border-radius: 50%; border: 1.5px solid rgba(246, 217, 168, .75);
  transform: none; opacity: 0; pointer-events: none;
}
.band-navy .flow-goal .flow-label {
  font-size: clamp(1.15rem, 1.5vw, 1.3rem); font-weight: 700; line-height: 1.3;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.goal-tag {
  position: absolute; z-index: 2; top: -36px; left: 0; right: 0; width: max-content; margin-inline: auto;
  padding: 3px 13px; border-radius: 999px; font-size: .8125rem; font-weight: 700; line-height: 1.5; color: #2E1C0C;
  background: var(--gold-face); box-shadow: inset 0 1px 1px rgba(255, 249, 232, .9), 0 0 18px rgba(246, 217, 168, .45);
}

/* one by one: each step pops in when the track reaches it */
.benefits li:nth-child(1) { --fd: .15s; }
.benefits li:nth-child(2) { --fd: 1.15s; }
.benefits li:nth-child(3) { --fd: 1.92s; }
.benefits li:nth-child(4) { --fd: 2.75s; }
.js [data-flow] .medal, .js [data-flow] .flow-label, .js [data-flow] .goal-tag { opacity: 0; }
[data-flow].is-in .medal { animation: flow-pop .8s cubic-bezier(.3, 1.6, .5, 1) var(--fd) both; }
[data-flow].is-in .flow-label { animation: flow-text .7s var(--ease) calc(var(--fd) + .25s) both; }
[data-flow].is-in .goal-tag { animation: flow-text .6s var(--ease) 3.3s both; }
[data-flow].is-in .flow-goal .medal { animation-duration: 1s; }
[data-flow].is-in .flow-goal::before { animation: goal-ripple 3s ease-out 3.4s infinite; }
[data-flow].is-in .flow-goal::after { animation: goal-ripple 3s ease-out 4.9s infinite; }
@keyframes flow-fill { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes flow-fill-y { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes flow-shine { from { background-position: 130% 0, 0 0; } to { background-position: -30% 0, 0 0; } }
@keyframes flow-pop { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes flow-text { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes goal-ripple { 0% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 1.8; } }
@keyframes flow-tag-m { from { opacity: 0; } to { opacity: 1; } }

.band-navy .converge::before { content: ""; position: absolute; inset: -14% -10%; background: radial-gradient(ellipse 50% 50% at 22% 50%, rgba(233, 190, 133, .22), transparent 70%); pointer-events: none; }
.band-navy .source-pill { background: rgba(255, 255, 255, .06); border: 1px solid rgba(233, 190, 133, .3); color: var(--on-dark); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.band-navy .converge-lines path { stroke: rgba(233, 190, 133, .22); }
.band-navy .converge-lines path.flow { stroke: #F6D9A8; stroke-width: 2.2; filter: drop-shadow(0 0 4px rgba(246, 217, 168, .9)); }
.band-navy .converge-hub { width: 178px; background: linear-gradient(150deg, #F8E2BC 0%, #DDAE70 52%, #B07A43 100%); color: #2A1B0C; box-shadow: inset 0 1px 1px rgba(255, 250, 235, .9), inset 0 -3px 8px rgba(110, 66, 26, .35), 0 0 60px rgba(233, 190, 133, .35), 0 30px 60px -20px rgba(0, 0, 0, .7); }
.band-navy .hub-title { font-weight: 700; }
.band-navy .hub-mark { background: #1D2440; }
.band-navy .hub-mark svg { color: var(--gold-light); }
.band-navy .hub-sub { color: rgba(42, 27, 12, .72); }
.band-navy .hub-lines i { background: rgba(42, 27, 12, .2); }
.band-navy .converge-hub::after { background: #FFF1D6; box-shadow: 0 0 0 4px rgba(233, 190, 133, .25), 0 0 12px #F6D9A8; }
.band-navy .sp-sheet { background: linear-gradient(rgba(233, 190, 133, .5) 1px, transparent 1px) 0 0 / 100% 6px, rgba(255, 255, 255, .12); }
.band-navy .sp-sys { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(233, 190, 133, .6); }
.flare-hub { left: 8px; top: 22%; width: 74px; }

/* built around */
.statement {
  margin-top: clamp(80px, 9vw, 120px); padding: 0; background: none; border: 0; box-shadow: none; overflow: visible;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
}
.statement::before { display: none; }
.statement-title { max-width: 17ch; }
/* "complicated" gets struck through in gold once the block is in view */
.strike { position: relative; white-space: nowrap; transition: color .6s var(--ease) 1s; }
.strike::after {
  content: ""; position: absolute; right: -.08em; left: -.08em; top: 54%; height: .08em; border-radius: 99px;
  background: var(--gold-grad); transform-origin: right; scale: 0 1; transition: scale .7s var(--ease) .9s;
}
.statement.is-in .strike { color: var(--muted); }
.statement.is-in .strike::after { scale: 1 1; }
.statement-yes {
  display: inline-block; margin-top: 18px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.6rem);
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* the three things the solution is built around */
.statement-around { position: relative; margin-top: 26px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.statement-around li {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 16px; text-align: center;
  padding: 34px 20px 28px; border-radius: 26px;
  background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255, 255, 255, .95), transparent 70%), linear-gradient(180deg, #FFFDF9 0%, #F8E8D6 100%);
}
.statement-around li:nth-child(1) { --i: 0; }
.statement-around li:nth-child(2) { --i: 1; }
.statement-around li:nth-child(3) { --i: 2; }
/* gold links between the cards, level with the medals */
.statement-around li + li::before {
  content: ""; position: absolute; top: 66px; right: -21px; width: 22px; height: 8px;
  background: radial-gradient(circle, #C99A5E 3px, transparent 3.5px) center / 8px 8px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 100% 2px no-repeat;
}
.statement-around .medal { --s: 72px; transition: transform .5s var(--ease); }
.statement-around li:hover .medal { transform: rotate(-10deg) scale(1.08); }
.statement-around .around-num {
  position: absolute; top: 12px; left: 16px; font: 700 2.5rem/1 var(--font-display); letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(201, 154, 94, .6);
}
.statement-around .around-label { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; line-height: 1.35; color: var(--ink); text-wrap: balance; }
.around-label::after {
  content: ""; display: block; width: 36px; height: 2px; margin: 12px auto 0; border-radius: 2px;
  background: var(--gold-grad); scale: 0 1; transition: scale .6s var(--ease), width .5s var(--ease);
}
.statement-around li:hover .around-label::after { width: 64px; }

/* the cards rise in one after another, each medal spinning into place, then the arrow hits the target */
.js .statement .statement-around li, .js .statement .statement-around .medal { opacity: 0; }
.statement.is-in .statement-around li { animation: around-in .9s cubic-bezier(.2, .9, .3, 1.15) calc(var(--i) * .25s + .35s) both; }
.statement.is-in .statement-around .medal { animation: around-medal 1s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i) * .25s + .55s) both; }
.statement.is-in .around-label::after { scale: 1 1; transition-delay: calc(var(--i) * .25s + 1s), 0s; }
@keyframes around-in { from { opacity: 0; translate: 0 30px; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes around-medal { from { opacity: 0; rotate: -140deg; scale: .4; } to { opacity: 1; rotate: 0deg; scale: 1; } }
.target-art { position: relative; max-width: 400px; justify-self: center; width: 100%; }
.target-art svg { width: 100%; height: auto; overflow: visible; }
.ta-orbit { fill: none; stroke: url(#g-rib); stroke-width: 2.4; }
.ta-board { filter: drop-shadow(0 26px 30px rgba(140, 90, 45, .35)); }
.ta-arrow { translate: 70px -70px; opacity: 0; transition: translate .9s cubic-bezier(.3, 1.5, .5, 1) 1.45s, opacity .3s 1.45s; }
.statement.is-in .ta-arrow { translate: 0 0; opacity: 1; }
.statement.is-in .ta-board { animation: qa-float 6s ease-in-out 2.5s infinite; }
.flare-target { left: 47%; top: 54%; width: 70px; }

/* ==========================================================================
   Challenges
   ========================================================================== */
.challenges {
  background:
    radial-gradient(ellipse 45% 30% at 88% 14%, rgba(255, 255, 255, .7), transparent 70%),
    radial-gradient(ellipse 40% 40% at 6% 78%, rgba(232, 192, 138, .28), transparent 70%),
    var(--bg-alt);
}
.pain { gap: 22px; padding: 36px 24px 30px; }
.pain p { font-size: 1.05rem; font-weight: 500; }
.pain::after { color: var(--gold); font-weight: 600; }
.pain-ico { --s: 70px; }
.pain-ico::after { animation-delay: calc(var(--d, 0) * .4s); }
.pain-cta { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201, 156, 110, .28), transparent 70%), var(--navy-grad); border: 1px solid rgba(233, 190, 133, .35); box-shadow: 0 30px 60px -28px rgba(20, 26, 51, .8); }
.pain-cta:hover { border-color: rgba(233, 190, 133, .6); }
.pain-cta .pain-cta-title { font-weight: 600; }
.verbs-intro strong { font-weight: 700; }
.verbs-grid li { justify-items: start; gap: 12px; padding-top: 28px; }
.verbs-grid li .medal { margin-bottom: 4px; }
.verbs-grid li:nth-child(2) .medal::after { animation-delay: .5s; }
.verbs-grid li:nth-child(3) .medal::after { animation-delay: 1s; }
.verbs-grid li:nth-child(4) .medal::after { animation-delay: 1.5s; }
.verbs-grid span:not(.medal) { font-weight: 600; }
.verbs-outro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.verbs-outro-text { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 400; }

/* cards: the icon sits large and blue behind the text; the subject gets its own bold line, the pain point is red */
.challenges { --pain-blue: #3556BE; --pain-red: #C8372D; }
.pain { position: relative; isolation: isolate; overflow: hidden; justify-content: center; min-height: 220px; padding: 34px 16px; }
.pain .pain-ico {
  --s: min(84%, 196px); position: absolute; z-index: -1; inset: 0; margin: auto; width: var(--s); height: auto; aspect-ratio: 1;
  background: none; box-shadow: none; color: var(--pain-blue); opacity: .09;
  transition: opacity .5s var(--ease), scale .6s var(--ease), rotate .6s var(--ease);
}
.pain .pain-ico::before, .pain .pain-ico::after { content: none; }
.pain .pain-ico svg { width: 100%; height: 100%; stroke-width: 5; filter: none; }
.pain:hover .pain-ico { opacity: .14; scale: 1.08; rotate: -6deg; }
.pain p { font-size: 1.12rem; line-height: 1.5; font-weight: 400; color: var(--ink-2); }
.pain p strong { display: block; margin-block: 2px 6px; font-family: var(--font-display); font-size: clamp(.98rem, 1.35vw, 1.22rem); font-weight: 700; line-height: 1.3; color: var(--ink); white-space: nowrap; }
.pain p > strong:last-child { margin-block: 6px 2px; }
.pain-hot { color: var(--pain-red); font-weight: 600; }

/* verbs: the same blue icon behind each word */
.verbs-grid li { isolation: isolate; font-size: clamp(1.6rem, 2.9vw, 2.6rem); white-space: nowrap; }
@media (max-width: 860px) {
  .verbs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; gap: 0 16px; }
  .verbs-grid li, .verbs-grid li:first-child { padding: 18px 0 14px; border-top: 1px solid var(--line-strong); border-right: 0 !important; }
  .verbs-grid li::before, .verbs-grid li + li::before { right: 0; }
}
.verb-ico {
  position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; left: 0; margin: auto; width: min(80%, 150px); height: auto; aspect-ratio: 1;
  fill: none; stroke: var(--pain-blue); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; opacity: .09;
  transition: opacity .5s var(--ease), translate .5s var(--ease);
}
@media (max-width: 640px) {
  .pain { min-height: 168px; padding: 30px 18px; }
  .pain p strong { font-size: 1.22rem; }
}
.verbs-grid li:hover .verb-ico { opacity: .15; translate: 0 -4px; }
@media (max-width: 860px) {
  /* size by the cell's height so the icon stays inside its own cell */
  .verb-ico { width: auto; height: calc(100% - 20px); max-width: 70%; stroke-width: 3.5; }
}

/* "too busy to improve": square wheels vs. the round one on offer */
.sq { flex: none; width: 300px; height: auto; overflow: visible; }
.sq * { vector-effect: none; }
.sq-ground { stroke: #E2CDB3; stroke-width: 2; }
.sq-road { stroke: #C99A5E; stroke-width: 2; stroke-dasharray: 8 16; animation: sq-road .7s linear infinite; }
.sq-skin { fill: #F3CBAA; }
.sq-hair { fill: #4E2F1B; }
.sq-eye { fill: #3A2416; }
.sq-mouth, .sq-brow { fill: none; stroke: #3A2416; stroke-width: 1.8; stroke-linecap: round; }
.sq-leg { fill: none; stroke: #2A2F4A; stroke-width: 8; stroke-linecap: round; }
.sq-shirt, .sq-shirt-gold { fill: none; stroke-width: 16; stroke-linecap: round; }
.sq-shirt { stroke: #3556BE; }
.sq-shirt-gold { stroke: #D9A86C; }
.sq-arm { fill: none; stroke: #F3CBAA; stroke-width: 6; stroke-linecap: round; }
.sq-square { fill: #2A2F4A; }
.sq-tyre { fill: none; stroke: url(#qa-gold); stroke-width: 5; }
.sq-spoke { stroke: #C99A5E; stroke-width: 2; }
.sq-ray { fill: none; stroke: #D9A86C; stroke-width: 2.2; stroke-linecap: round; }
.sq-spark { fill: #E9C48F; transform-box: fill-box; transform-origin: center; animation: th-twinkle 1.8s ease-in-out infinite; }
.sq-spark-b { animation-delay: -.9s; }
.sq-drop { fill: #8FB3E8; animation: sq-drop 1.4s ease-in infinite; }
.sq-drop-b { animation-delay: -.7s; }
.sq-text { font: 800 19px/1 var(--font-display); fill: #C8372D; }
.sq-wheel { animation: sq-roll .7s ease-in-out infinite; }
.sq-bob { animation: sq-bob .7s ease-in-out infinite; }
.sq-legs-a, .sq-legs-b { transform-box: view-box; transform-origin: 276px 134px; animation: sq-step .35s ease-in-out infinite alternate; }
.sq-legs-b { animation-direction: alternate-reverse; }
.sq-round { animation: spin 3s linear infinite; }
.sq-halo, .sq-bulb { animation: sq-glow 2.4s ease-in-out infinite; }
.sq-say { transform-box: fill-box; transform-origin: 40% 100%; animation: sq-say 4.2s var(--ease) infinite; }
.sq-offer { animation: sq-offer 4.2s var(--ease) infinite; }
@keyframes sq-offer { 0%, 2%, 26%, 100% { translate: 0 0; } 8%, 18% { translate: 9px -3px; } }
@keyframes sq-road { to { stroke-dashoffset: -24; } }
@keyframes sq-roll { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5.4px) rotate(-45deg); } 100% { transform: translateY(0) rotate(-90deg); } }
@keyframes sq-bob { 50% { transform: translateY(-5.4px); } }
@keyframes sq-step { from { rotate: -9deg; } to { rotate: 9deg; } }
@keyframes sq-drop { 0% { opacity: 0; translate: 0 0; } 20% { opacity: 1; } 100% { opacity: 0; translate: 10px -10px; } }
@keyframes sq-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes sq-say { 0%, 18% { opacity: 0; scale: .5; } 26%, 82% { opacity: 1; scale: 1; } 30% { scale: 1.08; } 90%, 100% { opacity: 0; scale: .9; } }
@keyframes th-twinkle { 0%, 100% { opacity: .2; scale: .6; } 50% { opacity: 1; scale: 1.1; } }

/* ==========================================================================
   Services
   ========================================================================== */
.services {
  background:
    radial-gradient(ellipse 40% 26% at 8% 12%, rgba(232, 192, 138, .22), transparent 70%),
    radial-gradient(ellipse 40% 30% at 96% 58%, rgba(255, 255, 255, .8), transparent 70%),
    var(--bg);
}
.svc-viz {
  background:
    radial-gradient(ellipse 70% 90% at 82% 0%, rgba(255, 255, 255, .9), transparent 60%),
    linear-gradient(160deg, #FAEBDB 0%, #EFCFAD 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.svc-viz::before { content: ""; position: absolute; inset: auto -10% -18% -10%; height: 70%; background: var(--gold-arcs) center / 100% 100% no-repeat; opacity: .9; pointer-events: none; }
.svc-viz::after { content: ""; position: absolute; top: 8px; left: 12px; width: 40px; aspect-ratio: 200 / 260; background: var(--flare) center / contain no-repeat; animation: flare 5s ease-in-out infinite; pointer-events: none; }
.svc:nth-child(2) .svc-viz::after { animation-delay: -1.2s; }
.svc:nth-child(3) .svc-viz::after { animation-delay: -2.4s; }
.svc:nth-child(4) .svc-viz::after { animation-delay: -3.6s; }
.svc-viz > * { position: relative; z-index: 1; }
.svc-num { align-self: flex-start; padding: 3px 11px; border-radius: 999px; background: var(--gold-face); color: #2E1C0C; font-weight: 600; box-shadow: inset 0 1px 1px rgba(255, 249, 232, .9), 0 4px 10px -4px rgba(130, 82, 38, .6); }
.svc .h3 { font-size: 1.4rem; font-weight: 700; color: var(--ink); }
.vf-ico { border: 1px solid var(--card-border); background: var(--card-bg); }
.vf-send { background: var(--navy-grad); border-color: #1D2440; box-shadow: 0 0 0 4px rgba(233, 190, 133, .25), 0 14px 26px -10px rgba(20, 26, 51, .7); }
.vf-link i { background: #F6D9A8; box-shadow: 0 0 8px #E8C08A; }
.bubble-in { border-color: var(--card-border); box-shadow: 0 10px 20px -14px rgba(140, 90, 45, .5); }
.bubble-ai { background: var(--navy-grad); box-shadow: 0 16px 30px -16px rgba(20, 26, 51, .7); }
.vb-col { border: 1px solid var(--card-border); background: var(--card-bg); }
.vb-col i.accent { background: linear-gradient(90deg, #F6E3C8, #EBC994); animation: vb-glow 2.4s ease-in-out infinite; }
.viz-blueprint { background: linear-gradient(rgba(122, 79, 49, .08) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(122, 79, 49, .08) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(160deg, #FAEBDB 0%, #EFCFAD 100%); }
.is-in .bp-b { animation: vb-glow 2.8s ease-in-out infinite; }
.fit-list li { background: var(--gold-face); color: #2E1C0C; font-weight: 600; box-shadow: inset 0 1px 1px rgba(255, 249, 232, .9), 0 6px 12px -6px rgba(130, 82, 38, .6); }
.svc-quiet { background: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(255, 255, 255, .85), transparent 60%), linear-gradient(135deg, #FFF8F0, #F6E2CC); border: 1px solid var(--card-border); box-shadow: var(--shadow-card); }
.svc-quiet:hover { box-shadow: var(--glow-gold); }
.tags li { color: var(--ink); font-weight: 500; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.tags li:hover { transform: translateY(-2px); border-color: var(--gold); }
.inline-cta { background: radial-gradient(ellipse 50% 90% at 0% 50%, rgba(201, 156, 110, .25), transparent 70%), var(--navy-grad); border: 1px solid rgba(233, 190, 133, .3); }
.inline-cta .btn-gold { background: var(--hl-metal); border: 2px solid transparent; color: #261708; font-weight: 600; }
@keyframes vb-glow { 0%, 100% { box-shadow: inset -3px 0 0 var(--gold), 0 0 0 rgba(232, 192, 138, 0); } 50% { box-shadow: inset -3px 0 0 var(--gold), 0 0 14px rgba(232, 192, 138, .8); } }

/* ---- services: bigger, warmer type */
.svc .h3 { font-size: clamp(1.45rem, 2vw, 1.7rem); line-height: 1.3; }
.svc-lead { margin-top: 12px; font-size: 1.2rem; line-height: 1.6; color: var(--ink); }
.svc-lead strong { color: var(--accent-ink); font-weight: 700; }
.svc-text { font-size: 1.08rem; color: var(--ink-2); }
.note { font-size: 1.02rem; }

/* ---- services: a faint, slowly moving drawing behind each card's text */
.svc { position: relative; isolation: isolate; overflow: hidden; }
.svc-art {
  position: absolute; z-index: -1; left: -26px; bottom: -26px; width: 250px; height: auto; overflow: visible; pointer-events: none;
  fill: none; stroke: #A8723C; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .17;
}
.svc-art *, .robot * { vector-effect: none; }
.art-tools { top: 40%; bottom: auto; width: 220px; }
.svc-quiet .svc-art { width: 210px; }
.gear-teeth { stroke-width: 11; stroke-dasharray: 1 1; }
.art-gear { animation: spin 18s linear infinite; }
.art-gear-b { animation-duration: 11s; animation-direction: reverse; }
.art-network circle { fill: #F6E4CF; animation: net-pulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.art-network circle:nth-of-type(2n) { animation-delay: -1.6s; }
.art-spark { fill: #E2B274; stroke: none; transform-box: fill-box; transform-origin: center; animation: th-twinkle 2.4s ease-in-out infinite; }
.art-chart rect { fill: rgba(232, 192, 138, .25); }
.art-trend { stroke-width: 4; stroke-dasharray: 260; stroke-dashoffset: 260; }
.is-in .art-trend { transition: stroke-dashoffset 2.2s var(--ease) .6s; stroke-dashoffset: 0; }
.art-waves { animation: flare 2.6s ease-in-out infinite; }
@keyframes net-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.25; } }

/* ---- services: every line gets an icon that says what it means */
.checks-ico { gap: 14px; }
.checks-ico li { display: flex; align-items: flex-start; gap: 14px; padding-right: 0; font-size: 1.08rem; line-height: 1.55; color: var(--ink); }
.checks-ico li::before { content: none; }
.checks-ico li > span:last-child { padding-top: 8px; }
.ci {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  background: linear-gradient(145deg, #FFFFFF, #F6E4CF); border: 1px solid var(--card-border); color: var(--navy);
  box-shadow: inset 0 1px 0 #fff, 0 8px 16px -10px rgba(140, 90, 45, .6);
  transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.ci svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.checks-ico li:hover .ci { transform: rotate(-6deg) scale(1.08); background: var(--gold-face); color: #2E1C0C; }
.checks-ico strong { font-weight: 700; color: var(--ink); background: linear-gradient(transparent 62%, rgba(233, 190, 133, .5) 62%) right bottom / 100% 100% no-repeat; }

/* the lines arrive one by one: icon pops, text slides in, the key words get underlined */
.checks-ico li:nth-child(2) { --i: 1; }
.checks-ico li:nth-child(3) { --i: 2; }
.checks-ico li:nth-child(4) { --i: 3; }
.checks-ico li:nth-child(5) { --i: 4; }
.checks-ico li:nth-child(6) { --i: 5; }
.js .is-in .checks-ico li { --at: calc(var(--i, 0) * 110ms + 350ms + var(--d, 0) * 90ms); animation: ci-in .7s var(--ease) var(--at) both; }
.js .is-in .checks-ico .ci { animation: ci-pop .65s cubic-bezier(.34, 1.56, .64, 1) var(--at) both; }
.js .is-in .checks-ico strong { animation: ci-mark .8s var(--ease) calc(var(--at) + .35s) both; }
@keyframes ci-in { from { opacity: 0; translate: 18px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes ci-pop { from { scale: .3; rotate: -25deg; } to { scale: 1; rotate: 0deg; } }
@keyframes ci-mark { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

.fit-list li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 1.02rem; }
.fit-list svg, .tags svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fit-list svg { width: 18px; height: 18px; }
.scale-labels { font-size: 1rem; color: var(--ink-2); }
.scale-labels > span { display: flex; align-items: flex-start; gap: 10px; }
.scale-labels > span:last-child { flex-direction: row-reverse; }
.scale-labels > span > span { max-width: none; }
.scale-labels svg { flex: none; width: 22px; height: 22px; fill: none; stroke: url(#g-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tags li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 1rem; }
.tags svg { width: 17px; height: 17px; color: var(--accent-ink); }

/* ---- automation: real icons on the flow, live code running behind it */
.vf-node { font-size: .9rem; font-weight: 600; color: var(--ink); }
.vf-ico { display: grid; place-items: center; color: var(--navy); }
.vf-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vf-send { color: #F6D9A8; }
.svc-viz > .viz-code {
  position: absolute; z-index: 0; inset: 0; margin: 0; padding: 12px 20px; overflow: hidden;
  font: 500 11.5px/1.8 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #8C5E30; text-align: left; opacity: .38;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.viz-code code { display: block; animation: code-scroll 26s linear infinite; }
@keyframes code-scroll { to { translate: 0 -50%; } }

/* ---- AI: a friendly assistant answering a customer */
.viz-chat { padding: 0 22px 0 150px; gap: 12px; }
.robot { position: absolute !important; left: 16px; bottom: -8px; width: 122px; height: auto; overflow: visible; animation: float 4s ease-in-out infinite; filter: drop-shadow(0 14px 14px rgba(140, 90, 45, .28)); }
.robot-shell { fill: url(#rb-shell); stroke: #E2C29C; stroke-width: 1.5; }
.robot-face { fill: url(#rb-face); }
.robot-ear, .robot-heart { fill: url(#rb-gold); }
.robot-limb, .robot-arm-wave path { fill: none; stroke: #D8B183; stroke-width: 7; stroke-linecap: round; }
.robot-hand, .robot-arm-wave circle { fill: url(#rb-shell); stroke: #E2C29C; stroke-width: 1.5; }
.robot-bulb { fill: url(#rb-gold); animation: bulb 2.2s ease-in-out infinite; }
.robot-eyes { fill: #F6D9A8; transform-box: fill-box; transform-origin: center; animation: blink 4.6s ease-in-out infinite; }
.robot-smile { fill: none; stroke: #F6D9A8; stroke-width: 2.6; stroke-linecap: round; }
.robot-cheek { fill: #F2A495; opacity: .55; }
.robot-arm-wave { transform-origin: 36px 100px; animation: wave 2.4s ease-in-out infinite; }
.bubble { font-size: .9rem; }
.bubble-in { font-weight: 500; color: var(--ink); }
.bubble-ai { width: auto; max-width: 100%; gap: 6px; padding: 10px 16px 12px; }
.bubble-typing, .bubble-text { grid-area: 2 / 1; }
.bubble-text { color: var(--on-dark); font-weight: 500; }
.bubble-typing { display: flex; gap: 5px; align-items: center; opacity: 0; }
.bubble-typing i { width: 7px; height: 7px; border-radius: 50%; background: #F6D9A8; animation: dot 1s ease-in-out infinite; }
.bubble-typing i:nth-child(2) { animation-delay: .15s; }
.bubble-typing i:nth-child(3) { animation-delay: .3s; }
.is-in .bubble-typing { animation: bt-dots 7s linear infinite; }
.is-in .bubble-text { animation: bt-text 7s var(--ease) infinite; }
@keyframes bt-dots { 0%, 28% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes bt-text { 0%, 30% { opacity: 0; translate: 0 5px; } 36%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes dot { 0%, 100% { translate: 0 0; opacity: .5; } 40% { translate: 0 -4px; opacity: 1; } }
@keyframes blink { 0%, 90%, 100% { scale: 1 1; } 94% { scale: 1 .1; } }
@keyframes wave { 0%, 100% { rotate: 8deg; } 50% { rotate: -22deg; } }
@keyframes bulb { 0%, 100% { filter: drop-shadow(0 0 2px rgba(246, 200, 130, .5)); } 50% { filter: drop-shadow(0 0 9px rgba(246, 200, 130, 1)); } }

@media (max-width: 640px) {
  .svc-lead { font-size: 1.1rem; }
  .checks-ico li { font-size: 1rem; gap: 12px; }
  .ci { width: 38px; height: 38px; border-radius: 12px; }
  .ci svg { width: 20px; height: 20px; }
  .checks-ico li > span:last-child { padding-top: 7px; }
  .svc-art { width: 190px; }
  .viz-chat { padding: 0 14px 0 112px; gap: 8px; }
  .robot { left: 8px; width: 96px; }
  .bubble { font-size: .8125rem; padding: 8px 12px; }
  .viz-code { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .is-in .checks-ico li, .js .is-in .checks-ico .ci, .js .is-in .checks-ico strong { animation-delay: 0s !important; }
  .is-in .bubble-typing { animation: none !important; opacity: 0; }
  .is-in .bubble-text { animation: none !important; opacity: 1; }
}

/* ==========================================================================
   Approach — navy, stars & a live circuit
   ========================================================================== */
.approach {
  background:
    radial-gradient(ellipse 40% 50% at 14% 48%, rgba(201, 156, 110, .22), transparent 70%),
    radial-gradient(ellipse 50% 50% at 96% 8%, rgba(72, 86, 145, .5), transparent 70%),
    var(--navy-grad);
}
.approach::before { z-index: 0; }
.circuit { position: absolute; inset: 0 auto 0 0; width: 58%; height: 100%; opacity: .7; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent); mask-image: linear-gradient(90deg, #000 35%, transparent); }
.circuit-traces path { fill: none; stroke: rgba(233, 190, 133, .2); stroke-width: 1.2; }
.circuit-nodes circle { fill: #1A2140; stroke: rgba(233, 190, 133, .55); stroke-width: 1.2; }
.circuit-pulses path { fill: none; stroke: #F6D9A8; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 5; animation: run 5.5s linear infinite; filter: drop-shadow(0 0 4px #F3C88A); }
.circuit-pulses path:nth-child(2) { animation-delay: -1.4s; animation-duration: 6.5s; }
.circuit-pulses path:nth-child(3) { animation-delay: -2.8s; }
.circuit-pulses path:nth-child(4) { animation-delay: -4.1s; animation-duration: 7s; }
@keyframes run { to { stroke-dashoffset: -95; } }
.approach-grid { z-index: 2; }
.approach .h2 { color: var(--on-dark); }
.ux-list li { align-items: center; }
.ux-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gold-face); color: #2E1C0C; font-weight: 700; box-shadow: inset 0 1px 1px rgba(255, 249, 232, .9), 0 0 16px rgba(233, 190, 133, .35); }
.layers-stage { border-color: rgba(233, 190, 133, .3); box-shadow: 0 0 70px rgba(233, 190, 133, .12), 0 40px 80px -30px rgba(0, 0, 0, .7); }
.layers-switch { border-color: rgba(233, 190, 133, .3); }
.ui-card { box-shadow: 0 0 0 1px rgba(233, 190, 133, .4), 0 40px 80px -30px rgba(0, 0, 0, .7); }
.ui-btn { background: var(--hl-metal); border: 2px solid transparent; color: #261708; font-weight: 600; }
.chip-sage { background: #E8EFE9; }
.logic-tag-ai { background: var(--gold-face); color: #2E1C0C; border: 0; }

/* ==========================================================================
   About
   ========================================================================== */
.about {
  background:
    radial-gradient(ellipse 45% 30% at 92% 16%, rgba(255, 255, 255, .8), transparent 70%),
    radial-gradient(ellipse 40% 30% at 4% 62%, rgba(232, 192, 138, .24), transparent 70%),
    var(--bg);
}
.portrait { background: radial-gradient(ellipse 80% 60% at 72% 18%, rgba(255, 255, 255, .8), transparent 60%), linear-gradient(160deg, #F8E6D4 0%, #ECC9A6 55%, #D3A473 100%); border: 1px solid rgba(255, 255, 255, .7); }
.portrait::before { content: ""; position: absolute; inset: auto -20% 4% -20%; height: 46%; background: var(--gold-arcs) center / 100% 100% no-repeat; opacity: .95; }
.portrait::after { content: ""; position: absolute; top: 4%; left: 8%; width: 84px; aspect-ratio: 200 / 260; background: var(--flare) center / contain no-repeat; animation: flare 5s ease-in-out infinite; }
.portrait picture { position: absolute; inset: 0; }
.portrait img { object-position: right top; }
/* the photo is shown plain: no sparkle or gold lines over or behind it */
.portrait::before, .portrait::after { content: none; }
.portrait figcaption { z-index: 2; }
@media (max-width: 640px) { .portrait { aspect-ratio: 4 / 5; } }
.portrait-mono { position: relative; filter: none; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; font-weight: 600; }
.fact-big { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; font-weight: 400 !important; }
.about-label { color: var(--accent-ink); font-weight: 700; }
.about-label::after { background: linear-gradient(to left, var(--gold-light), transparent); }
.insight, .belief { font-weight: 500; }
.orgs-list li { font-weight: 600; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.orgs-list li:hover { transform: translateY(-3px); box-shadow: var(--glow-gold); }
.worlds span:not(.worlds-join) { background: var(--card-bg); box-shadow: var(--shadow-card); }
.worlds-join { height: 1.5px; overflow: visible; }
.worlds-join::before { animation: worlds 2.8s ease-in-out infinite alternate; box-shadow: 0 0 8px var(--gold); }
@keyframes worlds { to { right: calc(100% - 7px); } }
.checks-plain li::before, .checks li::before { background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E1C0C' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E"), var(--gold-face); background-size: 11px, cover; background-position: center; background-repeat: no-repeat; border-radius: 50%; }
.pull-quote em { font-weight: 500; }

/* ---- 7 years + four strengths, each with its own colour */
.powers { padding: 24px 22px 22px; border-radius: 24px; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--shadow-card); }
.powers-head { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line-strong); }
.powers-head .fact-big { font-family: var(--font-display); font-size: 4.4rem !important; font-weight: 700 !important; line-height: .9; }
.powers-unit { display: grid; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--ink); }
.powers-unit strong { font-weight: 800; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.powers-unit small { margin-top: 4px; font-size: .9rem; font-weight: 400; color: var(--muted); }
.powers-list { margin-top: 14px; display: grid; gap: 10px; }
.powers-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 11px 14px; border-radius: 14px;
  background: linear-gradient(to left, color-mix(in srgb, var(--c) 10%, #fff), #fff 80%); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.powers-list li:hover { transform: translateX(-4px); box-shadow: 0 12px 24px -16px var(--c); }
.pw-check {
  grid-row: span 2; width: 34px; height: 34px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center / 18px no-repeat, var(--c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 14%, transparent), 0 8px 16px -8px var(--c);
}
.powers-list strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; line-height: 1.2; color: var(--c); }
.pw-sub { font-size: .85rem; line-height: 1.4; color: var(--muted); }
.js .powers-list li { opacity: 0; }
.about-aside.is-in .powers-list li { animation: pw-in .6s var(--ease) calc(var(--i) * .2s + .5s) both; }
.about-aside.is-in .pw-check { animation: pw-check .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * .2s + .7s) both; }
@keyframes pw-in { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes pw-check { from { scale: 0; rotate: -90deg; } to { scale: 1; rotate: 0deg; } }

/* ---- organisations: the logo fills the card behind the name, and takes over on hover */
.orgs-list { gap: 12px; }
.orgs-list li { position: relative; isolation: isolate; overflow: hidden; min-height: 116px; padding: 0; place-items: end stretch; }
.org-logo { position: absolute; z-index: -1; top: 12%; left: 0; right: 0; margin-inline: auto; width: 74%; height: 50%; object-fit: contain; opacity: .45; filter: saturate(.85); transition: opacity .5s var(--ease), scale .5s var(--ease), filter .5s var(--ease); }
.org-name {
  display: block; padding: 7px 8px 8px; font-family: var(--font-display); font-size: .95rem; font-weight: 700; line-height: 1.2; color: var(--navy);
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top: 1px solid rgba(214, 168, 112, .25);
}
.orgs-list li:hover .org-logo { opacity: 1; scale: 1.06; filter: none; }
/* on arrival every logo shows itself in full, then settles behind the name */
.orgs.is-in .org-logo { animation: org-logo 2.6s var(--ease) calc(var(--i) * .15s + .3s) backwards; }
.orgs.is-in .org-name { animation: org-name 2.6s var(--ease) calc(var(--i) * .15s + .3s) backwards; }
@keyframes org-logo { 0% { opacity: 0; scale: .8; } 22%, 62% { opacity: 1; scale: 1.06; filter: none; } 100% { opacity: .45; scale: 1; } }
@keyframes org-name { 0%, 30% { opacity: 0; translate: 0 100%; } 60%, 100% { opacity: 1; translate: 0 0; } }

/* ---- what experience taught me: four cards, each with its own little animated scene */
.insight-steps { gap: 14px; }
.insight-steps li {
  position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: center;
  padding: 18px 18px 18px 40px; border-radius: 20px; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.insight-steps li::before { content: none; }
.insight-steps li:hover { transform: translateY(-4px); box-shadow: var(--glow-gold); }
.insight-steps strong { align-self: end; font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.ins-sub { align-self: start; font-size: .85rem; line-height: 1.4; color: var(--muted); }
.ins-num { position: absolute; top: 12px; left: 14px; font-family: var(--font-mono); font-size: .75rem; font-weight: 700; color: var(--gold); }
.ins-art { grid-row: span 2; width: 76px; height: 76px; padding: 6px; border-radius: 22px; background: var(--ins-bg); overflow: visible; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); }
.ins-1 { --ins-bg: linear-gradient(160deg, #FFF4E4, #F6DDBD); }
.ins-2 { --ins-bg: linear-gradient(160deg, #F6F5FD, #DEDCF2); }
.ins-3 { --ins-bg: linear-gradient(160deg, #FFF3EF, #F4D3C9); }
.ins-4 { --ins-bg: linear-gradient(160deg, #F2F9F3, #D3E8D9); }
.ins-art * { vector-effect: none; }
/* 1 · listening */
.ia-ear, .ia-ear-in { fill: none; stroke: #1D2440; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ia-ear-in { stroke-width: 2.4; }
.ia-wave { fill: none; stroke: #C99A5E; stroke-width: 2.8; stroke-linecap: round; animation: ia-wave 1.8s ease-out infinite; }
.ia-wave-2 { animation-delay: .3s; }
.ia-note { fill: #C99A5E; }
.ia-note-stem { fill: none; stroke: #C99A5E; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ia-note, .ia-note-stem { animation: qa-float 2.4s ease-in-out infinite; }
@keyframes ia-wave { 0% { opacity: 0; translate: 6px 0; } 40% { opacity: 1; } 100% { opacity: 0; translate: -3px 0; } }
/* 2 · asking */
.ia-bub path { fill: #fff; stroke: #1D2440; stroke-width: 2.2; stroke-linejoin: round; }
.ia-bub-2 path { fill: #1D2440; }
.ia-q { font: 400 15px/1 "Suez One", serif; fill: #1D2440; text-anchor: middle; }
.ia-q-gold { fill: #E9C48F; }
.ia-bub { transform-box: fill-box; transform-origin: 30% 100%; animation: ia-ask 2.8s var(--ease) infinite; }
.ia-bub-2 { transform-origin: 70% 100%; animation-delay: 1.4s; }
@keyframes ia-ask { 0%, 100% { scale: 1; } 12% { scale: 1.14; } 24% { scale: 1; } }
/* 3 · spotting what's broken */
.ia-gears > circle { fill: #1D2440; }
.ia-gears > .ia-gear { fill: none; stroke: #1D2440; stroke-width: 5; stroke-dasharray: 3 2.6; transform-box: fill-box; transform-origin: center; animation: spin 4s linear infinite; }
.ia-gears > .ia-gear-broken { stroke: #C8372D; animation: ia-stuck 1.2s ease-in-out infinite; }
.ia-lens circle { fill: rgba(255, 255, 255, .55); stroke: #1D2440; stroke-width: 3; }
.ia-lens path { stroke: #C99A5E; stroke-width: 5; stroke-linecap: round; }
.ia-lens { animation: ia-scan 3.2s var(--ease) infinite; }
.ia-alert circle { fill: #C8372D; }
.ia-alert path { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.ia-alert { transform-box: fill-box; transform-origin: center; animation: ia-alert 3.2s var(--ease) infinite; }
@keyframes ia-stuck { 0%, 100% { rotate: 0deg; } 30% { rotate: 14deg; } 45% { rotate: 8deg; } }
@keyframes ia-scan { 0%, 100% { translate: -6px -6px; } 40%, 70% { translate: 9px 6px; } }
@keyframes ia-alert { 0%, 38% { opacity: 0; scale: .3; } 46%, 72% { opacity: 1; scale: 1; } 80%, 100% { opacity: 0; scale: .6; } }
/* 4 · the creative solution */
.ia-glow { fill: #F6D9A8; animation: ia-glow 2.6s ease-in-out infinite; }
.ia-bulb { fill: url(#qa-gold); stroke: #1D2440; stroke-width: 2.2; stroke-linejoin: round; }
.ia-base { fill: none; stroke: #1D2440; stroke-width: 3; stroke-linecap: round; }
.ia-fil { fill: none; stroke: #FFF6E2; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ia-spark { fill: #C99A5E; transform-box: fill-box; transform-origin: center; animation: th-twinkle 2s ease-in-out infinite; }
.ia-spark-2 { fill: #2F7A57; animation-delay: -1s; }
@keyframes ia-glow { 0%, 100% { opacity: .15; } 50% { opacity: .75; } }

/* ---- what I believe: the three promises, drawn in one by one on navy */
.promises { display: grid; gap: 12px; margin-top: 4px; }
.promises li {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px;
  background: radial-gradient(ellipse 60% 120% at 100% 50%, rgba(201, 156, 110, .22), transparent 70%), var(--navy-grad);
  box-shadow: inset 0 0 0 1px rgba(233, 190, 133, .28), 0 22px 40px -24px rgba(20, 26, 51, .85);
}
.promises li::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 241, 214, .16) 50%, transparent 65%); translate: 120% 0;
}
.pr-check { flex: none; width: 44px; height: 44px; overflow: visible; }
.pr-check * { vector-effect: none; }
.pr-check circle { fill: rgba(233, 190, 133, .14); stroke: #E9C48F; stroke-width: 2.5; stroke-dasharray: 1; }
.pr-check path { fill: none; stroke: #FFF1D6; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.pr-text { font-family: var(--font-display); font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 700; line-height: 1.35; color: #FFF6EA; }
.pr-text mark { color: #F6D9A8; background: linear-gradient(90deg, #B07A43, #F6D9A8, #B07A43) right bottom / 100% 2px no-repeat; padding-bottom: 2px; text-shadow: 0 0 18px rgba(246, 217, 168, .45); }
.js .promises li { opacity: 0; }
.js .pr-check circle, .js .pr-check path { stroke-dashoffset: 1; }
.js .promises mark { background-size: 0 2px; }
.is-in .promises li { --at: calc(var(--i) * .55s + .3s); animation: pr-in .7s var(--ease) var(--at) both; }
.is-in .pr-check circle { animation: pr-draw .6s var(--ease) calc(var(--at) + .2s) forwards; }
.is-in .pr-check path { animation: pr-draw .45s var(--ease) calc(var(--at) + .6s) forwards; }
.is-in .promises mark { animation: pr-mark .7s var(--ease) calc(var(--at) + .8s) forwards; }
.is-in .promises li::after { animation: pr-shine 5s ease-in-out calc(var(--i) * .4s + 3s) infinite; }
@keyframes pr-in { from { opacity: 0; translate: 40px 0; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes pr-draw { to { stroke-dashoffset: 0; } }
@keyframes pr-mark { to { background-size: 100% 2px; } }
@keyframes pr-shine { 0% { translate: 120% 0; } 30%, 100% { translate: -120% 0; } }

/* ---- services card 04: work style + needs + goals = a tailored solution */
.fit-formula { margin-top: 16px; }
.svc .fit-list { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.svc .fit-list li {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 18px 10px 16px; text-align: center;
  background: linear-gradient(180deg, #FFFDF9, #F8E9D8); border: 1.5px dashed rgba(201, 154, 94, .6); border-radius: 18px;
  box-shadow: 0 16px 28px -22px rgba(140, 90, 45, .6); color: var(--ink); font-size: 1rem; font-weight: 400;
}
.svc .fit-list li + li::before {
  content: "+"; position: absolute; top: 50%; right: -24px; width: 22px; height: 22px; translate: 0 -50%; display: grid; place-items: center;
  border-radius: 50%; background: var(--gold-face); color: #2E1C0C; font: 800 1rem/1 var(--font-display); box-shadow: 0 6px 12px -6px rgba(130, 82, 38, .7);
}
.fit-ico { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #F7E3CC); color: var(--navy); }
.fit-ico::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px dashed #C99A5E; animation: spin 14s linear infinite; }
.svc .fit-list svg { width: 24px; height: 24px; stroke-width: 1.8; }
.svc .fit-list strong { font-family: var(--font-display); font-size: 1.08rem; font-weight: 800; line-height: 1.25; color: var(--ink); }
.fit-sub { font-size: .8125rem; line-height: 1.35; color: var(--muted); }
.fit-result {
  position: relative; overflow: hidden; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 18px; border-radius: 16px;
  background: var(--navy-grad); color: #FFF3E0; font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; text-align: center;
  box-shadow: inset 0 0 0 1px rgba(233, 190, 133, .3), 0 18px 34px -18px rgba(20, 26, 51, .75);
}
.fit-result::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 241, 214, .2) 50%, transparent 65%); translate: 120% 0; animation: pr-shine 4.5s ease-in-out 2.4s infinite; }
.fit-eq { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold-face); color: #2E1C0C; font-weight: 800; }
.js .svc-feature .fit-list li, .js .svc-feature .fit-result { opacity: 0; }
.svc-feature.is-in .fit-list li { animation: fit-in .75s cubic-bezier(.3, 1.4, .5, 1) calc(var(--fi) * .25s + .35s) both; }
.svc-feature.is-in .fit-result { animation: pr-in .8s var(--ease) 1.25s both; }
.fit-list li:nth-child(1) { --fi: 0; }
.fit-list li:nth-child(2) { --fi: 1; }
.fit-list li:nth-child(3) { --fi: 2; }
@keyframes fit-in { from { opacity: 0; translate: 0 18px; scale: .85; } to { opacity: 1; translate: 0 0; scale: 1; } }

@media (max-width: 640px) {
  .svc .fit-list { grid-template-columns: 1fr; gap: 22px; }
  .svc .fit-list li + li::before { top: -22px; right: 50%; translate: 50% 0; }
  .insight-steps li { grid-template-columns: 64px minmax(0, 1fr); padding: 16px 16px 16px 36px; }
  .ins-art { width: 64px; height: 64px; }
  .orgs-list li { min-height: 100px; }
  .powers-head .fact-big { font-size: 3.6rem !important; }
}

/* ==========================================================================
   Process
   ========================================================================== */
.process {
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(255, 255, 255, .6), transparent 70%),
    radial-gradient(ellipse 30% 40% at 96% 90%, rgba(232, 192, 138, .25), transparent 70%),
    var(--bg-alt);
}
.step { padding-top: 54px; }
.step-num { box-shadow: 0 0 0 7px var(--bg-alt), inset 0 2px 2px rgba(255, 249, 232, .9), inset 0 -3px 6px rgba(96, 56, 22, .4), 0 12px 24px -8px rgba(180, 131, 90, .7); background: var(--gold-face); color: #2E1C0C; font-weight: 700; }
.step-ico { display: block; width: 42px; height: 42px; margin: 0 auto 14px; }
.step .h3 { font-weight: 700; }
.steps::before { background: linear-gradient(90deg, transparent, var(--gold-light), transparent); }

/* ==========================================================================
   Contact — champagne panel, glass form, paper plane
   ========================================================================== */
.contact { background: radial-gradient(ellipse 50% 40% at 84% 0%, rgba(255, 255, 255, .7), transparent 70%), var(--bg); }
.contact-panel {
  background:
    radial-gradient(ellipse 55% 70% at 100% 0%, rgba(255, 255, 255, .95), transparent 60%),
    linear-gradient(135deg, #FFF8EF 0%, #F7E5D0 55%, #EDCFAE 100%);
  color: var(--ink); border: 1px solid var(--card-border);
  box-shadow: inset 0 1px 0 #fff, 0 50px 90px -44px rgba(140, 90, 45, .6);
}
.contact-panel::before {
  background:
    var(--gold-arcs) center bottom / 120% 34% no-repeat,
    radial-gradient(ellipse 40% 40% at 0% 100%, rgba(232, 192, 138, .35), transparent 70%);
}
.contact .eyebrow-dark { color: var(--muted); }
.contact-copy .h2 { color: var(--ink); }
.contact-copy p:not(.eyebrow) { color: var(--ink-2); }
.contact-copy p.contact-lead { color: var(--ink); }
.contact-lead strong { color: var(--accent-ink); }
.exchange-col { background: rgba(255, 255, 255, .6); border: 1px solid var(--card-border); box-shadow: var(--shadow-card); }
.contact-copy p.exchange-title { color: var(--accent-ink); font-weight: 700; }
.exchange li { color: var(--ink); }
.contact-small-big { color: var(--ink) !important; border-top-color: var(--line-strong); }
.contact-small-big strong { color: var(--ink); }
.contact-copy p.contact-punch { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 600; }
.btn-wa { color: var(--ink); border-color: var(--line-strong); }
.contact-form {
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid #fff; box-shadow: 0 0 0 1px var(--card-border), 0 40px 70px -36px rgba(140, 90, 45, .6);
}
.field input, .field textarea { background: #FFFDFA; border-color: var(--line-strong); border-radius: 14px; }
.contact-form .btn-metal { min-height: 58px; margin-top: 6px; font-size: 1.05rem; font-weight: 600; }
.contact-form .btn-metal .btn-arrow { width: 20px; height: 20px; }
.contact-form .btn-metal[disabled] { opacity: .6; cursor: progress; }
.plane { position: absolute; top: -84px; left: -54px; width: 200px; pointer-events: none; overflow: visible; }
.plane-trail { fill: none; stroke: #C99A5E; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 7; animation: trail 1.4s linear infinite; }
.plane-body { filter: drop-shadow(0 8px 10px rgba(140, 90, 45, .3)); animation: plane 5s ease-in-out infinite; }
@keyframes trail { to { stroke-dashoffset: -24; } }
@keyframes plane { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 4px -7px; rotate: -3deg; } }

/* footer */
.site-footer { background: radial-gradient(ellipse 40% 60% at 90% 30%, rgba(201, 156, 110, .18), transparent 70%), var(--navy-grad); }

/* ==========================================================================
   Experience layer — responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .band-grid { grid-template-columns: 1fr; }
  .band-grid .converge { justify-self: center; }
  .statement { grid-template-columns: 1fr; }
  .target-art { max-width: 320px; }
}
@media (max-width: 1080px), (max-aspect-ratio: 3 / 2) {
  .hl-title .hl-w { font-size: clamp(30px, 7.9vw, 68px); }
  .hl-title-spark { top: -57px; right: -56px; width: 100px; height: 130px; }
}
@media (max-width: 960px) {
  .questions { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .hl-title-spark { top: -43px; right: -40px; width: 72px; height: 94px; }
  /* the workflow runs top → bottom */
  .band-navy .benefits { --step: 58px; --goal: 84px; grid-template-columns: 1fr; row-gap: 20px; margin-top: 64px; }
  .band-navy .benefits::before, .band-navy .benefits::after { top: calc(var(--goal) / 2); bottom: calc(var(--goal) / 2); right: calc(var(--goal) / 2 - 1px); left: auto; width: 2px; height: auto; }
  .band-navy .benefits::before { background: repeating-linear-gradient(to bottom, rgba(233, 190, 133, .32) 0 6px, transparent 6px 12px); }
  .band-navy .benefits::after { background: linear-gradient(to bottom, #C99A5E, #F1D3A0 60%, #E9C48F); transform-origin: top; }
  .js .band-navy .benefits::after { scale: 1 0; }
  .band-navy .benefits.is-in::after { animation: flow-fill-y 2.4s linear .45s forwards; }
  .band-navy .benefits li { flex-direction: row; align-items: center; gap: 18px; min-height: var(--goal); text-align: right; }
  .band-navy .benefits li:not(.flow-goal) .medal { margin: 0 calc((var(--goal) - var(--step)) / 2); }
  .band-navy .benefits .flow-goal::before, .band-navy .benefits .flow-goal::after { top: 0; right: 0; left: auto; margin: 0; }
  .goal-tag { top: -16px; right: calc(var(--goal) / 2); left: auto; margin: 0; translate: 50% 0; }
  [data-flow].is-in .goal-tag { animation-name: flow-tag-m; }
  .flare-hub { width: 56px; }
  .statement-around { grid-template-columns: 1fr; gap: 14px; }
  .statement-around li { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: right; padding: 18px 20px; gap: 16px; }
  .statement-around li + li::before { top: -15px; right: 47px; width: 2px; height: 16px; background: var(--gold-grad); }
  .statement-around .medal { --s: 56px; }
  .statement-around .around-num { top: 50%; left: 18px; translate: 0 -50%; font-size: 2rem; }
  .around-label::after { margin: 8px 0 0; }
  .pain .pain-ico { --s: min(60%, 150px); }
  .sq { width: 220px; }
  .verbs-grid .medal { --s: 42px; }
  .plane { top: -62px; left: -12px; width: 130px; }
  .sparkle-contact { width: 44px; height: 57px; top: 4px; left: 12px; }
  .section-head:not(.section-head-center) .h2::after { margin-right: -40px; width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .ta-arrow { translate: 0 0; opacity: 1; }
  .qa-scribble { stroke-dashoffset: 0; }
  .js .wave .wave-edge, .js .wave .wave-thread { stroke-dashoffset: 0; }
  .wave-glint, .circuit-pulses { display: none; }
}