/* ============================================================
   Romi's Real — romisrealfood.com
   Palette sampled from the 6 oz package artwork.
   ============================================================ */

:root{
  --olive:      #333B1F;   /* logo / primary ink            */
  --olive-2:    #454F2A;
  --sage:       #9EC76D;   /* PMS 577 C accent              */
  --sage-deep:  #7D8F47;   /* logo heart — decorative only  */
  --sage-text:  #5F6E31;   /* AA-contrast green for text on light */
  --brown:      #5A2C14;   /* "Multigrain" wordmark         */
  --cream:      #F6F3EA;   /* bag stock                     */
  --cream-2:    #EFEADC;
  --paper:      #FFFFFF;
  --ink:        #1E2413;
  --muted:      #5F6B4C;
  --line:       #D9D3C2;

  --wrap: 1160px;
  --r: 14px;
  --shadow-sm: 0 1px 2px rgba(30,36,19,.06), 0 4px 12px rgba(30,36,19,.06);
  --shadow-md: 0 2px 4px rgba(30,36,19,.05), 0 18px 40px rgba(30,36,19,.10);

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:-.015em; margin:0; }
p{ margin:0 0 1em; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--olive); color:var(--cream); padding:12px 18px; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

:where(a,button,summary):focus-visible{
  outline:3px solid var(--sage-deep); outline-offset:3px; border-radius:4px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:.82em 1.5em; border-radius:999px; text-decoration:none;
  background:var(--olive); color:var(--cream);
  border:1.5px solid var(--olive);
  transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{ background:var(--olive-2); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--olive); box-shadow:none; }
.btn--ghost:hover{ background:rgba(51,59,31,.07); color:var(--olive); }
.btn--sm{ font-size:.86rem; padding:.66em 1.15em; }

/* ---------- shared section bits ---------- */
.kicker{
  font-family:var(--sans); font-size:.76rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage-text); margin:0 0 .9rem;
}
.kicker--dark{ color:var(--muted); }

.sec__head{ max-width:60ch; margin:0 0 clamp(2rem,4vw,3.25rem); }
.sec__head h2{ font-size:clamp(2rem,4.4vw,3rem); margin-bottom:.5rem; }
.sec__sub{ color:var(--muted); font-size:1.05rem; margin:0; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.nav.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(30,36,19,.06); }

.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:10px; }
.nav__brand img{ width:60px; height:60px; transition:width .2s ease, height .2s ease; }
.nav.is-stuck .nav__brand img{ width:48px; height:48px; }

.nav__links{ display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); }
.nav__links a:not(.btn){
  text-decoration:none; font-weight:500; font-size:.94rem; color:var(--olive);
  padding-block:6px; border-bottom:2px solid transparent;
}
.nav__links a:not(.btn):hover{ border-bottom-color:var(--sage); }

/* hamburger — hidden on desktop */
.nav__toggle{
  display:none; width:44px; height:44px; padding:10px;
  background:transparent; border:1.5px solid var(--line); border-radius:10px;
  cursor:pointer; flex-direction:column; justify-content:space-between;
}
.nav__toggle span{
  display:block; height:2px; width:100%; background:var(--olive); border-radius:2px;
  transition:transform .22s ease, opacity .18s ease;
}
.nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.is-open .nav__toggle span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

@media (max-width: 860px){
  .nav__toggle{ display:flex; }
  .nav__inner{ flex-wrap:wrap; }

  .nav__links{
    order:3; flex-basis:100%;
    flex-direction:column; align-items:stretch; gap:0;
    overflow:hidden; max-height:0;
    transition:max-height .28s ease, opacity .22s ease, margin .28s ease;
    opacity:0; margin-bottom:0;
  }
  .nav.is-open .nav__links{
    max-height:380px; opacity:1; margin-bottom:12px;
    border-top:1px solid var(--line); margin-top:6px; padding-top:6px;
  }
  .nav__links a:not(.btn){ padding:.85rem .25rem; border-bottom:1px solid var(--line); }
  .nav__links a:not(.btn):hover{ border-bottom-color:var(--line); color:var(--sage-text); }
  .nav__links .btn{ margin-top:12px; align-self:flex-start; border-bottom:1.5px solid var(--olive); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem); overflow:hidden; }
.hero__inner{
  display:grid; grid-template-columns:1fr 1.06fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero h1{
  font-size:clamp(2.6rem,6.2vw,4.5rem);
  margin:0 0 1.1rem;
}
.hero h1 em{ font-style:normal; color:var(--sage-deep); }
.lede{ font-size:clamp(1.05rem,1.5vw,1.2rem); color:var(--muted); max-width:46ch; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.9rem; }

.hero__badges{
  display:flex; flex-wrap:wrap; gap:8px 10px;
  list-style:none; margin:2.4rem 0 0; padding:0;
}
.hero__badges li{
  font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--olive); background:var(--cream-2);
  border:1px solid var(--line); border-radius:999px; padding:.42em .95em;
}

.hero__art img{
  width:100%; border-radius:var(--r);
  box-shadow:var(--shadow-md);
}

@media (max-width: 900px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__art{ order:-1; }
}

/* ============================================================
   TRANSPARENCY REPORT
   ============================================================ */
.report{
  background:var(--olive); color:var(--cream);
  padding-block:clamp(3rem,6vw,4.75rem);
}
.report__head{ text-align:center; max-width:52ch; margin:0 auto clamp(2rem,4vw,3rem); }
.report__head h2{
  font-size:clamp(1.9rem,4vw,2.75rem);
  text-transform:uppercase; letter-spacing:.01em; font-weight:700;
}
.report__head p{ color:color-mix(in srgb, var(--cream) 72%, transparent); margin:.65rem 0 0; }

.report__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  border:2px solid color-mix(in srgb, var(--cream) 30%, transparent);
  border-radius:var(--r); overflow:hidden;
}
.report__grid li{
  padding:clamp(1.4rem,3vw,2.1rem) 1rem; text-align:center;
  border-right:1px solid color-mix(in srgb, var(--cream) 20%, transparent);
  display:flex; flex-direction:column; gap:.5rem; align-items:center; justify-content:center;
}
.report__grid li:last-child{ border-right:0; }

.report__num{
  font-family:var(--sans); font-weight:800; font-size:clamp(2.8rem,6vw,4rem);
  line-height:1; color:var(--sage);
}
.report__num small{ font-size:.34em; font-weight:700; margin-left:.1em; vertical-align:.9em; }
.report__lbl{
  font-size:.82rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  line-height:1.35;
}
.report__lbl em{ font-style:normal; display:block; font-weight:400; opacity:.72; letter-spacing:.04em; }

.report__foot{
  text-align:center; margin:clamp(1.75rem,3vw,2.5rem) 0 0;
  font-family:var(--serif); font-size:clamp(1.15rem,2.2vw,1.55rem); font-weight:600;
}

@media (max-width: 780px){
  .report__grid{ grid-template-columns:repeat(2,1fr); }
  .report__grid li:nth-child(2n){ border-right:0; }
  .report__grid li:nth-child(-n+2){ border-bottom:1px solid color-mix(in srgb, var(--cream) 20%, transparent); }
}
@media (max-width: 420px){
  .report__grid{ grid-template-columns:1fr; }
  .report__grid li{ border-right:0; border-bottom:1px solid color-mix(in srgb, var(--cream) 20%, transparent); }
  .report__grid li:last-child{ border-bottom:0; }
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.chips{ padding-block:clamp(3.5rem,7vw,6rem); }
.chips__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,3vw,2.25rem); }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

.card__shot{
  background:var(--cream-2); display:grid; place-items:center;
  padding:clamp(1.5rem,3vw,2.25rem);
}
.card__shot img{ width:auto; max-height:340px; border-radius:8px; box-shadow:var(--shadow-sm); }

.card__body{ padding:clamp(1.4rem,3vw,2rem); display:flex; flex-direction:column; flex:1; }
.card__name{ font-size:clamp(1.75rem,3.2vw,2.35rem); color:var(--olive); }
.card__name--brown{ color:var(--brown); }
.card__tag{ color:var(--sage-text); font-weight:600; font-size:1rem; margin:.35rem 0 1.25rem; }

.card__count{
  display:inline-flex; align-items:baseline; gap:.5rem; align-self:flex-start;
  background:var(--olive); color:var(--cream);
  border-radius:999px; padding:.3em 1em .35em;
  font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  margin:0 0 1.15rem;
}
.card__count span{ font-size:1.5rem; letter-spacing:0; color:var(--sage); }

.ilist{ list-style:none; counter-reset:i; margin:0 0 1.4rem; padding:0; border-top:1px solid var(--line); }
.ilist li{
  counter-increment:i;
  display:grid; grid-template-columns:1.6rem 1fr auto; align-items:baseline; gap:.5rem;
  padding:.62rem 0; border-bottom:1px solid var(--line);
}
.ilist li::before{
  content:counter(i,decimal-leading-zero);
  font-size:.78rem; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums;
}
.ilist li span{ font-weight:600; }
.ilist li b{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sage-text);
}

.card__meta{ margin:auto 0 0; font-size:.8rem; color:var(--muted); }

@media (max-width: 820px){ .chips__grid{ grid-template-columns:1fr; } }

/* ============================================================
   WHY
   ============================================================ */
.why{ background:var(--cream-2); padding-block:clamp(3.5rem,7vw,6rem); }
.why__inner{ display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.why h2{ font-size:clamp(1.9rem,4.2vw,2.9rem); margin-bottom:2rem; max-width:18ch; }

.why__block{ padding-top:1.5rem; border-top:1px solid var(--line); margin-top:1.5rem; }
.why__block:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.why__block h3{ font-size:1.25rem; margin-bottom:.6rem; color:var(--olive); }
.why__block p{ color:var(--muted); max-width:60ch; }
.why__punch{
  color:var(--olive) !important; font-weight:600;
  border-left:3px solid var(--sage); padding-left:1rem; margin-bottom:0;
}

.why__certs{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2rem); box-shadow:var(--shadow-sm);
  position:sticky; top:110px;
}
.why__certs h3{ font-size:1.1rem; margin-bottom:1.1rem; color:var(--olive); }
.why__certs dl{ margin:0; }
.why__certs div{ display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; padding:.7rem 0; border-top:1px solid var(--line); }
.why__certs div:first-child{ border-top:0; padding-top:0; }
.why__certs dt{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-top:.22rem; }
.why__certs dd{ margin:0; font-size:.94rem; font-weight:500; }
.why__certs dd span{ font-weight:400; color:var(--muted); font-size:.85rem; }

@media (max-width: 900px){
  .why__inner{ grid-template-columns:1fr; }
  .why__certs{ position:static; }
}

/* ============================================================
   NUTRITION
   ============================================================ */
.nutri{ padding-block:clamp(3.5rem,7vw,6rem); }
.nutri__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.75rem,4vw,3rem); }
.nutri__name{ font-size:1.7rem; color:var(--olive); margin-bottom:1rem; }
.nutri__name--brown{ color:var(--brown); }

/* FDA-style panel */
.nf{
  width:100%; border-collapse:collapse; background:var(--paper);
  border:2px solid var(--ink); border-radius:4px;
  font-size:.9rem; line-height:1.25;
  font-family:var(--sans);
}
.nf__title{
  caption-side:top; text-align:left;
  font-weight:800; font-size:clamp(1.6rem,3.4vw,2.1rem); letter-spacing:-.02em;
  padding:.35rem .6rem .1rem; background:var(--paper);
  border:2px solid var(--ink); border-bottom:0; border-radius:4px 4px 0 0;
}
.nf th{ text-align:left; font-weight:600; }
.nf th,.nf td{ padding:.2rem .6rem; border-bottom:1px solid var(--ink); }
.nf td{ text-align:right; font-weight:700; white-space:nowrap; }
.nf tr:last-child th, .nf tr:last-child td{ border-bottom:0; }

.nf__serv th,.nf__serv td{ border-bottom:0; font-weight:400; padding-top:.1rem; padding-bottom:.1rem; }
.nf__serv--b th,.nf__serv--b td{ font-weight:700; padding-bottom:.25rem; }
.nf__rule td{ padding:0; border-bottom:9px solid var(--ink); }

.nf__cal th{ font-size:.78rem; font-weight:400; padding-top:.25rem; }
.nf__cal th span{ display:block; font-size:1.7rem; font-weight:800; letter-spacing:-.02em; line-height:1.05; }
.nf__cal td{ font-size:2.1rem; font-weight:800; vertical-align:bottom; letter-spacing:-.02em; }
.nf__cal th,.nf__cal td{ border-bottom:5px solid var(--ink); }

.nf__dv td{ text-align:right; font-size:.76rem; font-weight:700; padding-top:.15rem; padding-bottom:.15rem; }
.nf__in th{ padding-left:1.6rem; font-weight:400; }
.nf__in2 th{ padding-left:2.8rem; font-weight:400; }
.nf__last th,.nf__last td{ border-bottom:5px solid var(--ink); font-weight:700; }
.nf tbody tr:nth-last-child(-n+4) th{ font-weight:400; }
.nf tbody tr:nth-last-child(-n+4) td{ font-weight:400; }

.nf__note{ font-size:.72rem; color:var(--muted); line-height:1.4; margin:.6rem 0 1rem; }
.ing{ font-size:.86rem; color:var(--muted); }
.ing b{ color:var(--ink); }

/* full artwork disclosure */
.labels{
  margin-top:clamp(2rem,4vw,3rem);
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
}
.labels summary{
  cursor:pointer; padding:1rem 1.35rem; font-weight:600; list-style:none;
  display:flex; align-items:center; gap:.6rem;
}
.labels summary::-webkit-details-marker{ display:none; }
.labels summary::before{
  content:"+"; font-weight:700; color:var(--sage-text);
  font-size:1.2rem; line-height:1; width:1rem;
}
.labels[open] summary::before{ content:"\2013"; }
.labels__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem;
  padding:0 1.35rem 1.5rem;
}
.labels figure{ margin:0; }
.labels img{ width:100%; border:1px solid var(--line); border-radius:8px; }
.labels figcaption{ font-size:.8rem; color:var(--muted); margin-top:.5rem; text-align:center; }

@media (max-width: 820px){
  .nutri__grid{ grid-template-columns:1fr; }
  .labels__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   WHERE TO BUY
   ============================================================ */
.buy{ background:var(--cream-2); padding-block:clamp(3.5rem,7vw,5.5rem); }
.buy__inner{ text-align:center; }
.buy h2{ font-size:clamp(1.9rem,4.2vw,2.9rem); }
.buy__lede{ max-width:54ch; margin:1rem auto 2.5rem; color:var(--muted); font-size:1.05rem; }
.buy__cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; max-width:760px; margin-inline:auto; }
.buy__card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2rem); text-align:left; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
.buy__card h3{ font-size:1.2rem; margin-bottom:.5rem; color:var(--olive); }
.buy__card p{ color:var(--muted); font-size:.95rem; }
.buy__card .btn{ align-self:flex-start; margin-top:auto; }

@media (max-width: 700px){ .buy__cards{ grid-template-columns:1fr; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding-block:clamp(3.5rem,7vw,5.5rem); }
.contact__inner{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem);
  align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(2rem,5vw,3.5rem); box-shadow:var(--shadow-sm);
}
.contact h2{ font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:.75rem; }
.contact p{ color:var(--muted); max-width:42ch; margin:0; }

.contact__mail{
  font-family:var(--serif); font-size:clamp(1.15rem,2.6vw,1.7rem); font-weight:600;
  color:var(--olive); text-decoration:none;
  border-bottom:2px solid var(--sage); padding-bottom:2px;
  overflow-wrap:anywhere;
}
.contact__mail:hover{ border-bottom-color:var(--olive); }
.contact__details address{
  font-style:normal; margin-top:1.5rem; color:var(--muted); font-size:.95rem; line-height:1.7;
}
.contact__details address strong{ color:var(--ink); }

@media (max-width: 760px){ .contact__inner{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--olive); color:color-mix(in srgb, var(--cream) 80%, transparent); padding-block:clamp(2.5rem,5vw,3.5rem); }
.foot__inner{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.foot__logo{ width:84px; height:84px; }
.foot__cols nav{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-bottom:1.1rem; }
.foot__cols nav a{ color:var(--cream); text-decoration:none; font-size:.92rem; font-weight:500; border-bottom:1px solid transparent; }
.foot__cols nav a:hover{ border-bottom-color:var(--sage); }
.foot__legal{ margin:0; font-size:.82rem; line-height:1.7; }
.foot__legal span{ opacity:.7; }

@media (max-width: 620px){
  .foot__inner{ grid-template-columns:1fr; text-align:left; }
}