/* Site modes. Ocean is the default look; mono overrides it.
   html[data-mode] is set in <head> before first paint (see js/modes.js). */

/* ---------- Switcher ---------- */
.mode-switch {
  --ms-fg: rgba(255, 255, 255, 0.55);
  --ms-on: #7ff4ff;
  --ms-thumb: rgba(127, 244, 255, 0.14);
  --ms-edge: rgba(127, 244, 255, 0.18);
  position: relative;
  order: 3;
  display: flex;
  margin-left: 14px;
  padding: 3px;
  border: 1px solid var(--ms-edge);
}
.mode-switch__thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  background: var(--ms-thumb);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.mode-switch__opt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 0;
  background: none;
  color: var(--ms-fg);
  font: 600 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease;
}
.mode-switch__opt:hover { color: var(--text-primary); }
.mode-switch__opt[aria-checked="true"] { color: var(--ms-on); }
.mode-switch__opt:focus-visible { outline: 2px solid var(--ms-thumb); outline-offset: 2px; }
.mode-switch__icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-immersive .nav { order: 2; }
[data-mode="mono"] .mode-switch { --ms-fg: rgba(11, 11, 11, 0.5); --ms-on: #fafafa; --ms-thumb: #0b0b0b; --ms-edge: rgba(11, 11, 11, 0.15); }

@media (max-width: 768px) {
  .theme-immersive .brand { margin-right: auto; }
  .mode-switch { order: 1; margin: 0 8px 0 0; }
  .theme-immersive .nav-toggle { order: 2; }
  .mode-switch__opt { padding: 8px 9px; }
  .mode-switch__name { display: none; }
  .mode-switch__icon { width: 16px; height: 16px; }
}

.mode-mesh {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  pointer-events: none;
}

html.mode-anim body,
html.mode-anim body * {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease !important;
}

/* ================================================================
   MONO: black on paper, triangle tessellation
   ================================================================ */
html[data-mode="mono"] {
  --bg-page: #fafafa;
  --bg-deep: #ffffff;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-glass: rgba(250, 250, 250, 0.9);
  --text-primary: #0b0b0b;
  --text-muted: #4a4a4a;
  --text-subtle: #8a8a8a;
  --cyan: #0b0b0b;
  --blue-deep: #0b0b0b;
  --blue-mid: #0b0b0b;
  --gradient-cta: linear-gradient(#0b0b0b, #0b0b0b);
  --gradient-text: linear-gradient(#0b0b0b, #0b0b0b);
  --border-subtle: rgba(11, 11, 11, 0.1);
  --border-accent: rgba(11, 11, 11, 0.4);
  --shadow-glow: 0 0 0 transparent;
  color-scheme: light;
}
[data-mode="mono"] body.theme-immersive {
  color: #0b0b0b;
  background-color: #fafafa;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='194' viewBox='0 0 112 194'%3E%3Cg fill='%230b0b0b'%3E%3Cpath fill-opacity='.035' d='M56 0h56L84 48.5z'/%3E%3Cpath fill-opacity='.02' d='M28 48.5h56L56 97z'/%3E%3Cpath fill-opacity='.045' d='M0 97h56l-28 48.5z'/%3E%3Cpath fill-opacity='.025' d='M84 145.5L112 194H56z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%230b0b0b' stroke-opacity='.07' d='M0 0h112M0 48.5h112M0 97h112M0 145.5h112M0 0l112 194M56 0l56 97M0 97l56 97M112 0L0 194M56 0L0 97M112 97l-56 97'/%3E%3C/svg%3E");
  background-size: 112px 194px;
}
[data-mode="mono"] .ocean-gl,
[data-mode="mono"] .grain { display: none; }
[data-mode="mono"] ::selection { background: #0b0b0b; color: #fafafa; }
[data-mode="mono"] .scroll-progress { background: #0b0b0b; }

[data-mode="mono"] .theme-immersive .header-bar,
[data-mode="mono"] .theme-immersive .site-header.is-scrolled .header-bar {
  background: rgba(250, 250, 250, 0.9);
  border-color: rgba(11, 11, 11, 0.12);
  box-shadow: none;
}
[data-mode="mono"] .theme-immersive .site-header.is-scrolled .header-bar {
  background: rgba(250, 250, 250, 0.96);
  border-color: rgba(11, 11, 11, 0.22);
  box-shadow: 0 8px 24px rgba(11, 11, 11, 0.06);
}
[data-mode="mono"] .theme-immersive .nav a { color: rgba(11, 11, 11, 0.5); }
[data-mode="mono"] .theme-immersive .nav a:hover,
[data-mode="mono"] .theme-immersive .nav a[aria-current="page"] { color: #0b0b0b; }
[data-mode="mono"] .theme-immersive .nav-cta {
  background: #0b0b0b !important;
  color: #fafafa !important;
  border-color: #0b0b0b;
}
[data-mode="mono"] .theme-immersive .nav-toggle { color: #0b0b0b; border-color: rgba(11, 11, 11, 0.22); }
@media (max-width: 768px) {
  [data-mode="mono"] .nav { background: #fafafa; border: 1px solid rgba(11, 11, 11, 0.15); }
}
[data-mode="mono"] .brand img { filter: brightness(0); }
[data-mode="mono"] .theme-immersive .brand-text { color: #0b0b0b; }

[data-mode="mono"] .stage-hero__title .dim { color: #0b0b0b; }
[data-mode="mono"] .stage-hero__title .accent {
  background: none;
  color: #fafafa;
  -webkit-text-fill-color: #fafafa;
  -webkit-text-stroke: 3px #0b0b0b;
  paint-order: stroke fill;
}
[data-mode="mono"] .btn-primary {
  background: #0b0b0b;
  color: #fafafa;
  box-shadow: none;
}
[data-mode="mono"] .btn-primary:hover { background: #fafafa; color: #0b0b0b; box-shadow: inset 0 0 0 1px #0b0b0b; }

[data-mode="mono"] .theme-immersive .chapter { border-top-color: rgba(11, 11, 11, 0.1); }
[data-mode="mono"] .chapter__label::after { opacity: 0.15; }

[data-mode="mono"] :is(.compare, .principles li, .cap, .steps, .work-panel, .theme-immersive .work-panel, .enquiry, .work-item, .theme-immersive .work-item, .cta-band, .service-card, .ak-pose, .ak-outfit, .contact-panel) {
  background: #ffffff;
  border-color: rgba(11, 11, 11, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-mode="mono"] .cap::before,
[data-mode="mono"] .work-panel::before,
[data-mode="mono"] .tilt::after,
[data-mode="mono"] .ak-stage::before,
[data-mode="mono"] .ak-plush__img::before { display: none; }
[data-mode="mono"] .case__stage,
[data-mode="mono"] .ak-stage { background: none; }
[data-mode="mono"] :is(.principles b, .compare__new, .step__out, .cap__list li, .next-steps b, .ak-meta span, .ak-dims b, .ak-swatches b) { color: #0b0b0b; }
[data-mode="mono"] .compare__new::before { background: #0b0b0b; box-shadow: none; }
[data-mode="mono"] .cap__list li { background: transparent; border-color: rgba(11, 11, 11, 0.18); }
[data-mode="mono"] .steps::before { background: #0b0b0b; opacity: 0.2; }
[data-mode="mono"] .step__icon { background: #ffffff; border-color: #0b0b0b; box-shadow: none; }
[data-mode="mono"] .step:hover .step__icon { background: #0b0b0b; box-shadow: none; }
[data-mode="mono"] .step:hover .step__icon svg { stroke: #fafafa; }
[data-mode="mono"] .step__out { background: transparent; border-color: rgba(11, 11, 11, 0.25); }
[data-mode="mono"] .own { background: #0b0b0b; border-color: #0b0b0b; }
[data-mode="mono"] .own .own__title { color: #fafafa; }
@media (min-width: 769px) {
  html[data-mode="mono"] .theme-immersive .steps { background: transparent; }
}
[data-mode="mono"] .own li { color: rgba(250, 250, 250, 0.7); }
[data-mode="mono"] .own li::before { color: #fafafa; }

[data-mode="mono"] .theme-immersive .work-panel:hover { background: #ffffff; border-color: #0b0b0b; }
[data-mode="mono"] .work-panel__media,
[data-mode="mono"] .work-panel__media--aikyo { background: #f0f0ee; border-color: rgba(11, 11, 11, 0.12); }

[data-mode="mono"] .enquiry .field > span,
[data-mode="mono"] .enquiry legend { color: rgba(11, 11, 11, 0.6); }
[data-mode="mono"] .enquiry :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
  color: #0b0b0b;
  background: #fafafa;
  border-color: rgba(11, 11, 11, 0.18);
}
[data-mode="mono"] .enquiry :is(input, textarea)::placeholder { color: rgba(11, 11, 11, 0.35); }
[data-mode="mono"] .enquiry :is(input, textarea):focus { border-color: #0b0b0b; background: #ffffff; }
[data-mode="mono"] .chips span { border-color: rgba(11, 11, 11, 0.18); }
[data-mode="mono"] .chips label:hover span { border-color: #0b0b0b; color: #0b0b0b; }
[data-mode="mono"] .chips input:checked + span { background: #0b0b0b; color: #fafafa; border-color: #0b0b0b; }
[data-mode="mono"] .enquiry__status.is-ok,
[data-mode="mono"] .enquiry__status.is-error { color: #0b0b0b; }

[data-mode="mono"] .ak-moods button,
[data-mode="mono"] .ak-toggle button { background: #ffffff; border-color: rgba(11, 11, 11, 0.15); }
[data-mode="mono"] :is(.ak-moods, .ak-toggle) button:hover { color: #0b0b0b; border-color: #0b0b0b; }
[data-mode="mono"] :is(.ak-moods, .ak-toggle) button[aria-pressed="true"] { background: #0b0b0b; color: #fafafa; border-color: #0b0b0b; }
[data-mode="mono"] .ak-swatches i { border-color: rgba(11, 11, 11, 0.15); }
[data-mode="mono"] .device--laptop,
[data-mode="mono"] .device--phone { box-shadow: 0 24px 50px rgba(11, 11, 11, 0.18); }

[data-mode="mono"] .theme-immersive .site-footer {
  --text-primary: #fafafa;
  --text-muted: rgba(250, 250, 250, 0.6);
  --text-subtle: rgba(250, 250, 250, 0.4);
  --border-subtle: rgba(250, 250, 250, 0.12);
  background: #0b0b0b;
  color: #fafafa;
}
[data-mode="mono"] .footer-brand .wordmark { color: #fafafa; }

[data-mode="mono"] .cursor-ring { border-color: rgba(11, 11, 11, 0.5); mix-blend-mode: normal; }
[data-mode="mono"] .cursor-ring.is-hot { background: rgba(11, 11, 11, 0.06); border-color: #0b0b0b; }

[data-mode="mono"] .intro-screen { background: #fafafa; }
[data-mode="mono"].intro-exit .intro-screen { background: rgba(250, 250, 250, 0); }
[data-mode="mono"] .intro-screen__meta { color: rgba(11, 11, 11, 0.5); }
[data-mode="mono"] .intro-screen__count { color: #0b0b0b; }
[data-mode="mono"] .intro-screen__skip { border-color: rgba(11, 11, 11, 0.25); color: rgba(11, 11, 11, 0.7); }
[data-mode="mono"] .intro-screen__skip:hover { border-color: #0b0b0b; color: #0b0b0b; }
[data-mode="mono"] .intro-screen__word { filter: brightness(0) blur(8px); }
[data-mode="mono"] .intro-screen.is-formed .intro-screen__word { filter: brightness(0); }

@media (max-width: 768px) {
  [data-mode="mono"] .stage-hero__title .accent { -webkit-text-stroke-width: 2px; }
}