/* Mixed design preview: the dark particle theme layered onto the current home page.
   Dark sections are see-through so the fixed 3D stage shows; cream and yellow sections stay solid. */
.theme-mix {
  --ink: #161311; --ink-2: #1e1915; --paper: #f5f2ee; --muted-mix: #a79e94; --line-mix: rgba(245, 242, 238, .12);
  --display: "Anybody", "Bricolage Grotesque", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  background: var(--ink);
}
.theme-mix ::selection { background: var(--yellow); color: var(--black); }

/* Stage, vignette and grain sit behind every section */
#stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#stage canvas { display: block; width: 100%; height: 100%; }
.mix-vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 70% 40%, transparent 40%, rgba(22, 19, 17, .75) 100%); }
.mix-grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.theme-mix .ticker, .theme-mix .footer { position: relative; }

/* Display type */
.theme-mix h2, .theme-mix .hero__title .ln:not(.deco), .theme-mix .chapter__h {
  font-family: var(--display); font-weight: 800; font-stretch: 115%; letter-spacing: -0.01em;
}
.theme-mix h2 { font-size: clamp(38px, 6vw, 96px); }
.theme-mix .process h2 { font-size: clamp(36px, 4.4vw, 68px); }
.theme-mix .h2-sm, .theme-mix .offer__h { font-size: clamp(30px, 4.2vw, 60px); }
.theme-mix .hero--ask .hero__title { font-size: clamp(42px, 5.6vw, 92px); line-height: .95; }
.theme-mix .hero__title .ln:not(.deco) { font-stretch: 100%; }
.theme-mix .eyebrow, .theme-mix .problem__eyebrow { font-family: var(--mono); font-weight: 500; letter-spacing: .04em; text-transform: none; font-size: 13.5px; }

/* Nav: dark glass throughout */
.theme-mix .nav { color: var(--paper); }
.theme-mix .nav.is-solid { background: rgba(22, 19, 17, .72); box-shadow: none; border-bottom: 1px solid var(--line-mix); }
.theme-mix .nav .btn--black { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.theme-mix .nav .btn--black::before { background: var(--paper); }
.theme-mix .nav__burger span { background: var(--paper); }

/* Hero: dark, with the solid bubble in front of the particle halo */
.theme-mix .hero { background: transparent; color: var(--paper); }
.theme-mix .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 55% at 72% 48%, rgba(239, 187, 49, .14), transparent 70%); }
.theme-mix .hero .deco { color: var(--yellow); }
.theme-mix .ask__q { color: #d9d2c9; }
.theme-mix .ask__chip { background: rgba(30, 25, 21, .72); color: var(--paper); border: 1px solid var(--line-mix); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.theme-mix .ask__chip:hover { border-color: var(--yellow); color: var(--yellow); box-shadow: none; }
.theme-mix .ask__chip[aria-pressed="true"] { background: var(--yellow); color: var(--black); border-color: var(--yellow); box-shadow: 0 0 30px rgba(239, 187, 49, .35); }
.theme-mix .ask__answer a { color: var(--yellow); }
/* Without the 3D bubble (phones) the answer shows as a yellow card: keep its text dark */
.theme-mix .hero:not(.has-3d) .ask__answer { color: var(--black); }
.theme-mix .hero:not(.has-3d) .ask__answer a { color: var(--black); }
.theme-mix .hero .btn--black { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.theme-mix .hero .btn--black::before { background: var(--paper); }
.theme-mix .hero .btn--line { color: var(--paper); border-color: var(--line-mix); background: rgba(22, 19, 17, .4); }
.theme-mix .hero .btn--line::before { background: var(--yellow); }
.theme-mix .hero .btn--line:hover { color: var(--black); }
.theme-mix .hero__trust .lg { color: var(--paper); }

/* Ticker: outlined marquee */
.theme-mix .ticker { background: rgba(22, 19, 17, .55); border-block: 1px solid var(--line-mix); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.theme-mix .ticker__track { font-family: var(--display); font-stretch: 130%; font-weight: 800; }
.theme-mix .ticker__track span { color: transparent; -webkit-text-stroke: 1px rgba(245, 242, 238, .55); }
.theme-mix .ticker__track b { color: var(--yellow); }

/* Logo strip on dark */
.theme-mix .logos { background: rgba(22, 19, 17, .55); color: var(--paper); border-bottom: 1px solid var(--line-mix); }
.theme-mix .logos__label { font-family: var(--mono); color: var(--muted-mix); }
.theme-mix .logos .lg { color: var(--paper); }

/* Chapters: big statement on the left, 3D shape on the right */
.chapter { min-height: 92vh; display: grid; align-items: center; color: var(--paper); }
.chapter__copy { max-width: 560px; display: grid; gap: 22px; }
.chapter__tag { font: 13.5px var(--mono); color: var(--muted-mix); }
.chapter__tag b { color: var(--yellow); font-weight: 500; }
.theme-mix .chapter__h { font-size: clamp(40px, 5.6vw, 84px); line-height: .98; }
.chapter__p { font-size: clamp(17px, 1.5vw, 20px); color: #d9d2c9; max-width: 48ch; }
.chapter__links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.textlink { display: inline-flex; gap: 8px; align-items: center; color: var(--yellow); font-weight: 700; }
.textlink .arr { transition: transform .3s var(--ease); }
.textlink:hover .arr { transform: translateX(5px); }
@media (max-width: 900px) {
  .chapter { min-height: 0; align-items: end; padding-top: 46vh; padding-bottom: 72px; }
}
@media (max-width: 760px) {
  /* The bubble gets its own area right under the menu, the same on every phone height */
  .theme-mix .hero--ask { padding-top: calc(72px + 42svh); padding-bottom: 56px; min-height: 0; }
  .theme-mix .hero--ask .hero__canvas { top: 64px; bottom: auto; height: 42svh; }
  .theme-mix .hero--ask .hero__title { font-size: clamp(36px, 10.5vw, 46px); }
  .theme-mix .ask__chip { min-height: 44px; }
  .theme-mix .chapter__h { font-size: clamp(34px, 10vw, 44px); }
  /* Hero: main button right under the headline, then the question and chips */
  .theme-mix .hero--ask .hero__inner { display: flex; flex-direction: column; }
  .theme-mix .hero--ask .hero__cta { order: 1; margin-top: 22px; }
  .theme-mix .hero--ask .ask { order: 2; margin-top: 30px; }
  .theme-mix .hero--ask .hero__trust { order: 3; }
  /* Chapters join the section after them: shape, headline and link only (the next section explains the detail) */
  .chapter { padding-top: 36vh; padding-bottom: 8px; }
  .chapter__copy { gap: 14px; }
  .chapter__p { display: none; }
  .chapter + section { padding-top: 56px; }
  /* Process steps and growth cards: drop the desktop minimum heights and big gaps */
  .theme-mix .step { min-height: 0; padding: 26px; }
  .theme-mix .step__n { font-size: 64px; margin-bottom: 0; }
  .theme-mix .step h3 { font-size: 28px; margin: 14px 0 8px; }
  .theme-mix .process__pin { padding: 72px 0; min-height: 0; }
  .theme-mix .process__head { margin-bottom: 32px; }
  .theme-mix .bubbles { gap: 38px; }
  .theme-mix .bub { padding: 24px 24px 28px; }
  .theme-mix .bub__top { margin-bottom: 16px; }
  /* Ticker: solid yellow text reads better than thin outlines on small screens */
  .theme-mix .ticker__track span { color: var(--yellow); -webkit-text-stroke: 0; }
  .theme-mix .ticker__track b { color: var(--paper); }
}

/* Dark sections become see-through so the stage shows between cards */
.theme-mix .agent { background: radial-gradient(40% 50% at 15% 20%, rgba(243, 184, 67, .14), transparent 70%), rgba(22, 19, 17, .35); }
.theme-mix .demo, .theme-mix .process, .theme-mix .ways-work { background: transparent; }
.theme-mix .step, .theme-mix .ww__card { background: rgba(30, 25, 21, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.theme-mix .step:hover, .theme-mix .ww__card:hover { background: var(--yellow); }
.theme-mix .console { background: rgba(7, 7, 6, .85); }

/* Growth: cream bubbles floating over the funnel */
.theme-mix .growth { background: transparent; color: var(--paper); }
.theme-mix .growth .eyebrow { color: var(--yellow); }
.theme-mix .bub { color: var(--black); box-shadow: 6px 6px 0 var(--yellow); }
.theme-mix .bub::before { background: var(--yellow); }
.theme-mix .bub:hover { box-shadow: 10px 10px 0 var(--yellow); border-color: var(--yellow); color: var(--cream); }
.theme-mix .bub:hover h3 { color: var(--cream); }
.theme-mix .bub--hero { background: rgba(30, 25, 21, .85); color: var(--paper); border-color: rgba(239, 187, 49, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.theme-mix .bub--hero:hover { background: var(--paper); color: var(--black); }

/* Footer: the portal shows through behind "Let's talk" */
.theme-mix .footer { background: linear-gradient(180deg, rgba(22, 19, 17, .25), rgba(22, 19, 17, .92) 55%); }
.theme-mix .footer__big { font-family: var(--display); font-stretch: 120%; }
.theme-mix .footer__big .deco { font-family: var(--deco); color: var(--yellow); }

/* Cursor ring (mouse only) */
.mix-cur { position: fixed; left: 0; top: 0; z-index: 400; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1.5px solid var(--yellow); pointer-events: none; mix-blend-mode: normal; box-shadow: 0 0 0 1px rgba(14, 13, 11, .4), inset 0 0 0 1px rgba(14, 13, 11, .15); display: none; transition: width .25s, height .25s, margin .25s, background .25s; }
/* Over links the ring grows but stays hollow, so it never recolours the text under it */
.mix-cur.is-big { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: transparent; border-width: 2px; mix-blend-mode: normal; border-color: var(--yellow); box-shadow: 0 0 0 1px rgba(14, 13, 11, .35); }
@media (pointer: fine) { .js .mix-cur { display: block; } }

/* Yellow wipe between pages */
.mix-wipe { position: fixed; inset: 0; z-index: 500; pointer-events: none; background: var(--yellow); transform: scaleY(0); transform-origin: bottom; display: grid; place-items: center; }
.mix-wipe b { font: 900 clamp(40px, 9vw, 140px)/1 var(--display); font-stretch: 150%; color: var(--black); opacity: 0; transition: opacity .2s; }
.mix-wipe.is-in { transition: transform .4s cubic-bezier(.7, 0, .2, 1); transform: scaleY(1); }
.mix-wipe.is-in b { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mix-cur, .mix-wipe { display: none !important; }
}

/* Mascot: potato peeking out of the speech bubble */
.mascot { display: block; color: var(--paper); }
.theme-mix .chat .mascot--chat { width: 40px; height: 40px; margin: -8px 0 -8px -8px; fill: initial; stroke: none; }
.theme-mix .chat:hover .mascot--chat { animation: peek .6s ease; }
.phone__avatar.has-mascot { background: var(--cream); overflow: hidden; }
.mascot--avatar { width: 32px; height: 32px; color: var(--black); }
.mascot--foot { width: clamp(96px, 10vw, 140px); height: auto; aspect-ratio: 1; margin-bottom: 14px; animation: bob 3.2s ease-in-out infinite; }
@keyframes peek { 40% { transform: translateY(-5px) rotate(-6deg); } }
@keyframes bob { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .mascot--foot, .theme-mix .chat:hover .mascot--chat { animation: none; } }

/* ---------- Whole-site dark design: page heroes and plain sections ---------- */
/* Sections with no background of their own keep the cream page colour (zero specificity, so any section style wins) */
:where(.theme-mix main > section) { background-color: var(--cream); color: var(--black); }
.theme-mix .phero--dark { background: transparent; color: var(--paper); }
.theme-mix .phero__h1:not(.phero__h1--article) { font-family: var(--display); font-weight: 800; font-stretch: 105%; letter-spacing: -0.01em; font-size: clamp(40px, 6vw, 92px); line-height: .98; }
.theme-mix .phero--split .phero__h1:not(.phero__h1--article) { font-size: clamp(38px, 5.2vw, 80px); }
.theme-mix .phero__h1--article { font-family: var(--display); font-weight: 800; font-stretch: 100%; letter-spacing: -0.01em; font-size: clamp(32px, 4.4vw, 64px); }
.theme-mix .phero__h1 .deco { font-family: var(--deco); font-weight: 400; font-stretch: normal; }
.theme-mix .phero .crumbs { color: var(--muted-mix); opacity: 1; }
.theme-mix .phero .btn--black { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.theme-mix .phero .btn--black::before { background: var(--paper); }
.theme-mix .phero .btn--line { color: var(--paper); border-color: var(--line-mix); background: rgba(22, 19, 17, .4); }
.theme-mix .phero .btn--line::before { background: var(--yellow); }
.theme-mix .phero .btn--line:hover { color: var(--black); }
.theme-mix .phero__visual--cover .cover { box-shadow: 10px 10px 0 var(--yellow); }
/* Guide articles: full-width cream band behind the centred text */
.theme-mix .prose { background: var(--cream); color: var(--black); box-shadow: 0 0 0 100vmax var(--cream); clip-path: inset(0 -100vmax); }
.theme-mix .prose h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; }
/* Light "ways to work" band on the About page */
.theme-mix .ways-work--light { background: #fff9ec; color: var(--black); }
/* Hero mock-ups: dark text by default (the ink parts set their own colour) */
.theme-mix .phero__visual { color: var(--black); }
.theme-mix .ways-work--light .ww__card { background: var(--cream); backdrop-filter: none; -webkit-backdrop-filter: none; }
.theme-mix .ways-work--light .ww__card:hover { background: var(--yellow); }
/* Card headings that are h2 for SEO but sit in small cards */
.theme-mix .ind h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; }
/* Integrations hero: connector lines and the CRM hub drawn for a yellow background, re-coloured for dark */
.theme-mix .phero--dark .hub__lines line { stroke: var(--yellow); opacity: .75; }
.theme-mix .phero--dark .hub__core { border: 2px solid var(--yellow); box-shadow: 0 0 40px rgba(239, 187, 49, .25); }
.theme-mix .phero--dark .hub__node { border-color: var(--yellow); }
/* Statement sections are see-through on purpose, so the particle shape shows (overrides the cream default above) */
.theme-mix .chapter { background: transparent; color: var(--paper); }

/* Call-to-action band: breathing room above it now that a dark section can sit right before it */
.theme-mix .offer { padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(24px, 4vw, 56px); }
.theme-mix .offer + .faq { padding-top: clamp(36px, 5vw, 72px); }

/* Guide cards: the global dark-theme h2 size is for page sections, not cards */
.theme-mix .guide h2 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; overflow-wrap: break-word; }
.theme-mix .guides--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .theme-mix .guides--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .theme-mix .guides--3 { grid-template-columns: minmax(0, 1fr); } }
.theme-mix .contact__bubble h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.08; margin-bottom: 8px; }
.theme-mix .about__text h2 { font-size: clamp(30px, 3.4vw, 48px); }
.theme-mix .indx__panel h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.05; }