/* SURA Coffee Company — One Page
   Lightweight, responsive, no framework
*/

:root{
  --sura-red: #E04424;
  --sura-red-dark: #B7361D;

  --cream-base: #FAF6EC;
  --cream-soft: #F1E9DD;

  --espresso: #2A1F1A;
  --mocha: #5B4A42;
  --border: #D8CFC2;

  --white: #FFFFFF;

  --shadow: 0 18px 45px rgba(42,31,26,.12);
  --shadow-soft: 0 10px 28px rgba(42,31,26,.08);

  --radius: 5px;
  --radius-sm: 5px;

  --container: 1120px;
  --pad: clamp(16px, 3vw, 28px);
}

/* Base */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--espresso);
  background: radial-gradient(1200px 600px at 50% -80px, rgba(224,68,36,.08), transparent 60%),
              linear-gradient(180deg, var(--cream-base), #fff 55%, var(--cream-base));
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
.container{
  width: min(var(--container), calc(100% - (var(--pad) * 2)));
  margin-inline: auto;
}

/* Top bar */
.topbar{
  background: rgba(250,246,236,.92);
  border-bottom: 1px solid rgba(216,207,194,.65);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(8px);
}
.topbar__inner{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
}
.topbar__text{
  font-size: 13px;
  color: var(--mocha);
}
.topbar__divider{
  width: 1px;
  height: 14px;
  background: rgba(216,207,194,.9);
}
.topbar__link{
  margin-left: auto;
  font-size: 13px;
  color: var(--sura-red-dark);
  font-weight: 650;
}
.topbar__link:hover{ text-decoration: underline; }

/* Header */
.header{
  position: sticky;
  top: 40px;
  z-index: 20;
  background: rgba(250,246,236,.82);
  border-bottom: 1px solid rgba(216,207,194,.55);
  backdrop-filter: blur(10px);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}

/* Brand */
.brand{
  display: grid;
  grid-template-columns: 38px auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
}
.brand__mark{
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  border-radius: 0px;
  background:
    linear-gradient(135deg, rgba(224,68,36,.18), rgba(224,68,36,.06)),
    radial-gradient(18px 18px at 60% 40%, rgba(224,68,36,.45), transparent 60%),
    linear-gradient(180deg, #fff, var(--cream-soft));
  border: 0px solid rgba(216,207,194,.75);
  box-shadow: 0 10px 22px rgba(42,31,26,.08);
  position: relative;
}
.brand__mark::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 8px;
  background: rgba(224,68,36,.18);
}
.brand__name{
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
}
.brand__sub{
  font-size: 12px;
  color: var(--mocha);
  margin-top: 2px;
}
.brand--footer .brand__mark{ box-shadow: none; }

/* Nav */
.nav{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}
.nav a{
  font-size: 14px;
  color: var(--mocha);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.nav a:hover{
  color: var(--espresso);
  border-color: rgba(216,207,194,.75);
  background: rgba(255,255,255,.6);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--sura-red);
  background: var(--sura-red);   /* FLAT COLOR */
  color: #fff;
  font-weight: 750;
  letter-spacing: .01em;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease;
}

.btn:hover{
  background: var(--sura-red-dark);
  border-color: var(--sura-red-dark);
}
.btn:active{ transform: translateY(0); }
.btn--ghost{
  background: rgba(255,255,255,.65);
  color: var(--espresso);
  border-color: rgba(216,207,194,.9);
  box-shadow: none;
}
.btn--ghost:hover{
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 40px rgba(42,31,26,.10);
}
.btn--small{ padding: 10px 14px; font-size: 13px; }

/* Typography helpers */
.eyebrow{
  font-size: 13px;
  color: var(--sura-red-dark);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
h1{
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.02;
  margin: 0 0 12px;
  letter-spacing: -0.03em;
}
h2{
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
h3{
  font-size: 18px;
  margin: 10px 0 6px;
  letter-spacing: -0.01em;
}
.lead{
  font-size: clamp(16px, 1.35vw, 18px);
  color: var(--mocha);
  line-height: 1.65;
  margin: 0 0 18px;
}
.muted{
  color: var(--mocha);
  line-height: 1.7;
}
.link{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  font-weight: 750;
  color: var(--sura-red-dark);
}
.link:hover{ text-decoration: underline; }

/* Hero */
.hero{
  position: relative;
  padding: clamp(26px, 4vw, 50px) 0 32px;
  box-shadow: none !important;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(18px, 4vw, 40px);
  align-items: center;
}
.hero__cta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.hero__meta{
  display:flex;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 0;
  margin: 22px 0 0;
  list-style: none;
}
.hero__meta li{
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(216,207,194,.75);
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--mocha);
}
.hero__meta strong{ color: var(--espresso); }

/* Hero visual */
.hero__visual{
  position: relative;
  min-height: 420px;
  border-radius: var(--radius);
  border: 1px solid rgba(216,207,194,.75);
  background:
    radial-gradient(260px 260px at 70% 30%, rgba(224,68,36,.16), transparent 60%),
    radial-gradient(220px 220px at 25% 70%, rgba(42,31,26,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(241,233,221,.55));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero__card{
  position:absolute;
  left: 16px;
  bottom: 16px;
  right: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(216,207,194,.75);
  border-radius: 16px;
  padding: 14px 14px 12px;
  backdrop-filter: blur(10px);
}
.hero__card-title{
  margin: 0 0 6px;
  font-weight: 850;
  letter-spacing: .01em;
}
.hero__card-body{
  margin: 0 0 10px;
  color: var(--mocha);
  line-height: 1.6;
  font-size: 14px;
}

/* Cup placeholder */
.cup{
  position:absolute;
  inset: 18px;
  display:grid;
  place-items: center;
}
.cup__foam{
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background:
    radial-gradient(40px 40px at 40% 35%, rgba(255,255,255,.9), rgba(255,255,255,.3) 60%),
    radial-gradient(90px 90px at 60% 70%, rgba(224,68,36,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(241,233,221,.45));
  border: 1px solid rgba(216,207,194,.75);
  box-shadow: 0 20px 60px rgba(42,31,26,.12);
  position: relative;
}
.cup__foam::after{
  content:"";
  position:absolute;
  inset: 58px 64px 78px 64px;
  border-radius: 999px;
  border: 1px solid rgba(224,68,36,.22);
  transform: rotate(-10deg);
}
.cup__body{
  width: 220px;
  height: 210px;
  margin-top: -74px;
  border-radius: 26px;
  background: linear-gradient(180deg, #fff, rgba(241,233,221,.55));
  border: 1px solid rgba(216,207,194,.85);
  box-shadow: 0 16px 45px rgba(42,31,26,.12);
  display:grid;
  place-items: center;
  position: relative;
}
.cup__body::before{
  content:"";
  position:absolute;
  right: -24px;
  top: 68px;
  width: 70px;
  height: 90px;
  border-radius: 999px;
  border: 12px solid rgba(255,255,255,.8);
  border-left-color: transparent;
  box-shadow: 0 14px 36px rgba(42,31,26,.10);
}
.cup__logo{
  font-weight: 950;
  letter-spacing: .06em;
  color: var(--sura-red-dark);
  border: 1px solid rgba(224,68,36,.28);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(250,246,236,.9);
}
.cup__shadow{
  width: 320px;
  height: 80px;
  margin-top: -38px;
  background: radial-gradient(160px 40px at 50% 50%, rgba(42,31,26,.18), transparent 70%);
  filter: blur(1px);
}

/* Backdrop curve */
.hero__backdrop{
  position:absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 34px;
  background: radial-gradient(80% 120% at 50% 0%, rgba(42,31,26,.10), transparent 65%);
  opacity: .35;
  display: none;
}

/* Sections */
.section{
  padding: clamp(38px, 5vw, 70px) 0;
}
.section--soft{
  background: linear-gradient(180deg, rgba(241,233,221,.55), rgba(250,246,236,.4));
  border-block: 1px solid rgba(216,207,194,.45);
}
.section__head{
  margin-bottom: 18px;
}
.section__head--row{
  display:flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

/* Split section */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 4vw, 40px);
  align-items: center;
}
.media__frame{
  border-radius: var(--radius);
  border: 1px solid rgba(216,207,194,.75);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  background: rgba(255,255,255,.55);
}

/* Placeholder images */
.ph{
  min-height: 320px;
  background:
    radial-gradient(260px 180px at 30% 25%, rgba(224,68,36,.20), transparent 60%),
    radial-gradient(220px 180px at 70% 70%, rgba(42,31,26,.14), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.85), rgba(241,233,221,.65));
}
.ph--story{ min-height: 360px; }
.ph--news1, .ph--news2, .ph--news3{ min-height: 170px; border-radius: 14px; }
.ph--news1{ background: radial-gradient(240px 160px at 40% 40%, rgba(224,68,36,.18), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,233,221,.65)); }
.ph--news2{ background: radial-gradient(240px 160px at 55% 35%, rgba(42,31,26,.14), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,233,221,.65)); }
.ph--news3{ background: radial-gradient(240px 160px at 55% 60%, rgba(224,68,36,.14), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,233,221,.65)); }

/* Story badges */
.badges{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.badge{
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(216,207,194,.8);
  background: rgba(255,255,255,.65);
  color: var(--mocha);
}
.content__actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

/* Grids */
.grid{
  display:grid;
  gap: 14px;
}
.cards{
  grid-template-columns: repeat(3, 1fr);
}
.card{
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(216,207,194,.78);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  min-height: 210px;
  display:flex;
  flex-direction: column;
}
.card__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.tag{
  font-size: 12px;
  font-weight: 800;
  color: var(--sura-red-dark);
  background: rgba(224,68,36,.08);
  border: 1px solid rgba(224,68,36,.18);
  padding: 7px 10px;
  border-radius: 999px;
}
.price{
  font-size: 12px;
  font-weight: 850;
  color: var(--espresso);
  opacity: .9;
}

.news{
  grid-template-columns: repeat(3, 1fr);
}
.news__item{
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(216,207,194,.78);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-soft);
}
.thumb{
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid rgba(216,207,194,.65);
}
.news__meta{
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--mocha);
}
.news__body h3{ margin-top: 0; }

/* Band section */
.section--band{
  background:
    radial-gradient(900px 400px at 20% 10%, rgba(224,68,36,.12), transparent 55%),
    linear-gradient(180deg, #fff, rgba(250,246,236,.55));
  border-block: 1px solid rgba(216,207,194,.45);
}
.band{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(16px, 4vw, 36px);
  align-items: center;
}
.band__actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

/* Phone placeholder */
.phone{
  width: min(420px, 100%);
  margin-left: auto;
  border-radius: 28px;
  border: 1px solid rgba(216,207,194,.78);
  background: rgba(255,255,255,.75);
  box-shadow: var(--shadow);
  padding: 14px;
}
.phone__screen{
  border-radius: 22px;
  border: 1px solid rgba(216,207,194,.72);
  background:
    radial-gradient(260px 160px at 40% 35%, rgba(224,68,36,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(241,233,221,.55));
  padding: 14px;
  min-height: 280px;
}
.phone__pill{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(224,68,36,.08);
  border: 1px solid rgba(224,68,36,.18);
  color: var(--sura-red-dark);
  font-weight: 850;
  font-size: 12px;
}
.phone__line{
  height: 10px;
  border-radius: 999px;
  background: rgba(42,31,26,.10);
  margin-top: 12px;
}
.phone__line--short{ width: 55%; }
.phone__grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.phone__tile{
  height: 70px;
  border-radius: 16px;
  border: 1px solid rgba(216,207,194,.7);
  background: rgba(255,255,255,.55);
}

/* Promos */
.promos{
  grid-template-columns: repeat(3, 1fr);
}
.promo{
  border-radius: var(--radius);
  border: 1px solid rgba(216,207,194,.78);
  background: rgba(255,255,255,.7);
  box-shadow: var(--shadow-soft);
  padding: 16px;
  min-height: 200px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}
.promo__title{
  margin: 0;
  font-weight: 850;
  color: var(--mocha);
}
.promo__value{
  margin: 6px 0 6px;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--espresso);
}
.promo--featured{
  border-color: rgba(224,68,36,.35);
  background:
    radial-gradient(260px 160px at 30% 25%, rgba(224,68,36,.14), transparent 60%),
    rgba(255,255,255,.72);
}

/* Testimonials */
.testi{
  grid-template-columns: repeat(3, 1fr);
}
.quote{
  margin: 0;
  border-radius: var(--radius);
  border: 1px solid rgba(216,207,194,.78);
  background: rgba(255,255,255,.7);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
blockquote{
  margin: 0;
  color: var(--espresso);
  line-height: 1.7;
}
.quote__name{
  display:block;
  margin-top: 12px;
  font-weight: 900;
}
.quote__meta{
  display:block;
  font-size: 13px;
  color: var(--mocha);
  margin-top: 2px;
}

/* Instagram */
.ig{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.ig__tile{
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid rgba(216,207,194,.65);
  box-shadow: 0 12px 26px rgba(42,31,26,.08);
}
.ph--ig1{ background: radial-gradient(220px 160px at 40% 40%, rgba(224,68,36,.14), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,233,221,.65)); }
.ph--ig2{ background: radial-gradient(220px 160px at 60% 40%, rgba(42,31,26,.14), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,233,221,.65)); }
.ph--ig3{ background: radial-gradient(220px 160px at 40% 60%, rgba(224,68,36,.12), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,233,221,.65)); }
.ph--ig4{ background: radial-gradient(220px 160px at 60% 60%, rgba(42,31,26,.12), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,233,221,.65)); }
.ph--ig5{ background: radial-gradient(220px 160px at 55% 45%, rgba(224,68,36,.10), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,233,221,.65)); }
.ph--ig6{ background: radial-gradient(220px 160px at 45% 55%, rgba(42,31,26,.10), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,233,221,.65)); }
.ph--ig7{ background: radial-gradient(220px 160px at 35% 45%, rgba(224,68,36,.10), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,233,221,.65)); }
.ph--ig8{ background: radial-gradient(220px 160px at 65% 55%, rgba(42,31,26,.10), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,233,221,.65)); }
.ph--ig9{ background: radial-gradient(220px 160px at 50% 40%, rgba(224,68,36,.10), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,233,221,.65)); }
.ph--ig10{ background: radial-gradient(220px 160px at 50% 60%, rgba(42,31,26,.10), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,233,221,.65)); }
.ph--ig11{ background: radial-gradient(220px 160px at 40% 50%, rgba(224,68,36,.10), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,233,221,.65)); }
.ph--ig12{ background: radial-gradient(220px 160px at 60% 50%, rgba(42,31,26,.10), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,233,221,.65)); }

/* Visit */
.visit{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(16px, 4vw, 34px);
  align-items: stretch;
}
.visit__card{
  border-radius: var(--radius);
  border: 1px solid rgba(216,207,194,.78);
  background: rgba(255,255,255,.75);
  box-shadow: var(--shadow);
  padding: 18px;
}
.visit__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.visit__info{
  border: 1px solid rgba(216,207,194,.75);
  border-radius: 14px;
  background: rgba(250,246,236,.65);
  padding: 12px;
}
.visit__label{
  margin: 0;
  font-size: 12px;
  color: var(--mocha);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.visit__value{
  margin: 6px 0 2px;
  font-weight: 900;
}
.visit__hint{ margin: 0; font-size: 13px; }
.visit__actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

.visit__map{
  border-radius: var(--radius);
  border: 1px solid rgba(216,207,194,.78);
  background: rgba(255,255,255,.65);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.map{
  height: 100%;
  min-height: 320px;
  display:grid;
  place-items: center;
  background:
    repeating-linear-gradient(90deg, rgba(216,207,194,.25) 0 18px, transparent 18px 36px),
    radial-gradient(260px 180px at 60% 45%, rgba(224,68,36,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(241,233,221,.65));
  position: relative;
}
.map__pin{
  width: 16px; height: 16px;
  background: var(--sura-red);
  border-radius: 50%;
  box-shadow: 0 12px 26px rgba(224,68,36,.32);
}
.map__label{
  position:absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(216,207,194,.75);
  background: rgba(255,255,255,.78);
  color: var(--mocha);
  font-size: 13px;
}

/* Footer */
.footer{
  padding: 34px 0 24px;
  border-top: 1px solid rgba(216,207,194,.55);
  background: rgba(250,246,236,.70);
}
.footer__inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
  align-items: start;
}
.footer__right{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  justify-items: end;
}
.footer__title{
  font-weight: 900;
  margin: 0 0 10px;
}
.footer__col{
  display:grid;
  gap: 10px;
  text-align: right;
}
.footer__col a{
  color: var(--mocha);
  font-size: 14px;
}
.footer__col a:hover{ color: var(--espresso); text-decoration: underline; }
.footer__bottom{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(216,207,194,.55);
}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__visual{ min-height: 380px; }
  .split{ grid-template-columns: 1fr; }
  .band{ grid-template-columns: 1fr; }
  .visit{ grid-template-columns: 1fr; }
  .visit__grid{ grid-template-columns: 1fr; }
  .footer__inner{ grid-template-columns: 1fr; }
  .footer__right{ justify-items: start; }
  .footer__col{ text-align: left; }
}

@media (max-width: 820px){
  .cards{ grid-template-columns: 1fr; }
  .news{ grid-template-columns: 1fr; }
  .promos{ grid-template-columns: 1fr; }
  .testi{ grid-template-columns: 1fr; }
  .ig{ grid-template-columns: repeat(3, 1fr); }
  .nav{ display:none; } /* lightweight: hide nav on small screens */
}

@media (max-width: 420px){
  .ig{ grid-template-columns: repeat(2, 1fr); }
}

/* ===============================
   SURA V1.2 – SHADOW OFF (SAFE)
   =============================== */

*,
*::before,
*::after{
  box-shadow: none !important;
}

/* ===============================
   Header Color Adjustment (White)
   =============================== */

/* Header background jadi putih */
.header{
  background: #ffffff !important;
}

/* Jika ada topbar dan ingin ikut putih */
.topbar{
  background: #ffffff !important;
}

/* Warna teks menu */
.nav a{
  color: var(--espresso) !important;
}
.nav a:hover{
  color: var(--sura-red-dark) !important;
}

/* Button Visit */
.nav .btn,
.header .btn{
  background: var(--sura-red) !important;
  color: #ffffff !important;
  border-color: var(--sura-red) !important;
}

.nav .btn:hover,
.header .btn:hover{
  background: var(--sura-red-dark) !important;
  border-color: var(--sura-red-dark) !important;
}

/* Pastikan teks di dalam button selalu putih */
.nav .btn *,
.header .btn *{
  color: #ffffff !important;
}

/* ===== Menu Section (Option 1) ===== */

/* If your project already has these, keep yours and remove duplicates */
.section--menu{
  background: transparent;
}

.menu-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:18px;
}

.menu-note{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.menu-note__pill{
  border:1px solid var(--border, #D8CFC2);
  background: rgba(255,255,255,.6);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  color: var(--mocha, #5B4A42);
}

/* Highlights cards */
.menu-highlights{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin: 14px 0 28px;
}

.menu-card{
  border:1px solid var(--border, #D8CFC2);
  border-radius: var(--radius, 12px);
  background: rgba(255,255,255,.75);
  padding:16px;
}

.menu-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(224,68,36,.18);
  background: rgba(224,68,36,.06);
  color: var(--sura-red-dark, #B7361D);
  border-radius: 999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
}

.price{
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  color: var(--mocha, #5B4A42);
}

.menu-card__title{
  margin: 0 0 8px;
  font-size:18px;
}

.menu-card__desc{
  margin: 0 0 12px;
  color: var(--mocha, #5B4A42);
  line-height:1.65;
}

.menu-card__cta{
  display:inline-flex;
  font-weight:800;
  color: var(--sura-red-dark, #B7361D);
}

/* Full menu */
.menu-full{
  border:1px solid var(--border, #D8CFC2);
  border-radius: var(--radius, 12px);
  background: rgba(255,255,255,.55);
  padding: 18px;
}

.menu-full__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

/* ===============================
   Explore Full Menu — Horizontal Tabs
   (Categories: Basic / Signature / Refresh / Add On)
   =============================== */

.tabs{ margin-top: 10px; }

.tabs__bar{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 6px 0 14px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
.tabs__bar::-webkit-scrollbar{ display:none; }

/* Pill tabs */
.tabs__tab{
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(216,207,194,.9);
  background: rgba(250,246,236,.75);
  color: var(--mocha);
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* Active */
.tabs__tab.is-active{
  background: #fff;
  color: var(--espresso);
  border-color: rgba(224,68,36,.40);
}

/* Panels */
.tabs__panels{
  border-top: 1px solid rgba(216,207,194,.75);
  padding-top: 14px;
}
.tabs__panel[hidden]{ display:none !important; }

/* ===============================
   FIX — Menu list rows (neat layout)
   =============================== */

.menu-list{
  display: flex;
  flex-direction: column;
}

.menu-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(216,207,194,.75);
}

.menu-row:last-child{
  border-bottom: none;
}

.menu-row__left{
  min-width: 0;
}

.menu-row__name{
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--espresso);
}

.menu-row__meta{
  font-size: 13px;
  line-height: 1.55;
  color: var(--mocha);
}

.menu-row__right{
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  white-space: nowrap;
}

.menu-row__price{
  font-weight: 900;
  font-size: 13px;
  color: var(--espresso);
}

.menu-row__price--muted{
  color: rgba(42,31,26,.35);
}

/* Mobile: biar harga turun ke bawah dan tetap rapi */
@media (max-width: 560px){
  .menu-row{
    grid-template-columns: 1fr;
  }
  .menu-row__right{
    justify-content: flex-start;
    padding-top: 6px;
  }
}

.menu-full{
  border:1px solid #e2d7c7;
  border-radius:16px;
  padding:24px;
  background:#fffdf9;
}

.menu-full__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:16px;
}

.menu-full__title{
  font-size:36px;
  font-weight:900;
  margin:0;
}

.menu-full__subtitle{
  color:#6b5a4f;
  max-width:420px;
}

/* Tabs */
.tabs__bar{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:12px;
}

.tabs__tab{
  padding:10px 16px;
  border-radius:999px;
  border:1px solid #e2d7c7;
  background:#f6f1ea;
  font-weight:800;
  cursor:pointer;
}

.tabs__tab.is-active{
  background:#fff;
  border-color:#e04424;
}

/* Panels */
.tabs__panel{ display:none; }
.tabs__panel.is-active{ display:block; }

/* Menu rows */
.menu-list{
  margin-top:12px;
}

.menu-row{
  display:grid;
  grid-template-columns:1fr auto;
  padding:14px 0;
  border-bottom:1px solid #e8ded1;
}

.menu-name{
  font-weight:900;
}

.menu-meta{
  font-size:13px;
  color:#6b5a4f;
}

.menu-price{
  display:flex;
  gap:14px;
  font-weight:800;
  white-space:nowrap;
}

.menu-price b{
  display:inline-block;
  width:18px;
  text-align:center;
  border:1px solid #e2d7c7;
  border-radius:999px;
  font-size:12px;
}

.muted{
  opacity:.4;
}

/* Add on */
.addon-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:12px;
}

.addon-card{
  padding:16px;
  border-radius:14px;
  border:1px solid #e2d7c7;
  background:#f6f1ea;
  font-weight:800;
}

.menu-note{
  margin-top:16px;
  color:#6b5a4f;
}

/* Mobile */
@media(max-width:640px){
  .menu-row{ grid-template-columns:1fr; }
  .menu-price{ margin-top:6px; }
  .addon-grid{ grid-template-columns:1fr; }
}

/* =========================================
   FULL MENU — editorial list + micro labels
   (aligned with SURA website look)
   ========================================= */

.sura-fullmenu{
  --cream: var(--cream, #fbf7ea);
  --paper: rgba(255,255,255,.45);
  --border: rgba(216,207,194,.9);
  --line: rgba(216,207,194,.55);

  --espresso: var(--espresso, #2a1f1a);
  --mocha: var(--mocha, #5b4a42);

  --accent: var(--sura-red, #e04424);

  margin-top: 18px;
}

.sura-fullmenu__top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 14px;
}

.sura-fullmenu__title{
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
  color: var(--espresso);
}

.sura-fullmenu__sub{
  margin: 6px 0 0;
  color: var(--mocha);
  line-height: 1.55;
}

/* Tabs: same language as your website pills */
.sura-tabs{
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
.sura-tabs::-webkit-scrollbar{ display:none; }

.sura-tab{
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(250,246,236,.85);
  color: var(--espresso);
  font-weight: 900;
  font-size: 13px;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}

.sura-tab.is-active{
  background: #fff;
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}

/* Panel */
.sura-panel[hidden]{ display:none !important; }

/* Block container: matches other sections (soft, no heavy outline) */
.sura-block{
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}

.sura-block__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.sura-block__title{
  margin: 0;
  font-size: 18px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--espresso);
}

/* List items */
.sura-list{
  display:flex;
  flex-direction:column;
  margin-top: 8px;
}

.sura-item{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.sura-item:last-child{ border-bottom: none; }

.sura-item__name{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--espresso);
  text-transform: uppercase;
}

.sura-item--desc .sura-item__name{
  text-transform: uppercase;
}

.sura-item__desc{
  margin: 6px 0 0;
  color: var(--mocha);
  font-size: 13px;
  line-height: 1.5;
}

/* Micro prices (the key) */
.sura-item__prices{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  justify-content:flex-end;
  white-space: nowrap;
}

.sura-micro{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(216,207,194,.75);
  background: rgba(250,246,236,.65);
}

.sura-micro__label{
  font-size: 12px;
  font-weight: 900;
  color: color-mix(in srgb, var(--accent) 70%, var(--espresso));
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sura-micro__price{
  font-size: 13px;
  font-weight: 900;
  color: var(--espresso);
}

.sura-micro--muted{
  opacity: .45;
}

/* Note */
.sura-note{
  margin: 12px 0 0;
  color: var(--mocha);
  font-weight: 700;
}

/* Add-on list: minimal, still branded */
.sura-addon{
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--espresso);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.65;
}
.sura-addon li::marker{
  color: var(--accent);
}

/* Responsive */
@media (max-width: 860px){
  .sura-fullmenu__top{
    flex-direction: column;
    align-items:flex-start;
  }
}

@media (max-width: 640px){
  .sura-item{
    grid-template-columns: 1fr;
  }
  .sura-item__prices{
    justify-content:flex-start;
  }
}

/* =========================
   Follow SURA (IG Grid 4x2)
   ========================= */

.follow{
  padding-top: 10px;
}

.follow__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 14px;
}

.follow__title{
  margin: 0;
  font-size: clamp(26px, 3.8vw, 40px);
  letter-spacing: -0.02em;
}

.follow__sub{
  margin: 8px 0 0;
  opacity: .72;
  line-height: 1.6;
}

/* 4 x 2 on desktop */
.ig-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* tile: flat, no shadow, website-aligned */
.ig-tile{
  position: relative;
  border-radius: 14px;            /* match your cards */
  border: 1px solid rgba(216,207,194,.9);
  background:
    radial-gradient(120px 120px at 30% 35%, rgba(224,68,36,.14), transparent 65%),
    radial-gradient(160px 160px at 70% 70%, rgba(42,31,26,.10), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
  aspect-ratio: 1 / 1;
  overflow:hidden;
}

/* subtle texture (optional, keeps it premium) */
.ig-tile::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.15), transparent 60%);
  opacity:.8;
  pointer-events:none;
}

/* reel indicator (non-clickable, purely visual) */
.ig-tile--reel::before{
  content:"";
  position:absolute;
  inset: 0;
  margin:auto;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(216,207,194,.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events:none;
}

.ig-tile--reel::after{
  /* play icon */
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-35%, -50%);
  width: 0; height: 0;
  border-left: 14px solid rgba(42,31,26,.78);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  pointer-events:none;
  opacity:.9;
}

/* Responsive */
@media (max-width: 980px){
  .ig-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  .follow__head{
    flex-direction: column;
    align-items:flex-start;
  }
}

/* ===== Full Menu → Modal (only for this section) ===== */
body.is-menu-modal-open{ overflow: hidden; }

.sura-fullmenu{
  margin-top: 18px;
}

.sura-fullmenu__top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  padding: 0;
}

.sura-fullmenu__title{
  margin:0;
  letter-spacing:-0.02em;
}

.sura-fullmenu__sub{
  margin:6px 0 0;
  max-width: 52ch;
}

/* =========================================
   SURA Full Menu Modal (Fullscreen + Animation)
   Requires HTML:
   .sura-menu-modal
     .sura-menu-modal__backdrop [data-close-menu]
     .sura-menu-modal__sheet
   ========================================= */

body.is-menu-modal-open{
  overflow: hidden;
}

/* Modal wrapper */
.sura-menu-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* hidden state */
  opacity: 0;
  pointer-events: none;

  transition: opacity 220ms cubic-bezier(.2,.8,.2,1);
}

/* Backdrop */
.sura-menu-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(20, 16, 13, .22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  opacity: 0;
  transition: opacity 220ms cubic-bezier(.2,.8,.2,1);
}

/* Sheet */
.sura-menu-modal__sheet{
  position: relative;
  height: 100%;
  width: 100%;
  background: var(--cream, #fbf7ea);
  display:flex;
  flex-direction: column;

  /* enter-from state */
  opacity: 0;
  transform: translateY(12px) scale(.995);
  transition:
    transform 260ms cubic-bezier(.2,.8,.2,1),
    opacity 200ms ease;

  will-change: transform, opacity;
}

/* OPEN */
.sura-menu-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}

.sura-menu-modal.is-open .sura-menu-modal__backdrop{
  opacity: 1;
}

.sura-menu-modal.is-open .sura-menu-modal__sheet{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* CLOSING (plays reverse smoothly) */
.sura-menu-modal.is-closing{
  opacity: 0;
  pointer-events: none;
}

.sura-menu-modal.is-closing .sura-menu-modal__backdrop{
  opacity: 0;
}

.sura-menu-modal.is-closing .sura-menu-modal__sheet{
  opacity: 0;
  transform: translateY(12px) scale(.995);
}

/* Optional: keep your existing header/toolbar/body styles.
   If you already have them elsewhere, keep them there. */

@media (prefers-reduced-motion: reduce){
  .sura-menu-modal,
  .sura-menu-modal__backdrop,
  .sura-menu-modal__sheet{
    transition: none !important;
  }
}

/* =========================================
   PATCH — SURA Full Menu Modal (Fix Layout)
   Paste at the VERY BOTTOM of style_v4.css
   ========================================= */

:root{
  --modal-bg: var(--cream-base, #FAF6EC);
  --modal-card: rgba(255,255,255,.72);
  --modal-border: rgba(216,207,194,.78);
  --modal-line: rgba(216,207,194,.55);
}

/* lock scroll when modal open */
body.is-menu-modal-open{ overflow: hidden; }

/* modal base (keep your animation, just refine sheet) */
.sura-menu-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(.2,.8,.2,1);
}

/* backdrop */
.sura-menu-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(20,16,13,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(.2,.8,.2,1);
}

/* sheet */
.sura-menu-modal__sheet{
  position: relative;
  height: 100%;
  width: 100%;
  background: var(--modal-bg);
  display:flex;
  flex-direction: column;

  opacity: 0;
  transform: translateY(12px) scale(.995);
  transition:
    transform 260ms cubic-bezier(.2,.8,.2,1),
    opacity 200ms ease;

  will-change: transform, opacity;
}

/* OPEN states */
.sura-menu-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
.sura-menu-modal.is-open .sura-menu-modal__backdrop{ opacity: 1; }
.sura-menu-modal.is-open .sura-menu-modal__sheet{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* CLOSING states */
.sura-menu-modal.is-closing{
  opacity: 0;
  pointer-events: none;
}
.sura-menu-modal.is-closing .sura-menu-modal__backdrop{ opacity: 0; }
.sura-menu-modal.is-closing .sura-menu-modal__sheet{
  opacity: 0;
  transform: translateY(12px) scale(.995);
}

/* ---------- STRUCTURE FIX: header / toolbar / body ---------- */
.sura-menu-modal__header{
  padding: 18px var(--pad);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;

  background: rgba(255,255,255,.65);
  border-bottom: 1px solid var(--modal-border);

  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sura-menu-modal__title{
  margin: 0;
  font-size: clamp(26px, 3.8vw, 44px);
  letter-spacing: -0.02em;
}
.sura-menu-modal__sub{
  margin: 6px 0 0;
  color: var(--mocha, #5B4A42);
  line-height: 1.55;
  max-width: 62ch;
}

.sura-menu-modal__close{
  flex: 0 0 auto;
  border: 1px solid var(--modal-border);
  background: rgba(250,246,236,.85);
  color: var(--espresso, #2A1F1A);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
}
.sura-menu-modal__close:hover{
  border-color: rgba(224,68,36,.40);
  background: rgba(255,255,255,.90);
}

/* toolbar (chips + tabs) */
.sura-menu-modal__toolbar{
  padding: 12px var(--pad) 14px;
  border-bottom: 1px solid var(--modal-border);
  background: rgba(250,246,236,.78);

  position: sticky;
  top: 86px; /* approx header height; safe enough */
  z-index: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sura-menu-modal__chips{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.chip{
  border: 1px solid var(--modal-border);
  background: rgba(255,255,255,.60);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--mocha, #5B4A42);
  font-weight: 700;
}

/* tabs inside modal: keep pill style consistent */
.sura-menu-modal__toolbar .sura-tabs{
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
  padding-bottom: 2px;
}
.sura-menu-modal__toolbar .sura-tabs::-webkit-scrollbar{ display:none; }

/* body scroll area */
.sura-menu-modal__body{
  flex: 1;
  overflow: auto;
  padding: 18px var(--pad) 32px;
}

/* constrain content width so it doesn't stick left */
.sura-menu-modal__body > .sura-panel{
  width: min(var(--container, 1120px), calc(100% - (var(--pad) * 2)));
  margin-inline: auto;
}

/* block inside modal: match your website cards */
.sura-menu-modal .sura-block{
  background: var(--modal-card);
  border: 1px solid var(--modal-border);
  border-radius: 16px;
  padding: 18px;
}

/* make sure list rows feel “full” not floating */
.sura-menu-modal .sura-item{
  border-bottom: 1px solid var(--modal-line);
}
.sura-menu-modal .sura-item:last-child{ border-bottom: none; }

@media (max-width: 640px){
  .sura-menu-modal__toolbar{ top: 96px; } /* small bump */
  .sura-menu-modal__header{
    align-items:flex-start;
    flex-direction: column;
  }
  .sura-menu-modal__close{
    width: 100%;
    justify-content:center;
  }
}

@media (prefers-reduced-motion: reduce){
  .sura-menu-modal,
  .sura-menu-modal__backdrop,
  .sura-menu-modal__sheet{
    transition: none !important;
  }
}

/* ===============================
   HERO FULL SCREEN PATCH
   =============================== */

/* tinggi header (adjust kalau berubah) */
:root{
  --header-h: 72px;
}

/* hero section */
.hero{
  min-height: calc(100vh - var(--header-h));
  display: grid;
  align-items: center;
  padding-top: var(--header-h);
}

/* kalau hero punya inner wrapper */
.hero__inner{
  padding-top: clamp(24px, 4vh, 64px);
  padding-bottom: clamp(32px, 6vh, 80px);
}

/* pastikan image/visual tidak kepotong */
.hero__visual{
  align-self: center;
}

/* mobile adjustment */
@media (max-width: 768px){
  .hero{
    min-height: auto;
    padding-top: calc(var(--header-h) + 24px);
  }
}