/* ==========================================================================
   mnkurtis.com — MN Fashions retailer landing page
   ==========================================================================

   ONE STYLESHEET, NO FRAMEWORK. The page it dresses is one file of plain HTML,
   and the whole point of moving off the React build was that a retailer
   searching "kurti manufacturer Jaipur" gets a page Google can actually read.
   A build step would have quietly put that back.

   LABELS ABOVE BOXES, ROOM IN DROPDOWNS, min-width:0 ON ANYTHING THAT FLEXES.
   The same three house rules the ERP screens follow, for the same reason: a
   label beside a box wraps on a phone, a dropdown sized to its shortest option
   clips its longest, and a flex child without min-width:0 refuses to shrink and
   pushes the page sideways.
   ========================================================================== */

:root {
  /* Navy is the brand. It came off the old site and is the one colour a
     retailer already associates with MN. */
  --navy: #141467;
  --navy-deep: #0b0c3d;
  --navy-soft: #2a2a8f;
  --tint: #f0f1fd;

  /* Gold earns its place: the retailer logos in the trust strip are gold on
     dark, and the ethnic-wear range this page sells is warm. Navy alone reads
     corporate-banking. */
  --gold: #c9a227;
  --gold-light: #e6c65c;

  --ink: #14152b;
  --body: #4a4d63;
  --muted: #676b84;
  --line: #e3e4ef;
  --cream: #fbfaf7;
  --white: #ffffff;

  --whatsapp: #25d366;
  --whatsapp-dark: #1ebe5d;

  --wrap: 1180px;
  --gutter: 24px;
  --radius: 16px;
  --radius-sm: 10px;

  --shadow-sm: 0 1px 2px rgba(20, 21, 43, .06), 0 4px 12px rgba(20, 21, 43, .05);
  --shadow-md: 0 2px 6px rgba(20, 21, 43, .07), 0 18px 40px rgba(20, 21, 43, .09);
  --shadow-lg: 0 30px 70px rgba(11, 12, 61, .22);

  /* Devanagari sits AFTER the Latin faces in both stacks, never before. A browser
     picks per character, not per stack, so Playfair still draws "MN Fashions" and
     Noto draws whatever Devanagari sits beside it in the same line. Named here even
     on the English page — the tagline bar and the footer line are Hindi, and a
     device that has the font locally should use it rather than guess. */
  --serif: "Playfair Display", "Noto Serif Devanagari", Georgia, "Times New Roman", serif;
  --sans: Inter, "Noto Sans Devanagari", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, sans-serif;
}

/*
 * THE HINDI PAGE READS AT A SLIGHTLY LARGER SIZE, AND THAT IS NOT A PREFERENCE.
 * Devanagari carries its meaning in marks above and below the letter — the matras
 * and the bindus — and those are the first things to disappear at a size that suits
 * Latin. The line height goes up with it, or the शिरोरेखा of one line touches the
 * matra hanging off the one above.
 */
html[lang="hi"] body { font-size: 17.5px; line-height: 1.78; }
/*
 * DEVANAGARI WANTS MORE LEADING AS THE TYPE GETS BIGGER, not less — the opposite
 * of Latin, where large display type is normally set tight. The marks live ABOVE
 * and BELOW the letter, so the gap between two lines has to clear a matra hanging
 * down from one and a शिरोरेखा rising into it from the next. At 1.34 the H1 read as
 * two lines pressed together: the tops of "डिज़ाइन्स" ran into "women wear" above it.
 * So the leading grows with the size rather than staying flat.
 */
html[lang="hi"] h1 { line-height: 1.52; letter-spacing: 0; }
html[lang="hi"] h2 { line-height: 1.44; letter-spacing: 0; }
html[lang="hi"] h3, html[lang="hi"] h4 { line-height: 1.38; letter-spacing: 0; }
html[lang="hi"] .pull { line-height: 1.55; }
html[lang="hi"] .stat__n { line-height: 1.3; }

/*
 * A QUESTION MARK AFTER DEVANAGARI HAS TO COME FROM THE DEVANAGARI FONT.
 * "?" is Latin, so the browser took it from Playfair Display while the letters
 * before it came from Noto Serif Devanagari — two fonts, two sets of sidebearings,
 * and the mark sat on top of the ें of "लगें". Naming the face for this one glyph
 * makes both come from the same font, which is the only thing that can make them
 * agree. It is also inside the <em> now, so it is gold like the words it ends
 * rather than white and detached from them.
 */
html[lang="hi"] .qm {
  font-family: "Noto Serif Devanagari", "Playfair Display", Georgia, serif;
  margin-left: .06em;
}
html[lang="hi"] .eyebrow { letter-spacing: .04em; text-transform: none; font-size: .82rem; }
html[lang="hi"] .contact__k, html[lang="hi"] .site-footer h4 { letter-spacing: .06em; }
html[lang="hi"] .stat__l { line-height: 1.5; }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/*
 * `height: auto` HERE, ONCE, AND IT IS LOAD-BEARING. Every <img> on this page
 * carries width and height attributes so the browser can reserve the right box
 * before the file arrives — and those attributes are also a PRESENTATIONAL HEIGHT.
 * With nothing in the CSS answering them, each picture rendered at its literal
 * attribute height: the hero cells came out 1350 and 2714 pixels tall, and the
 * photograph beside "one wrong buying decision" was stretched from 0.76 to 0.38
 * and had been that way since the page was written. Any rule below that really
 * wants a height states one and wins on specificity.
 */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(64px, 8vw, 110px) 0; }
.section--tint { background: var(--tint); }
.section--cream { background: var(--cream); }
.section--navy { background: var(--navy); color: rgba(255, 255, 255, .78); }
.section--navy h2, .section--navy h3 { color: var(--white); }

/* A screen-reader-only label. Used where the visible text of a control is
   already obvious to a sighted person but says nothing on its own. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- shared bits -------------------------------------------------------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); background: var(--tint);
  border: 1px solid rgba(20, 20, 103, .12);
  border-radius: 999px; padding: 7px 16px; margin-bottom: 20px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); flex: none;
}
.section--navy .eyebrow {
  color: var(--gold-light); background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
}

.lede { font-size: clamp(1.02rem, 1.6vw, 1.16rem); max-width: 62ch; }

/* A product name that must not break. "Co-ord Set" carries a hyphen, and a hyphen
   is where a browser is entitled to break a line — so it came out as "Co-" at the
   end of one line and "ord Set" at the start of the next, which reads as a typo in
   the one place the page is naming what it sells. */
.nb { white-space: nowrap; }

.head { max-width: 760px; margin-bottom: 48px; }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  padding: 16px 30px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.btn--gold { background: var(--gold); color: #221a00; box-shadow: var(--shadow-md); }
.btn--gold:hover { background: var(--gold-light); }
.btn--navy { background: var(--navy); color: var(--white); box-shadow: var(--shadow-md); }
.btn--navy:hover { background: var(--navy-soft); }
.btn--ghost { background: transparent; color: var(--navy); border-color: rgba(20, 20, 103, .28); }
.btn--ghost:hover { background: var(--tint); }
.section--navy .btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, .38); }
.section--navy .btn--ghost:hover { background: rgba(255, 255, 255, .09); }
.btn--wide { width: 100%; }
.btn--lg { padding: 19px 38px; font-size: 1.06rem; }

/*
 * THE TWO BUTTONS THE PAGE IS FOR ARE GIVEN A LENGTH, not left to be as wide as
 * their words happen to be. Sized to its text, the hero button came out shorter
 * than the sentence above it and read as a minor control on a page whose only job
 * is to get it pressed. And the Hindi and English wordings differ by a third in
 * length, so left to the text the two pages would not look like one design.
 * `min()` keeps it inside a phone.
 */
.closing__actions .btn--gold { min-width: min(100%, 400px); }

/*
 * THE HERO BUTTON IS SIZED, NOT STRETCHED. At the shared large-button size its
 * sentence came out 489px long and 69px tall — a slab across the column rather
 * than something to press. A step down in type and a tighter horizontal padding
 * bring it to a proportion that reads as considered; the words are unchanged,
 * because the words are the invitation.
 */
.hero__cta .btn--gold {
  font-size: .97rem; padding: 16px 28px; letter-spacing: .01em;
  max-width: 100%;
}
.hero__cta .btn--gold .btn__arrow { width: 18px; height: 18px; }

/* The arrow on the hero button. It points at what pressing does — the form is
   further down this same page — and it leans into the press. The movement is
   dropped for anyone who has asked for less of it. */
.btn__arrow { width: 20px; height: 20px; flex: none; transition: transform .18s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .btn__arrow { transition: none; }
  .btn:hover .btn__arrow { transform: none; }
}

.btn__note {
  display: block; font-size: .86rem; color: var(--muted); margin-top: 12px;
}
/* The hero is navy too, but by its own gradient rather than by .section--navy —
   so the muted grey these notes use everywhere else landed on navy at a contrast
   of 3.03 and the "no pressure, no obligation" line under the main button was
   the hardest sentence on the page to read. */
.section--navy .btn__note, .hero .btn__note { color: rgba(255, 255, 255, .68); }

/* ---- header ------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 72px;
}
/* 44px minimum on anything a thumb has to hit. The logo link stood 30px tall and
   the phone number 28 — both correct to look at and both a miss on a phone. */
/*
 * THE LOGO IS THE LOGO NOW, NOT A PICTURE OF ONE.
 * The file this used was a navy RECTANGLE with the artwork reversed out of it —
 * no transparency, the background baked in. On a white header it rendered as a
 * 56x40 dark box in which nothing could be read, which is why the Owner said the
 * logo was not showing: it was there and it was illegible, which is the same
 * thing. The mark is cut out of that file now as navy artwork on transparency,
 * and it carries its own lettering — so the Playfair "MN Fashions" that used to
 * sit beside it has gone. A wordmark printed twice is not a wordmark.
 */
/*
 * THE LOGO KEEPS ITS BLUE BOX, and the name is set in type beside it.
 * The cut-out mark read cleanly but it is not how MN's logo is used anywhere else
 * — on the catalogue, on the packaging, on WhatsApp it is the navy plate. So the
 * plate stays, and the two things it cannot do at 44px — be read, and carry a
 * second line — are done in type next to it.
 */
.brand {
  display: flex; align-items: center; gap: 13px; text-decoration: none;
  min-width: 0; min-height: 44px;
}
.brand img {
  height: 51px; width: auto; flex: none;
  border-radius: 6px;   /* the plate is a hard rectangle; 6px stops it looking pasted on */
}
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name {
  font-family: var(--serif); font-weight: 700; font-size: 1.14rem;
  color: var(--navy); line-height: 1.15; white-space: nowrap;
}
.brand__tag {
  display: block; font-family: var(--sans); font-size: .655rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  line-height: 1.4; margin-top: 2px; white-space: nowrap;
}
.site-header__actions { display: flex; align-items: center; gap: 14px; }

/* ---- the language switch ------------------------------------------------
   Two words, always both visible. A single toggle that says only the OTHER
   language makes a reader work out which one they are currently reading; a pair
   with one of them lit says it at a glance. It stays on a phone — for a lot of
   these retailers the Hindi page is the readable one, and a control that hides
   itself at 375px hides itself from exactly the people who need it. */
.lang {
  display: inline-flex; align-items: center; overflow: hidden;
  border: 1px solid var(--line); border-radius: 999px; background: var(--white);
}
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  /* 40px, not 44 and not 34. It is a control a person uses once and then never
     again, so it should not stand as tall as the button that is the point of the
     page — but 34 was a miss on a thumb. */
  min-height: 40px; padding: 0 10px;
  font-size: .76rem; font-weight: 600; color: var(--muted); text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.lang a + a { border-left: 1px solid var(--line); }
.lang a:hover { background: var(--tint); color: var(--navy); }
.lang a[aria-current="true"] { background: var(--navy); color: var(--white); }
.lang a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

@media (max-width: 400px) {
  .site-header__inner { gap: 10px; }
  .lang a { padding: 0 8px; font-size: .72rem; }
}
.site-header__phone {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap;
}
.site-header__phone:hover { text-decoration: underline; }
.site-header .btn { padding: 12px 22px; font-size: .94rem; }

/*
 * THE HEADER ON A PHONE, IN TWO STAGES, AND NEITHER OF THEM CUTS A WORD.
 *
 * Four things want this row: the logo plate, "MN Fashions", the language switch and
 * the call button. Two earlier attempts shaved all four down together and both
 * ended the same way — "MN Fashions" rendering as "MN Fashio" running under the
 * language pill, because the brand is the flex item that shrinks and its text
 * overflows its box rather than resizing it. Measuring the box says it fits. It
 * does not.
 */
.site-header .btn { white-space: nowrap; }

@media (max-width: 640px) {
  /*
   * ONE CLEAN LINE, because the button has gone to the bar at the bottom.
   * What is left — plate, name, switch — fits at 360 with room to spare, so
   * nothing is squeezed and nothing is cut. Two rows fixed the clipping and
   * looked like a compromise; this is not a compromise. The phone number goes
   * because it is one tap away in the bar, and the second brand line goes
   * because the headline below repeats it within a screen's scroll.
   */
  .site-header__phone { display: none; }
  .brand__tag { display: none; }
  .site-header .wrap { padding-left: 16px; padding-right: 16px; }
  .site-header__inner { gap: 12px; min-height: 62px; }
  .brand { gap: 10px; }
  .brand img { height: 41px; }
  .brand__name { font-size: 1.02rem; }
  .site-header .btn { display: none; }
  .lang a { min-height: 38px; padding: 0 11px; font-size: .78rem; }
}

/* ---- hero --------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 62%, #07082c 100%);
  color: rgba(255, 255, 255, .8);
  padding: clamp(56px, 7vw, 92px) 0 clamp(64px, 8vw, 104px);
}
/*
 * The ring pattern is the one decorative flourish carried over from the old site.
 * Data URI so it costs no request and cannot 404 after a deploy.
 *
 * QUIETER THAN THE NUMBER SUGGESTS IT SHOULD BE. At 4.5% it still read as a
 * pattern rather than a texture, because white on navy is a hard contrast and an
 * 80px tile puts a great many rings behind a headline. Bigger rings and half the
 * opacity: the same flourish, but it stays behind the words instead of competing
 * with them. And it fades out towards the left, where the headline actually sits.
 */
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .022; pointer-events: none;
  background-size: 105px 105px;   /* 30% smaller than the 150 it started at */
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 55%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 0%, #000 55%, #000 100%);
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-rule='evenodd'%3E%3Cpath d='M40 0C18 0 0 18 0 40s18 40 40 40 40-18 40-40S62 0 40 0zm0 70C23.4 70 10 56.6 10 40S23.4 10 40 10s30 13.4 30 30-13.4 30-30 30z'/%3E%3C/g%3E%3C/svg%3E");
}
.hero > .wrap { position: relative; z-index: 1; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.hero h1 { color: var(--white); margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--gold-light); }
.hero__lede { color: rgba(255, 255, 255, .78); font-size: clamp(1.04rem, 1.7vw, 1.2rem); max-width: 34em; }
.hero__cta { margin-top: 32px; }

.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin-top: 44px;
}
.stat {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-sm); padding: 18px 16px; min-width: 0;
}
.stat__n {
  font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700; color: var(--gold-light); line-height: 1.1;
}
.stat__l {
  font-size: .82rem; color: rgba(255, 255, 255, .62); margin-top: 4px;
  line-height: 1.35;
}

/*
 * The collage. Three photographs, deliberately unequal — a neat 2×2 grid of model
 * shots reads as a stock template; this reads as a lookbook.
 *
 * THE BOX NEVER CROPS THE MODEL'S HEAD OR HEM, AND THAT IS THE WHOLE RULE HERE.
 * Every shoot is portrait, near 2:3. The first cut gave the two right-hand cells
 * `aspect-ratio: 3/3.4` — 0.88 wide against a 0.667 photograph — so `cover` threw
 * away a quarter of the HEIGHT and both models lost their heads. On a page whose
 * job is to sell the garment, a crop that takes the neckline and the hem removes
 * the two things a retailer is looking at.
 *
 * So every cell is now NARROWER than the photograph (ratio <= 0.667), which forces
 * `cover` to trim the SIDES — background, not garment. The tall cell takes no
 * aspect-ratio at all: it spans the two rows the shorts define, and its height is
 * therefore theirs. Giving it one as well made it fight the row track it sits in.
 */
.collage { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; min-width: 0; }
.collage img {
  width: 100%; object-fit: cover;
  /* Slightly above centre: where a trim is unavoidable it comes off the floor,
     never off the face. */
  object-position: center 20%;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
/*
 * THE SHORTS DEFINE THE ROWS; THE TALL FILLS THEM. Only one of the two may state
 * a height, or the grid has to resolve a circle — an item sized from its row and
 * a row sized from its item. When both carried `height: 100%` AND an
 * aspect-ratio, and the two ratios differed, the browser settled on a height that
 * was neither, and took 11% off both photographs to get there.
 */
.collage__tall { grid-row: span 2; height: 100%; }
.collage__short {
  /* 0.6, not 0.667. The seven shoots are not one shape — they run from 943x1600
     (0.589) to 1095x1437 (0.762) — and the cell has to be narrower than the
     NARROWEST of them or that one loses its hem. A side trim on the wider ones
     costs background. */
  aspect-ratio: 3 / 5;
  /* AND IT MUST NOT BE STRETCHED. A grid item defaults to filling its row, and a
     row whose only height is this item's is then defined by an item defined by
     the row. The browser broke that circle by making the row 1350px — five times
     what it should be. `start` takes the item out of the stretch, so the ratio
     above is the only thing deciding its height, and the row follows it. */
  align-self: start;
}

/* THE HEADLINE COMES FIRST ON A PHONE. Putting the collage above it looked
   better in a mockup and meant the one sentence the page is arguing sat below
   four hundred pixels of photograph — off the first screen, on the device most
   of these retailers arrive on. */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  /* A TABLET GETS ALL THREE, IN A ROW. Capped at 560px and left-aligned, the
     collage used half the width of an iPad and left the other half empty navy —
     the layout looked unfinished rather than deliberate. Three across fills it,
     and the third photograph earns its download instead of being hidden. */
  .collage { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; }
  /* The tall stops spanning and stops filling — it becomes an ordinary cell, and
     takes the SAME ratio as its neighbours so the row has one answer to give. */
  .collage__tall { grid-row: span 1; height: auto; aspect-ratio: 3 / 5; align-self: start; }
}

/* On a phone three across would be three thumbnails. Two, and the third is not
   downloaded at all. */
@media (max-width: 620px) {
  .collage { grid-template-columns: 1fr 1fr; max-width: 560px; margin-inline: auto; }
  .collage__short:last-child { display: none; }
}
@media (max-width: 460px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { display: flex; align-items: baseline; gap: 12px; }
  .stat__l { margin-top: 0; }
}

/* ---- the hindi line ----------------------------------------------------- */

.tagline-bar {
  background: var(--gold); color: #221a00; text-align: center;
  padding: 14px 24px; font-weight: 600; font-size: 1.02rem;
}

/* ---- worries ------------------------------------------------------------ */

.worries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.worry {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 26px 26px 24px;
  box-shadow: var(--shadow-sm); min-width: 0;
}
.worry__n {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tint); color: var(--navy);
  font-weight: 700; font-size: .96rem;
}
.worry p { margin: 0; color: var(--ink); font-weight: 500; }
@media (max-width: 760px) { .worries { grid-template-columns: minmax(0, 1fr); } }

/* ---- the argument ------------------------------------------------------- */

.argument {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.argument__figure { position: relative; min-width: 0; }
.argument__figure img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; }
.argument__badge {
  position: absolute; left: -14px; bottom: 26px;
  background: var(--navy); color: var(--white);
  border-radius: var(--radius-sm); padding: 16px 22px; box-shadow: var(--shadow-lg);
}
.argument__badge strong { display: block; font-family: var(--serif); font-size: 1.3rem; }
.argument__badge span { font-size: .78rem; color: rgba(255, 255, 255, .6); letter-spacing: .06em; text-transform: uppercase; }
.argument blockquote {
  margin: 0 0 1.2em; padding-left: 20px; border-left: 3px solid var(--gold);
  font-size: 1.1rem; color: var(--ink); font-weight: 500;
}
@media (max-width: 860px) {
  .argument { grid-template-columns: minmax(0, 1fr); }
  .argument__figure { order: -1; max-width: 460px; }
  .argument__badge { left: 12px; }
}

/* ---- reasons ------------------------------------------------------------ */

.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.reason {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow-sm); min-width: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.reason:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.reason__icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px;
  display: grid; place-items: center; background: var(--tint); color: var(--navy);
}
.reason__icon svg { width: 23px; height: 23px; }
.reason h3 { margin-bottom: .4em; }
.reason p { font-size: .96rem; margin: 0; }
@media (max-width: 940px) { .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .reasons { grid-template-columns: minmax(0, 1fr); } }

/* ---- retailer logos ----------------------------------------------------- */

/* ONE LINE, ALWAYS — IT SCROLLS RATHER THAN WRAPS.
   These are the buyers, and they read as one row of company we keep. Six divided
   evenly into 6 / 3 / 2 columns; the seventh orphaned a tile onto a half-empty
   row in all three. Wrapping and centring fixed the orphan but still broke the
   line into two. So the row never wraps: on a wide screen the seven grow to fill
   it exactly, and on a phone it overflows and is swiped sideways. Adding an
   eighth buyer needs no change here and no media query. */
.logos {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: 18px; margin-top: 40px;
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  /* The strip runs to the screen edge on a phone and comes back inside the
     column on a desktop, so a half-visible tile reads as "there is more this
     way" instead of as something clipped by mistake. */
  margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
  padding: 4px var(--gutter) 10px;
}
.logos img {
  /* GROW BUT NEVER SHRINK: 1 0 132px. They stretch to fill a wide row and hold
     132px on a narrow one, which is what makes the row overflow instead of
     squeezing seven unreadable logos into a phone. min-width:0 because a flex
     item defaults to min-width:auto — for an <img> that is its INTRINSIC width,
     and it kept the seventh tile off the row even when there was room. */
  flex: 1 0 132px; max-width: 200px; min-width: 0;
  height: 84px; object-fit: contain; scroll-snap-align: center;
  border-radius: var(--radius-sm); background: var(--white);
  padding: 10px; border: 1px solid var(--line);
}

/* ---- purpose ------------------------------------------------------------ */

.purpose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 44px; }
.purpose__item {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius); padding: 28px 24px; min-width: 0;
}
.purpose__item svg { width: 26px; height: 26px; color: var(--gold-light); margin-bottom: 14px; }
.purpose__item h3 { font-size: 1.08rem; margin-bottom: .35em; }
.purpose__item p { font-size: .94rem; color: rgba(255, 255, 255, .68); margin: 0; }
@media (max-width: 820px) { .purpose { grid-template-columns: minmax(0, 1fr); } }

.pull {
  font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  color: var(--white); line-height: 1.35; margin: 0 0 .5em; font-weight: 700;
}
.pull span { color: var(--gold-light); }

/* ---- fit checklist ------------------------------------------------------ */

.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 30px; }
.fit li {
  display: flex; gap: 13px; align-items: flex-start;
  color: var(--ink); font-weight: 500; min-width: 0;
}
.fit svg { flex: none; width: 21px; height: 21px; color: var(--gold); margin-top: 3px; }
.fit-list { list-style: none; margin: 0 0 40px; padding: 0; }
@media (max-width: 720px) { .fit { grid-template-columns: minmax(0, 1fr); } }

/* ---- the form ----------------------------------------------------------- */

.book { background: var(--navy); color: rgba(255, 255, 255, .78); }

/*
 * THE LIGHT TEXT IS SCOPED TO THE COPY COLUMN, NOT THE SECTION. This section is
 * navy but it contains a WHITE card, and a blanket ".book h2, .book h3 { color:
 * white }" turns the form's own heading white on white. The first cut of this
 * page did the opposite — it set no colour at all, and "Schedule your free call"
 * rendered in near-black ink on navy and could not be read.
 */
.book__copy h2, .book__copy h3 { color: var(--white); }
.book__copy .eyebrow {
  color: var(--gold-light); background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
}
.book__copy .btn__note { color: rgba(255, 255, 255, .68); }
.book__grid {
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(32px, 5vw, 60px); align-items: start;
}

.promise { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 20px; }
.promise li { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.promise__icon {
  flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .09); color: var(--gold-light);
}
.promise__icon svg { width: 21px; height: 21px; }
.promise strong { display: block; color: var(--white); font-size: 1.02rem; margin-bottom: 2px; }
.promise span { font-size: .93rem; color: rgba(255, 255, 255, .62); }

.guide-card {
  margin-top: 34px; padding: 24px;
  border: 1px dashed rgba(255, 255, 255, .28); border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
}
.guide-card__kicker {
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-light); font-weight: 600; margin-bottom: 10px;
}
.guide-card p { font-family: var(--serif); color: var(--white); font-size: 1.14rem; font-weight: 700; margin-bottom: 8px; }
.guide-card span { font-size: .9rem; color: rgba(255, 255, 255, .6); }

/* The card itself is white on navy so the form reads as the one thing on the
   page to act on. */
/*
 * THE FORM IS SET SMALLER THAN THE PAGE AROUND IT, on purpose.
 * Nine fields at the page's body size made the card the tallest thing on the
 * screen, and a form that looks long is a form that looks like work. Everything
 * here steps down a size — label, box, gap — which takes about a fifth off the
 * height without taking anything away.
 */
.form-card {
  background: var(--white); border-radius: 20px; padding: clamp(22px, 2.8vw, 32px);
  box-shadow: var(--shadow-lg); color: var(--body);
}
.form-card h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); margin-bottom: .25em; }
.form-card__sub { font-size: .88rem; margin-bottom: 20px; }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 14px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field--wide { grid-column: 1 / -1; }

/* House rule: the label sits ABOVE the box. Beside it, it wraps on a phone and
   the box it names ends up under a different label. */
.field label, .seg-field legend {
  font-size: .78rem; font-weight: 600; color: var(--ink); margin-bottom: 5px; padding: 0;
}
.field label .req { color: #c0392b; }

/* A line under a box, for the one field that needs a reason rather than a name. */
.field__hint { font-size: .76rem; color: var(--muted); margin-top: 5px; line-height: 1.4; }

.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: .92rem; color: var(--ink);
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); width: 100%; min-width: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* House rule: room in the dropdown. Sized to its shortest option, a select
   clips "₹1,00,000 – ₹2,00,000/month" and the retailer picks the wrong band. */
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%2314152b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.field textarea { resize: vertical; min-height: 70px; }
/*
 * A PLACEHOLDER MUST NOT READ AS AN ANSWER.
 * "Shree Collection" and "Indore" sat in the boxes looking like a form somebody had
 * already filled in, and a retailer who thinks the form is filled does not fill it.
 * Two changes, and both are needed: every example now carries "e.g." / "जैसे —" so
 * it cannot be mistaken for a value, and the grey is light enough that a typed
 * answer is visibly darker than the hint it replaced.
 */
.field input::placeholder, .field textarea::placeholder {
  color: #a3a8bd; opacity: 1;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(20, 20, 103, .12);
}
.field input:invalid:not(:placeholder-shown) { border-color: #d9534f; }

/*
 * THE GUIDE'S LANGUAGE — two radios dressed as one control.
 * With two choices a dropdown hides one of them behind a tap, and this is a choice
 * worth showing: the Hindi edition is its own book, not a translation of the
 * English file. The real radios stay in the DOM and keep the keyboard and the
 * screen reader working; only their appearance is borrowed.
 */
.seg-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg__opt { position: relative; }
.seg__opt input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.seg__opt span {
  display: block; text-align: center; padding: 9px 8px;
  font-size: .88rem; font-weight: 600; color: var(--body);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); transition: all .15s ease;
}
.seg__opt input:checked + span {
  background: var(--navy); border-color: var(--navy); color: var(--white);
}
.seg__opt input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.seg__opt:hover input:not(:checked) + span { border-color: var(--navy-soft); color: var(--navy); }

/* The honeypot. A person never sees it; a script that fills every box fills
   this one and tells us what it is. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/*
 * THE SUBMIT IS CENTRED, NOT STRETCHED EDGE TO EDGE. Full width, it was the widest
 * thing in the card — wider than the two-column field grid above it — and a button
 * that outruns the form it belongs to reads as a banner. It still fills the card on
 * a phone, where 360px is the whole width anyway.
 */
.form-card .btn {
  margin-top: 20px; max-width: 340px; margin-inline: auto;
  font-size: .96rem; padding: 15px 26px;
}

.form-msg {
  margin-top: 16px; padding: 13px 16px; border-radius: var(--radius-sm);
  font-size: .94rem; font-weight: 500; display: none;
}
.form-msg--bad { display: block; background: #fdeceb; color: #a4302b; border: 1px solid #f5c6c3; }

/* The thank-you replaces the form in place — a retailer who has just typed
   nine fields should not lose the page they were on. */
.thanks { display: none; text-align: center; padding: 14px 0 4px; }
.thanks--on { display: block; }
.thanks__tick {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 20px;
  display: grid; place-items: center; background: #e7f8ee; color: #1e9e5a;
}
.thanks__tick svg { width: 30px; height: 30px; }
.thanks h3 { margin-bottom: .4em; }
.thanks__actions { display: grid; gap: 12px; margin-top: 22px; }

/* The guide is no longer a button to press but a thing that has happened, so it
   is set as a statement — and it names the address, because "sent to your email"
   leaves somebody wondering which one they typed. */
.thanks__sent {
  margin: 20px 0 0; padding: 16px 18px; text-align: left;
  background: #e9f7ef; border: 1px solid #bfe6cd; border-radius: var(--radius-sm);
}
.thanks__sent strong { display: block; color: #14663a; font-size: .98rem; margin-bottom: 4px; }
.thanks__sent span { display: block; font-size: .88rem; color: #2f6b4a; line-height: 1.55; }
.thanks__sent b { color: #14663a; word-break: break-word; }

@media (max-width: 900px) { .book__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .field-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- closing ------------------------------------------------------------ */

.closing { text-align: center; }
.closing .head { margin-left: auto; margin-right: auto; }
.closing__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- footer ------------------------------------------------------------- */

.site-footer { background: var(--navy-deep); color: rgba(255, 255, 255, .6); padding: 72px 0 32px; }

/* THE FOUR GOLD HEADINGS SIT ON ONE LINE AND EVERY COLUMN HANGS FROM IT. That row
   is the only thing holding this footer together, so the brand block gives up its
   logo-on-top arrangement to keep its heading on the same baseline. */
.site-footer h4 {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-light); margin: 0 0 16px; font-weight: 600; line-height: 1;
}

/*
 * THE COLUMNS ARE NOT EQUAL, BECAUSE WHAT IS IN THEM IS NOT.
 * Four equal columns broke "RIICO Industrial Area" across two lines and then left
 * both address columns half empty beside a contact list running five rows deep.
 * The column gap is wider than the row gap, so the four read as columns rather
 * than as a table.
 */
.footer__grid {
  display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
  align-items: start;
  column-gap: 48px; row-gap: 44px;
  padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer__col { min-width: 0; }
.footer__col p, .footer__col address {
  font-style: normal; font-size: .92rem; line-height: 1.75; margin: 0;
}
.footer__col a { text-decoration: none; }
.footer__col a:hover { color: var(--white); text-decoration: underline; }
.footer__links { display: grid; gap: 9px; margin-top: 12px; }

/* The address IS the map link, so it reads a shade brighter than the text around
   it and lifts on hover — pressable before it is pressed. */
.footer__col address a { color: rgba(255, 255, 255, .74); transition: color .15s ease; }
.footer__col address a:hover { color: var(--white); text-decoration: none; }

/*
 * The line under each address. Not decoration — nothing else on screen said the
 * address was a link. Set as a quiet caption with an arrow: the italic sentence
 * it replaced read as content and competed with the address above it.
 */
.footer__map {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; font-size: .72rem; letter-spacing: .02em;
  color: rgba(255, 255, 255, .36);
}
.footer__map::after { content: "\2192"; font-size: .84rem; line-height: 1; }
.footer__col:hover .footer__map { color: rgba(255, 255, 255, .6); }

/* ---- the contact list --------------------------------------------------- */

/*
 * A FIXED GUTTER FOR THE ICONS, SO THE FIVE VALUES SHARE ONE LEFT EDGE.
 * As a flex row each icon pushed its own text along, and five slightly different
 * starts is what made this column read as a stack rather than a list — which is
 * the whole difference between elegant and not.
 */
.contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.contact li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px; align-items: center;
}
.contact__ico {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .06); color: var(--gold-light);
}
.contact__ico svg { width: 13px; height: 13px; }
/* WhatsApp keeps its own colour — it is the one people look for. */
.contact__ico--wa { background: rgba(37, 211, 102, .13); color: var(--whatsapp); }
.contact__t { display: flex; flex-direction: column; min-width: 0; }
.contact__k {
  font-size: .62rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255, 255, 255, .34); line-height: 1.5;
}
.contact__t a {
  font-size: .93rem; color: rgba(255, 255, 255, .8); text-decoration: none;
  line-height: 1.4; word-break: break-word;
}
.contact__t a:hover { color: var(--white); text-decoration: underline; }
/* Logo BESIDE the name, not above it. Stacked, it pushed this column's first line
   eighty pixels below the three gold headings next to it and broke the one row
   that holds the footer together. */
/* The footer takes the WHITE cut-out, tagline and all: it sits on navy, so the
   reversed artwork is the right one there and needs no box behind it. Its own
   lettering replaced the "MN Fashions" and the Hindi line that used to be set in
   type beside it. */
.footer__brand img { height: 78px; width: auto; margin-bottom: 20px; }
.footer__brand > p { max-width: 34ch; }
.footer__bottom {
  padding-top: 26px; display: flex; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; font-size: .85rem; color: rgba(255, 255, 255, .42);
}
@media (max-width: 1000px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  /* The brand introduces the footer, so it takes the full width above the rest
     rather than sitting as one of four equal boxes. */
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .footer__grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; } }

/* ---- whatsapp float ----------------------------------------------------- */

/* ---- the phone's action bar --------------------------------------------
 * Hidden above 640px, where the header has room for its own button and the
 * floating WhatsApp bubble is the right shape for a big screen.
 */
.action-bar { display: none; }

@media (max-width: 640px) {
  .action-bar {
    display: flex; gap: 10px; align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
  }
  .action-bar__cta {
    flex: 1 1 auto; min-width: 0; padding: 14px; font-size: .95rem; box-shadow: none;
  }
  .action-bar__wa {
    flex: none; width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--whatsapp); color: #06301a; text-decoration: none;
  }
  .action-bar__wa svg { width: 25px; height: 25px; }

  /* The bar floats over the page, so the last thing on it needs somewhere to go
     or the bottom of the footer can never be reached. */
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}


.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--whatsapp); color: #06301a; text-decoration: none;
  font-weight: 600; font-size: .95rem;
  padding: 14px 20px; border-radius: 999px;
  box-shadow: 0 10px 28px rgba(37, 211, 102, .38);
  transition: transform .16s ease, background-color .16s ease;
}
.wa-float:hover { background: var(--whatsapp-dark); transform: translateY(-2px); }
.wa-float svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 560px) {
  .wa-float { padding: 15px; right: 16px; bottom: 16px; }
  .wa-float span { display: none; }
}

/* ONE WhatsApp BUTTON, NOT TWO. This must come after the rules above: written
   before them it lost on source order at equal specificity, and the float sat
   behind the action bar carrying the same link. */
@media (max-width: 640px) { .wa-float { display: none; } }

/* ---- reveal on scroll --------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }
/* Without this the page is BLANK for anyone with motion turned down, because
   the class that reveals it is only ever added by the observer. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
/* And without this it is blank for anyone with JavaScript off — including the
   crawlers that render the page but run nothing. */
.no-js .reveal { opacity: 1; transform: none; }