/* ============================================================
   LEMONGROOVE BRANDS — shared site styles (satellite pages + nav)
   The company profile (index.html) keeps its own inline styles
   and imports only the nav rules from here.
   ============================================================ */
:root{
  --rind:#EEF0C0; --zest:#F0DF00; --leaf:#708736; --leaf-ink:#46561E;
  --vinyl:#0C0C0A; --pith:#FBFBEF; --flesh:#F7EC86;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Outfit","Segoe UI",system-ui,sans-serif;
  --mono:"Azeret Mono",ui-monospace,Consolas,monospace;
  --gut:clamp(1.25rem,4vw,3.5rem);
}
*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{margin:0;background:var(--rind);color:var(--leaf-ink);font-family:var(--body);
  font-size:clamp(1rem,.55vw + .9rem,1.125rem);line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--vinyl);outline-offset:3px}
.shell{max-width:74rem;margin:0 auto;padding:0 var(--gut)}
.liner{font-family:var(--mono);font-size:.625rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--leaf-ink);display:block;margin-bottom:.75rem}

/* ── GLOBAL TOP NAV ─────────────────────────────────────────
   Wordmark + scrollable pill row. No hamburger, no JS:
   on narrow screens the links scroll horizontally, which is
   more reliable than menu state and always one tap deep.   */
.nav{position:sticky;top:0;z-index:80;background:var(--rind);
  border-bottom:1px solid rgba(70,86,30,.18)}
.nav__row{display:flex;align-items:center;gap:1rem;
  max-width:74rem;margin:0 auto;padding:.3rem var(--gut)}
.nav__mark{font-family:var(--display);font-weight:900;font-size:1rem;
  letter-spacing:-.02em;text-transform:uppercase;text-decoration:none;
  white-space:nowrap;color:var(--vinyl)}
.nav__links{display:flex;gap:.35rem;list-style:none;margin:0;
  /* 6px vertical padding: overflow-x:auto clips descendants vertically too,
     so the 44px tap overlay below needs this room inside the clip box.
     The row's padding drops by the same amount — net bar height unchanged. */
  padding:6px 0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav__links::-webkit-scrollbar{display:none}
.nav__links a{display:block;white-space:nowrap;text-decoration:none;
  font-family:var(--mono);font-size:.688rem;letter-spacing:.06em;
  padding:.45rem .8rem;border-radius:999px;color:var(--leaf-ink);position:relative}
/* pills render ~32px tall; extend the tap area to 44px without changing the look */
.nav__links a::before{content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px}
.nav__links a:hover{background:rgba(70,86,30,.12)}
.nav__links a[aria-current="page"]{background:var(--vinyl);color:var(--pith)}
.nav__links a.nav__cta{background:var(--zest);color:var(--vinyl);font-weight:700}
.nav__links a.nav__cta:hover{background:var(--flesh)}

/* ── SATELLITE PAGE PRIMITIVES ── */
.head{padding:clamp(2.5rem,8vw,5rem) 0 1.5rem}
.head__title{font-family:var(--display);font-weight:900;line-height:.94;
  letter-spacing:-.03em;font-size:clamp(2.4rem,8vw,5rem);margin:0 0 1.25rem;color:var(--vinyl)}
.head__lede{max-width:46ch;font-size:clamp(1.05rem,.5vw + 1rem,1.3rem)}
.cardlist{display:grid;gap:1rem;padding:0 0 clamp(3rem,8vw,5rem);list-style:none;margin:0}
@media (min-width:760px){ .cardlist{grid-template-columns:repeat(2,1fr)} }
.card{background:var(--pith);border-radius:16px;padding:clamp(1.25rem,3vw,2rem);
  display:flex;flex-direction:column;gap:.6rem}
.card h2,.card h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  margin:0;color:var(--vinyl);font-size:1.35rem}
.card--dark{background:var(--vinyl);color:var(--pith)}
.card--dark .liner{color:rgba(240,223,0,.75)}
.card--dark h2,.card--dark h3{color:var(--pith)}
.card__cta{display:inline-block;align-self:flex-start;background:var(--zest);
  color:var(--vinyl);font-weight:700;text-decoration:none;
  padding:.8rem 1.5rem;border-radius:999px;min-height:44px;margin-top:.5rem}
.card__cta--ghost{background:transparent;border:1px solid currentColor;color:inherit}
.pill{display:inline-block;font-family:var(--mono);font-size:.625rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  background:var(--zest);color:var(--vinyl);padding:.35rem .65rem;
  transform:rotate(-2deg);align-self:flex-start}
.note{border-left:3px solid var(--zest);padding-left:1rem;margin:1.5rem 0}
.note h2{font-family:var(--display);font-size:1rem;text-transform:uppercase;
  letter-spacing:.04em;margin:0 0 .5rem;color:var(--vinyl)}

.foot{background:var(--vinyl);color:var(--pith);padding:clamp(2rem,6vw,4rem) 0;margin-top:2rem}
.foot a{color:var(--zest)}
.foot__grid{display:grid;gap:1.5rem}
@media (min-width:760px){ .foot__grid{grid-template-columns:repeat(3,1fr)} }
.foot .liner{color:rgba(240,223,0,.75)}