/* ---- Faces: licensed system faces referenced locally, never redistributed ---- */
  /* Self-hosted Archivo superfamily, SIL Open Font License 1.1, free for
     commercial use. These were previously local()-only, which meant any device
     without Arial Black, Bahnschrift or Corbel fell straight through to generic
     sans-serif. That is every phone, and the generic fallback is wider than the
     condensed faces this layout was measured against, which pushed the Free
     Consult button off the right edge on mobile.
     local() is kept first so a machine that already owns the face skips the
     download entirely. */
@font-face {
    font-family: "GrumbeeDisplay";
    src: local("Archivo Black"),
         url("/assets/fonts/ArchivoBlack-400.woff2") format("woff2");
    font-weight: 400 900; font-display: swap;
  }
  @font-face {
    font-family: "GrumbeeBody";
    src: local("Archivo"),
         url("/assets/fonts/Archivo-400.woff2") format("woff2");
    font-weight: 400; font-display: swap;
  }
  @font-face {
    font-family: "GrumbeeBody";
    src: url("/assets/fonts/Archivo-700.woff2") format("woff2");
    font-weight: 700; font-display: swap;
  }
  @font-face {
    font-family: "GrumbeeLabel";
    src: url("/assets/fonts/ArchivoNarrow-600.woff2") format("woff2");
    font-weight: 400 600; font-display: swap;
  }
  @font-face {
    font-family: "GrumbeeLabel";
    src: url("/assets/fonts/ArchivoNarrow-700.woff2") format("woff2");
    font-weight: 700; font-display: swap;
  }

  :root {
    /* Retinted 2026-09-09 to match the confirmed site-wide redesign:
       black, cream, and one refined gold, no green/olive/bronze family. */
    --cream:      #FCF5ED;
    --honey:      #FCC000;
    --honey-lift: #FCC000;
    --bronze:     #8A5E00;
    --ink:        #0E0C08;
    --ink-soft:   #17140D;
    --olive:      #8A5E00;
    --parchment:  #F3E9D6;

    /* page chrome: warm-biased neutrals, never flat grey */
    --ground:     #FCF5ED;
    --surface:    #FFFDF9;
    --edge:       #E5DAC2;
    --text:       #221B10;
    --text-dim:   #332F26;
    --accent:     #E3A200;
    /* Footer/body link gold, tuned per theme. Full honey on the
       cream ground is too faint; this deep gold is readable.
       Same value and same reason as style.css's --nav-idle. */
    --link:       #8A5E00;

    --shell: min(1240px, 92vw);
    --step-0: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
    --step-1: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
    --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    --step-3: clamp(2.1rem, 1.5rem + 2.8vw, 3.9rem);
    --step-4: clamp(2.8rem, 1.8rem + 4.6vw, 5.6rem);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ground:   #0E0C08;
      --surface:  #17140D;
      --edge:     #362D1E;
      --text:     #FCF5ED;
      --text-dim: #A2957E;
      --accent:   #FCC000;
      --link:     #FCC000;
    }
  }
  :root[data-theme="dark"] {
    --ground:   #0E0C08;
    --surface:  #17140D;
    --edge:     #362D1E;
    --text:     #FCF5ED;
    --text-dim: #A2957E;
    --accent:   #FCC000;
    --link:     #FCC000;
  }
  :root[data-theme="light"] {
    --ground:   #FCF5ED;
    --surface:  #FFFDF9;
    --edge:     #E5DAC2;
    --text:     #221B10;
    --text-dim: #332F26;
    --accent:   #E3A200;
    --link:     #8A5E00;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font-family: 'Public Sans', system-ui, sans-serif;
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  /* ================= masthead ================= */
  .mast {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
    gap: 0.4rem 1rem;
    padding: clamp(1.4rem, 3vw, 2.4rem) 1.2rem clamp(1rem, 2vw, 1.6rem);
    text-align: center;
  }
  .mast__name {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: var(--step-3);
    letter-spacing: 0;
    line-height: 0.95;
    text-wrap: balance;
  }
  /* The accent dot in "Grumbee's." Was --accent (#E3A200), which is only
     2.06:1 on the cream ground - under the 3:1 floor for large text, found
     by the 2026-09-11 daily audit's contrast sweep. Switched to --link,
     the same deep gold this page already uses for links on this exact
     background for this exact reason (5.28:1). Do not put --accent back
     here; it is correct on the dark door panels, not on cream. */
  .mast__name em {
    font-style: normal;
    color: var(--link);
  }
  .mast__sub {
    margin: 0;
    max-width: 56ch;
    color: var(--text-dim);
    font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.05rem);
  }
  /* Forces a line break after "bee." on mobile only - Ethan wanted the
     two sentences split there on a phone, left as normal wrapping on
     desktop. 900px matches this page's own desktop breakpoint elsewhere.
     2026-09-10. */
  .mast__break { display: none; }
  @media (max-width: 899px) {
    .mast__break { display: block; }
  }

  /* ================= the two doors ================= */
  .doors {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: var(--shell);
    margin: 0 auto;
    border: 2px solid var(--ink);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 26px 60px -30px rgba(21, 17, 9, 0.75);
  }
  @media (min-width: 900px) {
    .doors { flex-direction: row; min-height: 62vh; }
  }

  .door {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    /* Top padding raised 2026-09-15: the floating round logo was sliding
       under the COMING SOON tag and covering "GRUMBEE'S" on phones. Both
       doors get it so the two sides stay level on desktop. */
    padding: calc(clamp(1.8rem, 3.4vw, 3rem) + 3.8rem) clamp(1.3rem, 3vw, 2.6rem) clamp(2rem, 3.4vw, 2.8rem);
    text-align: center;
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    transition: flex-grow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (min-width: 900px) {
    .door { flex: 1 1 0; }
    .doors:hover .door { flex-grow: 0.86; }
    .doors .door:hover,
    .doors .door:focus-visible { flex-grow: 1.28; }
  }

  /* ledger side */
  .door--book {
    background-color: var(--ink);
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(224, 217, 181, 0.13) 0 1px,
      transparent 1px 2.05rem
    );
    color: var(--parchment);
  }
  /* Grit texture, same faint noise used site-wide on dark panels now that
     the site has a single visual language - added 2026-09-09. */
  .door--book::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    opacity:.45; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  }
  .door--book > * { position: relative; z-index: 1; }
  /* comb side */
  .door--api {
    background-color: var(--honey);
    background-image:
      radial-gradient(circle at 50% 0%, rgba(255, 247, 219, 0.6), transparent 62%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l24 14v28L28 56 4 42V14z' fill='none' stroke='%238A5E00' stroke-opacity='.34' stroke-width='2'/%3E%3Cpath d='M28 48.5l24 14v28l-24 14-24-14v-28z' fill='none' stroke='%238A5E00' stroke-opacity='.34' stroke-width='2'/%3E%3C/svg%3E");
    background-size: auto, 56px 97px;
    color: var(--ink);
  }

  /* Circle logos, 2026-09-15 (Ethan). The square cream photo frame was
     removed so the round badge floats on its own; the corners of the image
     are see-through, so the shadow follows the circle, not a square. */
  .door__plate {
    width: min(300px, 74%);
  }
  /* Second fix, same day: the first round cut sliced off the G and S of
     GRUMBEE'S and the scroll ends on the farm logo, which stick out past
     the circle in the artwork. The images are now cut around the artwork
     itself with a cream sticker edge built in, so no rim, rounding, or
     shadow filter is applied here. Ethan: "The G and S are cut off." */
  .door__plate img { display: block; width: 100%; height: auto; }

  /* 2026-09-15, 10 PM, Ethan changed his mind on the round bookkeeping
     badge: "Go back to my original square logo JUST for the bookkeeping
     side." The square photo frame that every door used before the circles
     comes back here, scoped to the bookkeeping door alone. The farm door
     keeps the round badge, which floats with no frame. */
  .door--book .door__plate {
    padding: 0.6rem;
    background: var(--cream);
    border: 2px solid var(--ink);
    border-radius: 3px;
    box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.7);
  }

  .door__eyebrow {
    font-family: 'Public Sans', system-ui, sans-serif;
    font-size: clamp(0.64rem, 2.6vw, 0.86rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* --olive (#8A5E00) is a dark gold meant for light backgrounds; the book
     side's panel is near-black, so this label was rendering at ~3.4:1,
     under the 4.5:1 readable floor. --honey is the same bright gold used
     for this exact "label on a dark panel" spot everywhere else on the
     site. Found 2026-09-10. */
  .door--book .door__eyebrow { color: var(--honey); }
  /* --bronze (#A98134) on the door's honey panel is 2.05:1, unreadable at
     12px. This deep gold is 5.45:1 and keeps the same character.
     Found 2026-08-31. */
  .door--api  .door__eyebrow { color: #5E400C; }

  .door__title {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: var(--step-2);
    line-height: 1.05;
    letter-spacing: 0;
    text-wrap: balance;
  }
  .door__line {
    margin: 0;
    max-width: 30ch;
    font-size: var(--step-1);
    line-height: 1.45;
  }
  .door--book .door__line { color: #CFC6A8; }
  /* Even line lengths on the bookkeeping door only; "QuickBooks Online" is
     also held together in the HTML so it never splits. 2026-09-15. */
  .door--book .door__line { text-wrap: balance; }
  /* Was #4A3A14 - technically passes contrast math (6.65:1) but reads
     poorly anyway: too close in hue to the gold background and the
     honeycomb pattern behind it, unlike the heading above it which
     already uses --ink and reads clearly. Ethan caught this by eye.
     2026-09-10. */
  .door--api  .door__line { color: var(--ink); }

  /* door__points (the old services-pill row) removed 2026-09-10 - Ethan:
     "I just don't like the text heavy look now, and I don't know if we
     need all my services on the landing page." This is a routing page to
     one of two doors, not a services page - the full list already lives
     one click away. */

  .door__contact {
    font-family: 'Public Sans', system-ui, sans-serif;
    font-size: 0.86rem;
    letter-spacing: 0.02em;
  }
  .door--book .door__contact { color: var(--parchment); }
  .door--api  .door__contact { color: #4A3A14; }

  /* inline "soon" flag on a service that is not open yet */
  .soon-inline {
    margin-left: 0.35rem;
    padding: 0.05rem 0.34rem;
    border-radius: 2px;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(21, 17, 9, 0.72);
    color: var(--honey);
  }

  .foot a { color: var(--link); text-decoration: none; }
  .foot a:hover { text-decoration: underline; }

  .door__cta {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.72rem 1.5rem;
    border-radius: 2px;
    font-family: 'Public Sans', system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }
  .door--book .door__cta {
    background: var(--honey); color: var(--ink);
    box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 0 var(--bronze);
  }
  .door--api .door__cta {
    background: var(--ink); color: var(--honey);
    box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 0 rgba(21, 17, 9, 0.32);
  }
  .door__cta span { transition: transform 0.22s ease; }
  .door:hover .door__cta,
  .door:focus-visible .door__cta { transform: translate(-1px, -1px); }
  .door:hover .door__cta span { transform: translateX(4px); }

  .door:focus-visible { outline: 3px solid var(--accent); outline-offset: -6px; }

  /* coming-soon door: present and on-brand, but plainly not open yet */
  .door--soon { position: relative; cursor: default; }
  .door--soon::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(21, 17, 9, 0.10);
    pointer-events: none;
  }
  .door--soon:hover { transform: none; }
  /* The logo is NOT dimmed: it sits above the coming-soon wash so the mark reads at full
     strength and matches the bookkeeping door. Everything else on this door stays quiet.
     z-index 1 puts it above the 10% wash but BELOW the ribbon (z-index 2) - at 2 they tied
     and the plate covered the COMING SOON ribbon on mobile. Changed 2026-09-02. */
  .door--soon .door__plate { position: relative; z-index: 1; }

  .door__ribbon {
    position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2;
    padding: 0.34rem 0.8rem;
    background: var(--ink); color: var(--honey);
    font-family: 'Public Sans', system-ui, sans-serif;
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    border-radius: 2px;
    box-shadow: 3px 3px 0 0 rgba(21, 17, 9, 0.28);
  }

  .door__cta--soon {
    background: transparent !important;
    color: #4A3A12 !important;
    box-shadow: none !important;
    border: 2px dashed rgba(21, 17, 9, 0.42);
    cursor: default;
  }
  .door--soon:hover .door__cta { transform: none; }

  /* seam */
  .seam {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--ink);
  }
  @media (min-width: 900px) {
    .seam { flex-direction: column; padding: 1rem 0.55rem; }
  }
  .seam i {
    display: block; width: 13px; height: 15px;
    background: var(--honey);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    opacity: 0.9;
  }
  .seam i:nth-child(even) { background: var(--bronze); }

  /* ================= appendix ================= */
  .plan {
    width: var(--shell);
    margin: clamp(3rem, 7vw, 5.5rem) auto clamp(2.5rem, 5vw, 4rem);
  }
  .plan__head { max-width: 62ch; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
  .plan__kicker {
    display: block;
    margin-bottom: 0.5rem;
    font-family: 'Public Sans', system-ui, sans-serif;
    font-size: 0.76rem; font-weight: 700;
    letter-spacing: 0.19em; text-transform: uppercase;
    color: var(--accent);
  }
  .plan__title {
    margin: 0 0 0.6rem;
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--step-2);
    line-height: 1.02; letter-spacing: 0.01em; text-transform: uppercase;
    text-wrap: balance;
  }
  .plan__intro { margin: 0; color: var(--text-dim); }

  .cards { display: grid; gap: 1.1rem; }
  @media (min-width: 820px) { .cards { grid-template-columns: 1fr 1fr; } }

  .card {
    display: flex; flex-direction: column; gap: 0.85rem;
    padding: clamp(1.3rem, 2.4vw, 1.9rem);
    background: var(--surface);
    border: 1px solid var(--edge);
    border-top: 4px solid var(--rail, var(--accent));
    border-radius: 3px;
    scroll-margin-top: 1.5rem;
  }
  .card--book { --rail: var(--olive); }
  .card--api  { --rail: var(--honey); }

  .card__title {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--step-1);
    letter-spacing: 0.02em; text-transform: uppercase;
  }
  .card__note {
    margin: 0; padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--edge);
    color: var(--text-dim); font-size: 0.92rem;
  }
  .card ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
  .card li::marker { color: var(--rail); }
  .card li b { font-weight: 700; }

  .stack-note {
    margin-top: 1.1rem; padding: clamp(1.1rem, 2.2vw, 1.6rem);
    background: var(--surface);
    border: 1px dashed var(--edge);
    border-radius: 3px;
  }
  .stack-note h3 {
    margin: 0 0 0.5rem;
    font-family: 'Public Sans', system-ui, sans-serif;
    font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  }
  .stack-note p { margin: 0 0 0.6rem; }
  .stack-note p:last-child { margin-bottom: 0; }

  .foot {
    width: var(--shell); margin: 0 auto clamp(2.5rem, 5vw, 4rem);
    padding-top: 1.2rem; border-top: 1px solid var(--edge);
    color: var(--text-dim); font-size: 0.86rem;
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: space-between;
  }
  /* Phone-width footer links. Added 2026-09-18: the three links were 16px
     tall. Under 760px each becomes a 44px-tall target; the row gap drops to 0
     because the padding supplies it. Desktop is untouched. */
  @media (max-width: 759px) {
    .foot { row-gap: 0; }
    .foot a { display: inline-block; padding: 11px 0; }
  }

  /* ================= load sequence ================= */
  @media (prefers-reduced-motion: no-preference) {
    .mast, .door, .seam i { animation: rise 0.72s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
    .door--book { animation-delay: 0.1s; }
    .seam i     { animation-delay: 0.2s; animation-duration: 0.5s; }
    .door--api  { animation-delay: 0.16s; }
    .seam i:nth-child(2) { animation-delay: 0.25s; }
    .seam i:nth-child(3) { animation-delay: 0.3s; }
    .seam i:nth-child(4) { animation-delay: 0.35s; }
    .seam i:nth-child(5) { animation-delay: 0.4s; }
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }

  /* ================= logo float, same speed as the bookkeeping homepage's
     bee. Animates the whole plate (frame + image together) - an earlier
     version animated only the img inside a static frame, which looked
     broken since the border/shadow stayed put while the photo slid around
     inside it. Speed tried at 9s, then 3s, then 4.5s (matching the
     homepage bee) - still too fast each time per Ethan, settled slower at
     6s. 2026-09-10. ================= */
  @media (prefers-reduced-motion: no-preference) {
    /* will-change hints the browser to composite this on its own GPU layer
       up front, instead of repainting the shadow and border from scratch
       every frame while the plate floats and rotates - the usual cause of
       stutter on a transform+box-shadow animation, especially on phone
       Safari. Ethan reported the motion looking glitchy. 2026-09-10. */
    .door__plate { animation: doorFloat 6s ease-in-out infinite; will-change: transform; }
  }
  @keyframes doorFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-30px) rotate(2deg); }
  }