/* ==========================================================================
   Caffenation — shared stylesheet
   One design language for every page: colours, type scale and spacing all
   come from the tokens below. Do not introduce per-page palettes or fonts.
   ========================================================================== */

:root{
  /* ---- palette (tokens) ---- */
  --bg:#e6e2e1;              /* paper band */
  --bg-dark:#111111;         /* deep charcoal */
  --surface-dark:#1c1c1c;    /* raised charcoal */
  --border-dark:#232323;
  --text:#111111;
  --text-inv:#e6e2e1;
  --text-muted:rgba(17,17,17,.62);
  --text-muted-inv:rgba(230,226,225,.62);
  --accent:#ca3311;          /* deep roast red — safe for small text on paper */
  --accent-hot:#eb2626;      /* decorative red — use for hover/fills, not small text */
  --paper-alt:#dedad8;
  --white:#ffffff;

  /* ---- type ---- */
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Anton","Archivo Condensed Black","Haettenschweiler",Impact,sans-serif;

  /* ---- layout / rhythm ---- */
  --container:1600px;
  --pad:clamp(18px,4vw,64px);
  --band-pad:clamp(46px,6vw,96px);
  --section-gap:clamp(20px,2.6vw,34px);
  --micro-size:11.5px;
  --micro-track:.14em;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---- aliases so page-level blocks that reference --color-* resolve to
         the shared tokens above instead of inventing a second palette ---- */
  --color-bg:#ffffff;
  --color-surface:var(--bg);
  --color-border:rgba(17,17,17,.16);
  --color-text:var(--text);
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{list-style:none;padding:0}
table{border-collapse:collapse}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:8px;top:-60px;z-index:200;
  background:var(--accent);color:#fff;padding:10px 16px;font-size:13px;
  text-transform:uppercase;letter-spacing:.08em;transition:top .2s;
}
.skip:focus{top:8px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- type ---------- */
.h1,.h2,h1.h2,h2.h2{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.98;
  letter-spacing:-.005em;
}
.h1{font-size:clamp(34px,6.4vw,84px)}
.h2{
  font-size:clamp(30px,3.6vw,56px);
}
.h2.inv{color:var(--text-inv)}

main > section > h1,
main > section > h2{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  line-height:1.02;
  letter-spacing:-.005em;
}
main > section > h1{font-size:clamp(30px,5.4vw,68px)}
main > section > h2{font-size:clamp(24px,3.4vw,44px)}

/* unclassed content sections (e.g. the equipment page) get the shared band
   rhythm and container width so they match the rest of the site */
main > section:not([class]){
  max-width:var(--container);
  margin-inline:auto;
  padding-block:var(--band-pad);
  padding-inline:var(--pad);
}

.micro{
  font-size:var(--micro-size);
  text-transform:uppercase;
  letter-spacing:var(--micro-track);
  font-weight:600;
  line-height:1.5;
}
.micro.accent{color:var(--accent)}
.muted{color:var(--text-muted)}
.muted-inv{color:var(--text-muted-inv)}

.eyebrow{
  font-size:12px;text-transform:uppercase;letter-spacing:var(--micro-track);font-weight:600;
  color:var(--text-inv);
}

.body-inv{color:rgba(230,226,225,.78);font-size:16.5px;max-width:56ch}
.body{color:rgba(17,17,17,.75);max-width:56ch}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  border-bottom:1px solid currentColor;padding-bottom:3px;
  transition:color .2s,gap .2s;
}
.link-arrow span{transition:transform .25s var(--ease)}
.link-arrow:hover{color:var(--accent);gap:12px}
.link-arrow:hover span{transform:translateX(3px)}
.link-arrow.inv{color:var(--text-inv)}
.link-arrow.inv:hover{color:var(--accent-hot)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:13px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  padding:15px 28px;border:1px solid transparent;border-radius:2px;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-hot)}
.btn-ghost{border-color:rgba(230,226,225,.35);color:var(--text-inv)}
.btn-ghost:hover{background:var(--text-inv);color:var(--text);border-color:var(--text-inv)}
.btn-outline-inv{border-color:rgba(230,226,225,.4);color:var(--text-inv);width:100%}
.btn-outline-inv:hover{background:var(--text-inv);color:var(--text)}

:focus-visible{outline:2px solid var(--accent-hot);outline-offset:3px}

/* ==========================================================================
   HEADER  — shared chrome, identical on every page
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:90;
  background:rgba(17,17,17,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-dark);
  color:var(--text-inv);
  transition:background .3s,box-shadow .3s;
}
.site-header.is-scrolled{background:#0b0b0b;box-shadow:0 8px 30px rgba(0,0,0,.35)}

.site-header__bar{
  display:flex;align-items:center;gap:clamp(10px,2vw,28px);
  min-height:66px;
  max-width:var(--container);
  margin-inline:auto;
  padding:10px var(--pad);
  flex-wrap:wrap;
}

.site-header__brand{
  font-family:var(--display);font-size:clamp(19px,2.2vw,24px);
  text-transform:uppercase;letter-spacing:.02em;line-height:1;
  color:var(--text-inv);flex:none;white-space:nowrap;
}
.site-header__brand:hover{color:var(--accent-hot)}

/* nav — always visible and usable at every width */
.site-nav{
  flex:1 1 100%;
  min-width:0;
  order:3;
}
.site-nav__list{
  display:flex;flex-wrap:wrap;
  align-items:center;
  gap:4px clamp(14px,2vw,34px);
  margin:0;padding:0;
}
.site-nav__item{flex:none}
.site-nav__link{
  display:inline-block;
  font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:500;
  padding:8px 0;white-space:nowrap;position:relative;
  color:rgba(230,226,225,.86);
  transition:color .2s;
}
.site-nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--accent-hot);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.site-nav__link:hover{color:#fff}
.site-nav__link:hover::after{transform:scaleX(1)}
.site-nav__link[aria-current="page"]{color:#fff}
.site-nav__link[aria-current="page"]::after{transform:scaleX(1)}

.site-header__actions{
  display:flex;align-items:center;gap:4px;
  margin-left:auto;
}
.site-header__action{
  background:none;border:0;color:var(--text-inv);cursor:pointer;
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:2px;position:relative;transition:background .2s,color .2s;
}
.site-header__action:hover{background:rgba(230,226,225,.1);color:#fff}
.site-header__action::before{
  content:"";display:block;width:17px;height:17px;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.site-header__action[data-action="search"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 015.9 13.4l5.4 5.4-1.4 1.4-5.4-5.4A8 8 0 1110 2zm0 2a6 6 0 100 12 6 6 0 000-12z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 015.9 13.4l5.4 5.4-1.4 1.4-5.4-5.4A8 8 0 1110 2zm0 2a6 6 0 100 12 6 6 0 000-12z'/%3E%3C/svg%3E");
}
.site-header__action[data-action="locale"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm6.9 6h-2.5a12 12 0 00-1.2-3.1A8 8 0 0118.9 8zM12 4.2c.6.8 1.3 2 1.7 3.8h-3.4c.4-1.8 1.1-3 1.7-3.8zM4.3 14a8 8 0 010-4h2.9a17 17 0 000 4H4.3zm.8 2h2.5c.3 1.1.7 2.2 1.2 3.1A8 8 0 015.1 16zm2.5-8H5.1a8 8 0 013.7-3.1A12 12 0 007.6 8zM12 19.8c-.6-.8-1.3-2-1.7-3.8h3.4c-.4 1.8-1.1 3-1.7 3.8zM14.3 14H9.7a15 15 0 010-4h4.6a15 15 0 010 4zm.9 5.1c.5-.9.9-2 1.2-3.1h2.5a8 8 0 01-3.7 3.1zM16.8 14a17 17 0 000-4h2.9a8 8 0 010 4h-2.9z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm6.9 6h-2.5a12 12 0 00-1.2-3.1A8 8 0 0118.9 8zM12 4.2c.6.8 1.3 2 1.7 3.8h-3.4c.4-1.8 1.1-3 1.7-3.8zM4.3 14a8 8 0 010-4h2.9a17 17 0 000 4H4.3zm.8 2h2.5c.3 1.1.7 2.2 1.2 3.1A8 8 0 015.1 16zm2.5-8H5.1a8 8 0 013.7-3.1A12 12 0 007.6 8zM12 19.8c-.6-.8-1.3-2-1.7-3.8h3.4c-.4 1.8-1.1 3-1.7 3.8zM14.3 14H9.7a15 15 0 010-4h4.6a15 15 0 010 4zm.9 5.1c.5-.9.9-2 1.2-3.1h2.5a8 8 0 01-3.7 3.1zM16.8 14a17 17 0 000-4h2.9a8 8 0 010 4h-2.9z'/%3E%3C/svg%3E");
}
.site-header__action[data-action="cart"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 100 4 2 2 0 000-4zm10 0a2 2 0 100 4 2 2 0 000-4zM3 3h2.2l.8 4H21l-2.6 8H7.6L6.1 9H4.5L3 3zm4.3 6l1.1 4h8.9l1.3-4H7.3z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 100 4 2 2 0 000-4zm10 0a2 2 0 100 4 2 2 0 000-4zM3 3h2.2l.8 4H21l-2.6 8H7.6L6.1 9H4.5L3 3zm4.3 6l1.1 4h8.9l1.3-4H7.3z'/%3E%3C/svg%3E");
}
.site-header__cart-badge{
  position:absolute;top:4px;right:2px;
  background:var(--accent-hot);color:#fff;
  font-size:9.5px;font-weight:700;line-height:1;
  min-width:15px;height:15px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 3px;
}

@media (min-width:860px){
  .site-header__bar{min-height:74px;flex-wrap:nowrap}
  .site-nav{flex:1 1 auto;order:0;justify-content:center;display:flex}
  .site-nav__list{flex-wrap:nowrap;justify-content:center}
}

/* ---------- drawer (mobile overlay nav — enhancement, nav is always visible) ---------- */
.drawer-scrim{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:98;
  opacity:0;transition:opacity .3s;
}
.drawer-scrim.is-open{opacity:1}
.drawer-scrim[hidden]{display:none}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:99;
  width:min(90vw,380px);background:#0d0d0d;color:var(--text-inv);
  border-left:1px solid var(--border-dark);
  transform:translateX(102%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column;padding:18px 22px 26px;
}
.drawer.is-open{transform:translateX(0)}
.drawer[hidden]{display:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.drawer__title{font-family:var(--display);text-transform:uppercase;font-size:18px;letter-spacing:.06em}
.drawer__nav{display:flex;flex-direction:column;border-top:1px solid var(--border-dark)}
.drawer__list{display:flex;flex-direction:column;margin:0}
.drawer__item{border-bottom:1px solid var(--border-dark)}
.drawer__link{
  display:block;padding:15px 0;
  font-size:15px;text-transform:uppercase;letter-spacing:.06em;font-weight:500;
  transition:color .2s,padding-left .2s;
}
.drawer__link:hover{color:var(--accent-hot);padding-left:6px}
.drawer__foot{margin-top:auto;padding-top:22px;display:grid;gap:8px}
body.no-scroll{overflow:hidden}

/* ---------- search panel ---------- */
.search-panel{
  position:relative;z-index:80;
  border-top:1px solid var(--border-dark);
  background:#0b0b0b;color:var(--text-inv);
  padding-block:18px;
}
.search-panel[hidden]{display:none}
.search-panel__form{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);
}
.search-panel__label{
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  color:var(--text-muted-inv);flex:1 1 100%;
}
.search-panel__input{
  flex:1 1 260px;min-width:0;
  background:transparent;border:0;border-bottom:1px solid rgba(230,226,225,.35);
  color:var(--text-inv);font-size:18px;padding:8px 0;font-family:var(--ui);
}
.search-panel__input::placeholder{color:rgba(230,226,225,.4)}
.search-panel__input:focus{outline:none;border-bottom-color:var(--accent-hot)}
.search-panel__submit{
  flex:none;background:var(--accent);color:#fff;border:0;border-radius:2px;
  padding:13px 24px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;cursor:pointer;transition:background .2s;
}
.search-panel__submit:hover{background:var(--accent-hot)}

/* ==========================================================================
   MODAL
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.66)}
.modal[hidden]{display:none}
.modal__dialog{
  position:relative;background:var(--bg);color:var(--text);
  width:min(520px,100%);padding:28px;border-radius:2px;
  max-height:86vh;overflow:auto;
  animation:fadeUp .3s var(--ease) both;
}
.modal__title{font-family:var(--display);text-transform:uppercase;font-size:26px;line-height:1;margin-bottom:8px}
.modal__text{font-size:14px;color:var(--text-muted);margin-bottom:6px}
.modal__list{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:18px}
.modal__item{
  border-bottom:1px solid rgba(17,17,17,.14);padding:10px 2px;font-size:13px;
}
.modal__close{
  margin-top:20px;background:var(--text);color:var(--bg);border:0;border-radius:2px;
  padding:11px 20px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;cursor:pointer;
}
.modal__close:hover{background:var(--accent)}
.modal__close[data-country]{
  display:block;width:100%;margin:0;background:none;color:var(--text);
  padding:10px 2px;border:0;border-bottom:1px solid rgba(17,17,17,.14);border-radius:0;
  font-size:13px;font-weight:400;text-transform:none;letter-spacing:0;text-align:left;
  transition:color .2s,padding-left .2s;
}
.modal__close[data-country]:hover{background:none;color:var(--accent);padding-left:6px}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);
  background:var(--text);color:var(--bg);padding:12px 20px;border-radius:2px;
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);z-index:130;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ==========================================================================
   HERO (equipment + shared dark hero block)
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;background:#0d0d0d;color:var(--text-inv);
  padding:clamp(48px,9vw,120px) var(--pad) clamp(36px,6vw,72px);
}
.hero > h1{max-width:22ch}
.hero > p{
  margin-top:18px;max-width:58ch;font-size:clamp(15px,1.5vw,18px);
  color:rgba(240,238,236,.86);line-height:1.6;
}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.hero-inner{position:relative;z-index:2;padding-block:clamp(28px,4vw,56px);max-width:var(--container)}

.hero-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(40px,7.6vw,112px);
  line-height:.9;letter-spacing:-.012em;
  margin-top:14px;
}
.hero-title span{display:block}
.hero-title-2{color:#fff}

.hero-sub{margin-top:18px;max-width:40ch;font-size:clamp(15px,1.5vw,19px);color:rgba(240,238,236,.86);line-height:1.5}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-actions .btn{padding:16px 34px;font-size:13px}

.roast-line{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:26px;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;color:var(--text-inv);
}
.roast-line .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-hot);box-shadow:0 0 0 0 rgba(235,38,38,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(235,38,38,0)}100%{box-shadow:0 0 0 0 rgba(235,38,38,0)}}
.roast-rule{display:none}
@media(min-width:700px){.roast-rule{display:block;width:clamp(30px,16vw,260px);height:1px;background:rgba(235,38,38,.45)}}
.roast-next{color:rgba(230,226,225,.55);font-weight:500}

.hero-foot{
  position:relative;z-index:2;
  border-top:1px solid rgba(230,226,225,.16);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding-block:14px;
}
.hero-foot-right{display:flex;align-items:center;gap:8px}
.pill{
  border:1px solid rgba(230,226,225,.3);background:rgba(17,17,17,.35);
  color:var(--text-inv);border-radius:999px;padding:8px 16px;cursor:pointer;
  font-size:12px;letter-spacing:.04em;transition:background .2s,border-color .2s,color .2s;
  display:inline-flex;align-items:center;gap:8px;
}
.pill:hover{background:var(--text-inv);color:var(--text);border-color:var(--text-inv)}
.pill .cart-count{position:static;min-width:16px;height:16px}

/* ==========================================================================
   STATS
   ========================================================================== */
.stats{background:#0b0b0b;border-top:1px solid var(--border-dark);border-bottom:1px solid var(--border-dark)}
.stats-grid{display:grid;grid-template-columns:1fr}
.stat{padding:22px var(--pad);border-bottom:1px solid var(--border-dark)}
.stat:last-child{border-bottom:0}
.stat-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(230,226,225,.5);font-weight:600;margin-bottom:6px;
  display:flex;align-items:center;gap:8px;
}
.stat-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-hot);flex:none}
.stat-value{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(20px,2.2vw,30px);line-height:1.05;color:var(--text-inv);
  letter-spacing:.005em;
}
@media(min-width:800px){
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .stat{border-bottom:0;border-right:1px solid var(--border-dark);padding-block:34px}
  .stat:last-child{border-right:0}
}

/* ==========================================================================
   BANDS
   ========================================================================== */
.band{padding-block:var(--band-pad)}
.band.paper{background:var(--bg);color:var(--text)}
.band.dark{background:var(--surface-dark);color:var(--text-inv)}
.band.black{background:var(--bg-dark);color:var(--text-inv);border-top:1px solid var(--border-dark)}

.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:var(--section-gap);
}
.section-head .micro{display:block;margin-bottom:8px}

/* ---------- FORMATS ---------- */
.format-grid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
.format-card{
  position:relative;display:block;overflow:hidden;
  background:var(--paper-alt);
  border:1px solid rgba(17,17,17,.1);
}
.format-img{display:block;aspect-ratio:1/1;overflow:hidden}
.format-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .4s}
.format-card:hover .format-img img{transform:scale(1.05)}
.format-label{
  position:absolute;top:12px;left:12px;right:56px;
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  color:var(--text);background:rgba(230,226,225,.82);
  padding:5px 8px;display:inline-block;backdrop-filter:blur(4px);
  width:max-content;max-width:100%;
}
.chip{
  position:absolute;right:10px;bottom:44px;
  width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
  transition:transform .25s var(--ease),background .2s;
}
.format-card:hover .chip{background:var(--accent-hot);transform:translateX(3px)}
.format-meta{
  position:absolute;left:12px;bottom:12px;
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  color:rgba(17,17,17,.72);
}
@media(min-width:760px){
  .format-grid{grid-template-columns:repeat(4,1fr);gap:12px}
}

/* ---------- FILTERS + PRODUCT GRID ---------- */
.filters{display:flex;flex-wrap:wrap;gap:6px}
.filter{
  border:1px solid rgba(17,17,17,.22);background:transparent;color:var(--text);
  padding:8px 15px;border-radius:999px;cursor:pointer;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  transition:background .2s,color .2s,border-color .2s;
}
.filter:hover{background:rgba(17,17,17,.07)}
.filter.is-active{background:var(--text);color:var(--bg);border-color:var(--text)}

.product-grid{display:grid;gap:22px 12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.product-grid{grid-template-columns:repeat(4,1fr);gap:30px 14px}}

.product{transition:opacity .3s,transform .3s}
.product.is-hidden{display:none}
.product-media{
  position:relative;display:block;background:var(--paper-alt);overflow:hidden;
  aspect-ratio:4/5;
}
.product-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.product:hover .product-media img{transform:scale(1.045)}
.roast-stamp{
  position:absolute;left:0;bottom:0;
  background:rgba(17,17,17,.82);color:var(--text-inv);
  font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  padding:5px 8px;
}
.quick-add{
  font:inherit;cursor:pointer;
  background:var(--accent);color:#fff;border:0;border-radius:999px;
  padding:.45rem 1rem;font-size:.8rem;font-weight:600;
  transition:background .2s;
}
.product .quick-add{
  position:absolute;right:9px;bottom:9px;
  width:32px;height:32px;padding:0;border-radius:50%;
  font-size:17px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(8px);
  transition:opacity .25s,transform .25s var(--ease),background .2s;
}
.product:hover .quick-add,.product:focus-within .quick-add{opacity:1;transform:translateY(0)}
.quick-add:hover{background:var(--accent-hot)}
@media(hover:none){.product .quick-add{opacity:1;transform:none}}

.product-name{
  font-size:13.5px;font-weight:600;line-height:1.35;margin-top:11px;
  text-transform:uppercase;letter-spacing:.02em;
}
.product-meta{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:rgba(17,17,17,.55);margin-top:4px}
.product-price{
  font-size:13.5px;font-weight:600;color:var(--accent);margin-top:6px;
  font-variant-numeric:tabular-nums;
}

/* ---------- SPLIT BANDS ---------- */
.split{display:grid;gap:clamp(24px,3vw,48px);grid-template-columns:1fr;align-items:center}
.split-text .h2{margin:10px 0 16px}
.split-text .btn{margin-top:26px}
.split-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(min-width:900px){
  .split{grid-template-columns:1.15fr 1fr}
  .split-media img{aspect-ratio:3/4}
  .split.split-manifesto{grid-template-columns:1fr 1fr}
  .split-manifesto .split-media img{aspect-ratio:4/3}
}

/* ---------- TIER TABLE ---------- */
.tier-table{width:100%;border-collapse:collapse;margin-top:26px;font-size:13.5px}
.tier-table th,.tier-table td{
  text-align:left;padding:12px 10px 12px 0;
  border-bottom:1px solid var(--border-dark);
  font-weight:500;
}
.tier-table thead th{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(230,226,225,.5);padding-bottom:8px;
}
.tier-table tbody th{color:var(--text-inv);text-transform:uppercase;font-size:12px;letter-spacing:.06em}
.tier-table td{color:rgba(230,226,225,.72)}
.tier-table .save{color:var(--accent-hot);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.tier-table td:last-child{text-align:right;padding-right:0}
.tier-table thead th:last-child{text-align:right}

/* ---------- TRANSPARENCY ---------- */
.trans-grid{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1fr}
@media(min-width:980px){.trans-grid{grid-template-columns:1.45fr 1fr;align-items:start}}
.trans-main .h2{margin:10px 0 14px}
.trans-main .body-inv.narrow{max-width:44ch;font-size:15px}

.list-table{margin-top:26px;border-top:1px solid var(--border-dark)}
.list-row{
  display:grid;grid-template-columns:1.4fr 1fr .9fr .55fr;gap:8px;
  align-items:center;
  padding:13px 0;border-bottom:1px solid var(--border-dark);
  font-size:13px;
  transition:background .2s,padding-left .2s;
}
.list-row:not(.list-head):hover{background:rgba(230,226,225,.045);padding-left:8px}
.list-head{
  font-size:10px;text-transform:uppercase;letter-spacing:.13em;
  color:rgba(230,226,225,.45);font-weight:600;padding-block:9px;
}
.lr-name{color:var(--text-inv);font-weight:600}
.lr-origin,.lr-process{color:rgba(230,226,225,.66)}
.lr-price{color:var(--accent-hot);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.footnote{margin-top:14px;font-size:10.5px;max-width:52ch}

.trans-side{display:grid;gap:14px;align-content:start}
.report-card{
  background:#161616;border:1px solid var(--border-dark);
  border-left:2px solid var(--accent);
  padding:22px;
}
.report-title{
  font-family:var(--display);text-transform:uppercase;font-size:24px;line-height:1;
  margin:10px 0 8px;color:var(--text-inv);
}
.report-copy{font-size:13px;color:rgba(230,226,225,.62);margin-bottom:16px}

.brew{background:#161616;border:1px solid var(--border-dark);padding:20px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin:10px 0 14px;border-bottom:1px solid var(--border-dark)}
.tab{
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  color:rgba(230,226,225,.6);padding:8px 10px;
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  transition:color .2s,border-color .2s;
}
.tab:hover{color:var(--text-inv)}
.tab.is-active{color:var(--text-inv);border-bottom-color:var(--accent-hot)}
.recipe{font-size:13px;font-weight:600;color:var(--text-inv);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.recipe-note{font-size:12.5px;color:rgba(230,226,225,.6);margin-top:6px}
.tab-panel[hidden]{display:none}
.tab-panel{animation:fadeUp .35s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- BARS ---------- */
.bar-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:680px){.bar-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.bar-grid{grid-template-columns:repeat(4,1fr)}}
.bar-card{
  background:var(--paper-alt);border:1px solid rgba(17,17,17,.12);
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s;
}
.bar-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(17,17,17,.14)}
.bar-card.is-hidden{display:none}
.bar-img{aspect-ratio:16/11;overflow:hidden;background:#cfcac8}
.bar-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.bar-card:hover .bar-img img{transform:scale(1.05)}
.bar-body{padding:16px 16px 20px;display:flex;flex-direction:column;flex:1;gap:8px}
.chip-city{
  position:static;width:max-content;height:auto;border-radius:0;
  background:var(--text);color:var(--bg);
  font-size:9.5px;padding:4px 8px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
}
.bar-name{font-family:var(--display);text-transform:uppercase;font-size:19px;line-height:1.05;letter-spacing:.01em}
.bar-desc{font-size:12.5px;color:rgba(17,17,17,.62);line-height:1.5}
.hours{margin-top:auto;font-size:11.5px;display:grid;gap:3px;border-top:1px solid rgba(17,17,17,.12);padding-top:10px}
.hours > div{display:flex;justify-content:space-between;gap:10px}
.hours dt{text-transform:uppercase;letter-spacing:.06em;color:rgba(17,17,17,.55);font-weight:600;font-size:10.5px}
.hours dd{font-variant-numeric:tabular-nums;font-weight:500}
.bar-body .link-arrow{font-size:10.5px;margin-top:12px;width:max-content}

/* ---------- MANIFESTO ---------- */
.manifesto{position:relative;overflow:hidden}
.star-mark{color:var(--accent-hot);font-size:26px;line-height:1;display:block;margin-bottom:14px}
.manifesto-quote{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(26px,3.4vw,46px);line-height:1.02;letter-spacing:-.005em;
  color:var(--text-inv);margin-bottom:18px;
}
.manifesto .micro.muted-inv{margin:18px 0 14px;max-width:44ch;text-transform:none;letter-spacing:0;font-size:13.5px;line-height:1.6}
.manifesto .link-arrow{font-size:11.5px}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;gap:clamp(26px,4vw,60px);grid-template-columns:1fr}
@media(min-width:940px){.contact-grid{grid-template-columns:1fr 1fr;align-items:start}}
.contact-intro .h2{margin:10px 0 14px;max-width:18ch}
.contact-facts{margin-top:26px;display:grid;gap:12px;font-size:13.5px}
.contact-facts li{display:grid;gap:2px;border-top:1px solid rgba(17,17,17,.14);padding-top:10px}
.contact-form{display:grid;gap:14px;grid-template-columns:1fr;position:relative}
@media(min-width:560px){.contact-form{grid-template-columns:1fr 1fr}.contact-form .field:nth-child(4){grid-column:1/-1}}
.field{display:grid;gap:6px}
.field label{font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:600;color:rgba(17,17,17,.66)}
.field input,.field select,.field textarea{
  font-family:var(--ui);font-size:14.5px;color:var(--text);
  background:transparent;border:1px solid rgba(17,17,17,.24);
  border-radius:2px;padding:12px 13px;transition:border-color .2s,background .2s;
  width:100%;
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);background:rgba(255,255,255,.4);outline:none;
}
.contact-form .btn{grid-column:1/-1;width:max-content;margin-top:4px}
.form-note{grid-column:1/-1;font-size:10.5px}

/* ==========================================================================
   FOOTER — shared chrome, identical on every page
   ========================================================================== */
.site-footer{background:#0b0b0b;color:var(--text-inv);border-top:1px solid var(--border-dark);padding-block:clamp(36px,4vw,64px) 26px}
.site-footer__inner{
  max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);
  display:grid;gap:32px;grid-template-columns:1fr;
}
@media(min-width:860px){.site-footer__inner{grid-template-columns:1.3fr 1.7fr;gap:28px;align-items:start}}
.site-footer__brand{display:flex;flex-direction:column;gap:8px}
.site-footer__logo{
  font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,2.4vw,26px);
  letter-spacing:.02em;line-height:1;color:var(--text-inv);
}
.site-footer__tagline{font-size:13px;color:var(--text-muted-inv);max-width:28ch;line-height:1.6}
.site-footer__nav{min-width:0}
.site-footer__list{display:flex;flex-wrap:wrap;gap:10px 24px}
.site-footer__item{font-size:13px;color:rgba(230,226,225,.84)}
.site-footer__link{transition:color .2s,padding-left .2s}
.site-footer__link:hover{color:var(--accent-hot);padding-left:3px}
.site-footer__legal{
  max-width:var(--container);margin:clamp(30px,4vw,56px) auto 0;padding:18px var(--pad) 0;
  border-top:1px solid var(--border-dark);
  font-size:11px;color:rgba(230,226,225,.7);
}

/* ==========================================================================
   MOTION / REVEAL
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in,.reveal.is-visible{opacity:1;transform:none}
.fade-in{animation:fadeIn .6s var(--ease) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.marquee{overflow:hidden;white-space:nowrap}
.marquee-absolute{position:absolute;inset:auto 0 0 0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal],.reveal{opacity:1;transform:none}
  .hero-media img{transform:none}
}

/* ---------- small screens ---------- */
@media (max-width:479px){
  .hero-actions .btn{flex:1 1 auto}
  .list-row{grid-template-columns:1.3fr .9fr .5fr;row-gap:2px}
  .list-row .lr-process{display:none}
  .list-head span:nth-child(3){display:none}
  .product-name{font-size:12.5px}
  .site-footer__legal{font-size:10.5px}
  .modal__list{grid-template-columns:1fr}
  .report-title{font-size:21px}
  .format-label{font-size:10px;letter-spacing:.08em}
  .roast-line{font-size:10.5px}
}