:root {
  --crimson: #B3122E;
  --crimson-dark: #7E0C20;
  --blue: #1B2A6B;
  --marigold: #F28C00;
  --gold: #F4B400;
  --peacock: #0E8C9A;
  --leaf: #1F7A4D;
  --cream: #FFF6E5;
  --paper: #FFFBF3;
  --ink: #2B1A12;
  --muted: #6B5545;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(126, 12, 32, .12);

  /* Dhaka fabric pattern */
  --dhaka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%237E0C20'/%3E%3Cpath d='M24 4 L44 24 L24 44 L4 24 Z' fill='%23B3122E'/%3E%3Cpath d='M24 12 L36 24 L24 36 L12 24 Z' fill='%231B1B1B'/%3E%3Cpath d='M24 18 L30 24 L24 30 L18 24 Z' fill='%23F28C00'/%3E%3Cpath d='M0 0 L8 0 L0 8 Z M48 0 L40 0 L48 8 Z M0 48 L8 48 L0 40 Z M48 48 L40 48 L48 40 Z' fill='%23F4B400'/%3E%3Ccircle cx='24' cy='24' r='2' fill='%23FFF6E5'/%3E%3C/svg%3E");
  /* Toran (festival bunting) */
  --toran: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='26' viewBox='0 0 150 26'%3E%3Cpath d='M0 0 H150' stroke='%237E0C20' stroke-width='3'/%3E%3Cpath d='M2 1 L28 1 L15 24 Z' fill='%23B3122E'/%3E%3Cpath d='M32 1 L58 1 L45 24 Z' fill='%23F4B400'/%3E%3Cpath d='M62 1 L88 1 L75 24 Z' fill='%231F7A4D'/%3E%3Cpath d='M92 1 L118 1 L105 24 Z' fill='%23F28C00'/%3E%3Cpath d='M122 1 L148 1 L135 24 Z' fill='%231B2A6B'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Mukta", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.container { width: min(1120px, 100% - 32px); margin-inline: auto; }

.dhaka-strip { height: 14px; background: var(--dhaka); background-size: 28px 28px; }
.toran { height: 26px; background: var(--toran) repeat-x; background-size: 150px 26px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--paper);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; gap: 16px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 52px; height: 52px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-np { font-family: "Yatra One", "Mukta", serif; font-size: 1.45rem; color: var(--crimson); }
.brand-en { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); font-weight: 600; }

.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a { text-decoration: none; font-weight: 600; color: var(--ink); }
.nav-links a:hover { color: var(--crimson); }

.nav-right { display: flex; align-items: center; gap: 22px; }

.lang-switch { display: flex; border: 2px solid var(--crimson); border-radius: 999px; overflow: hidden; }
.lang-switch button {
  background: none; border: 0; padding: 3px 12px; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 700; color: var(--crimson);
}
.lang-switch button.active { background: var(--crimson); color: var(--cream); }

/* In English mode the small subtitles show Nepali, which shouldn't be letter-spaced or uppercased */
html[lang="en"] .brand-en,
html[lang="en"] .en-title,
html[lang="en"] .section-head .en,
html[lang="en"] .product .en { letter-spacing: .02em; text-transform: none; font-size: 1rem; }
html[lang="en"] .brand-en { font-size: .85rem; }

.nav-toggle {
  display: none; background: none; border: 2px solid var(--crimson); color: var(--crimson);
  border-radius: 8px; padding: 4px 10px; font-size: 1.2rem; cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(circle at 85% 20%, rgba(244, 180, 0, .25), transparent 45%),
    linear-gradient(135deg, var(--crimson) 0%, var(--crimson-dark) 100%);
  color: var(--cream);
  overflow: hidden;
}
.hero-inner { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 40px; padding: 72px 0 84px; }
.hero .namaste { font-family: "Yatra One", serif; color: var(--gold); font-size: 1.3rem; }
.hero h1 { font-family: "Yatra One", serif; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.15; margin: 6px 0 4px; font-weight: 400; }
.hero .en-title { font-size: 1.15rem; letter-spacing: .2em; text-transform: uppercase; opacity: .9; }
.hero p.lead { margin: 20px 0 28px; font-size: 1.15rem; max-width: 34ch; opacity: .95; }
.hero-logo { justify-self: center; width: min(320px, 80%); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }

.btn {
  display: inline-block; padding: 12px 26px; border-radius: 999px;
  font-weight: 700; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .2); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-outline { border: 2px solid var(--cream); color: var(--cream); margin-left: 10px; }

/* Marigold garland along hero bottom */
.garland {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background: radial-gradient(circle at 11px 11px, var(--marigold) 8px, var(--gold) 9px, transparent 10px) repeat-x;
  background-size: 22px 22px;
}

/* ---------- Sections ---------- */
section { padding: 80px 0; }
.section-head { text-align: center; margin-bottom: 44px; }
.section-head .np { font-family: "Yatra One", serif; color: var(--crimson); font-size: clamp(1.8rem, 4vw, 2.4rem); }
.section-head .en { color: var(--muted); letter-spacing: .15em; text-transform: uppercase; font-size: .85rem; font-weight: 600; }
.section-head::after {
  content: ""; display: block; width: 90px; height: 10px; margin: 14px auto 0;
  background: var(--dhaka); background-size: 10px 10px; border-radius: 4px;
}

/* About */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.about-text p { margin-bottom: 14px; }
.about-text .np-quote { font-family: "Yatra One", serif; font-size: 1.35rem; color: var(--blue); }
.about-card {
  background: var(--cream); border-radius: var(--radius); padding: 28px;
  border-left: 6px solid var(--marigold); box-shadow: var(--shadow);
}
.about-card ul { list-style: none; display: grid; gap: 12px; }
.about-card li { display: flex; gap: 10px; align-items: flex-start; }
.about-card li::before { content: "✿"; color: var(--marigold); font-size: 1.1rem; }

/* Products */
.products { background: var(--cream); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.product {
  background: #fff; border-radius: var(--radius); padding: 24px 18px; text-align: center;
  box-shadow: var(--shadow); border-top: 5px solid var(--crimson); transition: transform .2s ease;
}
.product:nth-child(3n+2) { border-top-color: var(--marigold); }
.product:nth-child(3n) { border-top-color: var(--leaf); }
.product:hover { transform: translateY(-4px); }
.product .icon { font-size: 2.6rem; }
.product h3 { font-family: "Yatra One", serif; font-weight: 400; color: var(--crimson); font-size: 1.35rem; margin-top: 6px; }
.product .en { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.product p { font-size: .95rem; margin-top: 8px; color: var(--muted); }

/* Why us */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.why {
  padding: 28px; border-radius: var(--radius); background: #fff;
  border: 2px dashed rgba(179, 18, 46, .25); text-align: center;
}
.why .badge {
  width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.8rem;
  background: var(--crimson); color: var(--gold); box-shadow: 0 0 0 5px var(--cream), 0 0 0 7px var(--gold);
}
.why h3 { font-family: "Yatra One", serif; font-weight: 400; color: var(--blue); font-size: 1.25rem; }

/* Contact */
.contact { background: var(--blue); color: var(--cream); }
.contact .section-head .np { color: var(--gold); }
.contact .section-head .en { color: rgba(255, 246, 229, .7); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; }
.info { display: grid; gap: 18px; align-content: start; }
.info-item { display: flex; gap: 14px; background: rgba(255, 255, 255, .07); padding: 18px; border-radius: var(--radius); }
.info-item .ic { font-size: 1.6rem; }
.info-item h4 { color: var(--gold); font-size: 1.05rem; }
.info-item a { text-decoration: none; }
.map { border-radius: var(--radius); overflow: hidden; border: 4px solid var(--gold); min-height: 340px; }
.map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* Footer */
.site-footer { background: var(--crimson-dark); color: var(--cream); text-align: center; padding: 32px 0 24px; }
.site-footer .brand { justify-content: center; margin-bottom: 10px; }
.site-footer .brand-np { color: var(--gold); }
.site-footer .brand-en { color: var(--cream); }
.site-footer small { opacity: .75; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--paper); box-shadow: 0 8px 16px rgba(0, 0, 0, .1);
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: 14px 16px; border-top: 1px solid #f0e4d0; }

  .hero-inner, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-inner { text-align: center; padding: 48px 0 64px; }
  .hero p.lead { margin-inline: auto; }
  .hero-logo { order: -1; width: 200px; }
  .btn-outline { margin: 12px 0 0; }
  section { padding: 56px 0; }
  .nav-right { gap: 10px; }
}

@media (max-width: 420px) {
  .brand { gap: 8px; }
  .brand img { width: 40px; height: 40px; }
  .brand-np { font-size: 1.2rem; }
  .site-header .brand-en { display: none; }
  .lang-switch button { padding: 3px 8px; }
}
