/* Ivory theme (18 Oct 2026): warm off-white page, near-black ink, deeper red. Loaded after style.css.
   A few things stay dark on purpose for contrast: the Impossible Shop stage, WhatsApp chats, 3D stages, the Bespoke card. */
:root {
  --bg: #faf7f2;
  --bg-2: #ffffff;
  --bg-3: #f3eee7;
  --ink: #1a1615;
  --muted: #6b6260;
  --line: rgba(26, 22, 21, .12);
  --red: #d12f3d;
  --red-deep: #9e1c29;
  --red-strong: #c72c3b; /* white text on it: 5.45:1 */
  --red-text: #b4202e;   /* red text on ivory: 5.9:1 */
  --soft-shadow: 0 1px 2px rgba(60, 40, 30, .05), 0 18px 40px -24px rgba(60, 40, 30, .28);
}
body { background: var(--bg); color: var(--ink); }
body::after { opacity: .035; }

/* buttons */
.btn--ghost { color: #3a3230; box-shadow: inset 0 0 0 1px rgba(26, 22, 21, .2); }
.btn--ghost:hover { background: rgba(26, 22, 21, .05); }
.btn--light { background: var(--ink); color: #faf7f2; }
.btn--light:hover { background: #000; }

/* nav */
.nav { background: linear-gradient(var(--bg) 0%, rgba(250, 247, 242, 0) 100%); }
.nav--solid { background: rgba(250, 247, 242, .86); box-shadow: 0 1px 0 var(--line); }

/* hero + manifesto */
.hero__sub { color: #5a5150; }
.manifesto__text .w { opacity: .16; }

/* send / chat */
.msg--out { background: #efe8df; }
.is-speaking .voice__caption { color: var(--ink); }

/* work tiles + dialog */
.tile { box-shadow: inset 0 0 0 1px var(--line), var(--soft-shadow); }
.tile:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(209, 47, 61, .45), 0 30px 60px -30px rgba(209, 47, 61, .3); }
.tile__thumb { background: #efe8df; }
.tile--phone .tile__thumb { background: radial-gradient(70% 90% at 50% 100%, #f6d9dc 0%, #efe8df 75%); }
.tile__badge { background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.tile__self { color: #fff; }
.workdlg { box-shadow: inset 0 0 0 1px var(--line), 0 60px 160px -40px rgba(60, 40, 30, .45); }
.workdlg::backdrop { background: rgba(26, 22, 21, .55); }
.workdlg__btn:hover { background: #e9e1d7; }
.workdlg__close { background: var(--ink); color: #faf7f2; }
.workdlg__close:hover { background: #000; }
.browser { background: #ece6dc; }
.browser span { background: #cfc6b8; }
.project--phone .project__media { background: radial-gradient(70% 70% at 50% 60%, #f6d9dc 0%, var(--bg-2) 70%); }
.project__media { box-shadow: var(--soft-shadow); }
.self__big { color: #fff; }

/* services bento */
.cell { box-shadow: inset 0 0 0 1px var(--line), var(--soft-shadow); }
.cell--web { box-shadow: none; }
.cell--host { background: radial-gradient(120% 120% at 100% 0%, #f8dfe2 0%, var(--bg-2) 60%); }
.cell--crm { background: linear-gradient(200deg, #fbe5e7 0%, var(--bg-2) 70%); }
.cell--bot, .cell--wa { background: var(--bg-3); }

/* process stack */
.stack__card { box-shadow: inset 0 0 0 1px var(--line), 0 -20px 50px -28px rgba(60, 40, 30, .3); }
.stack__card:nth-child(3) .stack__num { color: #fff; }
.stack__card:nth-child(3) h3 { color: #fff; }

/* tool logos are light SVGs: print them dark on ivory */
.marquee__set img { filter: brightness(0); opacity: .55; }

/* ad section */
.adsec__sound { color: #fff; }

/* growth chart, before/after */
.gchart { box-shadow: 0 0 0 1px var(--line), 0 50px 100px -60px rgba(209, 47, 61, .35); }
.gchart__head b { background: rgba(26, 22, 21, .06); }
.gb { box-shadow: 0 14px 28px -14px rgba(60, 40, 30, .45), 0 0 0 1px var(--line); }
.ba__face--before { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--soft-shadow); }
.ba__face--before li { color: #5a5150; }
.ba__face--before li::before { background: rgba(26, 22, 21, .06); color: #8b7f7c; }
.ba__toggle button[aria-pressed="true"], .picker button[aria-selected="true"], .studio__lights button[aria-checked="true"], .showcase__tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: #faf7f2; }
.picker button:hover { background: #ece4da; }

/* growth check */
.report { box-shadow: 0 0 0 1px var(--line), var(--soft-shadow); }
.report__track { stroke: rgba(26, 22, 21, .08); }
.report__list .ok::before { background: rgba(31, 157, 85, .14); color: #1f9d55; }
.gform input { background: #fff; }
.gform input::placeholder { color: #9a908d; }
.gcheck__who { box-shadow: inset 0 0 0 1px var(--line), var(--soft-shadow); }

/* material studio: the 3D stage stays dark, the panel goes light */
.studio__label { color: #d9d0cc; }
.studio__label b { color: #fff; }
.studio__panel { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--soft-shadow); }
.studio__finish { background: var(--bg-3); }
.studio__finish:hover { background: #ece4da; }
.studio__finish[aria-checked="true"] { background: rgba(209, 47, 61, .07); }
.chip { box-shadow: 0 0 0 2px #fff; }
.studio__lights { background: var(--bg-3); }
.showcase__tabs { background: var(--bg-3); }

/* NEW 3D property strip */
.newre__card { background: linear-gradient(160deg, rgba(209, 47, 61, .09), rgba(209, 47, 61, .015) 60%), #fff; box-shadow: inset 0 0 0 1px rgba(209, 47, 61, .28), var(--soft-shadow); }
.newre__tag { background: rgba(209, 47, 61, .1); }

/* pricing */
.plan { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--soft-shadow); }
.plan.plan--bespoke { background: linear-gradient(165deg, #c72c3b 0%, #8f1a26 55%, #5a1019 100%); box-shadow: 0 30px 60px -30px rgba(158, 28, 41, .55); }
.plan:hover { box-shadow: inset 0 0 0 1px rgba(26, 22, 21, .2), 0 30px 60px -36px rgba(60, 40, 30, .4); }
.plan__list li { color: #3a3230; }
.plan__go { box-shadow: inset 0 0 0 1px rgba(26, 22, 21, .25); color: var(--ink); }
.plan__go:hover { background: rgba(26, 22, 21, .05); }
.plan.plan--growth { background: linear-gradient(180deg, #fdeef0 0%, #fff 60%); box-shadow: inset 0 0 0 1.5px rgba(209, 47, 61, .5), var(--soft-shadow); }
.plan--growth .plan__go, .plan--bespoke .plan__go { color: #fff; }
.plan--bespoke .plan__go { background: #fff; color: var(--red-strong); }
.plan--bespoke .plan__go:hover { background: #faf7f2; }
.terms { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--soft-shadow); }
.cmp__wrap { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--soft-shadow); }
.cmp__table tbody th[scope=row] { color: #3a3230; }
.cmp__n { color: rgba(26, 22, 21, .28); }
.cmp__pick { background: #fff; }
@media (max-width: 767px) { .cmp__table tbody th[scope=row], .cmp__table thead th:first-child { background: #fff; } .cmp__table thead th:first-child { background: var(--bg-3); } }
.care { background: radial-gradient(120% 140% at 100% 0%, #fbe4e7 0%, #fff 55%); box-shadow: inset 0 0 0 1px var(--line), var(--soft-shadow); }

/* work ideas chips (if present) */
.wchip { color: #3a3230; }
.widea { background: linear-gradient(180deg, #fdeef0, #fff) !important; }
.widea__list li { color: #3a3230; }
.widea__link:hover { color: var(--ink); }
.project__video { background: #efe8df; }

/* hero shop: the stage stays a night street; its controls sit on ivory */
.hero__shopbar input { background: #fff; }
.shoptypes { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--soft-shadow); }

/* finale + footer */
.finale__contact a:hover { color: var(--ink); }
.footer { background: var(--bg-3); }

/* the stacking effect dims cards behind; on ivory that turns a white card grey-black, so keep them bright */
.stack__card { filter: none !important; }

/* Bespoke is a red card: every bit of text on it is white (the ivory theme made --ink dark) */
.plan.plan--bespoke, .plan--bespoke .plan__price, .plan--bespoke .plan__line, .plan--bespoke .plan__pages span, .plan--bespoke .plan__list li { color: #fff; }
.plan--bespoke .plan__name, .plan--bespoke .plan__per, .plan--bespoke .plan__pages, .plan--bespoke .plan__note { color: rgba(255, 255, 255, .8); }
.plan--bespoke .plan__pages { border-color: rgba(255, 255, 255, .25); }
