/* =========================================================
   Miya B Bookkeeping - Motion System v1.3.0

   Rebuilt for restraint. The previous system was expressive: a hexagon
   cursor, a bee flying down the page, a mouse-reactive canvas, film grain,
   magnetic buttons, character-by-character headings. Individually each was
   fine. Together they read as a personal project rather than a firm that
   handles other people's money.

   The reference points for this rebuild are the interfaces people already
   trust with financial data. What they share is not more motion, it is
   less motion executed precisely:

     1. SHORT.      Nothing on a primary path exceeds 420ms.
     2. SMALL.      Travel distances are 12-24px, not 44px. Motion should be
                    felt more than watched.
     3. CONSISTENT. Every transition in the product draws from the token
                    scale below. No ad-hoc durations.
     4. PURPOSEFUL. Motion communicates state, hierarchy or continuity. If it
                    only decorates, it was cut.
     5. FREE.       Nothing animates that cannot animate on the compositor.
                    Transform and opacity only on any per-frame path.

   Everything degrades to a static, fully readable page with no JavaScript
   and under prefers-reduced-motion.
   ========================================================= */

:root {
  /* ---- Easing -------------------------------------------------------
     Two curves, used everywhere. "Standard" for things entering or
     settling, "exit" for things leaving. The old bouncy --ease-drip is
     retained only so existing component CSS keeps working; nothing new
     should use it. */
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-exit:     cubic-bezier(.4, 0, 1, 1);
  --ease-emphasis: cubic-bezier(.16, 1, .3, 1);

  /* Legacy aliases, kept so preserved component styles do not break. */
  --ease-honey: var(--ease-standard);
  --ease-honey-in: var(--ease-exit);
  --ease-drip: var(--ease-standard);
  --ease-swarm: var(--ease-emphasis);

  /* ---- Duration scale -----------------------------------------------
     A 5-step scale. If a value is not on this scale it is a mistake. */
  --t-1: 100ms;   /* state flips: hover, focus, press          */
  --t-2: 180ms;   /* small movement: underline, icon, tooltip   */
  --t-3: 280ms;   /* component: card lift, dropdown, accordion  */
  --t-4: 420ms;   /* entrance: reveal, page-level arrival       */
  --t-5: 640ms;   /* ambient only: never on a primary path      */

  /* Legacy aliases. */
  --t-instant: var(--t-1);
  --t-quick: var(--t-2);
  --t-base: var(--t-4);
  --t-slow: var(--t-5);
  --t-epic: var(--t-5);

  /* ---- Travel --------------------------------------------------------- */
  --move-sm: 8px;
  --move-md: 16px;
  --move-lg: 24px;

  /* ---- Stagger -------------------------------------------------------- */
  --stagger: 55ms;

  /* ---- Elevation ------------------------------------------------------ */
  --glow-honey: 0 0 0 1px rgba(197, 138, 27, .18);
  --glow-deep: 0 0 0 1px rgba(197, 138, 27, .26);
  --amber-glass: rgba(255, 248, 231, .82);
  --lift-1: 0 1px 2px rgba(31, 27, 22, .06), 0 2px 8px rgba(31, 27, 22, .04);
  --lift-2: 0 2px 4px rgba(31, 27, 22, .06), 0 8px 24px rgba(31, 27, 22, .08);
  --lift-3: 0 4px 8px rgba(31, 27, 22, .07), 0 16px 40px rgba(31, 27, 22, .10);
}

/* Night hive palette. Surface tokens only; foreground tokens for inverted
   surfaces live in section 32 and deliberately do not flip. */
html[data-hive="night"] {
  --cream: #14110D;
  --cream-soft: #1A1611;
  --charcoal: #F6EEDC;
  --charcoal-soft: #E8DCC2;
  --slate: #BFB49C;
  --warm-gray: #948B78;
  --line: #352E22;
  --honey-pale: #3A2F18;
  --amber-glass: rgba(26, 22, 17, .82);
  --lift-1: 0 1px 2px rgba(0, 0, 0, .5);
  --lift-2: 0 2px 4px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .4);
  --lift-3: 0 4px 8px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .5);
  --shadow-sm: var(--lift-1);
  --shadow-md: var(--lift-2);
  --shadow-lg: var(--lift-3);
  color-scheme: dark;
}
html[data-hive="night"] body { background: var(--cream-soft); }
html[data-hive="night"] .honey-card,
html[data-hive="night"] .step-card,
html[data-hive="night"] .faq-item,
html[data-hive="night"] .form-card { background: #201B14; border-color: var(--line); }
html[data-hive="night"] .site-header { background: rgba(20, 17, 13, .86); }

html, body { transition: background-color var(--t-4) var(--ease-standard); }

/* =========================================================
   1. REVEAL
   One observer, four variants. Travel is deliberately short: the point is
   that content settles into place, not that it flies in.
   ========================================================= */

[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--t-4) var(--ease-standard),
    transform var(--t-4) var(--ease-standard);
}
[data-reveal="up"]    { transform: translate3d(0, var(--move-lg), 0); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translate3d(calc(var(--move-lg) * -1), 0, 0); }
[data-reveal="right"] { transform: translate3d(var(--move-lg), 0, 0); }
[data-reveal="scale"] { transform: scale(.98); }

[data-reveal].is-in { opacity: 1; transform: none; }

/* Grouped children arrive in sequence. Capped so a long grid never keeps
   the reader waiting on the last item. */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, var(--move-md), 0);
  transition:
    opacity var(--t-4) var(--ease-standard),
    transform var(--t-4) var(--ease-standard);
  transition-delay: calc(min(var(--i, 0), 7) * var(--stagger));
}
[data-stagger].is-in > * { opacity: 1; transform: none; }

/* =========================================================
   2. TYPE
   Headings reveal by line, not by character. Lines rise from behind a mask,
   which reads as typesetting rather than as an effect, and never renders
   text unreadable mid-animation.
   ========================================================= */

.lm-line { display: block; overflow: hidden; }
.lm-inner {
  display: block;
  transform: translate3d(0, 100%, 0);
  transition: transform var(--t-5) var(--ease-standard);
  transition-delay: calc(var(--li, 0) * 70ms);
}
[data-reveal="lines"] { opacity: 1; transform: none; }
[data-reveal="lines"].is-in .lm-inner { transform: none; }

/* A rule that draws under a heading once it has landed. */
.drip-rule { position: relative; display: inline-block; }
.drip-rule::after {
  content: "";
  position: absolute;
  left: 0; bottom: -.14em;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--honey-deep), var(--honey));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-5) var(--ease-standard) 160ms;
}
.is-in .drip-rule::after { transform: scaleX(1); }

/* =========================================================
   3. CONTROLS
   Buttons respond on press, not on approach. The magnetic pull and the
   material-style ripple were removed: both drew attention to the control
   instead of to the action, and the ripple in particular is a borrowed
   idiom that does not belong in this brand.
   ========================================================= */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    background-color var(--t-2) var(--ease-standard),
    color var(--t-2) var(--ease-standard),
    border-color var(--t-2) var(--ease-standard),
    box-shadow var(--t-2) var(--ease-standard),
    transform var(--t-1) var(--ease-standard);
}
/* Honey rises to fill the button on hover. One motion, one meaning. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--honey-light), var(--honey-deep));
  transform: translate3d(0, 100%, 0);
  transition: transform var(--t-3) var(--ease-standard);
}
.btn:hover::before { transform: none; }
.btn:hover { box-shadow: var(--lift-2); }
.btn:active { transform: scale(.985); transition-duration: 60ms; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* Pending state for anything that submits. */
.btn[data-pending="true"] { pointer-events: none; color: transparent !important; }
.btn[data-pending="true"]::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--cream);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Cards lift and gain a border. No tilt, no spotlight sweep. */
.honey-card, .step-card, .svc-mini, .form-card {
  transition:
    transform var(--t-3) var(--ease-standard),
    box-shadow var(--t-3) var(--ease-standard),
    border-color var(--t-3) var(--ease-standard);
}
.honey-card:hover, .svc-mini:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: var(--lift-3);
  border-color: var(--honey);
}
a.honey-card:active, .svc-mini:active { transform: translate3d(0, -1px, 0); transition-duration: 60ms; }

/* Links draw their underline from the left. */
.nav-menu a, .read-more, .footer-grid a, .hive-detail-go {
  position: relative;
  display: inline-block;
}
.nav-menu a::after, .read-more::after, .footer-grid a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t-2) var(--ease-standard);
}
.nav-menu a:hover::after, .read-more:hover::after, .footer-grid a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.read-more {
  transition: gap var(--t-2) var(--ease-standard);
}

/* =========================================================
   4. HEADER
   Solidifies on scroll. It no longer hides on scroll-down: a navigation
   bar that disappears is a small, constant tax on the reader, and on a site
   whose job is to get people to a consultation form the nav should always
   be one glance away.
   ========================================================= */

.site-header {
  transition:
    background-color var(--t-3) var(--ease-standard),
    box-shadow var(--t-3) var(--ease-standard),
    backdrop-filter var(--t-3) var(--ease-standard);
}
.site-header.is-stuck {
  background: var(--amber-glass);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 var(--line), var(--lift-1);
}

/* An indicator that slides between nav items rather than appearing under
   each one. Continuity of a single object reads as considered. */
.nav-indicator {
  position: absolute;
  bottom: 6px;
  height: 2px;
  background: var(--honey-deep);
  border-radius: 2px;
  opacity: 0;
  transform-origin: left center;
  transition:
    transform var(--t-3) var(--ease-standard),
    width var(--t-3) var(--ease-standard),
    opacity var(--t-2) var(--ease-standard);
  pointer-events: none;
}
.nav-indicator.is-on { opacity: 1; }

/* =========================================================
   5. SCROLL PROGRESS
   A 2px rule. The hexagon dial and the bee that flew down the page were
   removed: both asked to be looked at, which is the opposite of what a
   progress indicator is for.
   ========================================================= */

.miyab-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 9998;
  pointer-events: none;
  background: transparent;
}
.miyab-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--honey-deep);
}

.miyab-top {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 42px; height: 42px;
  z-index: 9990;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--amber-glass);
  backdrop-filter: blur(10px);
  color: var(--charcoal);
  cursor: pointer;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  pointer-events: none;
  transition:
    opacity var(--t-3) var(--ease-standard),
    transform var(--t-3) var(--ease-standard),
    border-color var(--t-2) var(--ease-standard);
}
.miyab-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.miyab-top:hover { border-color: var(--honey); }
.miyab-top svg { width: 16px; }

/* =========================================================
   6. HERO
   The mouse-reactive canvas is gone. It ran a draw loop over several
   hundred cells for the whole time the hero was on screen, and the
   interaction it offered was not one anyone came for.

   What remains is the same brand impression at zero per-frame cost: a
   tiled honeycomb that drifts, and a soft gradient. Both are pure CSS on
   the compositor.
   ========================================================= */

.hero, .page-hero { position: relative; overflow: hidden; isolation: isolate; }

.hero::before, .page-hero::before {
  content: "";
  position: absolute;
  inset: -10% -10% -10% -10%;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 90,27 90,73 50,95 10,73 10,27' fill='none' stroke='%23C58A1B' stroke-width='1.1' opacity='0.22'/%3E%3C/svg%3E");
  background-size: 76px 76px;
  animation: comb-drift 90s linear infinite;
  will-change: transform;
}
@keyframes comb-drift { to { transform: translate3d(76px, 76px, 0); } }

.hero .container, .page-hero .container { position: relative; z-index: 2; }

.miyab-mesh {
  position: absolute; inset: -20%;
  z-index: 0; pointer-events: none;
  filter: blur(54px);
  opacity: .5;
  contain: paint;
}
.miyab-mesh b {
  position: absolute;
  display: block;
  width: 46%; height: 46%;
  border-radius: 50%;
  mix-blend-mode: multiply;
  will-change: transform;
}
.miyab-mesh b:nth-child(1) { background: var(--honey-light); top: 4%;  left: 2%;  animation: mesh-a 26s ease-in-out infinite alternate; }
.miyab-mesh b:nth-child(2) { background: var(--honey-pale);  top: 34%; left: 52%; animation: mesh-b 31s ease-in-out infinite alternate; }
.miyab-mesh b:nth-child(3) { background: var(--honey);       top: 52%; left: 18%; animation: mesh-c 37s ease-in-out infinite alternate; }
@keyframes mesh-a { to { transform: translate3d(22%, 18%, 0) scale(1.18); } }
@keyframes mesh-b { to { transform: translate3d(-20%, 12%, 0) scale(.86); } }
@keyframes mesh-c { to { transform: translate3d(12%, -18%, 0) scale(1.12); } }

/* Hero content arrives over already-painted markup. No loader, ever. */
.hero-entrance > * {
  opacity: 0;
  transform: translate3d(0, var(--move-md), 0);
  animation: rise var(--t-5) var(--ease-standard) forwards;
}
.hero-entrance > *:nth-child(1) { animation-delay: 40ms; }
.hero-entrance > *:nth-child(2) { animation-delay: 110ms; }
.hero-entrance > *:nth-child(3) { animation-delay: 180ms; }
.hero-entrance > *:nth-child(4) { animation-delay: 250ms; }
.hero-entrance > *:nth-child(n+5) { animation-delay: 320ms; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Very shallow depth on hero decoration only. */
[data-parallax] { will-change: transform; }

/* =========================================================
   7. NAVIGATION
   No loader, no overlay, no held navigation. The outgoing page fades while
   the browser is already fetching. Where the browser supports cross-document
   view transitions, it uses them instead and this becomes a true crossfade.
   ========================================================= */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 120ms var(--ease-exit) both; }
::view-transition-new(root) { animation: vt-in var(--t-3) var(--ease-standard) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } }

body > section, body > main, body > .container {
  transition: opacity 140ms var(--ease-exit);
}
body.is-leaving > section,
body.is-leaving > main,
body.is-leaving > .container { opacity: 0; }

/* =========================================================
   8. DATA
   ========================================================= */

.counting { font-variant-numeric: tabular-nums; }

.miyab-bar { position: relative; height: 8px; background: var(--honey-pale); border-radius: 99px; overflow: hidden; }
.miyab-bar i {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--honey-deep);
  border-radius: 99px;
  transition: transform var(--t-5) var(--ease-standard);
}
.is-in .miyab-bar i { transform: scaleX(var(--v, 1)); }

/* Skeleton placeholder for modules that build after paint. */
.miyab-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--honey-pale);
  border-radius: 8px;
  min-height: 14px;
}
.miyab-skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 253, 245, .55), transparent);
  animation: shimmer 1.4s var(--ease-standard) infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* =========================================================
   9. FORMS
   The lead forms are the point of the site, so they get the most
   considered interaction work on it.
   ========================================================= */

.form-card input,
.form-card select,
.form-card textarea,
form[data-miyab-form="1"] input,
form[data-miyab-form="1"] select,
form[data-miyab-form="1"] textarea {
  transition:
    border-color var(--t-2) var(--ease-standard),
    box-shadow var(--t-2) var(--ease-standard),
    background-color var(--t-2) var(--ease-standard);
}
form[data-miyab-form="1"] input:focus,
form[data-miyab-form="1"] select:focus,
form[data-miyab-form="1"] textarea:focus {
  border-color: var(--honey-deep);
  box-shadow: 0 0 0 3px rgba(229, 166, 35, .18);
  outline: none;
}
/* A field the visitor has completed acquires a quiet confirmation. */
form[data-miyab-form="1"] .is-filled input,
form[data-miyab-form="1"] .is-filled select,
form[data-miyab-form="1"] .is-filled textarea { border-color: var(--honey); }

form[data-miyab-form="1"] .field-error {
  display: block;
  margin-top: 6px;
  font-size: .82rem;
  color: #8A1F11;
  opacity: 0;
  transform: translate3d(0, -4px, 0);
  transition: opacity var(--t-2) var(--ease-standard), transform var(--t-2) var(--ease-standard);
}
form[data-miyab-form="1"] .has-error .field-error { opacity: 1; transform: none; }
form[data-miyab-form="1"] .has-error input,
form[data-miyab-form="1"] .has-error select,
form[data-miyab-form="1"] .has-error textarea { border-color: #8A1F11; }

.miyab-form-error {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #FDECEA;
  border: 1px solid #F5C6C0;
  color: #8A1F11;
  font-size: .95rem;
  line-height: 1.5;
}
.miyab-form-error[hidden] { display: none; }

/* Branch switch between Individuals and Businesses. */
[data-form-type] { transition: opacity var(--t-3) var(--ease-standard); }
[data-form-type][hidden] { display: none; }
.form-toggle .ft-btn { transition: background-color var(--t-2) var(--ease-standard), color var(--t-2) var(--ease-standard); }

/* =========================================================
   10. TOAST
   ========================================================= */

.miyab-toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translate3d(-50%, 120%, 0);
  background: var(--ink, #1F1B16); color: var(--on-ink-strong, #FFF8E7);
  padding: 12px 20px; border-radius: 8px;
  font-size: .88rem; z-index: 10003;
  box-shadow: var(--lift-3);
  transition: transform var(--t-3) var(--ease-standard);
}
.miyab-toast.is-up { transform: translate3d(-50%, 0, 0); }

/* =========================================================
   11. FOCUS + MOTION SAFETY
   ========================================================= */

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--honey-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Skip link. Keyboard users should not traverse a 9-item nav on every page. */
.miyab-skip {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 10010;
  padding: 12px 18px;
  background: var(--ink, #1F1B16);
  color: var(--on-ink-strong, #FFF8E7);
  border-radius: 0 0 8px 8px;
  font-size: .9rem;
  transition: top var(--t-2) var(--ease-standard);
}
.miyab-skip:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-stagger] > *, .lm-inner, .hero-entrance > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero::before, .page-hero::before, .miyab-mesh { display: none !important; }
  body.is-leaving > section, body.is-leaving > main { opacity: 1 !important; }
}

@media (hover: none) {
  .miyab-mesh { filter: blur(38px); }
  .honey-card:hover, .svc-mini:hover { transform: none; }
}

/* =========================================================
   10. MARQUEE
   ========================================================= */

.miyab-marquee {
  overflow: hidden;
  display: flex;
  gap: 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  padding: 18px 0;
}
.miyab-marquee-track {
  display: flex;
  flex: 0 0 auto;
  gap: 42px;
  padding-right: 42px;
  animation: marquee-run var(--dur, 38s) linear infinite;
  will-change: transform;
}
.miyab-marquee:hover .miyab-marquee-track { animation-play-state: paused; }
.miyab-marquee[data-dir="rtl"] .miyab-marquee-track { animation-direction: reverse; }
@keyframes marquee-run { to { transform: translate3d(-100%, 0, 0); } }
.miyab-marquee-item {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--charcoal);
  white-space: nowrap;
}
.miyab-marquee-item svg { width: 22px; flex: 0 0 auto; }

/* =========================================================
   11. COMMAND PALETTE
   ========================================================= */

.miyab-palette {
  position: fixed; inset: 0;
  z-index: 10002;
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
  background: rgba(31, 27, 22, .42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity var(--t-quick) var(--ease-honey);
}
.miyab-palette.is-mounted { display: flex; }
.miyab-palette.is-open { opacity: 1; }
.miyab-palette-box {
  width: min(660px, 100%);
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translate3d(0, -22px, 0) scale(.97);
  opacity: 0;
  transition: transform var(--t-base) var(--ease-drip), opacity var(--t-quick) ease;
}
.miyab-palette.is-open .miyab-palette-box { transform: none; opacity: 1; }
.miyab-palette-input {
  width: 100%;
  border: 0; outline: 0;
  padding: 22px 24px;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  color: var(--charcoal);
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.miyab-palette-list { max-height: 46vh; overflow-y: auto; padding: 8px; }
.miyab-palette-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color var(--t-instant) ease, transform var(--t-instant) var(--ease-drip);
}
.miyab-palette-item:hover, .miyab-palette-item.is-active {
  background: var(--honey-pale);
  transform: translateX(4px);
}
.miyab-palette-item .pi-hex { width: 22px; flex: 0 0 auto; opacity: .75; }
.miyab-palette-item .pi-title { font-weight: 600; font-size: .96rem; }
.miyab-palette-item .pi-kind {
  margin-left: auto;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--warm-gray);
}
.miyab-palette-foot {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  font-size: .74rem; color: var(--warm-gray);
}
.miyab-palette-foot kbd {
  font-family: var(--font-sans);
  background: var(--honey-pale);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: .7rem;
}
.miyab-palette-empty { padding: 34px 24px; text-align: center; color: var(--warm-gray); }

/* Palette trigger pill */
.miyab-search-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: 99px;
  padding: 7px 14px;
  font-size: .8rem;
  color: var(--warm-gray);
  cursor: pointer;
  transition: all var(--t-quick) var(--ease-honey);
}
.miyab-search-pill:hover { border-color: var(--honey); color: var(--charcoal); transform: translateY(-1px); }
.miyab-search-pill kbd {
  font-family: var(--font-sans);
  background: var(--honey-pale);
  border-radius: 4px; padding: 1px 5px; font-size: .7rem;
}

/* =========================================================
   12. THEME TOGGLE
   ========================================================= */

.miyab-hive-toggle {
  position: relative;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--cream);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all var(--t-quick) var(--ease-drip);
  overflow: hidden;
}
.miyab-hive-toggle:hover { border-color: var(--honey); transform: rotate(18deg) scale(1.06); }
.miyab-hive-toggle svg { width: 20px; transition: transform var(--t-base) var(--ease-drip), opacity var(--t-quick) ease; }
.miyab-hive-toggle .icon-night { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.4); }
html[data-hive="night"] .miyab-hive-toggle .icon-day { opacity: 0; transform: rotate(90deg) scale(.4); }
html[data-hive="night"] .miyab-hive-toggle .icon-night { opacity: 1; transform: none; }

/* =========================================================
   13. FEATURE MODULES
   ========================================================= */

.miyab-module {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cream-soft);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
}
.miyab-module::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 90,27 90,73 50,95 10,73 10,27' fill='none' stroke='%23C58A1B' stroke-width='1' opacity='0.18'/%3E%3C/svg%3E");
  background-size: 76px 76px;
  pointer-events: none;
  opacity: .5;
}
.miyab-module > * { position: relative; z-index: 1; }
.miyab-module-head { padding: 30px 32px 8px; }
.miyab-module-head h3 { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1.15; margin-bottom: 6px; }
.miyab-module-head p { color: var(--slate); font-size: .95rem; }
.miyab-module-body { padding: 22px 32px 32px; }

/* Health score dial */
.miyab-dial { display: grid; place-items: center; position: relative; }
.miyab-dial svg { width: 210px; height: 210px; transform: rotate(-90deg); }
.miyab-dial .dial-track { fill: none; stroke: var(--honey-pale); stroke-width: 14; }
.miyab-dial .dial-fill {
  fill: none; stroke: var(--honey); stroke-width: 14; stroke-linecap: round;
  transition: stroke-dashoffset var(--t-5) var(--ease-standard), stroke var(--t-3) var(--ease-standard);
  filter: drop-shadow(0 0 10px rgba(229, 166, 35, .45));
}
.miyab-dial-value {
  position: absolute;
  text-align: center;
}
.miyab-dial-value b { display: block; font-family: var(--font-serif); font-size: 3.4rem; line-height: 1; }
.miyab-dial-value span { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--warm-gray); }

.miyab-q { display: none; }
.miyab-q.is-active { display: block; animation: q-in .5s var(--ease-honey); }
@keyframes q-in { from { opacity: 0; transform: translate3d(26px, 0, 0); } }
.miyab-q h4 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 16px; }
.miyab-opt {
  display: block; width: 100%; text-align: left;
  padding: 14px 18px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--cream-soft);
  font-family: var(--font-sans); font-size: .95rem; color: var(--charcoal);
  cursor: pointer;
  transition: all var(--t-quick) var(--ease-drip);
}
.miyab-opt:hover { border-color: var(--honey); background: var(--honey-pale); transform: translateX(6px); }
.miyab-opt.is-picked { border-color: var(--honey-deep); background: var(--honey-pale); }
.miyab-steps { display: flex; gap: 6px; margin-bottom: 22px; }
.miyab-steps i {
  height: 4px; flex: 1; border-radius: 99px; background: var(--line);
  transition: background-color var(--t-base) var(--ease-honey);
}
.miyab-steps i.is-done { background: var(--honey); }

/* Range slider styling for calculators */
.miyab-range { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 99px; background: var(--honey-pale); outline: none; }
.miyab-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--honey-deep); border: 3px solid var(--cream-soft);
  box-shadow: var(--shadow-sm); cursor: grab;
  transition: transform var(--t-quick) var(--ease-drip);
}
.miyab-range::-webkit-slider-thumb:hover { transform: scale(1.18); }
.miyab-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(.96); }
.miyab-range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--honey-deep); border: 3px solid var(--cream-soft); cursor: grab;
}
.miyab-field-row { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.miyab-field label { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--warm-gray); margin-bottom: 10px; }
.miyab-readout { font-family: var(--font-serif); font-size: 2.6rem; line-height: 1.1; color: var(--honey-deep); }
.miyab-readout small { display: block; font-family: var(--font-sans); font-size: .8rem; color: var(--warm-gray); letter-spacing: .1em; text-transform: uppercase; }

/* Before / after ledger drag */
.miyab-compare { position: relative; border-radius: 16px; overflow: hidden; cursor: ew-resize; user-select: none; border: 1px solid var(--line); }
.miyab-compare-pane { position: relative; }
.miyab-compare-pane.after {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--split, 50%));
}
.miyab-compare-handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 3px; background: var(--honey);
  box-shadow: var(--glow-honey);
  z-index: 3;
}
.miyab-compare-handle::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  background: var(--honey); border-radius: 50%;
  box-shadow: var(--shadow-md);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  transition: transform var(--t-quick) var(--ease-drip);
}
.miyab-compare:hover .miyab-compare-handle::after { transform: scale(1.15) rotate(30deg); }
.miyab-compare-tag {
  position: absolute; top: 14px;
  padding: 5px 12px; border-radius: 99px;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  z-index: 4;
}
.miyab-compare-tag.l { left: 14px; background: rgba(138, 31, 17, .12); color: #8A1F11; }
.miyab-compare-tag.r { right: 14px; background: rgba(26, 127, 55, .12); color: #1a7f37; }
.ledger-row { display: flex; justify-content: space-between; padding: 9px 16px; font-size: .84rem; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ledger-row.bad { color: #8A1F11; }
.ledger-row.good { color: var(--charcoal); }

/* Timeline with a line that draws as you scroll */
.miyab-timeline { position: relative; padding-left: 42px; }
.miyab-timeline::before {
  content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line);
}
.miyab-timeline::after {
  content: ""; position: absolute; left: 13px; top: 6px;
  width: 2px; height: var(--draw, 0%);
  background: linear-gradient(180deg, var(--honey-deep), var(--honey));
  transition: height .1s linear;
}
.miyab-tl-item { position: relative; padding-bottom: 34px; }
.miyab-tl-item::before {
  content: ""; position: absolute; left: -35px; top: 4px;
  width: 16px; height: 16px; background: var(--cream-soft);
  border: 2px solid var(--honey); border-radius: 50%;
  transform: scale(0); transition: transform var(--t-base) var(--ease-drip);
}
.miyab-tl-item.is-in::before { transform: scale(1); }

/* Easter egg swarm */

/* Toast */
.miyab-toast {
  position: fixed; left: 50%; bottom: 34px;
  transform: translate3d(-50%, 130%, 0);
  background: var(--charcoal); color: var(--cream);
  padding: 13px 22px; border-radius: 99px;
  font-size: .88rem; z-index: 10003;
  box-shadow: var(--shadow-lg);
  transition: transform var(--t-base) var(--ease-drip);
}
.miyab-toast.is-up { transform: translate3d(-50%, 0, 0); }

/* =========================================================
   14. ACCESSIBILITY + PERFORMANCE GUARDS
   ========================================================= */

/* Reduced-motion and touch handling is centralised in section 11 of the
   rebuilt layer above. The blocks that used to sit here referenced the
   custom cursor, film grain and scroll bee, all removed in v1.3.0. */

/* Focus states stay obvious. Motion never removes an affordance. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--honey-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   15. NATIVE DETAILS ACCORDION
   The FAQ uses <details class="faq-item">. Keep the semantics, replace
   the default disclosure triangle with a rotating honey marker.
   ========================================================= */

details.faq-item > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: color var(--t-quick) var(--ease-honey);
}
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary::marker { content: ""; }
details.faq-item > summary:hover { color: var(--honey-deep); }
details.faq-item .faq-marker {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--honey-deep);
  transition: transform .42s var(--ease-drip);
}
details.faq-item.is-open > summary .faq-marker,
details.faq-item[open] > summary .faq-marker { transform: rotate(135deg); }
details.faq-item {
  transition: border-color var(--t-quick) var(--ease-honey),
              box-shadow var(--t-quick) var(--ease-honey);
}
details.faq-item.is-open, details.faq-item[open] {
  border-color: var(--honey);
  box-shadow: var(--shadow-md);
}

/* =========================================================
   31. HEADER LAYOUT (v1.2.1)

   The header broke in three ways at once:

   1. The tools group was inserted before .mobile-toggle, placing it between
      the brand and the nav, and it carried an inline margin-left:auto that
      took the brand's remaining space until "Miya B Bookkeeping" wrapped.
   2. .site-header had a hard height of 76px, so once the brand wrapped the
      text spilled above and below the bar instead of the bar growing.
   3. Nothing prevented wrapping, and a 1180px container is not wide enough
      for eight nav items plus the tools plus the CTA button.

   The insertion point is fixed in features.js. This handles the rest.
   ========================================================= */

header.site-header {
  height: auto;
  min-height: var(--header-h);
}

header.site-header .nav-wrap {
  height: auto;
  min-height: var(--header-h);
  max-width: 1340px;
  gap: 18px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Brand keeps its natural width and never wraps. */
header.site-header .brand {
  flex: 0 0 auto;
  min-width: 0;
}
header.site-header .brand-name { white-space: nowrap; line-height: 1.12; }
header.site-header .brand-name small { white-space: nowrap; margin-top: 1px; }
header.site-header .brand-mark { flex: 0 0 auto; width: 46px; }
header.site-header .brand-mark svg { width: 100%; height: auto; display: block; }

/* Nav is pushed right; the tools now follow it in the DOM. */
header.site-header .nav-menu {
  margin-left: auto;
  flex-wrap: nowrap;
  gap: 22px;
}
header.site-header .nav-menu a { white-space: nowrap; }
header.site-header .nav-menu .btn-cta {
  white-space: nowrap;
  line-height: 1.2;
  padding: 10px 18px;
}

.miyab-header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

header.site-header .miyab-hive-toggle { width: 40px; height: 40px; }
header.site-header .miyab-search-pill { padding: 6px 12px; font-size: .78rem; }

/* Tighten progressively rather than overflow. */
@media (max-width: 1400px) {
  header.site-header .nav-menu { gap: 18px; }
  header.site-header .brand { font-size: 1.2rem; }
}
@media (max-width: 1240px) {
  header.site-header .nav-menu { gap: 14px; font-size: .94rem; }
  header.site-header .miyab-search-pill { display: none; }
  header.site-header .brand-name small { display: none; }
}
@media (max-width: 1080px) {
  header.site-header .brand-name { font-size: 1.05rem; }
  header.site-header .nav-menu { gap: 11px; font-size: .88rem; }
}

/* Mobile: nav becomes the drop-down panel, tools sit beside the hamburger. */
@media (max-width: 900px) {
  header.site-header .nav-wrap { justify-content: space-between; gap: 12px; }
  header.site-header .miyab-header-tools { order: 1; margin-left: auto; }
  header.site-header .mobile-toggle { order: 2; }
  header.site-header .nav-menu { order: 3; }
  header.site-header .brand-name small { display: block; }
  header.site-header .miyab-search-pill { display: none; }
}

/* =========================================================
   32. INVERTED SURFACES (v1.2.3)

   The bug: the footer's background is var(--charcoal) while its text is
   hardcoded rgba(255,248,231,...). Night mode redefines --charcoal to a
   light cream, so the background flipped light while the text stayed
   near-white. Result: white text on cream. The h4 headings stayed legible
   only because they use var(--cream), which flipped the other way.

   The same fault affects every surface that is meant to be permanently
   dark: the CTA banner, section.dark, and the primary buttons.

   The fix: these are not theme surfaces, they are INVERTED surfaces. They
   should stay dark in both themes. They now use their own tokens which do
   not flip, so text and background can never invert independently again.
   ========================================================= */

:root {
  --ink: #1F1B16;                        /* permanently dark surface        */
  --ink-2: #2A2520;                      /* gradient partner                */
  --on-ink: rgba(255, 248, 231, .86);    /* body text on ink                */
  --on-ink-strong: #FFF8E7;              /* headings on ink                 */
  --on-ink-muted: rgba(255, 248, 231, .64);
  --on-ink-rule: rgba(255, 248, 231, .14);
}
html[data-hive="night"] {
  --ink: #14100B;
  --ink-2: #1E1912;
  /* Foreground tokens deliberately unchanged: the surface stays dark, so
     the text on it must stay light in both themes. */
}

/* ---- Footer ---- */
footer.site-footer {
  background: var(--ink);
  color: var(--on-ink);
}
footer.site-footer h4 { color: var(--on-ink-strong); }
footer.site-footer p,
footer.site-footer li,
footer.site-footer a { color: var(--on-ink); }
footer.site-footer a:hover { color: var(--honey-light); }
.footer-brand .brand { color: var(--on-ink-strong); }
.footer-brand .brand small { color: var(--on-ink-muted); }
.footer-bottom {
  color: var(--on-ink-muted);
  border-top-color: var(--on-ink-rule);
}
.footer-bottom a { color: var(--on-ink-muted); }
.footer-bottom a:hover { color: var(--honey-light); }
.social-icons a { color: var(--on-ink); border-color: var(--on-ink-rule); }
.social-icons a:hover { color: var(--honey-light); border-color: var(--honey); }
footer.site-footer .newsletter input {
  background: var(--ink-2);
  color: var(--on-ink-strong);
  border: 1px solid var(--on-ink-rule);
}
footer.site-footer .newsletter input::placeholder { color: var(--on-ink-muted); }

/* ---- CTA banner ---- */
.cta-banner {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--on-ink);
}
.cta-banner h2 { color: var(--on-ink-strong); }
.cta-banner p { color: var(--on-ink); }

/* ---- Dark sections ---- */
section.dark { background: var(--ink); color: var(--on-ink); }
section.dark h1,
section.dark h2,
section.dark h3 { color: var(--on-ink-strong); }
.honeycomb-cluster .hex.dark { background: var(--ink); color: var(--on-ink-strong); }

/* ---- Buttons that sit on honey or ink ---- */
.btn-primary,
.nav-menu a.btn-cta,
.btn-cta { color: var(--on-ink-strong); }
.btn-cta:hover { background: var(--ink); color: var(--on-ink-strong); }
.form-toggle .ft-btn.active { color: var(--on-ink-strong); }

/* Night mode: cards and inputs need a real surface, not a flipped variable. */
html[data-hive="night"] .newsletter input,
html[data-hive="night"] input,
html[data-hive="night"] select,
html[data-hive="night"] textarea {
  background: #201B14;
  color: var(--charcoal);
  border-color: var(--line);
}
html[data-hive="night"] input::placeholder,
html[data-hive="night"] textarea::placeholder { color: var(--warm-gray); }

/* =========================================================
   33. PORTRAIT (v1.3.1)

   The portrait frame is a hexagon rather than a circle. The hexagon is
   already the brand's shape: it is in the logo mark, the bee badge, the
   background pattern and the service explorer. A circle here was the one
   place the shape broke.

   Construction: the outer element carries the gold edge and is clipped to
   a hexagon; the image inside is clipped to the same polygon at a slightly
   smaller box, which produces a concentric rim. box-shadow does not render
   on a clipped element, so depth comes from a drop-shadow filter instead.
   ========================================================= */

.miya-photo-frame {
  position: relative;
  width: 240px;
  /* Pointy-top hexagon: height = width x 2/sqrt(3). */
  height: 277px;
  margin: 0 auto 22px;
}

.miya-photo-hex {
  width: 100%;
  height: 100%;
  padding: 4px;
  box-sizing: border-box;
  background: linear-gradient(155deg, var(--honey), var(--honey-deep));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  filter: drop-shadow(0 10px 24px rgba(31, 27, 22, .18));
  transition: transform var(--t-3) var(--ease-standard),
              filter var(--t-3) var(--ease-standard);
}

.miya-photo-frame:hover .miya-photo-hex {
  transform: translate3d(0, -3px, 0);
  filter: drop-shadow(0 16px 32px rgba(31, 27, 22, .24));
}

.miya-photo,
.miya-photo-fallback {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.miya-photo {
  display: block;
  object-fit: cover;
  object-position: center center;
  background: var(--cream-soft);
}

.miya-photo-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--cream-soft);
  font-family: var(--font-serif);
  font-size: 4.6rem;
  font-weight: 600;
  color: var(--honey-deep);
}

/* The bee badge sits on the frame, outside the clipped element, so it is
   not cut off by the hexagon. */
.miya-photo-frame::after {
  bottom: 18px;
  right: -6px;
}

@media (max-width: 600px) {
  .miya-photo-frame { width: 196px; height: 226px; }
  .miya-photo-fallback { font-size: 3.6rem; }
  .miya-photo-frame::after { bottom: 12px; right: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .miya-photo-frame:hover .miya-photo-hex { transform: none; }
}