/**
 * MyGuwahati homepage — reference design (New-Design/Homepage.png).
 * Loaded only on the homepage. Everything is namespaced .mgh-* and built mobile-first:
 *   base   320–767px   phone composition from the reference
 *   ≥768   tablet      wider hero, 6-column service grid
 *   ≥1100  desktop     full brand bar with navigation, 9-column service grid
 */

.mgh-home {
    --mgh-bg: #fff9f3;
    --mgh-surface: #ffffff;
    --mgh-navy: #0d1b3e;
    --mgh-ink: #27314d;
    --mgh-muted: #5b6275;
    --mgh-orange: #e2470f;          /* accents, large display text */
    --mgh-orange-btn: #d43f0a;      /* button fill: white text passes WCAG AA */
    --mgh-orange-soft: #ff7a2f;     /* accent on dark surfaces */
    --mgh-green: #0b3a2b;
    --mgh-line: rgba(13, 27, 62, 0.10);
    --mgh-shadow: 0 10px 28px rgba(13, 27, 62, 0.10);
    --mgh-serif: 'Fraunces', 'Hind Siliguri', 'Noto Serif Bengali', Georgia, 'Times New Roman', serif;
    --mgh-script: 'Caveat', 'Hind Siliguri', cursive;
    background: var(--mgh-bg);
    color: var(--mgh-navy);
    overflow-x: clip;
}
body.page-is-homepage,
body.page-is-homepage .app-wrapper,
body.page-is-homepage .main-content { background-color: #fff9f3 !important; }
body.page-is-homepage .main-content { padding-top: 0 !important; margin-top: 0 !important; }

.mgh-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }
.mgh-home .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mgh-home a { text-decoration: none; }
.mgh-home :focus-visible { outline: 3px solid var(--mgh-orange); outline-offset: 3px; border-radius: 8px; }
.mgh-accent { color: var(--mgh-orange); }

/* ── Hero ───────────────────────────────────────────────────────────────────────────────── */
.mgh-hero { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 50px; background: var(--mgh-bg); }
.mgh-hero-art { position: absolute; inset: 0 0 0 auto; width: 76%; z-index: -3; }
.mgh-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 46%; display: block; }
.mgh-hero-veil { position: absolute; inset: 0 auto 0 0; width: 62%; z-index: -2; filter: drop-shadow(10px 0 16px rgba(255, 249, 243, 0.9)); pointer-events: none; }
.mgh-hero-veil svg { width: 100%; height: 100%; display: block; }
.mgh-hero-veil path { fill: var(--mgh-bg); }
.mgh-hero-fade { position: absolute; inset: auto 0 0 0; height: 96px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 249, 243, 0) 0%, rgba(255, 249, 243, 0.72) 55%, var(--mgh-bg) 100%); }
.mgh-hero-inner { position: relative; padding-top: max(10px, env(safe-area-inset-top)); }

.mgh-topbar { display: flex; align-items: center; gap: 7px; min-height: 60px; }
.mgh-logo { flex: 0 0 auto; display: block; line-height: 0; margin-left: -4px; }
.mgh-logo img { height: 60px; width: auto; display: block; mix-blend-mode: multiply; }   /* logo.png has a white ground */
.mgh-nav { display: none; }
.mgh-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.mgh-pill, .mgh-round {
    display: inline-flex; align-items: center; justify-content: center; height: 34px; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.94); color: var(--mgh-navy); box-shadow: 0 2px 10px rgba(13, 27, 62, 0.12);
    font: 600 0.8125rem/1 var(--font-family-body); -webkit-tap-highlight-color: transparent;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.mgh-pill { gap: 4px; padding: 0 10px 0 9px; border-radius: 999px; min-width: 0; }
.mgh-pill .material-symbols-outlined { font-size: 16px; }
.mgh-round { width: 34px; border-radius: 50%; position: relative; flex: 0 0 34px; }
.mgh-round .material-symbols-outlined { font-size: 19px; }
.mgh-pill:hover, .mgh-round:hover { background: #ffffff; box-shadow: 0 4px 14px rgba(13, 27, 62, 0.18); transform: translateY(-1px); }
.mgh-pill:active, .mgh-round:active { transform: scale(0.97); }
.mgh-loc { max-width: 150px; }
.mgh-loc-pin { color: var(--mgh-orange); }
.mgh-loc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgh-theme { display: none; }
.mgh-bell-dot { position: absolute; top: 6px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: #e11d2e; border: 2px solid #ffffff; }
.mgh-avatar { background: var(--mgh-navy); color: #ffffff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 3px 10px rgba(13, 27, 62, 0.2); }
.mgh-avatar:hover { background: #16296033; background: #17285a; }
.mgh-avatar-initial { font: 700 0.9375rem/1 var(--font-family-headline); }
.mgh-user { position: relative; }
.mgh-user .header-user-dropdown { right: 0; top: calc(100% + 8px); z-index: 60; }

.mgh-hero-copy { position: relative; max-width: 58%; padding-top: 6px; }
.mgh-hero-title { margin: 0; font-family: var(--mgh-serif); font-weight: 800; font-size: clamp(1.625rem, 7.5vw, 2.25rem); line-height: 1.02;
    letter-spacing: -0.015em; color: var(--mgh-navy); text-wrap: balance; }
.mgh-hero-sub { margin: 8px 0 0; font-size: 0.75rem; line-height: 1.4; color: var(--mgh-ink); max-width: 24ch; }
.mgh-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 12px; padding: 0 18px; border-radius: 999px;
    background: var(--mgh-orange-btn); color: #ffffff !important; font: 700 0.84375rem/1 var(--font-family-body);
    box-shadow: 0 8px 18px rgba(212, 63, 10, 0.32); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); }
.mgh-btn > span:first-child { white-space: nowrap; }
.mgh-btn .material-symbols-outlined { font-size: 19px; transition: transform var(--transition-fast); }
.mgh-btn:hover { background: #bf3808; box-shadow: 0 10px 22px rgba(212, 63, 10, 0.4); transform: translateY(-1px); }
.mgh-btn:hover .material-symbols-outlined { transform: translateX(3px); }
.mgh-btn--sm { min-height: 32px; padding: 0 14px; font-size: 0.75rem; margin-top: 10px; }

.mgh-made { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 600 0.5625rem/1 var(--font-family-body); letter-spacing: 0.22em;
    text-transform: uppercase; color: #8b8f9b; white-space: nowrap; }
.mgh-motif { width: 20px; height: 20px; flex: 0 0 20px; fill: var(--mgh-orange); }
.mgh-cross { width: 12px; height: 12px; flex: 0 0 12px; stroke: #ffb37a; stroke-width: 3; stroke-linecap: round; fill: none; }
.mgh-made-line { flex: 1 1 auto; height: 1px; min-width: 12px; background: linear-gradient(90deg, rgba(226, 71, 15, 0.3), rgba(226, 71, 15, 0)); }

.mgh-note { position: absolute; right: 3%; top: 84px; margin: 0; font: 700 0.875rem/1.05 var(--mgh-script); color: var(--mgh-navy);
    transform: rotate(-9deg); text-align: left; text-shadow: 0 1px 6px rgba(255, 249, 243, 0.55); pointer-events: none; }
.mgh-note svg { display: block; width: 78%; height: 9px; margin: 2px 0 0 14%; }
.mgh-note path, .mgh-promo-note path { fill: none; stroke: var(--mgh-orange); stroke-width: 4; stroke-linecap: round; }

/* ── Search ─────────────────────────────────────────────────────────────────────────────── */
.mgh-search-wrap { position: relative; z-index: 6; margin-top: -34px; }
.mgh-home .mgh-search { position: relative; margin: 0; padding: 0; width: 100%; max-width: none; background: none; border: 0; box-shadow: none; }
.mgh-search-bar { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 6px 0 16px; border-radius: 999px; background: var(--mgh-surface);
    border: 1px solid rgba(13, 27, 62, 0.06); box-shadow: 0 14px 34px rgba(13, 27, 62, 0.12); transition: box-shadow var(--transition-fast), border-color var(--transition-fast); }
.mgh-search-bar:focus-within { border-color: rgba(226, 71, 15, 0.5); box-shadow: 0 14px 34px rgba(13, 27, 62, 0.14), 0 0 0 4px rgba(226, 71, 15, 0.12); }
.mgh-search-icon { font-size: 23px; color: var(--mgh-navy); flex: 0 0 auto; }
.mgh-search-input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--mgh-navy);
    font: 500 0.9375rem/1.2 var(--font-family-body); }
.mgh-search-input::placeholder { color: #7b8194; opacity: 1; }
.mgh-search-clear, .mgh-search-filter { flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent; color: var(--mgh-navy); cursor: pointer; transition: background-color var(--transition-fast); }
.mgh-search-clear { flex-basis: 32px; width: 32px; height: 32px; color: var(--mgh-muted); }
.mgh-search-clear .material-symbols-outlined { font-size: 18px; }
.mgh-search-filter:hover, .mgh-search-clear:hover { background: rgba(13, 27, 62, 0.06); }
.mgh-search-divider { width: 1px; height: 28px; background: var(--mgh-line); flex: 0 0 1px; }
.mgh-home .search-dropdown { top: calc(100% + 8px); left: 0; right: 0; border-radius: 18px; z-index: 40; }

/* ── Trust indicators ───────────────────────────────────────────────────────────────────── */
.mgh-trust { margin-top: 14px; }
.mgh-trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mgh-trust-item { display: flex; align-items: center; gap: 7px; padding: 0 7px; min-width: 0; }
.mgh-trust-item:first-child { padding-left: 0; }
.mgh-trust-item + .mgh-trust-item { border-left: 1px solid var(--mgh-line); }
.mgh-trust-icon { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.mgh-trust-icon .material-symbols-outlined { font-size: 17px; }
.mgh-trust-icon--green { background: #e3f5e8; color: #17924a; }
.mgh-trust-icon--orange { background: #ffeeda; color: #f07a12; }
.mgh-trust-icon--rose { background: #fde4ea; color: #e3264f; }
.mgh-trust-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mgh-trust-text strong { font: 700 0.6875rem/1.15 var(--font-family-body); color: var(--mgh-navy); }
.mgh-trust-text small { font: 400 0.625rem/1.2 var(--font-family-body); color: var(--mgh-muted); }

/* ── Section headings ───────────────────────────────────────────────────────────────────── */
.mgh-section { margin-top: 20px; }
.mgh-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mgh-h2 { position: relative; margin: 0; padding-bottom: 8px; font-family: var(--mgh-serif); font-weight: 800; font-size: clamp(1.0625rem, 4.7vw, 1.3125rem);
    line-height: 1.1; letter-spacing: -0.01em; color: var(--mgh-navy); }
.mgh-h2::after { content: ''; position: absolute; left: 2px; bottom: 0; width: 26px; height: 3px; border-radius: 3px; background: var(--mgh-orange); transform: rotate(-4deg); }
.mgh-more { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0 9px; white-space: nowrap; font: 700 0.75rem/1 var(--font-family-body); color: var(--mgh-orange) !important; }
.mgh-more .material-symbols-outlined { font-size: 16px; transition: transform var(--transition-fast); }
.mgh-more:hover .material-symbols-outlined { transform: translateX(3px); }

/* ── Service shortcuts ──────────────────────────────────────────────────────────────────── */
.mgh-grid { display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); grid-auto-rows: 21px; row-gap: 5px; column-gap: 0; margin-inline: -3px; }
.mgh-card { position: relative; margin-inline: 3px; padding: 7px 2px 6px; border-radius: 13px; display: flex; flex-direction: column; align-items: center;
    gap: 3px; min-width: 0; color: var(--mgh-navy) !important; background: #f3f5f9; border: 1px solid rgba(13, 27, 62, 0.04);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast); -webkit-tap-highlight-color: transparent; }
.mgh-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(13, 27, 62, 0.12); }
.mgh-card:active { transform: scale(0.98); }
.mgh-card-pic { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.mgh-card-pic img { max-width: 78%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(13, 27, 62, 0.14)); }
.mgh-card-label { font: 600 0.65625rem/1.15 var(--font-family-body); letter-spacing: -0.01em; text-align: center; }
.mgh-card-go { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #ffffff; display: inline-flex; align-items: center; justify-content: center;
    color: var(--mgh-orange); box-shadow: 0 1px 3px rgba(13, 27, 62, 0.12); }
.mgh-card-go .material-symbols-outlined { font-size: 10px; font-weight: 700; }
.mgh-tag { position: absolute; right: 8%; bottom: 4%; padding: 1px 4px; border-radius: 3px; background: #d92323; color: #ffffff; font: 800 0.4375rem/1.3 var(--font-family-body); letter-spacing: 0.04em; }

.mgh-tone-pink  { background: #fde6ee; }
.mgh-tone-peach { background: #fdeee4; }
.mgh-tone-sky   { background: #e1f0fd; }
.mgh-tone-blue  { background: #e7f0fc; }
.mgh-tone-lilac { background: #eee9fb; }
.mgh-tone-mint  { background: #e3f5ea; }
.mgh-tone-cream { background: #fdf1e1; }
.mgh-tone-rose  { background: #fde7e9; }
.mgh-tone-sky .mgh-card-go, .mgh-tone-blue .mgh-card-go, .mgh-tone-lilac .mgh-card-go, .mgh-tone-mint .mgh-card-go { color: var(--mgh-navy); }

.mgh-card--feature { align-items: flex-start; justify-content: flex-end; padding: 10px; border-radius: 16px; overflow: hidden; border: 0;
    background: radial-gradient(120% 90% at 0% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(155deg, #ffe3bf 0%, #ffc88d 55%, #ffb066 100%); }
.mgh-card-art { position: absolute; top: 8px; right: 8px; width: 50%; height: auto; filter: drop-shadow(0 8px 10px rgba(122, 51, 0, 0.25)); }
.mgh-card-body { position: relative; display: flex; flex-direction: column; gap: 3px; max-width: 78%; }
.mgh-card-title { font: 800 0.9375rem/1.1 var(--font-family-headline); color: var(--mgh-navy); }
.mgh-card-sub { font: 500 0.625rem/1.25 var(--font-family-body); color: var(--mgh-ink); }
.mgh-card--feature .mgh-card-go { position: absolute; right: 8px; bottom: 8px; width: 18px; height: 18px; }
.mgh-card--feature .mgh-card-go .material-symbols-outlined { font-size: 12px; }

/* Phone bento, as in the reference: Jobs is the tall feature card; Car Rental sits under it. */
.mgh-card[data-svc="jobs"]       { grid-column: 1 / span 8;  grid-row: 1 / span 5; }
.mgh-card[data-svc="matrimony"]  { grid-column: 9 / span 5;  grid-row: 1 / span 4; }
.mgh-card[data-svc="to-let"]     { grid-column: 14 / span 5; grid-row: 1 / span 4; }
.mgh-card[data-svc="flight"]     { grid-column: 19 / span 5; grid-row: 1 / span 4; }
.mgh-card[data-svc="bus"]        { grid-column: 24 / span 5; grid-row: 1 / span 4; }
.mgh-card[data-svc="car-rental"] { grid-column: 1 / span 8;  grid-row: 6 / span 3; }
.mgh-card[data-svc="hotel"]      { grid-column: 9 / span 5;  grid-row: 5 / span 4; }
.mgh-card[data-svc="property"]   { grid-column: 14 / span 5; grid-row: 5 / span 4; }
.mgh-card[data-svc="tutors"]     { grid-column: 19 / span 5; grid-row: 5 / span 4; }
.mgh-card[data-svc="lawyers"]    { grid-column: 24 / span 5; grid-row: 5 / span 4; }
.mgh-card[data-svc="labour"]     { grid-column: 1 / span 6;  grid-row: 9 / span 4; }
.mgh-card[data-svc="furniture"]  { grid-column: 7 / span 6;  grid-row: 9 / span 4; }
.mgh-card[data-svc="ambulance"]  { grid-column: 13 / span 6; grid-row: 9 / span 4; }
.mgh-card[data-svc="buy-prop"]   { grid-column: 19 / span 5; grid-row: 9 / span 4; }
.mgh-card[data-svc="sell-prop"]  { grid-column: 24 / span 5; grid-row: 9 / span 4; }
.mgh-card[data-svc="car-rental"] { flex-direction: row; gap: 8px; padding: 8px 10px; justify-content: center; }
.mgh-card[data-svc="car-rental"] .mgh-card-pic { flex: 0 0 44%; height: 100%; }
.mgh-card[data-svc="car-rental"] .mgh-card-label { text-align: left; }
.mgh-card[data-svc="car-rental"] .mgh-card-go { display: none; }

/* ── Local banner ───────────────────────────────────────────────────────────────────────── */
.mgh-promo { position: relative; isolation: isolate; overflow: hidden; border-radius: 16px; min-height: 142px; display: flex; align-items: center;
    background: var(--mgh-green); color: #ffffff; box-shadow: var(--mgh-shadow); }
.mgh-promo-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; z-index: -2; }
.mgh-promo-shade { position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, #0b3a2b 0%, rgba(11, 58, 43, 0.97) 30%, rgba(11, 58, 43, 0.72) 48%, rgba(11, 58, 43, 0.12) 70%, rgba(11, 58, 43, 0) 100%),
                linear-gradient(0deg, rgba(11, 58, 43, 0.22), rgba(11, 58, 43, 0.22)); }
.mgh-promo-weave { position: absolute; top: 0; right: 0; width: 52px; height: 52px; fill: rgba(255, 255, 255, 0.4); }
.mgh-promo-copy { padding: 14px 16px; max-width: 62%; }
.mgh-promo-title { margin: 0; font-family: var(--mgh-serif); font-weight: 800; font-size: clamp(1.1875rem, 5.2vw, 1.5rem); line-height: 1.05; letter-spacing: -0.01em; color: #ffffff; }
.mgh-promo-title .mgh-accent { color: var(--mgh-orange-soft); }
.mgh-promo-sub { margin: 6px 0 0; font-size: 0.6875rem; line-height: 1.35; color: rgba(255, 255, 255, 0.92); max-width: 30ch; }
.mgh-promo-note { position: absolute; right: 5%; top: 50%; margin: 0; transform: translateY(-50%) rotate(-8deg); font: 700 0.9375rem/1.05 var(--mgh-script);
    color: #ffffff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); pointer-events: none; }
.mgh-promo-note svg { display: block; width: 90%; height: 9px; margin-top: 3px; }
.mgh-promo-note path { stroke: var(--mgh-orange-soft); }

/* ── Around Guwahati ────────────────────────────────────────────────────────────────────── */
.mgh-around { padding-bottom: 8px; }
.mgh-around-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mgh-place { display: flex; flex-direction: column; min-width: 0; border-radius: 14px; overflow: hidden; background: var(--mgh-surface); color: var(--mgh-navy) !important;
    box-shadow: 0 6px 18px rgba(13, 27, 62, 0.09); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.mgh-place:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(13, 27, 62, 0.14); }
.mgh-place-pic { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #ffe9d2; }
.mgh-place-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-slow); }
.mgh-place:hover .mgh-place-pic img { transform: scale(1.04); }
.mgh-place-art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #ffffff;
    background: radial-gradient(90% 90% at 80% 10%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(140deg, #ffb869 0%, #f0721a 100%); }
.mgh-place-art .material-symbols-outlined { font-size: 40px; filter: drop-shadow(0 4px 8px rgba(122, 51, 0, 0.3)); }
.mgh-place-info { position: relative; display: flex; align-items: center; gap: 6px; margin-top: -12px; padding: 16px 8px 10px 9px; border-radius: 14px 14px 0 0; background: var(--mgh-surface); min-width: 0; }
.mgh-place-icon { position: absolute; left: 8px; top: -14px; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #ffffff; display: inline-flex; align-items: center; justify-content: center;
    color: var(--mgh-orange); box-shadow: 0 2px 8px rgba(13, 27, 62, 0.16); }
.mgh-place-icon .material-symbols-outlined { font-size: 15px; }
.mgh-place--spots .mgh-place-icon { color: #1763d6; }
.mgh-place-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mgh-place-text strong { font: 700 0.75rem/1.2 var(--font-family-body); }
.mgh-place-text small { font: 400 0.625rem/1.25 var(--font-family-body); color: var(--mgh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgh-place-chev { display: none; flex: 0 0 auto; font-size: 16px; color: var(--mgh-navy); }

/* ── Data-driven sections below the reference layout ────────────────────────────────────── */
.mgh-rest { background: transparent; padding-bottom: 24px; }
.mgh-rest.app-container { max-width: 1240px; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }
.mgh-rest .section-wrapper { padding-inline: 0; margin-top: 28px; }
.mgh-rest .section-title { font-family: 'Fraunces', 'Hind Siliguri', Georgia, serif; font-weight: 800; color: #0d1b3e; }

/* ── Narrow phones (≤359px) ─────────────────────────────────────────────────────────────── */
@media (max-width: 359px) {
    .mgh-logo img { height: 52px; }
    .mgh-loc-name { display: none; }
    .mgh-lang > span:last-child { display: none; }
    .mgh-hero-copy { max-width: 64%; }
    .mgh-note { display: none; }
    .mgh-trust-item { flex-direction: column; text-align: center; gap: 5px; padding: 0 4px; }
    .mgh-trust-item:first-child { padding-left: 4px; }
    .mgh-trust-text small { display: none; }
    .mgh-search-input { font-size: 0.875rem; }
    .mgh-card-label { font-size: 0.625rem; }
    .mgh-card--feature { padding: 8px; }
    .mgh-card-sub { display: none; }
    .mgh-card-art { width: 62%; right: 50%; transform: translateX(50%); }
    .mgh-card--feature .mgh-card-go { right: 6px; bottom: 6px; }
    .mgh-around-list { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 58%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
    .mgh-place { scroll-snap-align: start; }
    .mgh-promo-note { display: none; }
    .mgh-promo-copy { max-width: 78%; }
}

/* ── Large phones / small tablets (≥480px) ──────────────────────────────────────────────── */
@media (min-width: 480px) {
    .mgh-hero { padding-bottom: 66px; }
    .mgh-hero-title { font-size: clamp(2.375rem, 7.4vw, 3rem); }
    .mgh-hero-sub { font-size: 0.9375rem; }
    .mgh-btn { min-height: 44px; font-size: 0.9375rem; }
    .mgh-search-bar { height: 56px; }
    .mgh-search-wrap { margin-top: -40px; }
    .mgh-h2 { font-size: 1.5rem; }
    .mgh-more { font-size: 0.8125rem; }
    .mgh-card-title { font-size: 1.125rem; }
    .mgh-card-sub { font-size: 0.71875rem; }
    .mgh-note { font-size: 1.125rem; top: 104px; right: 4%; }
    .mgh-grid { grid-auto-rows: 36px; row-gap: 10px; margin-inline: -5px; }
    .mgh-card { margin-inline: 5px; padding-inline: 4px; }
    .mgh-card-label { font-size: 0.78125rem; }
    .mgh-card-go { width: 18px; height: 18px; }
    .mgh-trust-text strong { font-size: 0.8125rem; }
    .mgh-trust-text small { font-size: 0.71875rem; }
    .mgh-place-text strong { font-size: 0.875rem; }
    .mgh-place-text small { font-size: 0.71875rem; }
    .mgh-promo { min-height: 190px; }
    .mgh-promo-sub { font-size: 0.875rem; }
    .mgh-promo-note { font-size: 1.125rem; }
}

/* ── Tablet (≥768px) ────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .mgh-hero { padding-bottom: 84px; }
    .mgh-hero-art { width: 72%; }
    .mgh-hero-art img { object-position: 74% 48%; }
    .mgh-hero-veil { width: 60%; }
    .mgh-hero-fade { height: 130px; }
    .mgh-topbar { gap: 12px; min-height: 84px; }
    .mgh-logo img { height: 78px; }
    .mgh-pill, .mgh-round { height: 42px; font-size: 0.875rem; }
    .mgh-round { width: 42px; flex-basis: 42px; }
    .mgh-pill { padding: 0 14px 0 12px; }
    .mgh-loc { max-width: 220px; }
    .mgh-theme { display: inline-flex; }
    .mgh-hero-copy { max-width: 52%; padding-top: 18px; }
    .mgh-hero-title { font-size: clamp(3rem, 6.4vw, 3.75rem); }
    .mgh-hero-sub { font-size: 1.0625rem; margin-top: 14px; max-width: 26ch; }
    .mgh-btn { min-height: 50px; padding: 0 26px; font-size: 1rem; margin-top: 20px; }
    .mgh-btn--sm { min-height: 42px; padding: 0 20px; font-size: 0.9375rem; margin-top: 16px; }
    .mgh-made { margin-top: 22px; font-size: 0.6875rem; max-width: 420px; }
    .mgh-motif { width: 26px; height: 26px; flex-basis: 26px; }
    .mgh-note { font-size: 1.625rem; top: 150px; right: 7%; }
    .mgh-note svg { height: 12px; }
    .mgh-search-wrap { margin-top: -52px; }
    .mgh-search-bar { height: 66px; padding: 0 12px 0 26px; gap: 14px; }
    .mgh-search-input { font-size: 1.0625rem; }
    .mgh-trust { margin-top: 26px; }
    .mgh-trust-item { gap: 12px; padding: 0 20px; }
    .mgh-trust-icon { flex-basis: 44px; width: 44px; height: 44px; }
    .mgh-trust-icon .material-symbols-outlined { font-size: 24px; }
    .mgh-trust-text strong { font-size: 0.9375rem; }
    .mgh-trust-text small { font-size: 0.8125rem; }
    .mgh-section { margin-top: 40px; }
    .mgh-section-head { margin-bottom: 22px; }
    .mgh-h2 { font-size: 1.875rem; padding-bottom: 10px; }
    .mgh-h2::after { width: 38px; height: 4px; }
    .mgh-more { font-size: 0.9375rem; }

    /* Service grid: Jobs is a 2×2 feature, the other 14 flow around it. */
    .mgh-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 132px; gap: 14px; margin-inline: 0; }
    .mgh-card, .mgh-card[data-svc] { grid-column: auto; grid-row: auto; margin-inline: 0; }
    .mgh-card[data-svc="jobs"] { grid-column: span 2; grid-row: span 2; }
    .mgh-card { padding: 14px 8px 12px; gap: 8px; border-radius: 18px; }
    .mgh-card[data-svc="car-rental"] { flex-direction: column; gap: 8px; padding: 14px 8px 12px; }
    .mgh-card[data-svc="car-rental"] .mgh-card-pic { flex: 1 1 auto; height: auto; }
    .mgh-card[data-svc="car-rental"] .mgh-card-label { text-align: center; }
    .mgh-card[data-svc="car-rental"] .mgh-card-go { display: inline-flex; }
    .mgh-card-label { font-size: 0.875rem; }
    .mgh-card-go { width: 22px; height: 22px; }
    .mgh-card-go .material-symbols-outlined { font-size: 14px; }
    .mgh-tag { font-size: 0.5625rem; padding: 2px 6px; }
    .mgh-card--feature { padding: 22px; border-radius: 22px; }
    .mgh-card-art { top: 18px; right: 16px; width: 52%; }
    .mgh-card-title { font-size: 1.75rem; }
    .mgh-card-sub { font-size: 0.9375rem; }
    .mgh-card--feature .mgh-card-go { right: 18px; bottom: 18px; width: 34px; height: 34px; }
    .mgh-card--feature .mgh-card-go .material-symbols-outlined { font-size: 20px; }

    .mgh-promo { min-height: 250px; border-radius: 24px; }
    .mgh-promo-art { object-position: 60% 50%; }
    .mgh-promo-copy { padding: 30px 34px; max-width: 54%; }
    .mgh-promo-title { font-size: 2.375rem; }
    .mgh-promo-sub { font-size: 1.0625rem; margin-top: 12px; }
    .mgh-promo-note { font-size: 1.625rem; right: 6%; }
    .mgh-promo-weave { width: 84px; height: 84px; }

    .mgh-around-list { gap: 22px; }
    .mgh-place { border-radius: 20px; }
    .mgh-place-pic { aspect-ratio: 16 / 9; }
    .mgh-place-info { gap: 12px; margin-top: -18px; padding: 14px 14px 16px 16px; border-radius: 20px 20px 0 0; }
    .mgh-place-icon { position: static; flex-basis: 44px; width: 44px; height: 44px; margin-top: -30px; }
    .mgh-place-chev { display: inline-block; }
    .mgh-place-text small { white-space: normal; }
    .mgh-place-icon .material-symbols-outlined { font-size: 24px; }
    .mgh-place-text strong { font-size: 1.0625rem; }
    .mgh-place-text small { font-size: 0.875rem; }
    .mgh-place-chev { font-size: 24px; }
    .mgh-place-art .material-symbols-outlined { font-size: 64px; }
}

/* ── Desktop (≥1100px) ──────────────────────────────────────────────────────────────────── */
@media (min-width: 1100px) {
    .mgh-hero { padding-bottom: 96px; }
    .mgh-hero-art { width: 66%; }
    .mgh-hero-art img { object-position: 70% 52%; }
    .mgh-hero-veil { width: 58%; }
    .mgh-topbar { gap: 18px; min-height: 104px; }
    .mgh-logo img { height: 92px; }
    .mgh-nav { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 8px; margin-left: 6px; border-radius: 999px;
        background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 10px rgba(13, 27, 62, 0.1); }
    .mgh-nav a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; font: 600 0.9375rem/1 var(--font-family-body);
        color: var(--mgh-navy); transition: background-color var(--transition-fast), color var(--transition-fast); }
    .mgh-nav a:hover { background: #fff1e6; color: var(--mgh-orange); }
    .mgh-hero-copy { max-width: 46%; padding-top: 26px; }
    .mgh-hero-title { font-size: clamp(3.75rem, 5.4vw, 4.75rem); }
    .mgh-hero-sub { font-size: 1.1875rem; max-width: 28ch; }
    .mgh-note { font-size: 2rem; top: 190px; right: 9%; }
    .mgh-search-wrap { margin-top: -60px; }
    .mgh-search-bar { height: 72px; }
    .mgh-trust-list { max-width: 1040px; }
    .mgh-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); grid-auto-rows: 146px; gap: 16px; }
    .mgh-card-pic img { max-width: 64%; }
    .mgh-place-text strong, .mgh-place-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mgh-promo { min-height: 300px; }
    .mgh-promo-copy { padding: 40px 48px; max-width: 46%; }
    .mgh-promo-title { font-size: 3rem; }
    .mgh-promo-note { font-size: 2rem; right: 7%; }
    .mgh-section { margin-top: 52px; }
}
@media (min-width: 1440px) {
    .mgh-hero-art { width: 62%; }
    .mgh-hero-art img { object-position: 66% 54%; }
}

/* ── Dark theme ─────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] body.page-is-homepage,
[data-theme="dark"] body.page-is-homepage .app-wrapper,
[data-theme="dark"] body.page-is-homepage .main-content { background-color: #0e1320 !important; }
[data-theme="dark"] .mgh-home { --mgh-bg: #0e1320; --mgh-surface: #1a2131; --mgh-navy: #eef1f7; --mgh-ink: #cfd5e2; --mgh-muted: #a3abbd;
    --mgh-line: rgba(255, 255, 255, 0.12); --mgh-orange: #ff8a47; --mgh-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
[data-theme="dark"] .mgh-hero-veil { filter: drop-shadow(10px 0 16px rgba(14, 19, 32, 0.9)); }
[data-theme="dark"] .mgh-hero-fade { background: linear-gradient(180deg, rgba(14, 19, 32, 0) 0%, rgba(14, 19, 32, 0.72) 55%, #0e1320 100%); }
[data-theme="dark"] .mgh-logo { background: #ffffff; border-radius: 14px; padding: 2px 6px; margin-left: 0; }
[data-theme="dark"] .mgh-logo img { mix-blend-mode: normal; }
[data-theme="dark"] .mgh-pill, [data-theme="dark"] .mgh-round, [data-theme="dark"] .mgh-nav { background: rgba(26, 33, 49, 0.94); color: #eef1f7; }
[data-theme="dark"] .mgh-nav a { color: #eef1f7; }
[data-theme="dark"] .mgh-nav a:hover { background: rgba(255, 138, 71, 0.16); }
[data-theme="dark"] .mgh-avatar { background: #ff8a47; color: #311300; box-shadow: 0 0 0 3px rgba(26, 33, 49, 0.95); }
[data-theme="dark"] .mgh-note { color: #ffffff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .mgh-search-bar { border-color: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .mgh-search-input::placeholder { color: #98a1b5; }
[data-theme="dark"] .mgh-card { background: #1a2131; border-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .mgh-tone-pink  { background: #3a1f2b; }
[data-theme="dark"] .mgh-tone-peach, [data-theme="dark"] .mgh-tone-cream { background: #382a1c; }
[data-theme="dark"] .mgh-tone-sky, [data-theme="dark"] .mgh-tone-blue { background: #1b2c45; }
[data-theme="dark"] .mgh-tone-lilac { background: #2a2545; }
[data-theme="dark"] .mgh-tone-mint  { background: #17332a; }
[data-theme="dark"] .mgh-tone-rose  { background: #3a2024; }
[data-theme="dark"] .mgh-card--feature .mgh-card-title, [data-theme="dark"] .mgh-card--feature .mgh-card-sub { color: #0d1b3e; }
[data-theme="dark"] .mgh-card-go { background: #0e1320; color: #ff8a47; }
[data-theme="dark"] .mgh-trust-icon--green { background: rgba(23, 146, 74, 0.2); }
[data-theme="dark"] .mgh-trust-icon--orange { background: rgba(240, 122, 18, 0.2); }
[data-theme="dark"] .mgh-trust-icon--rose { background: rgba(227, 38, 79, 0.2); }
[data-theme="dark"] .mgh-place-icon { background: #0e1320; }
[data-theme="dark"] .mgh-rest .section-title { color: #eef1f7; }

@media (prefers-reduced-motion: reduce) {
    .mgh-home *, .mgh-home *::before, .mgh-home *::after { transition: none !important; animation: none !important; }
    .mgh-card:hover, .mgh-place:hover, .mgh-btn:hover, .mgh-pill:hover, .mgh-round:hover { transform: none; }
}

/* Indic scripts: no tracking (it splits conjuncts) */
:lang(as) .mgh-made { letter-spacing: 0.02em; font-size: 0.6875rem; text-transform: none; }
@media (max-width: 399px) { .mgh-lang > span:last-child { display: none; } .mgh-loc { max-width: 118px; } }
[data-theme="dark"] .mgh-card--feature { background: radial-gradient(120% 90% at 0% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(155deg, #ffe3bf 0%, #ffc88d 55%, #ffb066 100%); }
[data-theme="dark"] .mgh-card--feature .mgh-card-go { background: #ffffff; color: #e2470f; }


/* ══ Round 2 (owner feedback) ═══════════════════════════════════════════════════════════════ */

/* Phones: theme switch takes the bell's place in the brand bar (the bell stays on tablet / desktop). */
.mgh-theme { display: inline-flex; }
.mgh-bell { display: none; }

/* Phones: calmer brand bar — smaller logo with clear air before the headline. */
.mgh-topbar { min-height: 52px; gap: 8px; }
.mgh-logo img { height: 46px; }
.mgh-hero-copy { padding-top: 14px; }
.mgh-note { top: 76px; }

/* Trust indicators: one white card, icon above a short label, no sub-labels. */
.mgh-trust-list { background: var(--mgh-surface); border-radius: 18px; padding: 12px 6px; box-shadow: 0 6px 20px rgba(13, 27, 62, 0.07); border: 1px solid rgba(13, 27, 62, 0.05); }
.mgh-trust-item, .mgh-trust-item:first-child { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 6px; }
.mgh-trust-icon { flex: 0 0 36px; width: 36px; height: 36px; }
.mgh-trust-icon .material-symbols-outlined { font-size: 20px; }
.mgh-trust-text strong { font: 700 0.75rem/1.2 var(--font-family-body); }

/* Around Guwahati: five picture cards. Sideways scroll on phones and tablets, a full row on desktop. */
.mgh-around-list { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); padding: 4px clamp(16px, 4vw, 40px) 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mgh-around-list::-webkit-scrollbar { display: none; }
.mgh-place { flex: 0 0 62%; max-width: 280px; scroll-snap-align: start; }
.mgh-place-pic { aspect-ratio: 16 / 10; }
.mgh-place-info { padding: 12px 10px 12px 12px; margin-top: -14px; gap: 10px; align-items: center; }
.mgh-place-icon, .mgh-place--spots .mgh-place-icon { position: static; flex: 0 0 34px; width: 34px; height: 34px; margin-top: 0; background: #fff1e6; box-shadow: none; color: var(--mgh-orange); }
.mgh-place-icon .material-symbols-outlined { font-size: 19px; }
.mgh-place-text strong { font: 700 0.875rem/1.2 var(--font-family-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgh-place-text small { font: 400 0.71875rem/1.25 var(--font-family-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgh-place-chev { display: inline-block; font-size: 20px; }
[data-theme="dark"] .mgh-place-icon { background: rgba(255, 138, 71, 0.16); }

@media (max-width: 359px) {
    .mgh-logo img { height: 42px; }
    .mgh-around-list { grid-auto-flow: unset; grid-auto-columns: unset; }
    .mgh-place { flex-basis: 72%; }
    .mgh-trust-text strong { font-size: 0.6875rem; }
}
@media (min-width: 480px) {
    .mgh-logo img { height: 54px; }
    .mgh-place { flex-basis: 44%; }
    .mgh-trust-text strong { font-size: 0.8125rem; }
}
@media (min-width: 768px) {
    .mgh-bell { display: inline-flex; }
    .mgh-topbar { min-height: 84px; gap: 12px; }
    .mgh-logo img { height: 78px; }
    .mgh-hero-copy { padding-top: 18px; }
    .mgh-note { top: 150px; }
    .mgh-trust-list { padding: 16px 12px; border-radius: 22px; }
    .mgh-trust-item, .mgh-trust-item:first-child { flex-direction: row; text-align: left; justify-content: center; gap: 12px; padding: 0 16px; }
    .mgh-trust-icon { flex-basis: 44px; width: 44px; height: 44px; }
    .mgh-trust-icon .material-symbols-outlined { font-size: 24px; }
    .mgh-trust-text strong { font-size: 0.9375rem; }
    .mgh-around-list { gap: 18px; }
    .mgh-place { flex-basis: 31%; max-width: none; border-radius: 20px; }
    .mgh-place-info { padding: 14px 12px 16px 14px; margin-top: -18px; }
    .mgh-place-icon, .mgh-place--spots .mgh-place-icon { flex-basis: 40px; width: 40px; height: 40px; margin-top: 0; }
    .mgh-place-icon .material-symbols-outlined { font-size: 22px; }
    .mgh-place-text strong { font-size: 1rem; }
    .mgh-place-text small { font-size: 0.8125rem; }
}
@media (min-width: 1100px) {
    .mgh-topbar { min-height: 104px; gap: 18px; }
    .mgh-logo img { height: 92px; }
    .mgh-hero-copy { padding-top: 26px; }
    .mgh-note { top: 190px; }
    .mgh-around-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; overflow: visible; margin-inline: 0; padding: 0; }
    .mgh-place { flex: none; }
    .mgh-place-chev { display: none; }
}
@media (min-width: 768px) and (max-width: 1099px) { .mgh-place { flex-basis: 38%; } }
@media (min-width: 1100px) { .mgh-trust-list { max-width: none; } }

/* The search pill shows its own focus ring (focus-within); the text field inside gets no second outline. */
.mgh-home .mgh-search-input:focus, .mgh-home .mgh-search-input:focus-visible { outline: none; box-shadow: none; border-radius: 0; }


/* ══ Shared public header (every page except the homepage) ══════════════════════════════════ */
.mgh-header { position: sticky; top: 0; z-index: 50; overflow: visible; padding: max(6px, env(safe-area-inset-top)) 0 10px;
    background: rgba(255, 249, 243, 0.94); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid rgba(13, 27, 62, 0.07); box-shadow: 0 6px 18px rgba(13, 27, 62, 0.05); }
.mgh-header .mgh-topbar { min-height: 48px; }
.mgh-header .mgh-logo img { height: 42px; }
.mgh-header .mgh-pill, .mgh-header .mgh-round { box-shadow: none; background: #ffffff; border: 1px solid rgba(13, 27, 62, 0.09); }
.mgh-header .mgh-avatar { background: var(--mgh-navy); border: 0; box-shadow: 0 0 0 2px #ffffff, 0 2px 8px rgba(13, 27, 62, 0.18); }
.mgh-header .mgh-search { margin-top: 6px; }
.mgh-header .mgh-search-bar { height: 46px; box-shadow: 0 4px 14px rgba(13, 27, 62, 0.06); border-color: rgba(13, 27, 62, 0.09); }
.mgh-header .mgh-search-clear, .mgh-header .mgh-search-filter { flex-basis: 36px; width: 36px; height: 36px; }
@media (min-width: 768px) {
    .mgh-header { padding-bottom: 12px; }
    .mgh-header .mgh-topbar { min-height: 60px; }
    .mgh-header .mgh-logo img { height: 54px; }
    .mgh-header .mgh-search-bar { height: 50px; padding: 0 8px 0 20px; }
    .mgh-header .mgh-search-input { font-size: 1rem; }
}
@media (min-width: 1100px) {
    .mgh-header .mgh-topbar { min-height: 64px; }
    .mgh-header .mgh-logo img { height: 58px; }
    .mgh-header .mgh-nav { box-shadow: none; background: transparent; padding: 0; }
    .mgh-header .mgh-search { max-width: 760px; margin-inline: auto; }
}
@media (min-width: 1240px) {
    /* Wide desktop: brand bar and search share one row. */
    .mgh-header > .mgh-wrap { display: flex; align-items: center; gap: 18px; }
    .mgh-header .mgh-topbar { flex: 1 1 auto; min-width: 0; gap: 14px; }
    .mgh-header .mgh-loc { flex: 0 0 auto; }
    .mgh-header .mgh-nav { margin-left: 0; gap: 0; }
    .mgh-header .mgh-nav a { padding: 0 7px; font-size: 0.875rem; }
    .mgh-header .mgh-search { width: auto; flex: 0 0 220px; min-width: 0; margin: 0; }
    .mgh-header .mgh-search-input { min-width: 0; width: 100%; }
    .mgh-header .mgh-topbar > * { flex-shrink: 0; }
    .mgh-header .mgh-search-bar { height: 46px; }
}
[data-theme="dark"] .mgh-header { background: rgba(14, 19, 32, 0.94); border-bottom-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .mgh-header .mgh-pill, [data-theme="dark"] .mgh-header .mgh-round { background: #1a2131; border-color: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .mgh-header .mgh-avatar { background: #ff8a47; box-shadow: 0 0 0 2px #1a2131; }

@media (min-width: 1500px) { .mgh-header .mgh-search { flex-basis: 250px; } }