/* Usability updates layered over the existing brand theme. */
html { scroll-padding-top: 88px; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 11000; background: #fff; color: #0a3622; padding: 12px 20px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid #e1b900; outline-offset: 5px; }
.loader, .cursor, .cursor-ring { display: none !important; }
.hero-tag, .hero h1, .hero-desc, .hero-btns, .hero-stats, .hero-scroll { opacity: 1; animation: none; }
.reveal { opacity: 1; transform: none; }
nav { background: rgba(10,54,34,.97); }
.hero { min-height: 700px; height: auto; }
.hero-left { padding-top: 130px; padding-bottom: 70px; }
.hero-desc { color: rgba(255,255,255,.8); }
.nav-links a { color: rgba(255,255,255,.85); }
.nav-hamburger { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
.order-form input, .order-form select, .order-form textarea { font-size: 16px; }
.order-form [required] { border-left: 3px solid #157a42; }
.form-note { font-size: .8rem; line-height: 1.6; color: #47775a; margin: 12px 0; }
.hero-right img { min-height: 100%; }
@media (max-width: 1100px) {
  .nav-links { gap: 1rem; }
  .nav-right { gap: 1rem; }
}
@media (max-width: 768px) {
  .hero { display: flex; flex-direction: column; min-height: auto; }
  .hero-left { padding: 112px 7% 44px; }
  .hero h1 { font-size: clamp(3.2rem, 12vw, 4.8rem); }
  .hero-desc { margin-bottom: 24px; }
  .hero-stats { gap: 1.5rem; margin-top: 28px; padding-top: 24px; }
  .hero-stat-n { font-size: 1.9rem; }
  .hero-stat-l { font-size: .58rem; letter-spacing: .06em; }
  .hero-right { height: 320px; display: block; }
  .hero-right::after { background: linear-gradient(to bottom, #0a3622, transparent 30%) !important; }
  .hero-scroll { display: none; }
  .section, .section-sm, .prog-detail { padding: 56px 6%; }
  .nav-mobile-menu { max-height: calc(100dvh - 68px); overflow-y: auto; }
  .nav-mobile-menu a { min-height: 44px; }
  .hero-btns a { text-align: center; padding: 14px 20px; }
}
@media (max-width: 400px) {
  .nav-brand-sub, #dark-btn { display: none; }
  .nav-order { padding: .65rem .85rem; }
  .nav-actions { gap: .3rem; }
  .hero-btns { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Consistent, locally embedded vector icons. */
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.site-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; flex-shrink: 0; }
.ci-icon .site-icon, .chat-head-icon .site-icon, .pay-method-icon .site-icon { width: 22px; height: 22px; }
#chat-fab .site-icon { width: 26px; height: 26px; }
#dark-btn .site-icon { width: 20px; height: 20px; }
.soc-btn .site-icon { width: 20px; height: 20px; }
.order-success-icon .site-icon { width: 44px; height: 44px; }

/* Platform colors stay visible alongside the site's green branding. */
a[href*="instagram.com"] .site-icon { color: #e4405f !important; }
a[href*="facebook.com"] .site-icon { color: #1877f2 !important; }
a[href*="wa.me"] .site-icon { color: #25d366 !important; }
a.soc-btn[href*="instagram.com"] {
  background: linear-gradient(135deg, #feda75, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5) !important;
}
a.soc-btn[href*="facebook.com"] { background: #1877f2 !important; }
a.soc-btn[href*="wa.me"] { background: #25d366 !important; }
a.soc-btn[href*="instagram.com"] .site-icon,
a.soc-btn[href*="facebook.com"] .site-icon,
a.soc-btn[href*="wa.me"] .site-icon { color: #fff !important; }
a.social-link[href*="instagram.com"], a.footer-ig[href*="instagram.com"] { color: #f472a5 !important; }
a.social-link[href*="facebook.com"], a.footer-ig[href*="facebook.com"] { color: #60a5fa !important; }
.wa-cta, .auth-btn.wa,
a[href*="wa.me"] .ds-app { background: #25d366 !important; color: #08351a !important; border-color: #25d366 !important; }
.wa-cta .site-icon, .auth-btn.wa .site-icon,
a[href*="wa.me"] .ds-app .site-icon { color: #08351a !important; }
a.soc-btn:hover { filter: brightness(1.12); }
.video-grid video { height: auto !important; aspect-ratio: 9 / 16; max-height: 560px; object-fit: contain !important; }

/* Phone and tablet layouts: readable cards, consistent spacing, no hidden sliders. */
@media (max-width: 900px) {
  nav { padding: 0 16px; gap: 8px; }
  .nav-links, #dark-btn { display: none !important; }
  .nav-hamburger { display: flex; }
  .nav-right { gap: 0; min-width: 0; }
  .nav-actions { gap: 8px; }
  .nav-brand { gap: 8px; }
  .nav-brand-logo { width: 34px; height: 34px; }
  .nav-brand-name { font-size: 1rem; }
  .nav-brand-sub { display: none; }
  .nav-order { padding: 12px 16px; font-size: .7rem !important; }
  .nav-mobile-menu { padding: 12px 24px; }
  .hero { display: flex; flex-direction: column; min-height: 0; padding: 0; }
  .hero-left { padding: 104px 24px 32px; text-align: left; }
  .hero-left > * { opacity: 1; animation: none; }
  .hero-tag { font-size: .64rem; letter-spacing: .12em; margin-bottom: 20px; }
  .hero h1 { font-size: clamp(3rem, 10vw, 4.5rem); line-height: 1.02; margin-bottom: 24px; }
  .hero-desc { font-size: 1rem; line-height: 1.65; max-width: 540px; margin-bottom: 24px; }
  .hero-btns { gap: 12px; margin-bottom: 0; }
  .hero-btns a { padding: 15px 20px; font-size: .75rem; }
  .hero-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; width: 100%; margin: 28px 0 0; padding: 24px 0 0; transform: none; }
  .hero-stat-n { font-size: 1.8rem; }
  .hero-stat-l { color: #9ac4a9; font-size: .6rem; line-height: 1.5; letter-spacing: .04em; }
  .hero-right { height: 300px; min-height: 0; width: 100%; padding: 0; }
  .hero-right img { display: block; height: 100%; min-height: 0; object-fit: cover; object-position: center 30%; }
  .hero-right::after { background: linear-gradient(to bottom, #0a3622, transparent 25%) !important; }
  .hero-scroll { display: none; }
  .section, .section-sm, .prog-detail, .contact-sec { padding: 48px 24px; }
  .s-title { font-size: clamp(2rem, 7vw, 2.8rem); }
  .s-body, .prog-desc, .plan-desc, .review-text, .ds-body { font-size: .95rem; line-height: 1.7; }
  .about, .contact-sec, .jc-bottom { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .about-mosaic { grid-template-rows: 180px 140px; gap: 10px; }
  .about-badges { gap: 8px; }
  .about-badge { min-width: 80px; padding: 12px 8px; }
  .menu-grid, .prog-grid, .plans-grid, .jb-grid, .reviews-grid,
  .team-grid, .ig-grid, .pd-img-row, .how-grid, .video-grid, .story-grid {
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px;
    overflow: visible; margin-top: 28px; min-width: 0;
  }
  .how-grid, .video-grid, .story-grid { grid-template-columns: minmax(0,1fr) !important; gap: 20px !important; }
  .how-grid > div > div[style*="right:-50%"] { display: none; }
  .prog-grid > *, .menu-grid > *, .plans-grid > *, .team-grid > *, .jb-grid > *, .ig-grid > * { min-width: 0; max-width: 100%; }
  .prog-card-img { aspect-ratio: 4/3; }
  .prog-card-img img { object-position: center; }
  .prog-body, .plan-card, .review-card { padding: 20px; }
  .prog-name { font-size: 1.35rem; }
  .prog-price-row { gap: 8px; flex-wrap: wrap; }
  .prog-price { font-size: .85rem; }
  .menu-card-img { height: 260px; }
  .menu-card-name { font-size: 1.4rem; }
  .menu-card-desc { font-size: .85rem; }
  .pd-header { gap: 16px; margin-bottom: 24px; }
  .pd-img-row.cols3, .pd-img-row.cols4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .days-grid, .days-grid-l { gap: 0; }
  .day-col, .day-col-l { padding: 16px; border-right: none !important; border-bottom: 1px solid rgba(128,128,128,.2); }
  .dc-meal, .dc-meal-l { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 12px; align-items: start; }
  .dc-name, .dc-name-l { font-size: .9rem; line-height: 1.5; }
  .dc-type, .dc-type-l { font-size: .7rem; }
  .tab-row { flex-wrap: wrap; gap: 8px; }
  .tab-btn { min-height: 44px; padding: 12px; font-size: .75rem; }
  .jc-timeline { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
  .trust-bar { padding: 24px; }
  .trust-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 12px; }
  .trust-n { font-size: 1.7rem; }
  .trust-l { font-size: .6rem; line-height: 1.5; letter-spacing: .05em; }
  .delivery-strip { padding: 32px 24px; flex-direction: column; align-items: flex-start; gap: 20px; }
  .ds-apps { gap: 10px; }
  .ds-app { padding: 12px; }
  .order-form { min-width: 0; padding: 24px 20px; }
  .fg-row { grid-template-columns: minmax(0,1fr); }
  .fg label, .auth-fg label { font-size: .8rem; }
  .fg input, .fg select, .fg textarea, .auth-fg input { min-height: 48px; font-size: 16px; min-width: 0; }
  .ci-val, .fb-email { overflow-wrap: anywhere; }
  .ci-val { font-size: .9rem; }
  .form-cta, .wa-cta, .auth-btn { min-height: 48px; line-height: 1.5; letter-spacing: .02em; }
  .soc-btn { width: 44px; height: 44px; }
  footer { padding: 40px 24px 28px; }
  .footer-top { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
  .footer-top > div:first-child { grid-column: 1/-1; }
  .fc a { display: inline-block; padding: 8px 0; font-size: .85rem; color: #b4d0be; }
  .fb-desc { max-width: 100%; color: #b4d0be; }
  .footer-bottom { align-items: flex-start; gap: 16px; color: #9ac4a9; }
  #chat-widget { bottom: max(16px,env(safe-area-inset-bottom)); right: 16px; }
  #chat-box { width: min(340px,calc(100vw - 32px)); max-height: calc(100dvh - 140px); overflow-y: auto; }
  #chat-input { min-width: 0; font-size: 16px; }
  #chat-messages { height: min(260px,35dvh); }
  .chat-close, #chat-send { min-width: 44px; min-height: 44px; }
  .modal-overlay { padding: 16px; }
  .modal { max-width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; }
}
@media (max-width: 600px) {
  .menu-grid, .prog-grid, .plans-grid, .jb-grid, .reviews-grid { grid-template-columns: minmax(0,1fr); }
  .hero-btns { flex-direction: column; }
  .hero-btns a { width: 100%; text-align: center; }
  .section, .section-sm, .prog-detail, .contact-sec { padding: 44px 20px; }
  .hero-left { padding-left: 20px; padding-right: 20px; }
  .team-grid { gap: 12px; }
  .team-photo { height: 180px; }
  .team-name { font-size: 1rem; }
  .pd-img-row.cols3, .pd-img-row.cols4 { grid-template-columns: minmax(0,1fr); }
  .review-score { flex-wrap: wrap; line-height: 1.8; }
  .order-form div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0,1fr) !important; gap: 12px !important; }
  .detox-table { display: block; overflow-x: auto; }
}
@media (max-width: 360px) {
  nav { padding: 0 10px; }
  .nav-brand-logo { width: 28px; height: 28px; }
  .nav-brand-name { font-size: .9rem; }
  .nav-actions { gap: 4px; }
  .nav-order { padding: 12px 10px; }
  .hero-tag { letter-spacing: .06em; }
}

.hero-mobile-title { display: none; }
.hero-right picture { display: block; width: 100%; height: 100%; }
/* Photo-led mobile homepage, with centered copy above the food. */
@media (max-width: 900px) {
  nav:not(.scrolled) { background: linear-gradient(to bottom,rgba(8,22,14,.8),rgba(8,22,14,0)); border: none; }
  .hero { position: relative; display: block; height: 100svh; min-height: 660px; max-height: 950px; isolation: isolate; background: #152017; }
  .hero-right { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
  .hero-right img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: brightness(.78); }
  .hero-right::after { background: linear-gradient(to bottom,rgba(6,19,11,.55) 0%,rgba(6,19,11,.76) 18%,rgba(6,19,11,.55) 43%,rgba(6,19,11,.05) 65%,rgba(6,19,11,.25) 100%) !important; }
  .hero-left { position: relative; z-index: 1; background: transparent !important; padding: 128px 20px 40px; align-items: center; text-align: center; }
  .hero-left::before { display: none; }
  .hero-tag { display: none; }
  .hero-desktop-title { display: none; }
  .hero-mobile-title { display: inline; }
  .hero h1 { font-family: 'Outfit',sans-serif; font-size: clamp(2rem,8.2vw,3.7rem); font-weight: 600; line-height: 1.15; letter-spacing: -.035em; margin-bottom: 16px; }
  .hero h1 em { font-style: normal; color: #f5d920 !important; }
  .hero-desc { max-width: 400px; font-size: .9rem; line-height: 1.6; margin-bottom: 22px; color: #fff !important; text-wrap: pretty; }
  .hero-btns { flex-direction: row; justify-content: center; flex-wrap: nowrap; gap: 12px; width: 100%; }
  .hero-btns a { width: auto; padding: 13px 18px; font-size: .65rem; letter-spacing: .03em; }
  .hero-btns .btn-ghost { background: rgba(5,26,13,.4); border-color: rgba(255,255,255,.65) !important; color: #fff !important; }
  .hero-stats { display: none; }
}
@media (max-width: 360px) {
  .hero-left { padding-top: 112px; }
  .hero-btns { gap: 8px; }
  .hero-btns a { padding: 13px 12px; font-size: .6rem; }
}