/* ═══════════════════════════════════════════════════════════════
   matcha&co. — brand tokens
   Colors are taken verbatim from the business's own brand config
   and logo artwork. Do not substitute.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* brand — fixed */
  --green:      #81A969;   /* declared banner color */
  --green-deep: #516E3F;   /* darkened green — small text on light grounds (AA) */
  --green-hov:  #739857;   /* green button hover — keeps espresso label at AA */
  --green-soft: #E8EFE1;
  --rose:       #9C6C6C;   /* logo ampersand + "co." */
  --rose-deep:  #7E5252;
  --rose-fill:  #8A5B5B;   /* rose buttons/pills — white label at AA */
  --rose-hov:   #6E4747;
  --rose-soft:  #F1E7E5;
  --espresso:   #6B3E0A;   /* declared primary color */
  --espresso-d: #3A2107;
  --cream:      #FCF9F6;   /* declared background color */
  --cream-2:    #F6F4F0;   /* logo artboard cream */
  --ink:        #1E1E1E;

  /* neutrals biased warm toward the espresso accent */
  --ink-2:   #4A4239;
  --ink-3:   #6E6459;
  --rule:    #E2DCD3;
  --rule-2:  #D3CBBF;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-util:    "Poppins", "Futura", "Avenir Next", sans-serif;

  --wrap: 1120px;
  --pad: clamp(20px, 5vw, 56px);
  --r: 3px;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a{ color: var(--espresso); }

::selection{ background: var(--green); color: #fff; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background: var(--ink); color: var(--cream);
  padding:12px 20px; font-family:var(--font-util); font-size:13px;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{
  outline: 2.5px solid var(--espresso);
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* ─── type scale ─────────────────────────────────────────── */
.eyebrow{
  font-family: var(--font-util); font-weight:700;
  font-size: 11px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--green-deep);
  margin:0 0 14px;
}
.eyebrow--rose{ color: var(--rose-deep); }
.eyebrow--cream{ color: rgba(252,249,246,.72); }

.h2{
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 110;
  font-weight:600;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height:1.06;
  letter-spacing:-.015em;
  text-wrap: balance;
  margin:0;
  color: var(--ink);
}
.h2--cream{ color: var(--cream); }

.section-lede{
  max-width: 56ch;
  margin: 20px 0 0;
  font-size: 17.5px;
  color: var(--ink-2);
}
.section-lede--cream{ color: rgba(252,249,246,.8); }

/* ─── chasen (bamboo whisk tine) rule ────────────────────── */
.chasen{
  height: 22px;
  background-image: repeating-linear-gradient(
    to right,
    var(--rule-2) 0 1px,
    transparent 1px 9px
  );
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  opacity:.85;
}
.chasen--sm{ height:16px; width:70px; margin:0 auto 18px; }

/* ─── buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px;
  font-family: var(--font-util); font-weight:700;
  font-size:13.5px; letter-spacing:.01em;
  text-decoration:none; text-align:center;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
  cursor:pointer;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .btn:hover,.btn:active{ transform:none; } }

.btn__sub{
  font-family: var(--font-body); font-weight:500;
  font-size:11.5px; letter-spacing:.02em; opacity:.82;
}

.btn--green{ background: var(--green); color: var(--espresso-d); }
.btn--green:hover{ background: var(--green-hov); }

.btn--rose{ background: var(--rose-fill); color:#fff; }
.btn--rose:hover{ background: var(--rose-hov); }

.btn--cream{ background: var(--cream); color: var(--espresso-d); }
.btn--cream:hover{ background:#fff; }

.btn--ghost{
  background:transparent; color: var(--ink);
  border-color: var(--rule-2);
}
.btn--ghost:hover{ border-color: var(--rose); color: var(--rose-deep); }

.btn--lg{ padding:16px 30px; font-size:15px; }
.btn--full{ display:flex; width:100%; }

/* ═══ NAV ═════════════════════════════════════════════════ */
.nav{
  position:sticky; top:0; z-index:100;
  background: rgba(252,249,246,.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.nav.is-stuck{
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 18px -8px rgba(58,33,7,.28);
}
.nav__in{
  max-width: var(--wrap); margin-inline:auto;
  padding: 12px var(--pad);
  display:flex; align-items:center; gap: 28px;
}
.nav__logo{ flex:0 0 auto; line-height:0; }
.nav__logo img{ width:112px; }

.nav__links{
  display:flex; gap:26px; margin-left:auto;
  font-family: var(--font-util); font-weight:600; font-size:12.5px;
  letter-spacing:.05em; text-transform:uppercase;
}
.nav__links a{
  color: var(--ink-2); text-decoration:none;
  display:inline-flex; align-items:center; min-height:24px;
  padding: 4px 2px; border-bottom:1.5px solid transparent;
  transition: color .16s, border-color .16s;
}
.nav__links a:hover{ color: var(--ink); border-bottom-color: var(--green); }

.nav__cta{ display:flex; gap:10px; flex:0 0 auto; }
.nav__cta .btn{ padding:9px 18px; font-size:12.5px; }

@media (max-width: 940px){
  .nav__links{ display:none; }
  .nav__cta{ margin-left:auto; }
}
@media (max-width: 560px){
  .nav__in{ gap:12px; }
  .nav__logo img{ width:88px; }
  .nav__cta .btn--ghost{ display:none; }
}

/* ═══ HERO ════════════════════════════════════════════════ */
.hero{
  position:relative;
  padding: clamp(48px, 8vw, 96px) 0 0;
  overflow:hidden;
  background: var(--cream);
}
/* Photo layers: the brand's own Instagram photographs, held far back so the
   cream ground still reads as the page. Each plate is masked with a radial
   fade rather than covered by a flat scrim, so it dissolves into the
   background instead of ending on a visible edge. */
.has-photo{ position:relative; }
.has-photo > *{ position:relative; z-index:2; }
.has-photo::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-repeat:no-repeat;
  filter: saturate(.42) sepia(.14) contrast(.92);
}

/* hero — whisking matcha, pushed to the outer edges so the logotype sits on
   clean cream */
.has-photo--whisk::before{
  background-image:url("assets/bg/whisk.jpg");
  background-position: 50% 42%;
  opacity:.22;
  -webkit-mask-image: radial-gradient(76% 68% at 50% 44%, transparent 28%, #000 96%);
          mask-image: radial-gradient(76% 68% at 50% 44%, transparent 28%, #000 96%);
}

/* menu — an iced latte on marble, a soft corner wash only */
.has-photo--latte::before{
  background-image:url("assets/bg/latte.jpg");
  background-position: 88% 30%;
  opacity:.13;
  -webkit-mask-image: radial-gradient(62% 88% at 100% 18%, #000 6%, transparent 76%);
          mask-image: radial-gradient(62% 88% at 100% 18%, #000 6%, transparent 76%);
}

/* the cart — pouring at a setup. The plate is masked to the right-hand side,
   away from the text column, and a scrim holds the ground dark enough that
   cream copy clears AA wherever the photograph happens to be bright. */
.has-photo--pour::before{
  background-image:url("assets/bg/pour.jpg");
  background-position: 62% 46%;
  filter: saturate(.45) contrast(1.02);
  opacity:.30;
  -webkit-mask-image: radial-gradient(74% 108% at 100% 42%, #000 8%, transparent 74%);
          mask-image: radial-gradient(74% 108% at 100% 42%, #000 8%, transparent 74%);
}
.has-photo--pour::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(95deg, rgba(58,33,7,.80) 26%, rgba(58,33,7,.55) 60%, rgba(58,33,7,.66));
}

/* footer — the faintest wash of a branded cup */
.has-photo--coffee::before{
  background-image:url("assets/bg/coffee.jpg");
  background-position: 84% 34%;
  opacity:.15;
  -webkit-mask-image: radial-gradient(58% 96% at 100% 22%, #000 6%, transparent 78%);
          mask-image: radial-gradient(58% 96% at 100% 22%, #000 6%, transparent 78%);
}

@media (max-width: 640px){
  .has-photo--whisk::before{ opacity:.20; }
  .has-photo--latte::before,
  .has-photo--coffee::before{ opacity:.10; }
}
.hero__in{
  position:relative; z-index:2;
  max-width: 800px; margin-inline:auto;
  padding: 0 var(--pad) clamp(52px, 7vw, 84px);
  text-align:center;
}
.hero__h1{ margin:0; font-size:0; line-height:0; }
.hero__logo{
  width: min(520px, 88%);
  margin: 6px auto clamp(26px, 4vw, 38px);
}
.hero__lede{
  max-width: 50ch; margin: 0 auto;
  font-size: clamp(17px, 2vw, 20px);
  line-height:1.62; color: var(--ink-2);
}
.hero__lede em{
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 40;
  font-style:italic; font-weight:600;
  color: var(--green-deep); font-size:1.06em;
}
.hero__actions{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  margin-top: clamp(28px, 4vw, 40px);
}
.hero__status{
  margin: 22px 0 0;
  font-family: var(--font-util); font-weight:600;
  font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color: var(--ink-2);
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height: 18px;
}
.dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--rule-2); flex:0 0 auto;
}
.dot--open{ background: var(--green); box-shadow:0 0 0 3px rgba(129,169,105,.24); }

/* ═══ DOORS ═══════════════════════════════════════════════ */
.doors{ padding: clamp(64px, 9vw, 104px) 0 clamp(56px, 8vw, 88px); }
.doors__grid{
  display:grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: clamp(34px, 4vw, 46px);
}
.door{
  display:flex; flex-direction:column;
  padding: clamp(28px, 3.4vw, 40px);
  text-decoration:none; color:inherit;
  border-radius: 20px;
  border:1.5px solid var(--rule);
  background: var(--cream-2);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.door:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -26px rgba(58,33,7,.42);
}
@media (prefers-reduced-motion: reduce){ .door:hover{ transform:none; } }

.door--order{ background: var(--green-soft); border-color: rgba(129,169,105,.45); }
.door--order:hover{ border-color: var(--green); }
.door--event{ background: var(--rose-soft); border-color: rgba(156,108,108,.4); }
.door--event:hover{ border-color: var(--rose); }

.door__top{ margin-bottom:14px; }
.door__tag{
  display:inline-block;
  font-family: var(--font-util); font-weight:700;
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; margin-bottom:14px;
}
.door--order .door__tag{ background: var(--green); color: var(--espresso-d); }
.door--event .door__tag{ background: var(--rose-fill); color:#fff; }

.door__h{
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 90;
  font-weight:600; font-size: clamp(26px, 3vw, 34px);
  line-height:1.08; letter-spacing:-.012em; margin:0;
}
.door__p{ margin:0 0 22px; color: var(--ink-2); font-size:16px; max-width:40ch; }

.door__specs{
  display:flex; flex-wrap:wrap; gap: 12px 30px;
  margin:0 0 26px; padding: 18px 0 0;
  border-top:1px solid rgba(58,33,7,.13);
}
.door__specs dt{
  font-family: var(--font-util); font-weight:700;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink-3); margin-bottom:3px;
}
.door__specs dd{
  margin:0; font-weight:500; font-size:15px;
  font-variant-numeric: tabular-nums;
}

.door__go{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:9px;
  font-family: var(--font-util); font-weight:700; font-size:13.5px;
}
.door--order .door__go{ color: var(--green-deep); }
.door--event .door__go{ color: var(--rose-deep); }
.door__go svg{ transition: transform .2s ease; }
.door:hover .door__go svg{ transform: translateX(4px); }

/* ═══ MENU ════════════════════════════════════════════════ */
.menu{
  padding: clamp(64px, 9vw, 104px) 0;
  background: var(--cream-2);
  border-block:1px solid var(--rule);
  overflow:hidden;
}
.cards{
  list-style:none;
  width: calc(100% - 2 * var(--pad));
  max-width: calc(var(--wrap) - 2 * var(--pad));
  margin: clamp(38px, 5vw, 52px) auto 0; padding: 0;
  display:grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 16px; overflow:hidden;
}
.card{
  background: var(--cream);
  padding: clamp(24px, 2.6vw, 30px);
  display:flex; flex-direction:column;
  transition: background-color .2s ease;
}
.card:hover{ background:#fff; }

.card__origin{ margin:0 0 16px; }
.card__flag{
  font-family: var(--font-util); font-weight:700;
  font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color: var(--ink-3);
  display:inline-flex; align-items:center; gap:7px;
}
.card__flag::before{
  content:""; width:16px; height:1.5px; background: currentColor; opacity:.5;
}
.card__name{
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 70, "WONK" 1, "opsz" 80;
  font-weight:600; font-size: 25px; line-height:1.1;
  letter-spacing:-.01em; margin:0 0 12px;
}
.card--matcha .card__name{ color: var(--green-deep); }
.card--coffee .card__name{ color: var(--rose-deep); }

.card__desc{
  margin:0 0 22px; font-size:15px; line-height:1.58; color: var(--ink-2);
}
.card__base{ margin:auto 0 0; }
.card__base span{
  font-family: var(--font-util); font-weight:700;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
}
.card--matcha .card__base span{ background: var(--green-soft); color: var(--green-deep); }
.card--coffee .card__base span{ background: var(--rose-soft); color: var(--rose-deep); }

.menu__foot{
  margin-top: clamp(32px, 4vw, 44px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px;
}
.menu__foot p{ margin:0; max-width:52ch; color: var(--ink-2); font-size:15.5px; }

/* ═══ STORY ═══════════════════════════════════════════════ */
.story{ padding: clamp(64px, 9vw, 108px) 0; }
.story__in{
  display:grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(180px, 300px) minmax(0, 1fr);
  align-items:start;
}
@media (max-width: 780px){
  .story__in{ grid-template-columns: 1fr; }
}
.story__photo{
  margin:0; border-radius: 20px; overflow:hidden;
  background: var(--green-soft);
  border:1px solid rgba(129,169,105,.35);
}
.story__photo img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
}
.story__photo figcaption{
  padding: 12px 16px 14px;
  font-family: var(--font-util); font-weight:600;
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color: var(--green-deep); text-align:center;
}
.story__copy p{ font-size: 17.5px; color: var(--ink-2); max-width: 60ch; }
.story__copy .h2{ margin-bottom: 8px; }
.story__sign{
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 40;
  font-style:italic; font-weight:600;
  color: var(--rose-deep) !important; font-size:18px !important;
  margin-top: 26px !important;
}

/* ═══ PICKUP ══════════════════════════════════════════════ */
.pickup{
  padding: clamp(64px, 9vw, 104px) 0;
  background: var(--cream-2);
  border-block:1px solid var(--rule);
}
.steps{
  list-style:none; margin: clamp(36px, 4vw, 48px) auto clamp(44px, 5vw, 60px);
  padding-inline: var(--pad);
  display:grid; gap: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: step;
}
.step{ padding-top: 22px; border-top: 2px solid var(--green); }
.step__n{
  display:block;
  font-family: var(--font-util); font-weight:700; font-size:11px;
  letter-spacing:.14em; color: var(--green-deep); margin-bottom:12px;
}
.step__n::before{ content:"Step "; }
.step__h{
  font-family: var(--font-display);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 60;
  font-weight:600; font-size:21px; line-height:1.16; margin:0 0 9px;
}
.step p{ margin:0; font-size:15.5px; color: var(--ink-2); }

.hours{ display:flex; justify-content:center; }
.hours__box{
  width:100%; max-width: 480px;
  background: var(--cream);
  border:1.5px solid var(--rule-2);
  border-radius: 18px;
  padding: clamp(26px, 3vw, 34px);
}
.hours__t{ width:100%; border-collapse:collapse; margin-bottom:18px; }
.hours__t th,.hours__t td{
  text-align:left; padding: 11px 0;
  border-bottom:1px solid var(--rule);
  font-weight:500; font-size:15.5px;
}
.hours__t th{ font-family: var(--font-body); color: var(--ink); }
.hours__t td{ text-align:right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.hours__t tr:last-child th,.hours__t tr:last-child td{ border-bottom:none; }
.hours__t .is-closed th,.hours__t .is-closed td{ color: var(--ink-3); }
.hours__t tr.is-today th{ color: var(--green-deep); font-weight:700; }
.hours__t tr.is-today td{ color: var(--green-deep); font-weight:700; }
.hours__note{
  margin:0 0 20px; font-size:13.5px; line-height:1.55; color: var(--ink-3);
}

/* ═══ CART ════════════════════════════════════════════════ */
.cart{
  padding: clamp(66px, 9vw, 108px) 0;
  background: var(--espresso-d);
  color: var(--cream);
  overflow:hidden;
}
.cart__grid{
  display:grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: clamp(36px, 4.5vw, 50px);
}
.panel{
  background: rgba(252,249,246,.055);
  border:1px solid rgba(252,249,246,.15);
  border-radius: 18px;
  padding: clamp(24px, 2.8vw, 32px);
  display:flex; flex-direction:column;
}
.panel--action{ background: rgba(129,169,105,.16); border-color: rgba(129,169,105,.4); }
.panel__h{
  font-family: var(--font-util); font-weight:700;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color: rgba(252,249,246,.62); margin:0 0 16px;
}
.panel__h--2{ margin-top:26px; }
.panel__p{ margin:0 0 22px; font-size:15.5px; color: rgba(252,249,246,.86); }
.panel--action .btn{ margin-top:auto; }
.panel__fine{
  margin:16px 0 0; font-size:12.5px; line-height:1.55;
  color: rgba(252,249,246,.6);
}
.chips{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.chips li{
  font-size:13.5px; font-weight:500;
  padding:7px 14px; border-radius:999px;
  background: rgba(252,249,246,.09);
  border:1px solid rgba(252,249,246,.16);
  color: var(--cream);
}

/* ═══ INSTAGRAM ═══════════════════════════════════════════ */
.feed{ padding: clamp(64px, 9vw, 104px) 0; }
.feed__in{
  display:grid; gap: 20px;
  grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
  align-items:stretch;
  margin-top: clamp(32px, 4vw, 44px);
}
@media (max-width: 780px){ .feed__in{ grid-template-columns:1fr; } }

.ig-card{
  background: var(--cream-2);
  border:1.5px solid var(--rule);
  border-radius:18px;
  padding: clamp(22px, 2.6vw, 28px);
  display:flex; flex-direction:column;
}
.ig-card__head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.ig-card__avatar{
  flex:0 0 auto; width:56px; height:56px; border-radius:50%;
  background: var(--cream);
  border:2px solid var(--green);
  display:grid; place-items:center; overflow:hidden; padding:8px;
}
.ig-card__avatar img{ width:100%; }
.ig-card__handle{
  margin:0; font-family: var(--font-util); font-weight:700; font-size:15px;
}
.ig-card__name{ margin:2px 0 0; font-size:13.5px; color: var(--ink-3); }
.ig-card__bio{
  margin:0 0 22px; font-size:14.5px; line-height:1.7; color: var(--ink-2);
  padding-bottom:22px; border-bottom:1px solid var(--rule);
}
.ig-card .btn{ margin-top:auto; }

.ig-embed{ min-height:0; }
.tiles{
  display:grid; gap:10px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 520px){ .tiles{ grid-template-columns: repeat(2, 1fr); } }
.tile{
  position:relative; display:block; overflow:hidden;
  border-radius:12px; background: var(--cream-2);
  border:1px solid var(--rule);
  aspect-ratio:1/1;
}
.tile img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .35s ease, filter .35s ease;
}
.tile:hover img{ transform: scale(1.05); filter: saturate(1.08); }
@media (prefers-reduced-motion: reduce){ .tile:hover img{ transform:none; } }
.tile__k{
  position:absolute; top:8px; right:8px;
  font-family: var(--font-util); font-weight:700;
  font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background: rgba(30,30,30,.58);
  padding:3px 7px; border-radius:999px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ig-embed.has-posts{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items:start;
}
.ig-embed.has-posts .tiles{ display:none; }

/* ═══ FAQ ═════════════════════════════════════════════════ */
.faq{
  padding: clamp(64px, 9vw, 104px) 0;
  background: var(--cream-2);
  border-top:1px solid var(--rule);
}
.faq__list{ margin-top: clamp(30px, 4vw, 40px); max-width: 800px; }
.q{ border-bottom:1px solid var(--rule); }
.q summary{
  cursor:pointer; list-style:none;
  padding: 20px 40px 20px 0; position:relative;
  font-family: var(--font-body); font-weight:500; font-size:17px;
  color: var(--ink);
}
.q summary::-webkit-details-marker{ display:none; }
.q summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:2px solid var(--green-deep);
  border-bottom:2px solid var(--green-deep);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.q[open] summary::after{ transform: rotate(-135deg); margin-top:-3px; }
.q summary:hover{ color: var(--green-deep); }
.q p{
  margin:0; padding: 0 0 22px; max-width: 62ch;
  font-size:15.5px; color: var(--ink-2);
}

/* ═══ FOOTER ══════════════════════════════════════════════ */
.foot{
  background: var(--espresso-d);
  overflow:hidden;
  color: rgba(252,249,246,.82);
  padding: clamp(52px, 7vw, 76px) 0 26px;
}
.foot__in{
  display:grid; gap: 36px;
  grid-template-columns: minmax(200px, 1.4fr) repeat(3, minmax(140px, 1fr));
}
@media (max-width: 820px){
  .foot__in{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
.foot__brand img{ width:150px; margin-bottom:14px; }
.foot__tag{
  margin:0; font-family: var(--font-util); font-weight:600;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(252,249,246,.5);
}
.foot__col h3{
  font-family: var(--font-util); font-weight:700;
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color: var(--green); margin:0 0 16px;
}
.foot__col a,.foot__col p{
  display:block; margin:0 0 10px;
  color: rgba(252,249,246,.82); text-decoration:none; font-size:14.5px;
  line-height:1.6;
}
.foot__col a{ min-height:24px; padding:2px 0; }
.foot__col a:hover{ color: var(--cream); text-decoration:underline; text-underline-offset:3px; }

.foot__base{
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 22px;
  border-top:1px solid rgba(252,249,246,.14);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
}
.foot__base p{
  margin:0; font-size:12.5px; color: rgba(252,249,246,.5);
}