/* STYLESHEET QUICK GUIDE
   Edit the color and font variables in :root first; the sections below follow the site:
   base/buttons, header, hero, products/categories, info pages, forms, FAQ, footer.
   Responsive overrides are near the end of the main styles. Scroll-story and sticky-nav
   styles follow them. Search by a visible section name or a CSS class from app.js.
*/
/* ============================ RANG (COLORS) ============================ */
    :root {
      --light:        #a8b5c2;   /* LIGHT theme: page background (text iske upar DARK rehta hai) */
      --dark:         #2e4156;   /* DARK theme: footer, cards, FAQ (text iske upar WHITE rehta hai) */
      --ink:          #0a0f18;   /* white cards ke andar ka text */
      --muted:        #121a26;   /* white cards ke andar ka paragraph text */
      --accent-1:     #12a0e0;   /* buttons ka blue (light) */
      --accent-2:     #2f66c4;   /* buttons ka blue (dark) */
      --card-line:    #e3e3e3;   /* white cards ki border */
      --radius:       16px;
      --font-heading: 'Jost', Georgia, serif;
      --font-body:    'Montserrat', system-ui, sans-serif;
      --header-height: 85px;
    }

    /* ============================ BASE ============================ */
    * { box-sizing: border-box; margin: 0; }
    body { font-family: var(--font-body); color: var(--dark); background: var(--light); line-height: 1.6; }
    html { scroll-behavior: auto; }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    :focus-visible { outline: 3px solid var(--accent-1); outline-offset: 3px; }
    #app-view { transform: translateY(0); transition: transform .28s ease; overflow-anchor: none; }
    #app-view.is-rendering { transform: translateY(8px); }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      #app-view { transition: none; }
    }

    .container       { width: min(1200px, 92%); margin: auto; }
    .page-section    { padding: 96px 0; }
    .section-alt     { background: var(--light); }   /* alag shade chahiye to yaha rang badlo */
    .two-column      { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

    .section-eyebrow { font-size: 1.2rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dark); font-weight: 600; margin-bottom: 12px; }
    .section-title   { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 600; line-height: 1.1; color: var(--dark); }
    .section-text    { color: var(--dark); }

    /* inner pages: header ke neeche se content shuru ho (overlap na ho) */
    #app-view { padding-top: var(--header-height); }
    body.is-home #app-view { padding-top: 0; }

    /* ============================ BUTTONS ============================ */
    .btn { display: inline-block; padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: .9rem; border: 1.5px solid transparent; cursor: pointer; font-family: inherit; transition: transform .25s, box-shadow .25s; }
    .btn-primary { background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color: #fff; }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(47,102,196,.35); }
    .locate-box .btn-primary { background: #2e4156; }
    .btn-ghost { border-color: var(--dark); color: var(--dark); opacity: .65; }

    /* ============================ HEADER (navbar) ============================ */
    /* absolute = navbar page ke saath scroll hokar upar chala jata hai */
    .site-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 50; background: transparent; }

    .header-grey-strip { position: absolute; top: 0; right: 0; left: 50%; height: 35px; background: #ece9e9; border-radius: 0 0 0 40px; }
    .header-inner      { position: relative; display: flex; justify-content: space-between; align-items: stretch; height: var(--header-height); width: min(1400px, 94%); margin: auto; }

    .logo-link    { align-self: center; display: flex; flex-direction: column; align-items: center; width: 190px; max-width: 24vw; padding-top: 8px; }
    .logo-link img { z-index : 1 ; position : relative ; display: block; width: 100%; height: auto; image-rendering: auto; margin-top: 2px; }
    .logo-tagline { z-index:2; width: 100%; font-size: .62rem; line-height: 1.1; letter-spacing: .22em; text-align: center; text-transform: uppercase; color: #fff; font-weight: 600; margin: -10px 0px 15px 150px; white-space: nowrap; }

    .header-right { display: flex; flex-direction: column; justify-content: space-between; flex: 0 0 75%; }

    /* upar grey strip ke links (Download Brochure, Why Choose Us, ...) — DARK colour */
    .top-links { height: 35px; width: 63.45%; margin-left: 36%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 4px; }
    .top-links a { font-size: .8rem; font-weight: 600; letter-spacing: .06em; color: var(--dark); line-height: 1; text-underline-offset: 5px; }
    .top-links a:hover, .top-links a.is-active { text-decoration: underline; }

    /* neeche ka main menu (Home, Products, About Us...) — home page par WHITE */
    .main-menu { height: 50px; width: 100%; display: flex; align-items: center; justify-content: space-between; list-style: none; padding: 0 4px 0 40px; }
    .menu-item { position: relative; height: 50px; display: flex; align-items: center; }
    .menu-link { font-size: 1.05rem; font-weight: 500; letter-spacing: .04em; color: #fff; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .2s; }
    .menu-link:hover, .menu-link.is-active { border-color: #fff; }
    .menu-chevron { display: inline-block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); margin-left: 10px; }

    /* baaki sab pages (light background) par navbar ke links DARK */
    body:not(.is-home) .menu-link   { color: var(--dark); }
    body:not(.is-home) .menu-link:hover,
    body:not(.is-home) .menu-link.is-active { border-color: var(--dark); }
    body:not(.is-home) .logo-link img {
      filter: brightness(0) saturate(100%) invert(24%) sepia(13%) saturate(1064%) hue-rotate(171deg) brightness(91%) contrast(88%);
    }
    body:not(.is-home) .logo-tagline { color: var(--dark); }
    body:not(.is-home) .menu-toggle  { color: var(--dark); }
    body.is-category-page #app-view { padding-top: 0; }
    body.is-category-page .logo-link img {
      filter: drop-shadow(0 0 6px rgba(255,255,255,.55));
    }
    body.is-category-page .logo-tagline,
    body.is-category-page .menu-link { color: #fff; }
    body.is-category-page .menu-link:hover,
    body.is-category-page .menu-link.is-active { border-color: #fff; }
    body.is-category-light-page .logo-link img {
      filter: brightness(0) saturate(100%) invert(24%) sepia(13%) saturate(1064%) hue-rotate(171deg) brightness(91%) contrast(88%);
    }
    body.is-category-light-page .logo-tagline,
    body.is-category-light-page .menu-link { color: var(--dark); }
    body.is-category-light-page .menu-link:hover,
    body.is-category-light-page .menu-link.is-active { border-color: var(--dark); }

    /* Products page explore-signature background ke saath dark header overlay par WHITE navbar */
    body.is-products-page #app-view { padding-top: 0; }
    body.is-products-page .logo-link img {
      filter: drop-shadow(0 0 6px rgba(255,255,255,.55));
    }
    body.is-products-page .logo-tagline,
    body.is-products-page .menu-link { color: #fff; }
    body.is-products-page .menu-link:hover,
    body.is-products-page .menu-link.is-active { border-color: #fff; }

    /* About, Locate, Contact aur Why pages ka complete white theme */
    body.is-white-page { background: #fff; }
    body.is-white-page .site-header { background: #fff; }
    body.is-white-page .site-footer { background: #fff; }

    /* Products dropdown */
    .dropdown { position: absolute; top: 100%; left: -20px; min-width: 280px; background: #fff; border-radius: 0 0 var(--radius) var(--radius); padding: 10px; box-shadow: 0 20px 40px rgba(0,0,0,.2); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .25s; }
    .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: none; }
    .dropdown a { display: block; padding: 10px 14px; border-radius: 10px; font-size: .92rem; color: var(--dark); }
    .dropdown a:hover { background: #eef1f4; color: var(--accent-2); }

    /* header ke social icons */
    .menu-item-social { gap: 10px; }
    .header-social a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--dark); transition: background .2s, color .2s, transform .2s; }
    .header-social a:hover { background: var(--dark); color: #fff; transform: translateY(-2px); }

    .menu-toggle { display: none; background: none; border: 0; color: #fff; font-size: 1.8rem; cursor: pointer; }
    .mobile-only { display: none; }
    .back-to-top {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 60;
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 50%;
      background: var(--dark);
      color: #fff;
      box-shadow: 0 10px 24px rgba(10,15,24,.24);
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: opacity .25s ease, transform .25s ease, visibility .25s;
    }
    .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
    .back-to-top:hover { background: var(--accent-2); transform: translateY(-3px); }
    .back-to-top svg { width: 20px; height: 20px; }

    /* ============================ MEDIA (hero video + sanitary image) ============================ */
    .media-video, .media-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .media-poster { background-size: cover; background-position: center; }

    /* HERO (landing video) */
    .hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; display: grid; align-items: center; color: #fff; overflow: hidden; background: linear-gradient(160deg, var(--dark), #5b7088); }
    .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.05) 70%); }  /* text padhne ke liye halka dark */
    .hero-content { position: relative; z-index: 2; padding-top: var(--header-height); }
    .hero-eyebrow { color: #fff; }
    .hero-title { font-family: var(--font-heading); font-size: clamp(2.8rem, 7vw, 6rem); line-height: 1; font-weight: 500; max-width: 11ch; }
    .hero-text { margin: 22px 0 34px; max-width: 46ch; opacity: .9; }

    /* SANITARY IMAGE (hero ke just neeche, full width) */
    .image-band { position: relative; width: 100%; height: clamp(360px, 56.25vw, 760px); overflow: hidden; background: url('assets/category-backgrounds/sanitaryware.jpg') center / cover no-repeat; }
    .image-band img { display: none; }
    .image-band::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(180deg, transparent 68%, rgba(246,245,241,.18) 84%, var(--light) 100%);
      pointer-events: none;
    }
    .image-band-caption {
      position: absolute;
      left: max(4%, calc((100% - 1200px) / 2));
      bottom: 27%;
      z-index: 2;
      color: #ffffff;
      font-family: 'Jost', sans-serif;
      font-weight: 300;
      font-size: clamp(2.2rem, 4.8vw, 4.2rem);
   
      letter-spacing: .025em;
      line-height: 1.2;
      white-space: nowrap;
      text-shadow: 0 3px 24px rgba(0,0,0,.48);
      white-space: pre-line;  /* \n ke liye */
    }

    /* ============================ SIGNATURE PRODUCTS (moving carousel) ============================ */
    .signature-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 32px; gap: 20px; }
    .categories-section .signature-section { margin-top: clamp(56px, 7vw, 88px); }
    .signature-arrows button { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.8); background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 1.1rem; margin-left: 8px; transition: .2s; }
    .signature-arrows button:hover { background: #fff; color: var(--dark); }
    .signature-viewport { overflow: hidden; margin: 0 -12px; padding: 12px; }
    .signature-track { display: flex; align-items: stretch; gap: 24px; width: max-content; will-change: transform; }

    .product-card {
      position: relative;
      display: block;
      width: 300px;
      flex: 0 0 300px;
      background: rgba(255,255,255,.94);
      border: 1px solid rgba(255,255,255,.78);
      border-radius: 24px;
      overflow: hidden;
      color: var(--ink);
      box-shadow: 0 14px 28px rgba(10,15,24,.18);
      transition: transform .3s, box-shadow .3s;
    }
    .product-card:hover { box-shadow: 0 22px 42px rgba(10,15,24,.3); transform: translateY(-7px); }
    .product-photo { position: relative; aspect-ratio: 4/3; background: linear-gradient(145deg, #f5f1e8, #d9e0e4); display: grid; place-items: center; color: var(--muted); font-size: .8rem; overflow: hidden; }
    .product-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 70%); pointer-events: none; }
    .product-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
    .product-card:hover .product-photo img { transform: scale(1.05); }
    .product-info { padding: 18px 20px 20px; color: var(--ink); background: rgba(255,255,255,.94); }
    .product-name { font-family: var(--font-heading); font-size: 1.45rem; line-height: 1.1; }
    .product-model { display: block; margin-top: 5px; color: var(--muted); opacity: .72; min-height: 1.3em; }
    .product-rating { margin-top: 12px; color: #b8862f; font-size: .82rem; letter-spacing: .08em; }

    /* ============================ CATEGORIES (dark cards, white text) ============================ */
    .categories-section { padding: 0; }
    .explore-signature-area {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: 96px 0 88px;
      background: transparent;
    }
    .explore-signature-area::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(180deg, var(--light) 0%, rgba(246,245,241,.72) 10%, transparent 26%);
      pointer-events: none;
    }
    .explore-signature-area::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: none;
      pointer-events: none;
    }
    .explore-signature-area .section-eyebrow,
    .explore-signature-area .section-title,
    .explore-signature-area .signature-head .section-eyebrow,
    .explore-signature-area .signature-head .section-title {
      color: #2e4156;
      text-shadow: none;
    }
    .explore-signature-area > .container {
      position: relative;
      z-index: 1;
    }
    .explore-signature-area .signature-arrows button {
      border-color: rgba(255,255,255,.82);
      color: #fff;
      background: rgba(10,15,24,.18);
    }
    .explore-signature-area .signature-arrows button:hover {
      background: #fff;
      color: var(--dark);
    }
    .categories-section > .container:last-child {
      padding-top: 96px;
      padding-bottom: 96px;
    }
    .categories-section { padding-bottom: 0; }
    .dealer-enquiry-section {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: 68px 0 76px;
      background: #fff;
    }
    .dealer-enquiry-section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: none;
      pointer-events: none;
    }
    .dealer-enquiry-section::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
    }
    .dealer-enquiry-section .enquiry-layout {
      position: relative;
      z-index: 1;
      align-items: center;
    }
    .dealer-enquiry-section .enquiry-layout > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .dealer-enquiry-section .section-eyebrow,
    .dealer-enquiry-section .enquiry-heading,
    .dealer-enquiry-section .enquiry-text,
    .dealer-enquiry-section .contact-list,
    .dealer-enquiry-section .contact-list a {
      color: #2e4156;
    }
    .dealer-enquiry-section .contact-icon {
      background: rgba(255,255,255,.88);
      color: var(--dark);
    }
    .dealer-enquiry-section .contact-list a:hover .contact-icon {
      background: var(--dark);
      color: #fff;
    }
    .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .category-card { position: relative; display: flex; align-items: end; min-height: 320px; padding: 26px; border-radius: var(--radius); overflow: hidden; background: var(--dark); color: #fff; transition: .3s; }
    .category-card.has-image::after { content: ""; position: absolute; inset: 0; background: rgba(10,15,24,.08); }
    .category-card-image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
    .category-card::before { content: ""; position: absolute; inset: 0; background: none; transition: .4s; }
    .category-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.3); }
    .category-card:hover::before { transform: scale(1.08); }
    .category-card > div { position: relative; z-index: 1; }
    .category-card.has-image > * { z-index: 1; }
    .category-title { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 600; line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
    .category-desc { opacity: 1; font-size: .9rem; margin: 6px 0 14px; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
    .category-more { font-size: .85rem; font-weight: 600; color: #fff; }
    .category-products-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
    .category-products-grid > :last-child:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 72px) / 4); }
    .category-product-card { display: block; overflow: hidden; background: #fff; border: 1px solid var(--card-line); border-radius: var(--radius); color: var(--dark); transition: transform .25s, box-shadow .25s; }
    .category-product-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0,0,0,.16); }
    .category-product-image { aspect-ratio: 1 / 1; background: #fff; overflow: hidden; display: grid; place-items: center; padding: 14px; }
    .category-product-image img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
    .category-product-info { padding: 22px 18px 18px; }
    .category-product-name { font-family: var(--font-heading); font-size: 1.35rem; color: var(--dark); }
    .category-product-model { display: block; margin-top: 4px; color: var(--dark); opacity: .7; font-size: .8rem; }
    .category-products-page.has-category-background {
      position: relative;
      isolation: isolate;
      background: center top / cover no-repeat;
      background-color: #a8b5c2;
      padding-top: 170px;
      padding-bottom: 150px;
    }
    .category-products-page.has-category-background > .container {
      position: relative;
      z-index: 1;
    }
    .category-products-page.has-category-background::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(180deg, rgba(168,181,194,.08), rgba(168,181,194,.28) 88%, rgba(168,181,194,.72));
    }
    .category-products-page.has-category-background::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 180px;
      z-index: 0;
      background: linear-gradient(180deg, transparent, #a8b5c2);
      pointer-events: none;
    }
    .category-products-page.has-category-background .section-eyebrow,
    .category-products-page.has-category-background .section-title,
    .category-products-page.has-category-background .section-text { color: #fff; }
    .category-brochure-link { display: inline-block; margin-top: 40px; color: var(--dark); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }

    /* Products listing: same blended treatment as the home signature section */
    .products-page.has-products-background {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding-top: 170px;
      padding-bottom: 150px;
      background: url('assets/category-backgrounds/showers.jpg') center / cover no-repeat;
      background-color: var(--light);
    }
    .products-page.has-products-background::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: rgba(10,15,24,.18);
      pointer-events: none;
    }
    .products-page.has-products-background::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: none;
      pointer-events: none;
    }
    .products-page.has-products-background > .container {
      position: relative;
      z-index: 1;
    }
    .products-page.has-products-background .section-eyebrow,
    .products-page.has-products-background .section-title {
      color: #fff;
      text-shadow: 0 2px 14px rgba(0,0,0,.38);
    }

    /* ============================ WHITE INFO CARDS (about, locate, why us) ============================ */
    .info-card { background: #fff; border: 1px solid var(--card-line); border-radius: var(--radius); padding: 30px; }
    .info-card-title { font-family: var(--font-heading); font-size: 1.6rem; color: var(--ink); margin-bottom: 10px; }
    .info-card-text { color: var(--muted); }
    .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
    .why-number { font-family: var(--font-heading); font-size: 2.4rem; color: var(--accent-2); line-height: 1; margin-bottom: 14px; }
    .why-card .why-number,
    .why-card .info-card-title,
    .why-card .info-card-text { color: var(--dark); }
    .talk-to-us-btn { background: var(--dark); color: #fff; }

    /* About page */
    .about-wrapper { max-width: 900px; margin: auto; }
    .about-head { text-align: center; margin-bottom: 48px; }
    .about-card { display: grid; gap: 36px; background: #fff; padding: clamp(24px, 5vw, 50px); border-radius: var(--radius); border: 1px solid var(--card-line); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
    .about-quote { margin-top: 20px; color: var(--ink); font-weight: 600; font-size: 1.05rem; font-style: italic; border-left: 3px solid var(--accent-1); padding-left: 14px; }
    .about-page,
    .locate-page,
    .contact-page,
    .why-page { background: #fff; }

    /* Locate Us page */
    .locate-wrapper { max-width: 900px; }
    .locate-box { text-align: center; padding: 40px; }

    /* ============================ BROCHURE ============================ */
    .brochure-cover { aspect-ratio: 3/4; max-width: 340px; margin: auto; border-radius: 12px; background: linear-gradient(160deg, var(--dark), #5b7088); display: grid; place-items: center; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.3); }
    .brochure-cover iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; -webkit-overflow-scrolling: touch; }
    .mobile-pdf-viewer { display: none; }
    .brochure-preview { width: 100% !important; height: auto !important; display: block; background: #fff; }
    .brochure-preview-fallback { display: none; width: 100%; height: 100%; place-items: center; padding: 28px; color: #fff; text-align: center; background: linear-gradient(160deg, var(--dark), #5b7088); font-family: var(--font-heading); font-size: 2rem; }
    .brochure-back-link { margin-top: 20px; display: inline-block; color: var(--dark); font-weight: 600; }
    .brochure-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
    .brochure-open-link { display: inline-flex; }

    /* ============================ ENQUIRY (Home dealer section + Contact page) ============================ */
    .enquiry-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: center; }
    .enquiry-layout-home { margin-top: 90px; }
    .enquiry-heading { font-family: var(--font-heading); font-size: clamp(2.6rem, 5.5vw, 4.6rem); font-weight: 600; line-height: 1.02; color: var(--dark); letter-spacing: -.01em; }
    .enquiry-text { margin-top: 20px; max-width: 42ch; color: var(--dark); font-size: .95rem; }
    .contact-list { display: grid; gap: 14px; margin-top: 70px; color: var(--dark); white-space: pre-line; }
    .contact-list a { display: flex; align-items: center; gap: 14px; font-size: .92rem; font-weight: 500; }
    .contact-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: #f1f3f6; transition: .2s; }
    .contact-list a:hover .contact-icon { background: var(--dark); color: #fff; }

    /* ============================ FORMS (dealer + contact) ============================ */
    .form-card { background: #f3f4f6; color: var(--ink); border-radius: 26px; padding: 30px; display: grid; gap: 16px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-field { display: grid; align-content: start; gap: 8px; font-size: .8rem; font-weight: 500; }
    .form-field input, .form-field select, .form-field textarea { font: inherit; font-size: .9rem; width: 100%; border: 0; background: #fff; border-radius: 10px; padding: 13px 14px; }
    .form-field textarea { resize: vertical; min-height: 110px; }
    .form-field input:focus, .form-field select:focus, .form-field textarea:focus { box-shadow: 0 0 0 2px var(--accent-1); outline: 0; }
    .form-submit-btn { justify-self: start; display: inline-flex; align-items: center; gap: 8px; background: var(--dark); color: #fff; border: 0; border-radius: 12px; padding: 13px 22px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: .2s; }
    .form-submit-btn:hover { background: var(--accent-2); transform: translateY(-2px); }
    .form-submit-btn:disabled { opacity: .6; cursor: wait; }
    .form-error { color: #d64545; font-size: .75rem; font-weight: 400; min-height: 1em; }
    .form-honeypot { position: absolute; left: -9999px; }            /* bot-trap, chhedna nahi */
    .form-message { padding: 12px 14px; border-radius: 10px; font-size: .9rem; display: none; }
    .form-message.is-success { display: block; background: #e6f7ee; color: #116b3a; }
    .form-message.is-error   { display: block; background: #fdecea; color: #a1291d; }
    .categories-section,
    .dealer-enquiry-section,
    .faq-section,
    .site-footer { content-visibility: auto; contain-intrinsic-size: 800px; }

    /* ============================ FAQ (style refresh matching the reference mockup) ============================ */
    .faq-section {
      position: relative;
      background: #a8b5c2;
      color: #fff;
      overflow: hidden;
    }
    .faq-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.16) 0.7px, transparent 0.8px);
      background-size: 8px 8px;
      opacity: 0.26;
      pointer-events: none;
    }
    .faq-layout {
      position: relative;
      z-index: 1;
      display: block;
    }
    .faq-section .section-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.8);
      font-size: .68rem;
      letter-spacing: .18em;
      margin: 0 auto 14px;
      text-transform: uppercase;
    }
    .faq-section .section-eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,0.85);
      box-shadow: 0 0 0 2px rgba(255,255,255,0.16);
    }
    .faq-section .section-title {
      color: #2e4156;
      text-align: left;
      font-size: clamp(2.2rem, 4vw, 4rem);
      letter-spacing: -0.06em;
      font-weight: 500;
      margin-bottom: 0;
    }
    .faq-intro {
      display: none;
    }
    .faq-list {
      width: min(1000px, 100%);
      margin: 0 auto;
      border: 0;
      background: #fff;
      border-radius: 30px;
      padding: clamp(28px, 5vw, 52px);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), 0 30px 60px rgba(0,0,0,0.28);
      display: block;
    }
    .faq-list .faq-heading {
      margin-bottom: 28px;
    }
    .faq-item {
      border: 1px solid rgba(138, 147, 170, 0.2);
      border-radius: 22px;
      background: rgba(255,255,255,0.28);
      margin-bottom: 10px;
      overflow: hidden;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .faq-item:last-child { margin-bottom: 0; }
    .faq-item[open] {
      background: rgba(46,65,86,0.08);
      box-shadow: none;
    }
    .faq-question {
      list-style: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 18px 18px 18px 16px;
      font-size: 1.05rem;
      font-weight: 500;
      color: #2e4156 !important;
      font-family: var(--font-body);
    }
    .faq-question > span:first-child { color: #2e5637 !important; }
    .faq-question::-webkit-details-marker { display: none; }
    .faq-question > span:first-child {
      display: flex;
      align-items: center;
      gap: 14px;
      flex: 1;
      min-width: 0;
    }
    .faq-question > span:first-child::before {
      content: attr(data-index);
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #2e4156;
      color: #fff;
      font-size: 0.7rem;
      font-weight: 600;
      flex: none;
    }
    .faq-question:hover { color: var(--dark); }
    .faq-icon {
      position: relative;
      flex: none;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #2e4156;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
    }
    .faq-icon::before, .faq-icon::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 12px;
      height: 1.5px;
      background: rgba(255,255,255,0.95);
      transform: translate(-50%, -50%);
      transition: transform .25s ease;
    }
    .faq-icon::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }
    .faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
    .faq-answer {
      padding: 0 18px 18px 58px;
      color: #2e4156 !important;
      font-size: 0.95rem;
      line-height: 1.7;
    }

    @media (max-width: 900px) {
      .faq-list {
        width: 100%;
        padding: 28px 18px 22px;
      }
      .faq-list .faq-heading {
        padding: 0 4px;
      }
      .faq-question {
        padding: 14px 14px 14px 12px;
        font-size: 0.98rem;
      }
      .faq-answer {
        padding: 0 14px 14px 54px;
      }
    }

    /* ============================ DEALER POPUP ============================ */
    .dealer-popup { border: 0; border-radius: 24px; padding: 32px; width: min(600px, 94vw); max-height: 90vh; margin: auto; box-shadow: 0 25px 60px rgba(0,0,0,.35); opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .3s, transform .3s, overlay .3s allow-discrete, display .3s allow-discrete; }
    .dealer-popup[open] { opacity: 1; transform: none; }
    @starting-style { .dealer-popup[open] { opacity: 0; transform: translateY(16px) scale(.96); } }
    .dealer-popup::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(6px); }
    .dealer-popup .form-card { padding: 0; background: none; }
    .popup-title { font-family: var(--font-heading); font-size: 2rem; color: var(--ink); line-height: 1.1; }
    .popup-text { color: var(--muted); margin: 8px 0 24px; }
    .popup-close { position: absolute; right: 18px; top: 18px; border: 0; background: #eee; width: 38px; height: 38px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; }
    .popup-close:hover { background: #ddd; }
    .phone-input { display: grid; grid-template-columns: minmax(116px, .42fr) 1fr; gap: 8px; }

    /* ============================ FOOTER (dark, white text) ============================ */
    .site-footer { background: var(--light); padding: 70px 24px 24px; }
    .footer-card { background: var(--dark); color: rgba(255,255,255,.72); border-radius: 32px; padding: 60px 56px 0; overflow: hidden; font-size: .9rem; }

    .footer-columns { display: grid; grid-template-columns: 1.4fr 1fr 1fr .9fr 260px; gap: 36px; align-items: start; }
    .footer-heading { color: #fff; font-size: .95rem; font-weight: 500; margin-bottom: 18px; }
    .footer-link { display: block; padding: 5px 0; overflow-wrap: anywhere; transition: color .2s; }
    .footer-link:hover { color: #fff; }
    .footer-logo img { display: block; width: 180px; height: auto; max-width: 100%; background: #ffffff00; border-radius: 10px; padding: 6px 0; image-rendering: auto; }
    .footer-label { display: block; font-size: .75rem; opacity: .6; margin-top: 18px; }
    .footer-value { display: block; color: #fff; padding: 2px 0; overflow-wrap: anywhere; white-space: pre-line; }

    .footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
    .footer-social a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; transition: background .2s, transform .2s; }
    .footer-social a:hover { background: var(--accent-1); transform: translateY(-3px); }

    .footer-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
    .footer-tab { font: inherit; font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: .2s; }
    .footer-tab:hover { color: #fff; border-color: #fff; }
    .footer-tab.is-active { background: #fff; color: var(--dark); border-color: #fff; }
    .footer-map { width: 100%; aspect-ratio: 1/1; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); display: grid; place-items: center; text-align: center; font-size: .8rem; }
    .footer-map iframe { width: 100%; height: 100%; border: 0; display: block; }
    .footer-map p { padding: 12px; }

    .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 70px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.14); font-size: .8rem; }

    /* neeche ka bada aadha kata hua "Agnicare" (white) */
    .footer-bigname { font-weight: 600; font-size: clamp(4rem, 16.5vw, 19rem); line-height: 1; letter-spacing: -.04em; text-align: center; color: #fff; height: .65em; overflow: hidden; margin-top: 30px; user-select: none; pointer-events: none; }

    /* ============================ TABLET / MOBILE ============================ */
    @media (max-width: 1100px) {
      .header-grey-strip { left: 35%; }
      .top-links { gap: 22px; }
      .footer-columns { grid-template-columns: 1fr 1fr; gap: 32px; }
      .why-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 1100px) {
      :root { --header-height: 68px; }
      .page-section { padding: 64px 0; }

      /* header */
      .header-inner { height: var(--header-height); }
      .logo-link { width: 155px; max-width: 46vw; padding-top: 5px; }
      .header-grey-strip, .top-links { display: none; }
      .header-right { flex: 1; flex-direction: row; align-items: center; justify-content: flex-end; }
      .menu-toggle { display: block; }
      .main-menu { position: fixed; inset: var(--header-height) 0 auto; width: auto; height: auto; max-height: calc(100vh - var(--header-height)); overflow: auto; background: #fff; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 12px 6%; transform: translateY(-130%); transition: .3s; box-shadow: 0 20px 40px rgba(0,0,0,.2); }
      .main-menu.is-open { transform: none; }
      .menu-item { height: auto; display: block; border-bottom: 1px solid #eee; padding: 12px 0; }
      .menu-item-social { display: flex; padding: 14px 0; }
      .menu-link, body:not(.is-home) .menu-link { color: var(--dark); }     /* mobile menu safed hai, isliye link dark */
      body.is-category-page .main-menu .menu-link { color: var(--dark); }
      body.is-category-page .menu-toggle { color: #fff; }
      body.is-products-page .menu-link { color: var(--dark); }
      body.is-products-page .menu-toggle { color: #fff; }
      .menu-link:hover, .menu-link.is-active, body:not(.is-home) .menu-link:hover, body:not(.is-home) .menu-link.is-active { border-color: var(--accent-1); }
      body.is-category-page .menu-link:hover,
      body.is-category-page .menu-link.is-active { border-color: var(--dark); }
      body.is-category-light-page .menu-link { color: var(--dark) !important; }
      body.is-products-page .menu-link:hover,
      body.is-products-page .menu-link.is-active { border-color: var(--accent-1); }
      .products-page.has-products-background { padding-top: 132px; }
      body.is-category-light-page .menu-toggle { color: var(--dark); }
      body.is-category-light-page .menu-link:hover,
      body.is-category-light-page .menu-link.is-active { border-color: var(--dark); }
      .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 4px 0 0 10px; min-width: 0; }
      .mobile-only { display: block; }

      /* layouts */
      .card-grid, .two-column, .enquiry-layout, .form-row, .footer-columns, .why-grid, .faq-layout { grid-template-columns: 1fr; }
      .category-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
      .category-products-grid > :last-child:nth-child(5) { grid-column: auto; justify-self: stretch; width: auto; }
      .category-products-page.has-category-background { padding-top: 132px; padding-bottom: 110px; }
      .explore-signature-area { padding: 64px 0 56px; }
      .categories-section > .container:last-child { padding-top: 64px; padding-bottom: 64px; }
      .enquiry-layout { gap: 40px; } .enquiry-layout-home { margin-top: 60px; } .contact-list { margin-top: 36px; }
      .categories-section .signature-section { margin-top: 48px; }
      .faq-layout { gap: 36px; }
      .form-card { padding: 22px; }
      .hero { height: 100svh; }
      .image-band { height: min(68svh, 620px); min-height: 380px; background-position: 58% center; }
      .image-band-caption { left: 6%; right: 6%; bottom: 18%; font-size: clamp(2rem, 9vw, 3.4rem); }
      .site-footer { padding: 50px 12px 12px; }
      .footer-card { padding: 36px 22px 0; }
      .footer-map { max-width: 340px; }
      .footer-bottom { margin-top: 40px; }
      .dealer-popup { padding: 28px 20px; }
      .brochure-cover { display: block; width: 100%; max-width: none; height: min(72svh, 720px); min-height: 520px; aspect-ratio: auto; }
      .brochure-cover iframe { display: none; }
      .mobile-pdf-viewer { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; overflow: hidden; background: #fff; }
      .mobile-pdf-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 18px; flex: none; padding: 12px 16px; background: #3b3b3b; color: #fff; }
      .mobile-pdf-toolbar a, .mobile-pdf-toolbar button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; }
      .mobile-pdf-toolbar svg { width: 20px; height: 20px; }
      .mobile-pdf-scroll { flex: 1; min-height: 0; overflow: auto; background: #eee; }
      .mobile-pdf-pages { width: 100%; min-height: 100%; padding: 0 8px 12px; }
      .mobile-pdf-page { width: 100%; max-width: 100%; display: flex; align-items: flex-start; justify-content: center; margin-bottom: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
      .brochure-preview-fallback { display: none; }
    }
    @media (max-width: 520px) {
      .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
      .image-band { height: 62svh; min-height: 340px; background-position: 60% center; }
      .image-band-caption { bottom: 14%; font-size: clamp(1.85rem, 10vw, 2.8rem); }
      .signature-viewport { margin: 0 -8px; padding: 8px; }
      .signature-track { gap: 16px; }
      .product-card { width: min(78vw, 290px); flex-basis: min(78vw, 290px); border-radius: 20px; }
      .product-name { font-size: 1.3rem; }
    }
    /* tablet / desktop-site on phone: footer 2 columns */
@media (min-width: 701px) and (max-width: 1100px) {
  .footer-columns { grid-template-columns: 1fr 1fr; }
}
    @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* SCROLL STORY: styles for the story HTML created by app.js. */
/* ===== AGNICARE SCROLL STORY (landing video ke neeche) ===== */
@font-face { font-family: 'League Spartan'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('/assets/fonts/league-spartan-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'League Spartan'; font-weight: 800; font-style: normal; font-display: swap;
  src: url('/assets/fonts/league-spartan-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Anton'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/assets/fonts/anton-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-style: normal; font-display: swap;
  src: url('/assets/fonts/montserrat-latin-800-normal.woff2') format('woff2'); }

.story { position: relative; height: 720vh; background: #070b12; }
/* sirf upar ka edge: landing video ke neeche ka hissa dheere-dheere dark mein ghul jata hai */
.story::before { content: ""; position: absolute; left: 0; right: 0; top: -28vh; height: 28vh; z-index: 6; pointer-events: none;
  background: linear-gradient(to bottom, rgba(7,11,18,0) 0%, rgba(7,11,18,.35) 35%, rgba(7,11,18,.8) 72%, #070b12 100%); }
/* story page ka neeche ka hissa -> "Luxury Sanitaryware" band ke upar ke hisse mein ghul jata hai
   (neeche wale rang ko .st-page ke background (#eaf2f8) ke saath same rakhna) */
.story + .image-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, #eaf2f8 0%, rgba(234,242,248,.8) 22%, rgba(234,242,248,.4) 55%, rgba(234,242,248,0) 100%); }

.story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate;
  font-family: 'League Spartan', 'Jost', system-ui, sans-serif; color: #fff; }
.st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.st-bg { position: absolute; inset: 0; background: radial-gradient(85% 75% at 50% 58%, #10253b 0%, #0a131e 50%, #070b12 100%); }

/* peeche ka halka background photo (Agnicare ke peeche) */
.st-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; will-change: transform, opacity; }

/* be precise / reliable / timeless -> Crafted to be different  (hamesha horizontally centre) */
.st-k { position: absolute; inset: 0; font-weight: 800; font-size: clamp(2.4rem, 7vw, 8.2rem); line-height: 1.25; letter-spacing: -.02em; white-space: nowrap; will-change: transform, opacity; }
.st-k > span { position: absolute; left: 50%; top: 50%; margin-top: -.625em; will-change: transform, opacity; }
.st-k .kv { color: #34b6ff; }

/* AGNICARE (Montserrat, capital): har letter ek "reel" hai jo upar ya neeche roll hokar apni jagah rukta hai (time se chalta hai, scroll se nahi) */
.st-brand { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', 'Jost', system-ui, sans-serif; font-weight: 800; font-size: clamp(2.6rem, 11vw, 13rem); letter-spacing: .03em; line-height: 1;
  pointer-events: none; will-change: transform, opacity; }
.ag-l { position: relative; display: inline-block; height: .74em; overflow: hidden; vertical-align: top; }   /* window = letter ki unchai */
.ag-r { display: block; will-change: transform, filter; }
.ag-r i { display: block; height: .74em; line-height: .74; font-style: normal; }
.ag-c .ag-r i { color: #34b6ff; }                                                                           /* C blue */

/* --- light page (ready page) --- */
.st-page { position: absolute; inset: 0; background: #eaf2f8; color: #49596b; overflow: hidden; will-change: transform;
  font-family: 'Jost', system-ui, sans-serif; box-shadow: 0 -30px 70px rgba(0,0,0,.5); }
.st-giant { position: absolute; left: 0; right: 0; top: 78px; text-align: center; color: #2f66c4; white-space: nowrap; will-change: transform, opacity;
  font-family: Impact, 'Anton', 'Arial Narrow', sans-serif; font-weight: 400; font-size: clamp(4rem, 19vw, 19.5rem); line-height: 1; letter-spacing: .01em; }
.st-copy { position: absolute; left: 5vw; bottom: 9vh; width: min(26vw, 340px); will-change: transform, opacity; }
.st-copy small { display: block; letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; font-weight: 600; margin-bottom: .7rem; color: #49596b; }
.st-copy h3 { font-family: 'League Spartan', 'Jost', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.6rem); line-height: 1.02; margin: 0 0 .8rem; color: #49596b; }
.st-copy p, .st-side p { font-size: .98rem; line-height: 1.6; margin: 0; }
.st-side { position: absolute; right: 5vw; bottom: 9vh; width: min(23vw, 320px); will-change: transform, opacity; }
.st-side h4 { font-family: 'League Spartan', 'Jost', sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1.1; margin: 0 0 .55rem; color: #49596b; }
.st-head2 { position: absolute; left: 0; right: 0; top: 13vh; text-align: center; padding: 0 6vw; }
.st-head2 h3 { font-family: 'League Spartan', 'Jost', sans-serif; font-weight: 800; font-size: clamp(2rem, 5vw, 4.6rem); line-height: 1; margin: 0 0 .6rem; color: #2f66c4; }
.st-head2 p { margin: 0; font-size: 1rem; white-space: pre-line; }

.st-hero { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.st-hero img { height: min(80vh, 58vw); width: auto; max-width: 90vw; object-fit: contain; will-change: transform; filter: drop-shadow(0 30px 28px rgba(73,89,107,.28)); }
.st-lineup { position: absolute; left: 0; right: 0; bottom: 11vh; display: flex; justify-content: center; align-items: flex-end; gap: clamp(.2rem, .8vw, .9rem); pointer-events: none; }
.lu { display: flex; flex-direction: column; align-items: center; gap: .2rem; width: clamp(60px, 14vw, 230px); }
.lu-hero { width: clamp(90px, 22vw, 360px); }
.lu img { width: 100%; height: clamp(80px, 34vh, 320px); object-fit: contain; object-position: center bottom; }
.lu-hero img { height: clamp(110px, 46vh, 430px); visibility: hidden; }
.lu span { font-size: .95rem; font-weight: 600; letter-spacing: .03em; text-align: center; color: #49596b; }

/* For white-background product images, set cutout: false in app.js CFG. */
.story:not(.story--cutout) .st-hero img, .story:not(.story--cutout) .lu img { mix-blend-mode: multiply; filter: none; }

@media (max-width: 700px) {
  .story { height: 570vh; }
  .st-k { font-size: 8.4vw; }
  .st-brand { font-size: 12.4vw; letter-spacing: .02em; }
  .st-giant { font-size: 22vw; top: 16vh; }
  .st-copy { left: 6vw; right: 6vw; width: auto; bottom: 17vh; text-align: center; }
  .st-copy p, .st-side { display: none; }
  .st-hero img { height: min(54vh, 82vw); }
  .st-lineup { gap: .3rem; }
  .lu { width: 15vw; } .lu img { height: clamp(70px, 14vh, 140px); }
  .lu-hero { width: 26vw; } .lu-hero img { height: clamp(110px, 24vh, 230px); }
  .lu span { font-size: .66rem; }
}

/* STICKY NAVIGATION: styles for the scroll navbar created by app.js. */
/* ===== SCROLL NAVBAR (scroll karte hi upar se neeche slide hota hai) ===== */
#sticky-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; font-family: 'Montserrat', system-ui, sans-serif;
  transform: translate3d(0, -115%, 0); transition: transform 1.1s cubic-bezier(.22, 0.15, 0.36, 1.4); will-change: transform; pointer-events: none; }
#sticky-nav.is-visible { transform: none; pointer-events: auto; }

.sn-bar { position: relative; background: rgba(16, 24, 34, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 8px 26px rgba(0, 0, 0, .28); }
.sn-in { display: flex; align-items: center; gap: 1.6rem; height: 55px; width: min(1400px, 94%); margin: auto; }

.sn-logo { flex: none; display: block; }
.sn-logo img {z-index : 1 ; width: 120px; height: auto; display: block; margin-top: 33px;}
.sn-logo .tagline { z-index:2; display: block; font-size: .62rem; line-height: 1.1; letter-spacing: .17em; text-transform: uppercase; color: #fff; font-weight: 600; margin: -8px 0px 35px 50px; white-space: nowrap; }

.sn-links { flex: 1; display: flex; justify-content: center; align-items: center; gap: clamp(1.4rem, 3.2vw, 3.2rem); list-style: none; margin: 0; padding: 0; }
.sn-links > li { position: relative; height: 56px; display: flex; align-items: center; }
.sn-link { color: #fff; font-size: .98rem; font-weight: 500; letter-spacing: .04em; padding: 6px 0; border-bottom: 2px solid transparent; opacity: .92; transition: border-color .2s, opacity .2s; }
.sn-link:hover, .sn-link.is-active { border-color: #fff; opacity: 1; }
.sn-chev { display: inline-block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); margin-left: 9px; }

.sn-drop { position: absolute; top: 100%; left: -18px; min-width: 270px; background: #fff; border-radius: 0 0 14px 14px; padding: 10px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s, transform .25s, visibility .25s; }
.sn-links > li:hover .sn-drop, .sn-links > li:focus-within .sn-drop { opacity: 1; visibility: visible; transform: none; }
.sn-drop a { display: block; padding: 10px 14px; border-radius: 10px; font-size: .92rem; color: #2e4156; }
.sn-drop a:hover { background: #eef1f4; color: #2f66c4; }

/* teen dot wala button + uska menu */
.sn-kebab { flex: none; margin-left: auto; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background .2s; }
.sn-kebab:hover, .sn-kebab[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
.sn-kebab svg { width: 20px; height: 20px; }
.sn-panel { position: absolute; top: 100%; right: max(3vw, calc((100% - 1400px) / 2)); width: min(270px, 92vw); padding: 10px; border-radius: 0 0 16px 16px;
  background: rgba(16, 24, 34, .98); box-shadow: 0 22px 44px rgba(0, 0, 0, .38);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .35s cubic-bezier(.22, 1, .36, 1), visibility .25s; }
.sn-panel.is-open { opacity: 1; visibility: visible; transform: none; }
.sn-item { display: block; padding: 12px 14px; border-radius: 10px; color: #fff; font-size: .95rem; letter-spacing: .02em; }
.sn-item:hover { background: rgba(255, 255, 255, .1); }
.sn-item.is-active { background: rgba(255, 255, 255, .08); }
.sn-sub { padding-left: 28px; font-size: .88rem; opacity: .85; }
.sn-sep { height: 1px; margin: 8px 6px; background: rgba(255, 255, 255, .12); }
.sn-panel .header-social { display: flex; gap: 10px; padding: 12px 14px 6px; }
.sn-m { display: none; }
#sticky-nav a:focus-visible, #sticky-nav button:focus-visible { outline: 2px solid #34b6ff; outline-offset: 3px; }

@media (max-width: 1100px) {
  .sn-in { height: 54px; }
  .sn-logo img { width: 88px; }
  .sn-links { display: none; }
  .sn-m { display: block; }
  .sn-panel { max-height: calc(100vh - 70px); overflow: auto; }
}
@media (prefers-reduced-motion: reduce) { #sticky-nav, .sn-panel { transition: none; } }