/* ── tandoco canonical floating-pill nav ──────────────────────────
   Single source of truth — mirrors home.css / store.css so every
   page (bakery, about, blog, training, catering, events, support…)
   gets the exact same nav across desktop, tablet and mobile.

   Pages that link this file should NOT redeclare .nav* / .btn-nav* /
   .btn-cart / .cart-badge / .hamburger / .acct-* / .nav-drawer rules
   inline — keep this file as the authoritative copy.
   ──────────────────────────────────────────────────────────────── */

/* Scope brand-color tokens to the nav + drawer so page-level CSS that
   redefines them (e.g. events.html setting `--navy:var(--blue-d)` at
   :root level, recoloring the wordmark/hamburger bars/account avatar
   blue) can't bleed in. The nav must look identical on every page —
   defining these tokens INSIDE the nav scope wins over any inherited
   value from the page's :root, regardless of which color system that
   page uses for its body content. */
.nav, .nav-drawer, .nav-drawer-backdrop{
  --navy:#1B1A6B;
  --navy-dk:#0F0E47;
  --accent:#2D2FA8;
  --accent-lt:#4F51D4;
  --gold-d:#8B6914;
  --gold:#C8A96E;
  --gold-l:#E8C87A;
  --coral:#C87555;
  --muted:#6B6B7B;
  --text:#2C2C3A;
  --border:#EDE8DC;
}

/* Desktop pill.
   z-index lifted above the drawer-backdrop (z:310) so the bar stays
   bright + crisp while the drawer is open. Previously the backdrop
   (with backdrop-filter:blur(3px)) painted *over* the nav, which
   read perceptually as the bar "shifting down" or dimming — the
   visual glitch reported on hamburger click. Drawer (z:320) still
   sits above the nav where they overlap, so the slide-in visual is
   unchanged.
   `top` uses env(safe-area-inset-top) so iPhone-with-notch / Dynamic-
   Island devices push the pill DOWN below the system overlay zone
   instead of letting the pill's top edge slide under the camera
   cutout. Pairs with the body::before frosted cap below that fills
   the safe-area-inset-top region so page content (or a navy hero on
   the homepage) doesn't peek through the eyebrow. The env() value is
   0 on devices without a safe area, so non-iOS layout is unchanged. */
.nav{position:fixed;top:calc(14px + env(safe-area-inset-top, 0px));left:50%;transform:translateX(-50%);width:calc(100% - 28px);max-width:1060px;z-index:315;height:56px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-radius:99px;background:rgba(248,249,255,.92);backdrop-filter:blur(28px) saturate(200%);-webkit-backdrop-filter:blur(28px) saturate(200%);border:1px solid rgba(255,255,255,.65);box-shadow:0 2px 24px rgba(27,26,107,.1),inset 0 1px 0 rgba(255,255,255,.92);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1);}

/* Frosted safe-area cap — covers the iOS Dynamic Island / notch
   zone so the page background (navy hero on the homepage) doesn't
   peek through the camera cutout. Matches the floating pill's
   blur+tint so it reads as part of the same chrome rather than a
   separate band. z-index matches the nav (315) so the cap stays
   bright while the drawer-backdrop (310) is animating in, mirroring
   the same justification that lifted the nav above the backdrop.
   On mobile the nav itself ALSO extends through the safe-area zone
   via padding-top (so when the nav is visible the cap is hidden
   behind it — same DOM stacking at z:315, nav paints last). The
   mobile override below swaps the desktop translucent tint for a
   solid cream that matches the nav's mobile bg, so when the nav
   slides up via translateY(-100%) on scroll-hide the cap remains as
   a clean strip behind the iOS pill. Without this, pages whose
   body bg isn't cream (index.html, intelligence.html paint a white
   --paper body) expose scrolled page content (full-bleed food
   photos, hero images) in the safe-area zone the moment the nav
   hides, breaking the "iOS pill on cream strip" look that the
   cream-bg pages (bakery/store/etc) get for free. Solid bg is
   load-bearing — the May 2026 translucent version let content
   bleed through, which is why the mobile cap was previously
   hidden entirely. */
body::before{
  content:'';
  position:fixed;top:0;left:0;right:0;
  height:env(safe-area-inset-top, 0px);
  background:rgba(248,249,255,.62);
  backdrop-filter:blur(28px) saturate(200%);
  -webkit-backdrop-filter:blur(28px) saturate(200%);
  z-index:315;
  pointer-events:none;
}
@media(max-width:720px){
  body::before{
    background:#FAF8F3;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  /* iOS Safari fallback for pages where env(safe-area-inset-top)
     resolves to 0 in the scrolled state on Dynamic Island devices —
     observed on home.html / intelligence.html, where the cap above
     collapses to 0 height and page hero content bleeds up behind the
     iOS pill once the nav slides away on scroll. Root cause never
     isolated across PR #2167, #2170, #2172 — most likely a Safari
     rendering quirk specific to these pages' DOM/CSS combination
     (bakery / store don't exhibit it).
     `@supports (-webkit-touch-callout:none)` matches iOS Safari ONLY
     (Android Chrome, desktop Firefox/Chrome/Edge don't ship this
     property), so this floor never touches non-iOS layout.
     47px is the iPhone X / 11 / 12 / 13 notch safe-area-inset-top.
     On Dynamic Island devices the real env() is 59-62 — when env
     works correctly, the floor is a no-op (max behavior). When env
     returns 0, this provides the clean cream chrome strip behind the
     iOS pill so scrolled-state page content stays hidden. Bakery and
     store don't visibly change because either env() is already
     producing a larger value (≥47) or their body bg is cream so a
     potential transition through 47px reads as the same color.
     This is scoped to body::before ONLY — the nav's own padding /
     height calc is left alone so the initial-state "huge cream block
     above nav" issue from PR #2172 does NOT recur. The trade-off is
     that on home initial state the nav content still sits where env()
     puts it (under the iOS pill if env=0), but the user-reported bug
     is the SCROLLED-state bleed which this addresses. */
  @supports (-webkit-touch-callout:none){
    body::before{
      min-height:47px;
    }
  }
}
.nav.shrink{transform:translateX(-50%) scale(.93);box-shadow:0 4px 32px rgba(27,26,107,.14),inset 0 1px 0 rgba(255,255,255,.92);}
.nav-brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none;}
.nav-brand img{height:26px;width:auto;display:block;}
.nav-brand-text{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:900;color:var(--navy,#1B1A6B);letter-spacing:-.03em;}

/* Links — hidden until ≥960px (matches home.css). */
.nav-links{display:none;align-items:center;gap:16px;}
/* Active state changes color only, not weight. Going 600→700 made the
   active link slightly wider than its siblings, so on every page the
   nav widths shifted differently — visible reflow when navigating
   between pages. Keep the weight constant; the user notices the color
   change well enough as the active indicator.
   font-family pinned: nav links USED to inherit body's font, which
   meant Plus Jakarta Sans on home/store/bakery/blog/training but
   Inter on about/catering/events/privacy/terms. Different glyph widths
   → visible text shift when clicking page-to-page. Pinning here
   guarantees identical widths regardless of which font the page body
   uses. */
/* line-height pinned to 1: nav links USED to inherit body line-height,
   which varied per page (about/catering at 1.6, store at 1.5, index at
   "normal"). Different inherited line-heights gave the link box
   different heights → flex-centering placed the baseline ~2.5px higher
   on about/catering than on index, so all the nav buttons appeared to
   shift upward when navigating to those pages. Pinning to 1 collapses
   the link box to the font's natural cap-height and aligns text the
   same way regardless of which page hosts the nav. */
.nav-links a{font-family:'Plus Jakarta Sans','Inter',-apple-system,sans-serif;font-size:12.5px;font-weight:600;line-height:1;color:var(--muted,#6B6B7B);transition:color .15s;white-space:nowrap;text-decoration:none;}
.nav-links a:hover,.nav-links a.active{color:var(--navy,#1B1A6B);}

/* Right cluster */
.nav-right{display:flex;align-items:center;gap:8px;}
.btn-nav-auth{background:var(--navy,#1B1A6B);color:#fff;border:none;padding:6px 20px;border-radius:99px;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;box-shadow:0 2px 10px rgba(27,26,107,.2);display:none;align-items:center;justify-content:center;line-height:1;min-height:32px;font-family:'Plus Jakarta Sans',sans-serif;}
.btn-nav-auth:hover{background:var(--accent,#2D2FA8);}
.btn-nav-account{width:32px;height:32px;border-radius:50%;background:var(--navy,#1B1A6B);color:#fff;border:none;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;transition:all .3s;}
.btn-nav-account.founder,
html[data-tdco-founder="1"] .btn-nav-account{background:linear-gradient(135deg,#8B6914 0%,#C8A96E 45%,#E8C87A 100%);color:#1A1508;animation:founderShine 2.5s ease-in-out infinite;border:1.5px solid rgba(232,200,122,.6);}
@keyframes founderShine{0%,100%{box-shadow:0 0 8px rgba(200,169,110,.5),0 0 16px rgba(200,169,110,.2);}50%{box-shadow:0 0 14px rgba(232,200,122,.7),0 0 28px rgba(200,169,110,.35);}}

/* Synchronous auth pre-paint (paired with /scripts/nav-auth-prepaint.js
   and the cache writer in /scripts/nav-drawer.js). When the previous
   page wrote tdcoSignedIn=1 into localStorage, the prepaint script
   stamps html[data-tdco-auth="in"] before first paint and these rules
   show the account avatar / drawer-acct + hide the auth button so the
   nav doesn't flash "sign up / log in" → user-icon on every page load. */
/* Cluster swap driven by html[data-tdco-auth]. The attribute is stamped
   synchronously in <head> by /scripts/nav-auth-prepaint.js from cached
   localStorage, then confirmed by /scripts/nav-drawer.js when Firebase
   resolves. Returning visitors (the common case for click-through
   navigation) paint the correct cluster on first paint — no shift, and
   the visible cluster is flush against the right edge of the pill since
   the off-state cluster is collapsed out of layout (display:none).

   `display:... !important` is load-bearing. Several pages (index/store/
   bakery/about/blog/catering/events/support…) have their own
   firebase.auth().onAuthStateChanged handler that calls
   acctWrap.style.display='none' / navAuthBtn.style.display='none' /
   acctWrap.style.display='block' inline. The !important here makes the
   data-tdco-auth attribute the single source of truth and the inline
   style.display values a no-op. Don't drop the !important until every
   per-page auth listener has been migrated to data-tdco-auth attribute
   swaps (search: acctWrap.style.display).

   Edge case: a first-ever visitor who is actually signed in (no cache
   yet) sees the auth-button on first paint, then a one-time ~100px
   shift when Firebase confirms signed-in and writes the cache. Every
   subsequent navigation on that browser is shift-free. Acceptable
   tradeoff vs. always-reserving both slots and leaving dead space to
   the right of the cart on returning signed-in users. */
.acct-wrap, .drawer-acct { display: none !important; }
.btn-nav-auth { display: none !important; }
.drawer-auth { display: flex !important; }
@media(min-width:960px){ .btn-nav-auth { display: inline-flex !important; } }
html[data-tdco-auth="in"] .acct-wrap { display: block !important; }
html[data-tdco-auth="in"] .drawer-acct { display: flex !important; }
html[data-tdco-auth="in"] .btn-nav-auth { display: none !important; }
html[data-tdco-auth="in"] .drawer-auth { display: none !important; }

/* Tandocoin balance pill — ingrained in the nav on every page. The
   count is hydrated by nav-drawer.js's auth-state-changed handler
   (live Firestore read) and mirrored to localStorage so subsequent
   navigations paint the cached number on first frame. The pill is
   hidden via the html[data-tdco-coins="0"] rule below when balance
   is 0 / missing — signed-out and brand-new users don't get a
   mystery "star + 0" they can't interpret. */
.v3-nav-coin{display:inline-flex;align-items:center;gap:4px;padding:6px 12px 6px 6px;border-radius:99px;background:linear-gradient(135deg,#FFF6DC,#FFEAB0);border:1px solid rgba(139,105,20,.22);font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:900;color:#8B6914;text-decoration:none;line-height:1;white-space:nowrap;transition:transform .15s,box-shadow .15s;}
/* Icon is 20×20 (matches account portal's pill, which renders tighter
   than 18×18 because the larger PNG visually closes the gap to the
   number — the perceived spacing comes mostly from the icon size, not
   the flex gap). */
.v3-nav-coin .ic{width:20px;height:20px;object-fit:contain;display:block;filter:drop-shadow(0 1px 2px rgba(139,105,20,.3));}
/* tabular-nums keeps the digit boxes uniform (so 1234 → 1235 doesn't
   reflow), but no min-width: a fixed slot was wasting ~9px of phantom
   space to the right of the icon for 1–2 digit balances, which is what
   made the every-page pill look looser than the account portal's. The
   pill is now hidden at 0, so the original "0 → 1,247 widens by 30px"
   concern that motivated the slot no longer applies — first-coin earn
   is a one-time per-account shift, acceptable. */
.v3-nav-coin #v3NavCoinNum{font-variant-numeric:tabular-nums;}
.v3-nav-coin:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(139,105,20,.18);}
/* Hide the pill entirely when balance is 0 / missing — signed-out and
   brand-new users shouldn't see a mystery "star + 0". The attribute is
   stamped synchronously by nav-auth-prepaint.js (before first paint),
   so there's no flash; nav-drawer.js flips it to "have" once a positive
   balance arrives (one-time shift per account, not per page load). */
html[data-tdco-coins="0"] .v3-nav-coin{display:none;}
@media(max-width:640px){
  /* Mobile space is tight — the navbar already carries the account
     pill, cart, and hamburger. The tandocoin balance lives one tap
     away on /account/membership, so we drop it from the mobile nav
     rather than squeezing it between the cart and the hamburger. */
  .v3-nav-coin{display:none;}
}
.btn-cart{position:relative;width:36px;height:36px;border-radius:50%;background:rgba(27,26,107,.08);border:1.5px solid rgba(27,26,107,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;line-height:1;color:var(--navy,#1B1A6B);padding:0;}
.btn-cart .cart-svg{width:18px;height:18px;display:block;stroke:currentColor;transition:transform .15s;}
.btn-cart:hover{background:rgba(27,26,107,.14);border-color:rgba(27,26,107,.22);}
.btn-cart:hover .cart-svg{transform:scale(1.08);}
.cart-badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--coral,#C87555);color:#fff;font-size:9px;font-weight:900;display:none;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;}

/* Site-wide convention: buttons do NOT shift or scale on press.
   Catering and events shipped without :active{transform:...} rules and
   the user picked that as the canonical behavior. We enforce it from
   the shared stylesheet so any future page that links nav.css inherits
   it for free — no need to remember per-page.

   - Scoped to actual interactive elements so we don't disturb static
     styled :active states (e.g. nav links with .active class).
   - Excluded: slider thumbs and elements inside [draggable] handles,
     which use transform during a real drag (cursor:grabbing feedback).
   - !important is intentional. The site has dozens of legacy
     `:active{transform:scale(...)}` rules across page-specific
     stylesheets; this is the simplest way to neutralize them all and
     keep the convention from drifting. If a future page genuinely
     needs press feedback, it can still opt in via
     `transform:scale(...) !important` at higher specificity. */
button:active:not(:where([draggable] *,[role="slider"],input[type="range"])),
[role="button"]:active:not(:where([draggable] *)),
a.btn-nav:active,
a.btn-nav-cta:active,
.nav-cta:active,
.btn-nav-account:active,
.btn-nav-auth:active,
.btn-cart:active,
.hamburger:active,
.v3-nav-coin:active,
.v3-nav-avatar:active{
  transform: none !important;
}

/* Hamburger */
/* -webkit-tap-highlight-color disables iOS Safari's translucent tap
   overlay (can read as a "press-down" visual hiccup). touch-action
   manipulation suppresses double-tap-to-zoom delay. The bars stay as
   three bars even when the drawer is open — the X→hamburger toggle
   was the "menu pushes down" visual glitch the user reported (top
   bar translateY +6, bottom bar translateY -6). The drawer's own
   in-panel X close button now handles closing, so this animation is
   redundant chrome. */
.hamburger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;border:none;cursor:pointer;padding:6px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.hamburger span{display:block;width:20px;height:2px;background:var(--navy,#1B1A6B);border-radius:99px;}

/* Account dropdown */
.acct-wrap{position:relative;}
.acct-dropdown{position:absolute;top:calc(100% + 10px);right:0;background:rgba(248,249,255,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.6);border-radius:18px;box-shadow:0 8px 36px rgba(27,26,107,.14),inset 0 1px 0 rgba(255,255,255,.8);width:210px;padding:7px;display:none;z-index:400;}
.acct-dropdown.open{display:block;}
.acct-info{padding:10px;border-bottom:1px solid var(--border,#EDE8DC);margin-bottom:5px;}
.acct-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:800;color:var(--navy,#1B1A6B);}
.acct-email{font-size:11.5px;color:var(--muted,#6B6B7B);}
.acct-link{display:block;padding:8px 10px;border-radius:10px;font-size:13px;font-weight:600;color:var(--text,#2C2C3A);cursor:pointer;transition:all .15s;background:none;border:none;width:100%;text-align:left;text-decoration:none;font-family:inherit;}
.acct-link:hover{background:rgba(45,47,168,.08);color:var(--navy,#1B1A6B);}
.acct-link.danger{color:#DC2626;}
.acct-link.danger:hover{background:#FEF2F2;}

/* Coach-only nav entries (account dropdown + mobile drawer).
   Hidden by default; revealed when /scripts/coach-claim.js confirms the
   signed-in user is a tandocoach and stamps body.is-coach. */
.is-coach-only{display:none !important;}
body.is-coach .is-coach-only{display:block !important;}

/* ════════════════════════════════════════════════════════════════
   Mobile drawer — left-sliding sidebar pattern (May 2026 unification)

   Previously every page had a top-down "full-screen" drawer with just
   the link list, while /store had its own bespoke left-sliding sidebar
   with a header bar, an auth/identity card, and a richer link list.
   This block ports /store's pattern as the new canonical so every page
   gets the same identity-first drawer. nav-drawer.js's _unifyDrawer()
   replaces each page's legacy drawer markup with the new structure at
   runtime — no per-page HTML edits required.

   Structure:
     .nav-drawer-backdrop  — dim layer behind the panel
     .nav-drawer           — 86vw-wide sidebar that slides in from left
       .drawer-head        — logo + close button
       .drawer-auth        — signed-out: welcome card + sign up / log in
       .drawer-acct        — signed-in: name + tandocoin balance + acct link
       .drawer-links       — page navigation list with active-page accent
   ════════════════════════════════════════════════════════════════ */
.nav-drawer-backdrop{position:fixed;inset:0;z-index:310;background:rgba(15,24,40,.45);opacity:0;pointer-events:none;transition:opacity .28s ease;}
.nav-drawer-backdrop.open,
body:has(.nav-drawer.open) .nav-drawer-backdrop{opacity:1;pointer-events:auto;}
@media(min-width:960px){.nav-drawer-backdrop{display:none;}}

/* Drawer slide-in. Full-height left-sliding sidebar (canonical
   /store pattern). Solid background, no backdrop-filter — the blur
   was creating a visible ripple as the drawer's right edge swept
   across the nav. visibility stays `visible` always (off-screen
   via transform); pointer-events:none keeps it from intercepting
   touches when closed. */
.nav-drawer{
  position:fixed;top:0;left:0;bottom:0;right:auto;
  width:min(86vw,360px);z-index:320;
  background:#FAF8F3;
  border-right:1px solid rgba(15,24,40,.06);
  box-shadow:8px 0 32px rgba(15,24,40,.14);
  display:flex;flex-direction:column;align-items:stretch;
  justify-content:flex-start;gap:0;padding:0;overflow:hidden;
  transform:translate3d(-100%,0,0);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  will-change:transform;
}
.nav-drawer.open{
  transform:translate3d(0,0,0);
  pointer-events:auto;
}

/* Drawer head matches the nav bar's exact dimensions (52px tall,
   0 8px padding) so the open drawer reads as a continuation of the
   bar rather than a chunkier separate surface. Logo height and the
   close button shrink to fit. */
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:0 8px;height:52px;border-bottom:1px solid rgba(15,24,40,.06);flex-shrink:0;}
/* Brand uses align-self:center so the logo is vertically centered
   inside the 52px head row. translateY nudges the image down ~2px
   because the source PNG's "tandoco" glyphs sit in the upper portion
   of the file's canvas, not its vertical center — without the nudge
   the wordmark visually reads as top-aligned even though the IMG
   element itself is centered. */
.drawer-head-brand{display:inline-flex;align-items:center;align-self:center;padding-left:8px;height:100%;}
.drawer-head-brand img{height:26px;width:auto;display:block;transform:translateY(2px);}
.drawer-close{width:32px;height:32px;border-radius:10px;background:rgba(15,24,40,.05);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--navy,#1B1A6B);padding:0;transition:background .18s;}
.drawer-close:hover{background:rgba(15,24,40,.10);}
.drawer-close svg{width:16px;height:16px;}

/* Sign-in card (signed-out) and account card (signed-in) — same gold-
   tinted glass surface so the "identity slot" reads identically either
   way, and the swap is just a content change. */
.drawer-auth{margin:14px 16px 4px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(135deg,rgba(212,168,87,.12),rgba(27,26,107,.04));border:1px solid rgba(212,168,87,.28);border-radius:14px;}
.drawer-auth-eyebrow{font-family:'Plus Jakarta Sans',sans-serif;font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d,#8B6914);}
.drawer-auth-sub{font-size:12.5px;line-height:1.5;color:var(--muted,#6B6B7B);margin:0 0 4px;}
/* Sign up + log in share size/padding/font so the two buttons read as
   a paired primary + secondary action. Only background, border, and
   color distinguish them. The transparent 1.5px border on the primary
   button matches the ghost's actual border so total height is identical
   to the pixel. */
/* Both share min-height:44px (tap-target standard) so they render the
   exact same size regardless of which one the page's other CSS files
   happen to also style. */
.drawer-auth .btn-primary,
.drawer-auth .btn-ghost{
  display:block;width:100%;padding:10px 14px;border-radius:12px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:800;
  letter-spacing:-.005em;cursor:pointer;text-transform:lowercase;
  text-align:center;min-height:44px;line-height:1.2;
}
.drawer-auth .btn-primary{
  background:linear-gradient(135deg,var(--gold-d,#8B6914) 0%,var(--gold,#C8A96E) 55%,var(--gold-l,#E8C87A) 100%);
  color:#1A1508 !important;
  border:1.5px solid transparent;
  box-shadow:0 6px 16px -6px rgba(200,169,110,.55);
  transition:transform .18s,box-shadow .18s;
}
.drawer-auth .btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(200,169,110,.7);}
.drawer-auth .btn-ghost{
  background:transparent !important;
  border:1.5px solid rgba(27,26,107,.18) !important;
  color:var(--navy,#1B1A6B) !important;
  transition:border-color .18s,background .18s;
}
.drawer-auth .btn-ghost:hover{border-color:rgba(27,26,107,.32) !important;background:rgba(27,26,107,.03) !important;}

.drawer-acct{margin:14px 16px 4px;padding:14px;background:linear-gradient(135deg,rgba(212,168,87,.12),rgba(27,26,107,.04));border:1px solid rgba(212,168,87,.28);border-radius:14px;flex-direction:column;gap:10px;}
.drawer-acct-hi{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.drawer-acct-greet{display:flex;flex-direction:column;gap:2px;min-width:0;}
.drawer-acct-eyebrow{font-family:'Plus Jakarta Sans',sans-serif;font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d,#8B6914);}
.drawer-acct-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:900;color:var(--navy,#1B1A6B);letter-spacing:-.02em;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-decoration:none;transition:opacity .15s;}
a.drawer-acct-name:hover,a.drawer-acct-name:focus-visible{opacity:.75;text-decoration:none;}
.drawer-acct-coin{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:99px;background:rgba(212,168,87,.20);border:1px solid rgba(212,168,87,.40);color:var(--gold-d,#8B6914);font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:900;flex-shrink:0;line-height:1;}
.drawer-acct-coin img{width:14px;height:14px;display:block;}
.nav-drawer .drawer-acct-link{display:inline-flex;align-items:center;gap:4px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:700;color:var(--gold-d,#8B6914);text-decoration:none;letter-spacing:.01em;padding:0;align-self:flex-start;line-height:1;}
.nav-drawer .drawer-acct-link:hover{color:var(--navy,#1B1A6B);}
.drawer-acct-signout{background:none;border:none;padding:2px 0 0;font-size:12px;font-weight:700;color:#DC2626;cursor:pointer;font-family:inherit;text-align:left;align-self:flex-start;}

/* Link list — grouped sections with thin sand dividers. The scrollable
   region is just the link groups; the footer order CTA stays pinned
   below. */
.drawer-links{display:flex;flex-direction:column;align-items:stretch;padding:6px 8px 12px;gap:0;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-top:4px;}

/* Group section — label + member rows. Each subsequent group gets a
   1px sand divider above it for visual rhythm. */
.drawer-group{display:flex;flex-direction:column;gap:1px;padding:4px 0;}
.drawer-group + .drawer-group{border-top:1px solid rgba(15,24,40,.06);margin-top:6px;padding-top:10px;}
.drawer-group-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--muted,#6B6B7B);padding:2px 12px 8px;}

.drawer-links a{font-family:'Plus Jakarta Sans',sans-serif;font-size:14.5px;font-weight:700;color:var(--navy,#1B1A6B);letter-spacing:-.01em;text-decoration:none;padding:11px 12px;border-radius:10px;transition:background .15s,color .15s;display:flex;align-items:center;gap:12px;position:relative;min-height:44px;}
.drawer-links a:hover{background:rgba(15,24,40,.05);color:var(--accent,#2D2FA8);}

/* Inline icon leading each link. Drawn from inline svg in the markup
   so the stroke picks up `currentColor` and tracks the link color
   through hover / active states. */
.drawer-link-icon{width:18px;height:18px;flex-shrink:0;color:var(--muted,#6B6B7B);}
.drawer-links a:hover .drawer-link-icon{color:var(--accent,#2D2FA8);}

/* Active page — 3px coral left rail + white fill + navy bold label.
   Replaces the previous gold gradient slab so the active row no longer
   competes with the sign-up CTA above it for visual weight. */
.drawer-links a.active{
  background:#fff;
  color:var(--navy,#1B1A6B);
  font-weight:900;
  letter-spacing:-.01em;
  box-shadow:inset 3px 0 0 var(--coral,#C87555);
  padding-left:16px;
}
.drawer-links a.active .drawer-link-icon{color:var(--navy,#1B1A6B);}

.drawer-links .nav-dd-tag{display:inline-flex;padding:2px 7px;border-radius:99px;background:var(--gold,#C8A96E);color:#1A1508;font-size:9px;font-weight:900;letter-spacing:.10em;text-transform:uppercase;margin-left:auto;}

/* Sign-out button rendered as a drawer-link row. <button> instead of
   <a> because it triggers a JS action (signOut) rather than navigation,
   but styled identically so the row reads consistent with its siblings.
   Coral instead of navy because it's a destructive action. */
.drawer-links .drawer-signout-link{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:14.5px;font-weight:700;
  color:var(--coral,#C87555);letter-spacing:-.01em;text-decoration:none;
  padding:11px 12px;border:none;background:none;border-radius:10px;
  display:flex;align-items:center;gap:12px;min-height:44px;
  cursor:pointer;text-align:left;
  transition:background .15s,color .15s;
}
.drawer-links .drawer-signout-link:hover{background:rgba(200,117,85,.06);}
.drawer-links .drawer-signout-link .drawer-link-icon{color:var(--coral,#C87555);}

/* Account group — only shown when the user is signed in. The auth
   prepaint script + nav-drawer.js's auth-state-changed handler stamp
   data-tdco-auth on <html>, so this rule responds synchronously on
   first paint without needing JS to toggle a class. */
.drawer-group-account{display:none;}
html[data-tdco-auth="in"] .drawer-group-account{display:flex;}

/* Pinned footer — always visible while the link list scrolls. The
   order CTA is the deadline's permanent home: navy button + a small
   `closes thursday 11:59pm` subtext in gold-dark so the urgency
   travels with the action. */
.drawer-footer{
  margin-top:auto;
  padding:12px 16px calc(14px + env(safe-area-inset-bottom,0));
  background:#FAF8F3;
  border-top:1px solid rgba(15,24,40,.06);
  display:flex;flex-direction:column;gap:6px;flex-shrink:0;
}
.drawer-footer-cta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--navy,#1B1A6B);color:#fff !important;border-radius:14px;
  padding:12px 12px 12px 16px;text-decoration:none;
  font-family:'Plus Jakarta Sans',sans-serif;
  box-shadow:0 4px 14px rgba(27,26,107,.18);
  transition:transform .15s,box-shadow .15s;
}
.drawer-footer-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(27,26,107,.22);}
.drawer-footer-cta-text{display:flex;flex-direction:column;gap:3px;line-height:1.2;min-width:0;}
.drawer-footer-cta-title{font-size:15.5px;font-weight:900;color:#fff;letter-spacing:-.01em;}
.drawer-footer-cta-sub{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:#BA7517;}
.drawer-footer-cta-arrow{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.18);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;
}
.drawer-footer-cta-arrow svg{width:18px;height:18px;}

/* Social handle anchor below the CTA — light, centered, brand-name in
   bold navy to tie back to the wordmark above. */
.drawer-footer-follow{
  text-align:center;padding-top:8px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;font-weight:600;color:var(--muted,#6B6B7B);
}
.drawer-footer-follow a{
  color:var(--navy,#1B1A6B);font-weight:800;text-decoration:none;
  margin-left:4px;
}
.drawer-footer-follow a:hover{color:var(--accent,#2D2FA8);}

@media(max-height:640px){
  .drawer-head{padding:12px 16px 10px;}
  .drawer-auth{margin:10px 14px 4px;padding:12px;}
  .drawer-auth-sub{display:none;}
  .drawer-links a{font-size:14px;padding:9px 12px;}
}
@media(min-width:960px){
  /* Desktop hides hamburger so the drawer is never opened; belt-and-
     suspenders, also disable the slide visually. */
  .nav-drawer{display:none;}
}

/* Desktop breakpoint — show links + auth pill, hide hamburger. */
@media(min-width:960px){
  .nav-links{display:flex;}
  .btn-nav-auth{display:inline-flex;}
  .hamburger{display:none;}
}
@media(max-width:959px){.btn-nav-auth{display:none;}}

/* Wider desktop nav (≥1200px) — used to live in scripts/desktop-polish.css
   but that stylesheet wasn't loaded on bakery/about/blog so those three
   pages rendered with the smaller default pill while every other page
   showed the larger one. Lives here now so every page that links
   nav.css gets the same desktop dimensions. */
@media(min-width:1200px){
  .nav{max-width:1280px !important;height:62px !important;padding:0 22px !important;}
  .nav-brand img{height:30px;}
  .nav-links{gap:22px !important;}
  .nav-links a{font-size:14px !important;}
  .btn-nav-auth{padding:9px 22px !important;font-size:13px !important;}
}

/* ════════════════════════════════════════════════════════════════
   Mobile — full-bleed flat bar (May 2026 design polish)

   Replaces the floating soft-corner glass pill with a flush
   edge-to-edge chrome bar in the ecommerce style of Amazon /
   Walmart / Best Buy. Three zones laid out via CSS grid on the
   .nav element:

     [hamburger pinned left (absolute)]   [logo centered]   [account · cart]

   The existing hamburger, .btn-nav-account, .acct-wrap, and
   .btn-cart buttons port over UNCHANGED — markup stays put, SVGs
   stay put, sizes stay put. The hamburger lives inside .nav-right
   in the DOM (where it always has); it's pulled out of the flex
   flow here via position:absolute so it lands at the left edge
   without requiring a per-page markup change. The brand uses the
   existing <img src="/logo.png"> from each page.

   Shrink-on-scroll is a no-op on the flat bar — nav-shrink.js
   still toggles .shrink and we let it; the visual no-ops below
   keep the height/padding constant so the bar doesn't flicker.

   Desktop (≥720px) is untouched. This is polish, not a redesign.
   ════════════════════════════════════════════════════════════════ */

/* The sticky bottom cart pill (nav-drawer.js injects it into <body>
   on every page) is a MOBILE-ONLY feature — on desktop the cart lives
   in the nav header chip instead. Default it to display:none so that
   on desktop, where the styling block below isn't active, the
   element doesn't fall through to default browser rendering and show
   "your order 0 items $0.00 review cart →" as raw text at the bottom
   of the page. The mobile @media block re-enables `display:flex` and
   adds the pill styling. */
.nav-checkout-cta{display:none;}

@media(max-width:720px){
  .nav{
    /* Flush edge-to-edge, square corners, sit at the top. The nav's
       background extends through the iOS safe-area-inset-top zone
       (Dynamic Island / notch) via padding-top + matching height, so
       no page content can bleed up into the safe area when the nav
       is visible. Content (logo, hamburger, account, cart) is pushed
       below the safe area by the padding-top, then grid-centered in
       the remaining 52px content row. On Android / non-iOS where
       safe-area-inset-top is 0, the calc resolves to plain 52px and
       the nav looks identical to before. */
    top:0;left:0;right:0;width:auto;max-width:none;
    transform:none !important;
    border-radius:0;
    /* box-sizing:border-box explicit — every page's reset already sets
       this universally, but stating it here keeps the height math
       correct (52px content row + safe-area padding inside total
       height) even if a stylesheet later relaxes the global rule. */
    box-sizing:border-box;
    height:calc(52px + env(safe-area-inset-top, 0px));
    padding:env(safe-area-inset-top, 0px) 8px 0;
    background:#FAF8F3;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border:none;
    border-bottom:1px solid rgba(27,26,107,.08);
    box-shadow:0 2px 8px rgba(27,26,107,.04);
    /* 3-zone grid replaces the desktop flex layout on mobile.
       Both flanking columns are 1fr so the brand stays at the
       viewport's true center regardless of how wide the right
       cluster gets (signed-in vs signed-out). */
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    transition:background .3s ease, box-shadow .3s ease;
  }
  /* Shrink class is wired by /scripts/nav-shrink.js — we keep the
     hook intact but render the same as the un-shrunken bar so
     scrolling doesn't reshape the chrome. */
  .nav.shrink{
    box-sizing:border-box;
    height:calc(52px + env(safe-area-inset-top, 0px));
    padding:env(safe-area-inset-top, 0px) 8px 0;
    transform:none !important;
    background:#FAF8F3;
    box-shadow:0 2px 8px rgba(27,26,107,.04);
  }

  /* Brand → middle column, centered. Logo size unchanged (canonical
     26px from the base rule still applies). */
  .nav-brand{grid-column:2;justify-self:center;}
  .nav img,.nav.shrink img{max-height:26px;width:auto;transition:none;}

  /* Right cluster → right column, flush. gap:0 brings account +
     cart hard against each other — each existing button is ~34px
     with the SVG centered, so the visual gap between glyphs is
     still comfortable without spacing chrome between them. */
  .nav-right{grid-column:3;justify-self:end;gap:0 !important;}

  /* Pull the hamburger out of .nav-right's flex flow and pin it to
     the bar's left edge. CRITICAL: use explicit `top` (not 50% +
     translateY(-50%) centering) so the site-wide
     `:active { transform:none !important }` rule can't clobber the
     centering transform mid-press. That clobber was the cause of the
     reported "hamburger drops down slightly on click" — pressing
     fired :active → transform:none → button jumped from centered to
     top:50%-aligned, a visible Y shift. Explicit top math:
     (nav content row 52px − button 44px) / 2 = 4px, plus the
     env(safe-area-inset-top, 0px) offset so the hamburger lands in
     the content row (below the safe-area padding), not behind the
     iOS Dynamic Island. */
  .nav .hamburger{
    position:absolute;
    left:8px;
    top:calc(env(safe-area-inset-top, 0px) + 4px);
    width:44px;height:44px;
    transition:none;
  }
  .nav.shrink .hamburger{width:44px;height:44px;}

  /* Account avatar (signed-in) stays as the 34×34 navy circle with
     the user's initial — production look preserved. */
  .btn-nav-account{
    width:34px !important;height:34px !important;
    min-height:34px !important;min-width:34px !important;
    flex-shrink:0;aspect-ratio:1/1;border-radius:50%;
    transition:none;
  }
  .nav.shrink .btn-nav-account{
    width:34px !important;height:34px !important;
    min-height:34px !important;min-width:34px !important;
  }

  /* Cart icon polish — strip the round pill background and border,
     grow the hit area to 44×44, bump the svg to 22×22, and "cut" the
     count digit through the upper-right corner of the basket via a
     cream text-stroke that masks the cart stroke wherever it overlaps.
     Existing svg + #cartBtn / #cartBadge markup is untouched. */
  #cartBtn{
    width:44px !important;height:44px !important;
    min-height:44px !important;min-width:44px !important;
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    flex-shrink:0;
  }
  .nav.shrink #cartBtn{
    width:44px !important;height:44px !important;
    min-height:44px !important;min-width:44px !important;
  }
  #cartBtn .cart-svg{width:22px !important;height:22px !important;}
  /* Badge: a coral digit (no pill, no halo ring) tucked into the cart
     basket's top-right corner. The cream text-stroke matches the bar
     background so the digit visually punches through the cart outline.
     Only painted when > 0 — the cart-state writer toggles inline
     display, which this rule respects via min-width / line-height
     instead of width/height. */
  .cart-badge{
    position:absolute;
    top:7px !important;right:5px !important;
    background:transparent !important;
    color:var(--coral,#C87555) !important;
    width:auto !important;height:auto !important;
    min-width:0 !important;min-height:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    font-family:'Plus Jakarta Sans',sans-serif !important;
    font-size:12px !important;font-weight:900 !important;
    line-height:1 !important;
    font-variant-numeric:tabular-nums;letter-spacing:-.02em;
    -webkit-text-stroke:3px #FAF8F3;
    paint-order:stroke fill;
  }

  /* Account button (signed-OUT) — production currently hides the
     entire .acct-wrap when not signed in (the desktop btn-nav-auth
     CTA carries auth entry there). On mobile that left the right
     cluster looking lopsided. With this polish, signed-out users see
     a 44×44 outline-person glyph rendered via background-image on the
     existing button (no markup change required). nav-drawer.js
     rewires its onclick to open the auth modal directly in this
     state. */
  html:not([data-tdco-auth="in"]) .acct-wrap{display:block !important;}
  html:not([data-tdco-auth="in"]) .btn-nav-account{
    width:44px !important;height:44px !important;
    min-height:44px !important;min-width:44px !important;
    background:transparent !important;
    border:none !important;border-radius:0 !important;
    color:transparent !important;font-size:0 !important;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%231B1A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:24px 24px !important;
  }

  /* Hide-on-scroll-down / show-on-scroll-up — Instagram / Twitter
     pattern. nav-drawer.js's _wireScrollHide() toggles `.hidden` on
     the nav based on scroll direction past a 60px threshold. Above
     that threshold and scrolling down → hide. Any scroll up → show.
     At top of page (<60px) → always show. Drawer-open also forces
     visible so the bar doesn't disappear behind the open drawer. */
  .nav{
    transition:transform .25s cubic-bezier(.22,1,.36,1),
               background .3s ease,
               box-shadow .3s ease !important;
  }
  .nav.hidden{transform:translateY(-100%) !important;}

  /* Bottom checkout CTA — sticky pill anchored to the bottom of the
     viewport. nav-drawer.js injects the element and toggles `.visible`
     based on cart item count. Hidden by default + when on /checkout
     (data-page="checkout" on body). Respects iOS safe-area-inset. */
  .nav-checkout-cta{
    position:fixed;left:10px;right:10px;
    bottom:calc(14px + env(safe-area-inset-bottom,0));
    z-index:320;
    background:var(--navy,#1B1A6B);color:#fff;
    border-radius:14px;padding:13px 16px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    box-shadow:0 4px 16px rgba(27,26,107,.18);
    font-family:'Plus Jakarta Sans',sans-serif;
    text-decoration:none;
    transform:translateY(140%);opacity:0;pointer-events:none;
    transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s ease;
  }
  .nav-checkout-cta.visible{
    transform:translateY(0);opacity:1;pointer-events:auto;
  }
  .nav-checkout-cta-l{display:flex;flex-direction:column;gap:2px;line-height:1;}
  .nav-checkout-cta-eyebrow{
    font-size:10px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:rgba(255,255,255,.62);
  }
  .nav-checkout-cta-line{
    font-size:14px;font-weight:800;letter-spacing:-.01em;
  }
  .nav-checkout-cta-line b{font-weight:900;font-variant-numeric:tabular-nums;}
  .nav-checkout-cta-r{
    display:inline-flex;align-items:center;gap:6px;
    font-size:13px;font-weight:800;
    background:rgba(255,255,255,.14);padding:8px 14px;border-radius:99px;
  }
  /* Pages that have their own bottom action (the /store cart pill,
     /checkout itself) opt out via body[data-no-checkout-cta]. */
  body[data-no-checkout-cta] .nav-checkout-cta{display:none;}

  @media(max-width:400px){
    /* Narrow phones — tighten side padding from 8px → 6px. CRITICAL:
       re-state the top env(safe-area-inset-top) padding here. A naked
       `padding:0 6px` shorthand resets `padding-top:0` and wipes the
       safe-area inset from the outer ≤720px rule — the nav then
       renders with content under the iOS Dynamic Island on every
       iPhone narrower than 400px (iPhone 15 / 15 Pro at 393px). */
    .nav{padding:env(safe-area-inset-top, 0px) 6px 0;}
    .nav .hamburger{left:6px;}
    .nav img,.nav.shrink img{max-height:22px;}
  }

  /* iOS Safari fallback for the nav itself — companion to the
     body::before cap floor at the top of this @media block. On pages
     where env(safe-area-inset-top) resolves to 0 (observed on
     home.html / intelligence.html; root cause across PR #2167/#2170/
     #2172/#2175 never isolated, most likely a Safari rendering quirk
     specific to those pages' DOM/CSS), the canonical mobile nav above
     ends up with padding-top:0 / height:52 — its content (hamburger,
     logo, account, cart) sits at y=4 and the iOS Dynamic Island
     overlays it. Also, below the nav, the page hero's margin-top:84
     leaves a 32px gap of body bg (white on the broken pages) before
     the hero starts — visible as the "white strip below the nav".
     `@supports (-webkit-touch-callout:none)` matches iOS Safari ONLY
     (Android Chrome / desktop browsers don't ship this property), so
     the floor never touches non-iOS layout. max(env, 47) is a no-op
     on devices where env returns the real Dynamic-Island value
     (59-62) and a hard floor where env returns 0. Padding-top is set
     as its own property (not via the padding shorthand) so the
     narrow-phone @media block above can keep its 6px side padding
     and only the top value is overridden. Height and hamburger-top
     follow the same max() so all three move together. */
  @supports (-webkit-touch-callout:none){
    .nav, .nav.shrink{
      height:calc(52px + max(env(safe-area-inset-top, 0px), 47px));
      padding-top:max(env(safe-area-inset-top, 0px), 47px);
    }
    .nav .hamburger{
      top:calc(max(env(safe-area-inset-top, 0px), 47px) + 4px);
    }
  }
}

/* ════════════════════════════════════════════════════════════════
   ABOUT-US DROPDOWN — exposes the second plate program page.
   Markup is injected at runtime by /scripts/nav-drawer.js so this
   CSS only activates on pages that actually have the canonical
   nav (where the script also lives). Idempotent if already present.
   ════════════════════════════════════════════════════════════════ */
.nav-dd{position:relative;display:inline-flex;align-items:center;}
.nav-dd-trigger{
  display:inline-flex !important;align-items:center;gap:6px;
  cursor:pointer;
}
.nav-dd-trigger::after{
  content:'';display:inline-block;
  width:5px;height:5px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .2s ease;
  opacity:.7;
}
.nav-dd:hover .nav-dd-trigger::after,
.nav-dd:focus-within .nav-dd-trigger::after{
  transform:rotate(225deg) translate(-1px,-1px);opacity:1;
}
.nav-dd-menu{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(-6px);
  margin-top:18px;min-width:240px;
  background:#fff;
  border:1px solid rgba(20,16,68,.08);
  border-radius:16px;
  box-shadow:0 18px 48px rgba(20,16,68,.16),0 4px 14px rgba(20,16,68,.06);
  padding:8px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:301;
}
.nav-dd-menu::before{
  content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:10px;height:10px;background:#fff;
  border-top:1px solid rgba(20,16,68,.08);border-left:1px solid rgba(20,16,68,.08);
}
/* invisible hover bridge — fills the gap between trigger and menu so the
   cursor stays inside .nav-dd while traveling. without this the dropdown
   closes the moment the cursor leaves the trigger. */
.nav-dd-menu::after{
  content:'';position:absolute;
  top:-24px;left:-24px;right:-24px;height:24px;
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-dd-menu a{
  display:flex !important;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px !important;border-radius:10px;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-size:13px !important;font-weight:700 !important;
  color:#17182A !important;
  letter-spacing:-.005em;text-transform:lowercase;
  transition:background .15s ease, color .15s ease;line-height:1.2 !important;
  text-decoration:none;
}
.nav-dd-menu a:hover{background:#FAF8F3;color:#1B1A6B !important;}
.nav-dd-menu a.nav-dd-current{background:rgba(200,169,110,.1);color:#1B1A6B !important;}
.nav-dd-menu a small{
  display:block;
  font-size:11px;color:#6B6B85;font-weight:500;
  letter-spacing:0;margin-top:2px;
}
.nav-dd-tag{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:#8A6F3F;
  padding:3px 8px;border-radius:99px;
  background:rgba(200,169,110,.18);
  border:1px solid rgba(200,169,110,.4);
  flex-shrink:0;
}
/* mobile drawer — second plate sits as a flat link below "about us"
   (drawer is already a vertical list, so no dropdown UI needed). The
   tag pill renders inline for the visual cue. */
.nav-drawer .nav-dd-tag{
  vertical-align:middle;
}