body { margin: 0; }
  a { text-decoration: none; }
  :root {
    --ground: #EAEBE4; --panel: #F3F4EE; --panel-2: #E4E5DB; --ink: #191C1A; --ink-strong: #000000;
    --muted: #5E635C; --faint: #5E635C; --rule: #C9CCC2;
    --accent: #17392D; --accent-hover: #20493A; --accent-light: #4C8A6E; --accent-tint: rgba(23,57,45,.08); --on-accent: #F3F4EE;
    --warn: #7A4D1C; --warn-tint: rgba(140,90,34,.11); --mint: #8FD4B4;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground: #14170F; --panel: #1B1F16; --panel-2: #12150E; --ink: #E9EAE2; --ink-strong: #FFFFFF;
      --muted: #9A9E92; --faint: #6E7267; --rule: #2E3327;
      --accent: #4C8A6E; --accent-hover: #5FA382; --accent-light: #86C4A7; --accent-tint: rgba(76,138,110,.14); --on-accent: #14170F;
      --warn: #C99A5C; --warn-tint: rgba(201,154,92,.14); --mint: #2C5E48;
    }
  }
  :root[data-theme="dark"] {
    --ground: #14170F; --panel: #1B1F16; --panel-2: #12150E; --ink: #E9EAE2; --ink-strong: #FFFFFF;
    --muted: #9A9E92; --faint: #6E7267; --rule: #2E3327;
    --accent: #4C8A6E; --accent-hover: #5FA382; --accent-light: #86C4A7; --accent-tint: rgba(76,138,110,.14); --on-accent: #14170F;
    --warn: #C99A5C; --warn-tint: rgba(201,154,92,.14); --mint: #2C5E48;
  }
  /* the green band inverts in dark mode: same structure, dark ground + cream ink */
  [data-theme="dark"] .band, :root:not([data-theme="light"]) .band {
    --accent-hover: #12150E; --accent: #1B1F16; --accent-light: #86C4A7; --on-accent: #E9EAE2; --mint: #86C4A7;
  }
  html { background: var(--ground); }
  body { background: var(--ground); color: var(--ink); font-family: 'Work Sans', sans-serif; min-height: 100vh; }
  .fig { font-variant-numeric: tabular-nums; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .rv { opacity: 1 !important; transform: none !important; } }
  @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr !important; align-items: start !important; } }
  @media (max-width: 760px) {
    .bento, .fit-grid, .sec-head, .start-grid, .calc-grid, .stage-body, .foot-grid { grid-template-columns: 1fr !important; }
    /*
     * The bento cards use height:100% to stay equal-height in the desktop
     * 2x2 grid. Once the grid collapses to one column above, equal-height
     * stretching no longer serves any purpose, and a grid/flex stretch quirk
     * was resolving that 100% shorter than the MoOps card's actual content
     * (it stacks more elements than its siblings: a tagline, disclosure
     * text, and a link none of the others have), so its "Visit MoOps" link
     * spilled past the card's own background onto the section below.
     */
    .bento .card-hover { height: auto !important; }
  }
  .card-hover { transition: transform 140ms cubic-bezier(.2,0,0,1), border-color 140ms cubic-bezier(.2,0,0,1); }
  .card-hover:hover { transform: translateY(-3px); }
  .rv { opacity: 0; transform: translateY(12px); transition: opacity 420ms cubic-bezier(.2,0,0,1), transform 420ms cubic-bezier(.2,0,0,1); }
  .rv.in { opacity: 1; transform: none; }
  .hrow:hover { background: rgba(127,196,164,.10); }
  @keyframes leakPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
  .leak { animation: leakPulse 1.1s cubic-bezier(.2,0,0,1) 3 both; }
  @keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .marq { display: flex; width: max-content; animation: marq 46s linear infinite; }
  .marq:hover { animation-play-state: paused; }
  .fitline { font-family: 'Archivo', sans-serif; font-weight: 800; line-height: 0.95; letter-spacing: -0.042em; white-space: nowrap; transition: color 620ms cubic-bezier(.2,0,0,1); }
  @media (max-width: 700px) { .fitline { letter-spacing: -0.03em; } }
  @media (max-width: 700px) { .hl-wrap .fitline { white-space: normal; font-size: clamp(36px, 11.5vw, 56px) !important; line-height: 1.02; } .hl-wrap .fitline span { display: block; text-wrap: balance; } .hl-wrap .fitline + .fitline { margin-top: 0.18em; } }
  @keyframes scanline { from { transform: translateY(-44px); } to { transform: translateY(100%); } }
  .scan { animation: scanline 820ms cubic-bezier(.2,0,0,1) 120ms 1 both; }
  input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; background: rgba(243,244,238,.28); width: 100%; outline: none; }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: var(--mint); cursor: grab; border: none; }
  input[type=range]::-moz-range-thumb { width: 20px; height: 20px; background: var(--mint); cursor: grab; border: none; border-radius: 0; }
  #contact input::placeholder, #contact textarea::placeholder { color: var(--faint); }
  #flight { position: fixed; z-index: 4; pointer-events: none; }
  #bee { pointer-events: auto; cursor: pointer; }
  #bee:focus { outline: none; }
  #tip { opacity: 0; transition: opacity 90ms cubic-bezier(.2,0,0,1); }
  #tip.on { opacity: 1; }
  #beehalo { opacity: 0; transition: opacity 90ms cubic-bezier(.2,0,0,1); }
  #bee:hover #beehalo, #bee:focus-visible #beehalo { opacity: 1; }
  #totop { position: fixed; right: 20px; bottom: 20px; z-index: 6; display: none; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--rule); color: var(--ink); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 12px 14px; cursor: pointer; transition: border-color 90ms cubic-bezier(.2,0,0,1), color 90ms cubic-bezier(.2,0,0,1); }
  #totop:hover { border-color: var(--accent); color: var(--accent); }
  #totop.on { display: flex; }
  .disc summary { list-style: none; cursor: pointer; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 8px; min-height: 32px; transition: color 90ms cubic-bezier(.2,0,0,1); }
  .disc summary::-webkit-details-marker { display: none; }
  .disc summary::after { content: "+"; font-size: 15px; line-height: 1; }
  .disc[open] summary::after { content: "\2013"; }
  .disc summary:hover { color: var(--ink); }
  .disc.on-accent summary { color: var(--mint); }
  .disc.on-accent summary:hover { color: var(--on-accent); }
  .disc[open] summary { margin-bottom: 12px; }
  .soc {
    color: var(--muted);
    transition: border-color 90ms cubic-bezier(.2,0,0,1), color 90ms cubic-bezier(.2,0,0,1),
                background 90ms cubic-bezier(.2,0,0,1), transform 140ms cubic-bezier(.2,0,0,1);
  }
  .soc:hover, .soc:focus-visible { border-color: var(--accent); background: var(--accent); color: var(--on-accent); transform: translateY(-3px); }
  .soc:active { transform: translateY(0); background: var(--accent-hover); }
  .soc:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .soc svg { width: 24px; height: 24px; }
  @media (prefers-reduced-motion: reduce) { .soc:hover, .soc:focus-visible { transform: none; } }
  .foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 34px; }
  .foot-social { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
  @keyframes wingBeat { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.35); } }
  .wing { transform-origin: 0 0; animation: wingBeat 110ms linear infinite; animation-play-state: paused; }
  #bee.flying .wing { animation-play-state: running; }
  @keyframes bkFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes bkRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .bk-scrim { animation: bkFade 180ms cubic-bezier(.2,0,0,1) both; }
  .bk-panel { animation: bkRise 260ms cubic-bezier(.2,0,0,1) both; }
  .bk-field { background: var(--panel); border: 1px solid var(--rule); color: var(--ink); font-family: 'Work Sans', sans-serif; font-size: 15px; padding: 12px 14px; width: 100%; box-sizing: border-box; transition: border-color 90ms cubic-bezier(.2,0,0,1); }
  .bk-field:focus { border-color: var(--accent); outline: none; }
  .bk-field::placeholder { color: var(--faint); }
  .bk-label { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .bk-chip { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule); background: var(--panel); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; transition: color 90ms cubic-bezier(.2,0,0,1), border-color 90ms cubic-bezier(.2,0,0,1), background 90ms cubic-bezier(.2,0,0,1); position: relative; }
  .bk-chip input { position: absolute; opacity: 0; pointer-events: none; }
  .bk-chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .bk-chip:has(input:focus-visible) { border-color: var(--accent); }

  a.nav-link { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.05em; color: var(--muted); transition: color 90ms cubic-bezier(.2,0,0,1); }
  a.nav-link:hover { color: var(--ink); }
  a.nav-link:focus-visible { outline: 2px solid var(--accent); }
  a.btn-primary { font-family: 'Archivo', sans-serif; font-weight: 700; background: var(--accent); color: var(--on-accent); transition: background 90ms cubic-bezier(.2,0,0,1); }
  a.btn-primary:hover { background: var(--accent-hover); }
  a.btn-primary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  button.btn-outline { font-family: 'Archivo', sans-serif; font-weight: 700; background: transparent; border: 1px solid var(--rule); color: var(--ink); cursor: pointer; transition: border-color 90ms cubic-bezier(.2,0,0,1), color 90ms cubic-bezier(.2,0,0,1); }
  button.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
  button.btn-outline:focus-visible { outline: 2px solid var(--accent); }
  button.theme-toggle { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.05em; background: transparent; border: 1px solid var(--rule); color: var(--muted); padding: 8px 10px; cursor: pointer; transition: color 90ms cubic-bezier(.2,0,0,1), border-color 90ms cubic-bezier(.2,0,0,1); }
  button.theme-toggle:hover { border-color: var(--ink); color: var(--ink); }
  button.theme-toggle:focus-visible { outline: 2px solid var(--accent); }
  .stage-tab { font-family: inherit; cursor: pointer; transition: background 90ms cubic-bezier(.2,0,0,1), color 90ms cubic-bezier(.2,0,0,1), border-color 150ms cubic-bezier(.2,0,0,1), transform 90ms cubic-bezier(.2,0,0,1); }
  .stage-tab:focus-visible { outline: 2px solid var(--on-accent); }
  .stage-tab[aria-selected="true"] { background: var(--on-accent); color: var(--accent); border-color: var(--on-accent); border-bottom-color: var(--mint); }
  .stage-tab[aria-selected="false"] { background: transparent; color: var(--on-accent); border-color: rgba(243,244,238,0.35); border-bottom-color: rgba(243,244,238,0.35); }
  .stage-tab[aria-selected="false"]:hover { background: rgba(243,244,238,0.14); border-color: var(--on-accent); border-bottom-color: var(--mint); transform: translateY(-2px); }
  a.moops-link { color: var(--on-accent); border-bottom: 1px solid var(--on-accent); transition: opacity 90ms cubic-bezier(.2,0,0,1); }
  a.moops-link:hover { opacity: 0.75; }
  a.moops-link:focus-visible { outline: 2px solid var(--on-accent); }
  a.footer-link {
    color: var(--ink); font-size: 13px; font-family: 'Archivo', sans-serif; font-weight: 700;
    letter-spacing: 0.04em; white-space: nowrap; padding: 10px 0 8px; border-bottom: 2px solid transparent;
    transition: color 90ms cubic-bezier(.2,0,0,1), border-color 90ms cubic-bezier(.2,0,0,1);
  }
  a.footer-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
  a.footer-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  a.footer-link[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
  a.footer-email { color: var(--muted); font-size: 13px; font-family: 'Archivo', sans-serif; font-weight: 600; border-bottom: 1px solid var(--rule); transition: color 90ms cubic-bezier(.2,0,0,1), border-color 90ms cubic-bezier(.2,0,0,1); }
  a.footer-email:hover { color: var(--accent); border-bottom-color: var(--accent); }
  a.email-link { color: var(--on-accent); opacity: 0.75; border-bottom: 1px solid rgba(243,244,238,0.4); }
  a.email-link:focus-visible { outline: 2px solid var(--on-accent); }
  #contact input, #contact select, #contact textarea {
    background: var(--ground); border: 1px solid rgba(23,57,45,0.15); color: var(--ink);
    font-family: 'Work Sans', sans-serif; font-size: 15px; padding: 12px 14px;
  }
  #contact button[type="submit"] { background: var(--mint); color: var(--ink); }
  #contact button[type="submit"]:hover { opacity: 0.9; }
  #contact button[type="submit"]:focus-visible { outline: 2px solid var(--on-accent); outline-offset: 2px; }
  .skip-link {
    position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--on-accent);
    padding: 12px 18px; font-family: 'Archivo', sans-serif; font-weight: 700; z-index: 100;
  }
  .skip-link:focus { left: 12px; top: 12px; }
  .hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

  #website-inquiry input, #website-inquiry select, #website-inquiry textarea {
    background: var(--ground); border: 1px solid rgba(23,57,45,0.15); color: var(--ink);
    font-family: 'Work Sans', sans-serif; font-size: 15px; padding: 12px 14px;
  }
  #website-inquiry input::placeholder, #website-inquiry textarea::placeholder { color: var(--faint); }
  #website-inquiry button[type="submit"] { background: var(--mint); color: var(--ink); }
  #website-inquiry button[type="submit"]:hover { opacity: 0.9; }
  #website-inquiry button[type="submit"]:focus-visible { outline: 2px solid var(--on-accent); outline-offset: 2px; }
  .tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
  .tier-grid > .card-hover, .bento > .card-hover { height: auto !important; }
  .plan-row { display: grid; grid-template-columns: 180px 1fr 120px; gap: 24px; align-items: center; padding: 24px 28px; border-bottom: 1px solid var(--rule); }
  .plan-row:last-child { border-bottom: none; }
  .addon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
  .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  @media (max-width: 760px) {
    .tier-grid, .addon-grid { grid-template-columns: 1fr !important; }
    .stat-grid { grid-template-columns: 1fr 1fr !important; }
    .plan-row { grid-template-columns: 1fr !important; gap: 8px; }
    .plan-row > *:last-child { text-align: left !important; }
  }

  .pk-chip { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; padding: 0 14px; border: 1px solid rgba(243,244,238,0.3); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; color: var(--on-accent); cursor: pointer; user-select: none; position: relative; transition: color 90ms cubic-bezier(.2,0,0,1), border-color 90ms cubic-bezier(.2,0,0,1), background 90ms cubic-bezier(.2,0,0,1); }
  .pk-chip input { position: absolute; opacity: 0; pointer-events: none; }
  .pk-chip:hover { border-color: var(--on-accent); }
  .pk-chip:has(input:checked) { background: var(--mint); border-color: var(--mint); color: var(--accent); }
  .pk-chip:has(input:focus-visible) { outline: 2px solid var(--on-accent); outline-offset: 2px; }

  .card-hover { outline: 1px solid transparent; outline-offset: -1px; }
  .card-hover:hover { outline-color: var(--accent); }
  .band .card-hover:hover { outline-color: var(--accent-light); }
  .mag { will-change: transform; }
  #open-book-2:hover { background: var(--accent-hover); }

  /* shared footer: the same markup on every page of the site */
  footer.ft { background: var(--panel); border-top: 1px solid var(--rule); padding: 52px 0 40px; }
  .ft .wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
  .ft-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 34px; padding-bottom: 34px; border-bottom: 1px solid var(--rule); }
  .ft .brand { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.03em; color: var(--ink); }
  .ft .brand b { color: var(--accent); font-weight: 800; }
  .ft-grid p { margin: 12px 0 0; font-size: 15px; color: var(--muted); max-width: 34ch; line-height: 1.55; }
  .ft-col h4 { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; }
  .ft-col a { display: block; font-size: 15px; color: var(--muted); margin-bottom: 9px; transition: color 90ms cubic-bezier(.2,0,0,1); }
  .ft-col a:hover { color: var(--accent); }
  .ft-base { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-top: 22px; font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 600; color: var(--faint); letter-spacing: 0.04em; }
  @media (max-width: 1000px) { .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 660px) { .ft-grid { grid-template-columns: 1fr; } }

  /* Phones: the primary nav is one swipeable row with the booking button first, instead of three wrapped rows. */
  @media (max-width: 660px) {
    header nav[aria-label="Primary"] { width: 100%; flex-wrap: nowrap !important; overflow-x: auto; gap: 18px !important; scrollbar-width: none; padding-bottom: 2px; }
    header nav[aria-label="Primary"]::-webkit-scrollbar { display: none; }
    header nav[aria-label="Primary"] > * { flex: none; white-space: nowrap; }
    header nav[aria-label="Primary"] > .btn-primary { order: -1; }
  }