/* Moon / sun switch. By default every page looks as designed (dark hero, light and dark sections in their
   usual places). The switch sets html[data-theme="inverted"], which flips every section: light ones go dark,
   dark ones go light. Load last on every page. Fonts are not touched. */
:root { color-scheme: light dark; }

/* ---------- moon / sun button ---------- */
.theme-toggle {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; margin: 0 12px 0 0; padding: 0; cursor: pointer;
  border: 1px solid var(--nav-rule, rgba(33, 29, 27, .22)); border-radius: 50%;
  background: transparent; color: var(--nav-text, #211d1b);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.theme-toggle:hover { background: rgba(127, 104, 120, .14); transform: rotate(-12deg); }
.theme-toggle:focus-visible { outline: 2px solid #c9a3bd; outline-offset: 3px; }
.theme-toggle svg {
  grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .3s, transform .45s cubic-bezier(.2, .8, .2, 1);
}
/* default (dark hero) shows the sun; flipped (light hero) shows the moon */
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-70deg) scale(.6); }
html[data-theme="inverted"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(70deg) scale(.6); }
html[data-theme="inverted"] .theme-toggle .icon-moon { opacity: 1; transform: none; }
.site-header.is-dark .theme-toggle { color: #f4eee6; border-color: rgba(244, 238, 230, .32); }
.site-header:not(.is-dark) .theme-toggle { color: #211d1b; border-color: rgba(33, 29, 27, .25); }
/* keep the menu links centred between the logo and the buttons */
@media (min-width: 901px) { .connected-site .site-header .desktop-nav { margin-inline: auto; } }
@media (max-width: 900px) {
  .site-header .theme-toggle { order: 2; margin: 0 0 0 auto; width: 38px; height: 38px; }
  .connected-site .site-header .menu-toggle { order: 3; margin-left: 12px; }
}

/* smooth colour change only while switching, so normal scrolling and animations are untouched */
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease, stroke .4s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-switching * { transition: none !important; }
  .theme-toggle svg, .theme-toggle { transition: none; }
}

/* ---------- homepage hero when flipped: light ---------- */
html[data-theme="inverted"] .net-hero {
  background-color: #f4eee6;
  background-image: radial-gradient(70% 80% at 78% 45%, #ece0e8 0%, #f4eee6 60%, #f1ebe3 100%);
  color: #211d1b;
}
html[data-theme="inverted"] .net-hero::after {
  background: radial-gradient(48% 62% at 26% 50%, #f4eee6d9 0%, #f4eee699 55%, transparent 100%);
}
html[data-theme="inverted"] .net-hero-eyebrow { color: #60435b; }
html[data-theme="inverted"] .net-hero-eyebrow::before, html[data-theme="inverted"] .net-hero-tags i { background: #60435b; }
html[data-theme="inverted"] .connected-home .net-hero h1 { color: #211d1b; }
html[data-theme="inverted"] .connected-home .net-hero h1 strong { color: #60435b; }
html[data-theme="inverted"] .net-hero-description { color: #4f464a; }
html[data-theme="inverted"] .net-hero-primary { background: #60435b; color: #f6f0f4; }
html[data-theme="inverted"] .net-hero-primary:hover { background: #4f3549; }
html[data-theme="inverted"] .net-hero-secondary { color: #211d1b; border-color: rgba(96, 67, 91, .45); }
html[data-theme="inverted"] .net-hero-secondary:hover { background: rgba(96, 67, 91, .07); }
html[data-theme="inverted"] .net-hero-tags { color: #6b5f66; }
html[data-theme="inverted"] .net-hero :is(a, button):focus-visible { outline-color: #60435b; }
html[data-theme="inverted"] .net-hero-glow { background: radial-gradient(circle, #c9a3bd66 0%, #9fbccb33 40%, transparent 70%); }
html[data-theme="inverted"] .net-hero-mark { opacity: .85; }
html[data-theme="inverted"] .net-hero-mark .fill path { stroke: #60435b55; }
html[data-theme="inverted"] .net-hero-mark .run { filter: drop-shadow(0 0 4px #c9a3bd); }
html[data-theme="inverted"] .net-hero-mark .run.b { stroke: #6b8a9a; filter: drop-shadow(0 0 4px #9fbccb); }
@media (max-width: 860px) {
  html[data-theme="inverted"] .net-hero::after { background: radial-gradient(90% 55% at 40% 38%, #f4eee6d9 0%, #f4eee688 60%, transparent 100%); }
  html[data-theme="inverted"] .net-hero-mark { opacity: .5; }
}

/* ---------- footer "Start a conversation": same size and feel as the navbar button ---------- */
.site-footer .bzf-cta.bzf-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: auto; max-width: 100%;
  min-height: 44px; margin-top: 14px; padding: 0 18px !important; border: 1px solid transparent; border-radius: 3px;
  font: 700 12px/1 var(--sans, Arial) !important; letter-spacing: .1em !important; text-transform: uppercase; white-space: nowrap;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.site-footer .bzf-cta span { font-size: 13px; transition: transform .2s; }
.site-footer .bzf-cta:hover span { transform: translate(2px, -2px); }
html:not([data-theme="inverted"]) .site-footer .bzf-cta { background: #d1bdca; color: #2e242b !important; }
html:not([data-theme="inverted"]) .site-footer .bzf-cta:hover { background: #e2d3dd; box-shadow: 0 8px 22px -12px rgba(209, 189, 202, .7); }
html[data-theme="inverted"] .site-footer .bzf-cta { background: #60435b; color: #f6f0f4 !important; }
html[data-theme="inverted"] .site-footer .bzf-cta:hover { background: #4f3549; box-shadow: 0 8px 22px -12px rgba(96, 67, 91, .7); }
.site-footer .bzf-cta:focus-visible { outline: 2px solid #c9a3bd; outline-offset: 3px; }

/* slider dots: same look, but a 24px finger-sized hit area */
.connected-site :is(.wt-dots, .wk-dots) { gap: 0 !important; }
.connected-site :is(.wt-dots, .wk-dots) button { position: relative; width: 24px !important; height: 24px !important; background: none !important; }
.connected-site :is(.wt-dots, .wk-dots) button::before { content: ""; position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; border-radius: 99px; background: rgba(133, 114, 128, .45); transition: width .35s cubic-bezier(.2, .8, .2, 1), background .35s; }
.connected-site :is(.wt-dots, .wk-dots) button[aria-current="true"] { width: 42px !important; }
.connected-site :is(.wt-dots, .wk-dots) button[aria-current="true"]::before { width: 26px; background: #d3bdcd; }
html:not([data-theme="inverted"]) .connected-site .wk-dots button::before { background: rgba(96, 67, 91, .22); }
html:not([data-theme="inverted"]) .connected-site .wk-dots button[aria-current="true"]::before { background: #60435b; }
html[data-theme="inverted"] .connected-site .wt-dots button[aria-current="true"]::before { background: #60435b; }

/* screen-reader-only text */
.bz-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* readable tag on the plum "private work" band */
.work-page .work-cta .section-tag { color: #e4d6df !important; }

/* iPhone: keep arrow symbols as plain text glyphs, never emoji */
body { font-variant-emoji: text; }