/* ============================================================
   Cotton India — Page sections & layout blocks
   Hero · Grids · Stats · Instagram · Location · Finale
   ============================================================ */

/* ============================================================
   Generic responsive grids
   ============================================================ */
.grid{display:grid;gap:var(--sp-3)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--6{grid-template-columns:repeat(6,1fr);gap:var(--sp-1)}

/* ============================================================
   Home hero — rotating category showcase
   Art: assets/images/hero/<key>_bg (backdrop) + <key>_card (deck card).
   Overwriting those files restyles the section; no CSS change needed.
   ============================================================ */
.hero{
  position:relative;overflow:hidden;background:#1a120b;
  display:flex;align-items:center;
  min-height:clamp(540px, calc(100vh - 40px), 800px);
  /* rises behind the transparent nav, then pads its content back clear of it */
  margin-top:calc(-1 * var(--header-h));
  padding-top:var(--header-h);
}

/* Backdrop — one layer per category, crossfaded by the active card.
   `cover` so the photograph always fills the window edge to edge. The source
   files are narrower than a wide desktop viewport, so `contain` would letterbox
   them; filling means the top and bottom get cropped instead. Keep the subject
   away from the frame edges — see assets/images/hero/README.md. */
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg-layer{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}
.hero__bg-layer.is-active{opacity:1}
.hero__bg-layer img{width:100%;height:100%;object-fit:cover;object-position:center top}

/* Darkens the left side so the headline always clears AA contrast,
   whatever photograph sits behind it. */
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(20,12,6,.93) 0%, rgba(20,12,6,.76) 38%, rgba(20,12,6,.34) 68%, rgba(20,12,6,.6) 100%),
    linear-gradient(to top, rgba(20,12,6,.72), transparent 36%);
}

.hero__inner{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:1fr 1.05fr;
  align-items:center;gap:clamp(var(--sp-4), 4vw, var(--sp-8));
  padding-block:clamp(var(--sp-6), 7vw, var(--sp-10));
}

/* copy — swaps with the active card */
.hero__text{color:var(--white);transition:opacity .5s var(--ease), transform .5s var(--ease)}
.hero__text:not(.is-in){opacity:0;transform:translateY(16px)}
.hero__text h1{color:var(--white);margin-bottom:var(--sp-2)}
.hero__text h1 em{font-style:italic;color:var(--gold-soft)}
.hero__sub{color:rgba(255,255,255,.9);font-size:var(--step-1);max-width:44ch;margin-bottom:var(--sp-4)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:var(--sp-4)}
.hero__badges{display:flex;flex-wrap:wrap;gap:10px}
.hero__badges li{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  font-size:var(--step--1);font-weight:500;color:var(--white);backdrop-filter:blur(6px);
}
.hero__badges svg{width:16px;height:16px;flex:none;color:var(--gold-soft)}

/* Card deck — sits low in the frame rather than centred, so the backdrop
   photograph stays readable above and behind it. */
.hero__deck{
  position:relative;perspective:1400px;align-self:end;
  /* Height tracks the card (width x 5/4) so the box bottom-aligns flush with
     no dead space under it — that is what keeps the deck low in the frame. */
  height:clamp(185px, 21.25vw, 250px);
}
.hero__card{
  position:absolute;top:50%;left:50%;width:clamp(148px, 17vw, 200px);aspect-ratio:4/5;
  /* ivory, not white: with object-fit:contain the artwork is matted rather than
     cropped, and ivory blends into the cream card art instead of banding */
  border-radius:var(--radius);overflow:hidden;background:var(--ivory);
  box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.5);
  transform:translate(-50%,-50%);transform-style:preserve-3d;
  transition:transform .7s var(--ease), opacity .7s var(--ease), filter .7s var(--ease);
}
/* `contain` keeps each card's artwork whole — borders, ornament and all */
.hero__card img{width:100%;height:100%;object-fit:contain}
.hero__card.is-center{transform:translate(-50%,-50%) scale(1);opacity:1;z-index:4;cursor:pointer}
.hero__card.is-right{transform:translate(12%,-50%) scale(.82) rotateY(-24deg);opacity:.62;z-index:2;filter:brightness(.72)}
.hero__card.is-left{transform:translate(-112%,-50%) scale(.82) rotateY(24deg);opacity:.62;z-index:2;filter:brightness(.72)}
.hero__card.is-back{transform:translate(-50%,-50%) scale(.62);opacity:0;z-index:1}

/* progress dots */
.hero__dots{position:absolute;left:0;right:0;bottom:clamp(16px, 3vw, 26px);z-index:3;display:flex;justify-content:center;gap:10px}
.hero__dots button{width:34px;height:4px;border-radius:2px;border:none;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:background .3s}
.hero__dots button.is-active{background:var(--gold)}
.hero__dots button:hover{background:rgba(255,255,255,.7)}

/* ghost button on the dark hero */
.btn--ghost.btn--on-dark{color:var(--white);border-color:rgba(255,255,255,.7)}
.btn--ghost.btn--on-dark:hover{background:var(--white);color:var(--maroon)}

/* ============================================================
   Trust / stats strip
   ============================================================ */
.stats{background:linear-gradient(135deg, var(--maroon), var(--maroon-dark));color:var(--white)}
.stats__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);
  padding-block:var(--sp-5);text-align:center;
}
.stats__item{position:relative}
.stats__item:not(:last-child)::after{
  content:"";position:absolute;right:0;top:15%;height:70%;width:1px;
  background:rgba(255,255,255,.2);
}
.stats__num{
  font-family:var(--font-head);font-weight:600;
  font-size:var(--step-4);color:var(--gold-soft);line-height:1.1;
}
.stats__item p{
  margin-top:4px;font-size:var(--step--1);
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);
}

/* ============================================================
   Offers board
   ============================================================ */
/* Warm blush-and-gold band so the running deals read as "special" and lift
   away from the cotton/ivory sections around them. */
.offers{
  background:
    radial-gradient(120% 90% at 50% -20%, var(--gold-tint), transparent 62%),
    var(--maroon-tint);
}
.offers__note{
  margin-top:var(--sp-4);text-align:center;
  color:var(--ink-soft);font-size:var(--step--1);
}

/* ============================================================
   Instagram feed
   ============================================================ */
.insta__cell{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.insta__cell img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .6s var(--ease)}
.insta__cell:hover img{transform:scale(1.08)}
.insta__cell::after{
  content:"";position:absolute;inset:0;
  background:rgba(122,31,42,0);transition:background var(--dur);
}
.insta__cell:hover::after{background:rgba(122,31,42,.4)}
.insta__icon{
  position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  color:var(--white);opacity:0;transform:scale(.7);
  transition:opacity var(--dur), transform var(--dur);
}
.insta__icon svg{width:30px;height:30px}
.insta__cell:hover .insta__icon{opacity:1;transform:scale(1)}

/* ============================================================
   Store floor guide — the showroom rendered as a building
   ============================================================ */
.floors{
  background:
    radial-gradient(150% 130% at 82% -20%, #4a2c22, transparent 55%),
    linear-gradient(160deg, #2f201b, #241713);
  color:rgba(255,255,255,.82);
}
.floors h2{color:var(--white)}
.floors .lead{color:rgba(255,255,255,.78)}

/* The real showroom beside its directory. The photo column is the narrower
   one — the floor rows need the width for their copy. */
.floors__layout{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(var(--sp-3), 4vw, var(--sp-6));align-items:center;
  max-width:1180px;margin-inline:auto;
}
.floors__photo{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid rgba(221,183,101,.35);
  box-shadow:var(--shadow-lg);
}
/* The shot is near-square, so a 4:5 frame trims the sides, not the building */
.floors__photo img{
  width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform .8s var(--ease);
}
.floors__photo:hover img{transform:scale(1.04)}
.floors__photo figcaption{
  position:absolute;inset:auto 0 0 0;
  display:flex;flex-direction:column;gap:2px;
  padding:var(--sp-5) var(--sp-3) var(--sp-3);
  background:linear-gradient(transparent, rgba(var(--overlay)/.9));
  color:var(--white);
}
.floors__photo figcaption b{
  font-family:var(--font-head);font-weight:600;font-size:var(--step-1);
}
.floors__photo figcaption span{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);
}
/* No signboard here — the photo alongside carries the real one */
.building{
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-top:3px solid var(--gold);
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow-lg);
}

/* one floor */
.storey{
  display:grid;grid-template-columns:64px 52px 1fr auto;align-items:center;
  gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border-top:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.9);
  transition:background var(--dur) var(--ease);
}
.storey:first-child{border-top:0}
.storey:hover{background:rgba(200,155,60,.10)}

.storey__tab{display:flex;flex-direction:column;align-items:center;text-align:center}
.storey__num{
  font-family:var(--font-head);font-weight:700;font-size:var(--step-4);
  color:var(--gold-soft);line-height:1;
}
.storey__label{
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-top:4px;
}
.storey__icon{
  width:52px;height:52px;display:grid;place-items:center;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.storey__icon svg{width:26px;height:26px;color:var(--gold-soft)}
.storey:hover .storey__icon{background:rgba(200,155,60,.18);border-color:rgba(200,155,60,.4)}
.storey__info h3{color:var(--white);font-size:var(--step-2);margin-bottom:2px}
.storey__info p{color:rgba(255,255,255,.72);font-size:var(--step--1);margin-bottom:10px;max-width:52ch}
.storey__tags{display:flex;flex-wrap:wrap;gap:6px}
.storey__tags em{
  font-style:normal;font-size:.7rem;font-weight:600;letter-spacing:.03em;
  padding:3px 11px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.14);
}
/* the differentiator — the in-house stitching unit */
.storey__tags em.is-special{
  background:var(--gold);color:#33260A;border-color:transparent;
}
.storey__go{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--gold-soft);font-weight:600;font-size:var(--step--1);white-space:nowrap;
  transition:gap var(--dur) var(--ease);
}
.storey__go::after{content:"→"}
.storey:hover .storey__go{gap:12px}

.floors__foot{
  max-width:920px;margin:var(--sp-3) auto 0;text-align:center;
  color:rgba(255,255,255,.6);font-size:var(--step--1);
}

/* ============================================================
   Wholesale band
   ============================================================ */
.wholesale__note{
  margin-top:var(--sp-2);
  color:var(--ink-soft);font-size:var(--step--1);
}

/* ============================================================
   Personal styling — the video-call concierge band
   ============================================================ */
/* Blush ground so the panel reads as an offer of service, set apart from
   the product sections either side of it. */
.stylist{
  background:
    radial-gradient(110% 90% at 14% 0%, var(--gold-tint), transparent 58%),
    var(--maroon-tint);
}
.stylist__panel{
  position:relative;overflow:hidden;
  max-width:900px;margin-inline:auto;text-align:center;
  padding:clamp(var(--sp-4), 5vw, var(--sp-8)) clamp(var(--sp-3), 4vw, var(--sp-6));
  background:var(--white);
  border:1px solid var(--gold);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
/* A faint weave across the panel — the textile cue, kept almost subliminal. */
.stylist__panel::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(45deg,
    rgba(200,155,60,.07) 0 1px, transparent 1px 11px);
}
.stylist__panel > *{position:relative;z-index:1}
.stylist__panel h2{font-size:var(--step-3);margin-bottom:8px}
.stylist__panel .lead{max-width:52ch;margin-inline:auto}

.stylist__features{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-2);margin:var(--sp-4) 0;
}
.stylist__features li{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:var(--sp-3) var(--sp-2);
  background:var(--cotton);
  border:1px solid var(--line);border-radius:var(--radius);
}
.stylist__icon{
  display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;color:var(--maroon);
  background:var(--gold-tint);border:1px solid rgba(200,155,60,.45);
}
.stylist__icon svg{width:22px;height:22px}
.stylist__features b{
  font-family:var(--font-head);font-weight:600;
  font-size:var(--step-0);color:var(--ink);
}
.stylist__features p{font-size:var(--step--1);color:var(--ink-soft);line-height:1.5}

.stylist__cta svg{width:20px;height:20px;flex:none}
.stylist__note{margin-top:var(--sp-2);font-size:.72rem;color:var(--ink-soft)}

/* ============================================================
   Gents collection — dress-material photo + stitching-unit panel
   ============================================================ */
/* The material section, framed. Shot at its native 3:2 so nothing crops. */
.rack{
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.rack__photo{width:100%;aspect-ratio:3/2;object-fit:cover}

/* --- the differentiator: the in-house stitching unit --- */
.stitch{
  margin-top:var(--sp-5);
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(var(--sp-3), 4vw, var(--sp-6));align-items:center;
  padding:clamp(var(--sp-4), 4vw, var(--sp-6));
  border-radius:var(--radius-lg);
  border:1px solid var(--gold);
  background:linear-gradient(135deg, var(--gold-tint), var(--white) 62%);
  box-shadow:var(--shadow);
}
.stitch__badge{
  display:inline-block;margin-bottom:var(--sp-2);
  padding:6px 14px;border-radius:var(--radius-pill);
  background:var(--gold);color:#33260A;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.stitch__intro h3{font-size:var(--step-3);margin-bottom:8px}
.stitch__intro p{color:var(--ink-soft)}
.stitch__list{display:grid;gap:var(--sp-2)}
.stitch__list li{
  display:flex;gap:var(--sp-2);align-items:flex-start;
  padding:var(--sp-2);border-radius:var(--radius);
  background:var(--white);border:1px solid var(--line);
}
.stitch__list svg{width:22px;height:22px;flex:none;margin-top:3px;color:var(--maroon)}
.stitch__list b{display:block;color:var(--ink);font-weight:600}
.stitch__list span{font-size:var(--step--1);color:var(--ink-soft);line-height:1.55}

/* --- readymade sub-head --- */
.gents__sub{
  max-width:60ch;margin:var(--sp-8) auto var(--sp-4);text-align:center;
}
.gents__sub h3{font-size:var(--step-3);margin-bottom:6px}
.gents__sub p{color:var(--ink-soft)}

/* ============================================================
   Store location
   ============================================================ */
.location{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(var(--sp-3), 4vw, var(--sp-6));align-items:stretch;
}
.location__list{display:flex;flex-direction:column;gap:var(--sp-3)}
.location__row{display:flex;gap:var(--sp-2);align-items:flex-start}
.location__icon{
  width:48px;height:48px;flex:none;display:grid;place-items:center;
  background:var(--white);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-sm);
}
.location__icon svg{width:24px;height:24px;color:var(--maroon)}
.location__icon--whatsapp svg{color:#128C4A}
.location__row h3{font-size:var(--step-1);margin-bottom:2px}
.location__row p{color:var(--ink-soft);font-size:var(--step--1)}
.location__row a{color:var(--maroon);font-weight:600}
.location__row a:hover{text-decoration:underline}
.location__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--sp-1)}
.location__map{
  overflow:hidden;min-height:440px;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.location__map iframe{width:100%;height:100%;min-height:440px;border:0}

/* ============================================================
   Finale banner
   ============================================================ */
.finale{position:relative;overflow:hidden;color:var(--white);text-align:center}
.finale__bg{position:absolute;inset:0;z-index:0}
.finale__bg img{width:100%;height:100%;object-fit:cover}
.finale__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(94,23,32,.86), rgba(42,28,24,.88));
}
.finale__inner{
  position:relative;z-index:1;max-width:680px;margin-inline:auto;
  padding-block:clamp(var(--sp-8), 9vw, var(--sp-12));
}
.finale h2{color:var(--white);margin-bottom:var(--sp-2)}
.finale p{color:rgba(255,255,255,.9);font-size:var(--step-1);margin-bottom:var(--sp-4)}
.finale__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* --- visit: the store details and a compact map, on the same banner --- */
/* This banner carries far more than the old finale did, so the display type is
   stepped down one notch across the board to keep the block compact. */
.finale--visit .finale__inner{max-width:1040px;padding-block:clamp(var(--sp-6), 6vw, var(--sp-8))}
.finale--visit .eyebrow{font-size:.72rem;letter-spacing:.16em;margin-bottom:6px}
.finale--visit h2{font-size:var(--step-3);margin-bottom:10px}
.finale--visit .finale__lead{max-width:52ch;margin-inline:auto;margin-bottom:0;font-size:var(--step-0)}

.visit{
  display:grid;grid-template-columns:1fr .92fr;
  gap:clamp(var(--sp-3), 4vw, var(--sp-5));align-items:start;
  margin-top:var(--sp-4);text-align:left;
}
/* The rows are built ink-on-white for contact.html, so invert them here. */
.visit .location__list{gap:var(--sp-2)}
.visit .location__icon{
  width:40px;height:40px;border-radius:10px;
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);box-shadow:none;
}
.visit .location__icon svg{width:20px;height:20px;color:var(--gold-soft)}
.visit .location__icon--whatsapp svg{color:#5BD98A}
.visit .location__row h3{color:var(--white);font-size:var(--step-0);margin-bottom:1px}
.visit .location__row p{color:rgba(255,255,255,.78);font-size:var(--step--1);margin-bottom:0;line-height:1.5}
.visit .location__row a{color:var(--gold-soft)}
.visit .location__actions{margin-top:var(--sp-2);gap:10px}
.visit .location__actions .btn{padding:11px 22px}

/* Small box, not the full-height panel the standalone section used. */
.location__map--compact{
  min-height:0;aspect-ratio:4/3;
  border-color:rgba(255,255,255,.22);
}
.location__map--compact iframe{min-height:0;height:100%}

/* ============================================================
   Inner page hero
   ============================================================ */
.page-hero{
  position:relative;overflow:hidden;color:var(--white);isolation:isolate;
  /* same trick as the home hero: rise behind the transparent nav */
  margin-top:calc(-1 * var(--header-h));
  padding-top:var(--header-h);
  /* Banner art is a wide 1.88:1 people shot, so track that ratio: the band has
     to be deep enough to show the figures rather than a slice of their waists.
     Capped, or it would swallow the fold on a desktop monitor. */
  min-height:clamp(380px, 46vw, 620px);
  display:grid;align-content:center;
}
.page-hero__bg{position:absolute;inset:0;z-index:-1}
/* Held high in the frame: when it does crop, it takes the ground, not the faces */
.page-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
/* The storefront shot is portrait, so a wide band has to hold the lower half —
   the signboard and the entrance — rather than the empty upper floors */
.page-hero__bg--store img{object-position:center 64%}
.page-hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(var(--overlay)/.9) 0%, rgba(var(--overlay)/.62) 55%, rgba(var(--overlay)/.42) 100%);
}
.page-hero__inner{
  max-width:640px;
  padding-block:clamp(var(--sp-8), 10vw, var(--sp-12));
}
.page-hero__inner h1{color:var(--white);margin-block:var(--sp-1) var(--sp-2);font-size:var(--step-4)}
.page-hero__inner h1 em{font-style:italic;color:var(--gold-soft)}
.page-hero__inner p{color:rgba(255,255,255,.9);font-size:var(--step-1);margin-bottom:var(--sp-3);max-width:48ch}
.page-hero .eyebrow{color:var(--gold-soft)}

.breadcrumb{font-size:var(--step--1);color:rgba(255,255,255,.78);margin-bottom:var(--sp-2)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:8px;opacity:.55}
.breadcrumb a{color:var(--gold-soft)}
.breadcrumb a:hover{text-decoration:underline}

/* ============================================================
   About page — story & timeline
   ============================================================ */
.about{
  display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(var(--sp-4), 5vw, var(--sp-8));align-items:center;
}
.about__media{position:relative}
.about__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
}
.about__badge{
  position:absolute;right:-12px;bottom:-20px;
  padding:var(--sp-2) var(--sp-3);text-align:center;
  background:var(--maroon);color:var(--white);
  border:2px solid var(--gold-soft);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.about__badge span{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.about__badge strong{font-family:var(--font-head);font-size:var(--step-3);color:var(--gold-soft)}

.timeline{max-width:760px;margin-inline:auto;position:relative}
.timeline__item{display:grid;grid-template-columns:72px 1fr;gap:var(--sp-3);padding-block:var(--sp-2)}
.timeline__year{
  font-family:var(--font-head);font-weight:600;font-size:var(--step-1);
  color:var(--maroon);text-align:right;padding-top:2px;
}
.timeline__body{position:relative;padding-left:var(--sp-3);border-left:2px solid var(--line)}
.timeline__body::before{
  content:"";position:absolute;left:-9px;top:10px;
  width:16px;height:16px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px var(--cotton), 0 0 0 6px var(--gold);
}
.section--alt .timeline__body::before{box-shadow:0 0 0 4px var(--ivory), 0 0 0 6px var(--gold)}
.timeline__body h3{font-size:var(--step-1);margin-bottom:2px}
.timeline__body p{color:var(--ink-soft);font-size:var(--step--1)}

/* ============================================================
   Wholesale page
   ============================================================ */
/* Cards top-align rather than stretch. The wholesale range mixes portrait and
   landscape frames in one grid, and stretching would pad the shorter cards out
   with white space under the body instead of just letting them end. */
.grid--top{align-items:start}

/* Statewide reach: the towns we despatch to, as a run of chips. Deliberately
   not a grid — the list grows and shrinks as routes change, and a wrapping
   flex row keeps it centred at any count. */
.reach{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  max-width:820px;margin-inline:auto;
}
.reach li{
  padding:9px 18px;border-radius:var(--radius-pill);
  background:var(--white);border:1px solid var(--line);
  font-size:var(--step--1);color:var(--ink-soft);
}
.reach__note{
  margin-top:var(--sp-4);text-align:center;
  font-size:var(--step--1);color:var(--ink-soft);
}

/* ============================================================
   Section responsive rules
   ============================================================ */
@media (max-width:1024px){
  /* block, not flex: the dots go back into flow below the deck here, and as a
     flex sibling they would sit beside the content and squash it */
  .hero{min-height:0;display:block}
  .hero__inner{grid-template-columns:1fr;gap:var(--sp-4);text-align:center;padding-block:var(--sp-6) var(--sp-8)}
  .hero__text{max-width:640px;margin-inline:auto}
  .hero__sub{margin-inline:auto}
  .hero__cta,.hero__badges{justify-content:center}
  .hero__deck{height:clamp(187px, 55vw, 250px);align-self:auto}
  .hero__dots{position:static;margin-top:var(--sp-3)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--6{grid-template-columns:repeat(3,1fr)}
  .about,.location{grid-template-columns:1fr}
  /* Floors: photo stacks above the directory, capped so it stays a portrait */
  .floors__layout{grid-template-columns:1fr;gap:var(--sp-4)}
  .floors__photo{max-width:520px;margin-inline:auto;width:100%}
  .stitch{grid-template-columns:1fr}
  .about__media{max-width:520px;margin-inline:auto}
  .location__map{min-height:340px}
  .location__map iframe{min-height:340px}
  /* Details first, map below — capped so it stays a box, not a band */
  .visit{grid-template-columns:1fr;text-align:left}
  .location__map--compact{max-width:520px;width:100%;margin-inline:auto}
}
@media (max-width:640px){
  :root{--gutter:var(--sp-2)}
  /* Copy is centred over the backdrop on phones, so the scrim goes flat-dark
     rather than left-weighted — see assets/images/hero/README.md. */
  .hero__scrim{background:linear-gradient(rgba(20,12,6,.66), rgba(20,12,6,.84))}
  .hero__card{width:clamp(150px, 44vw, 200px)}
  .hero__card.is-right{transform:translate(34%,-50%) scale(.78) rotateY(-22deg)}
  .hero__card.is-left{transform:translate(-134%,-50%) scale(.78) rotateY(22deg)}
  /* Two up, then the odd one centred across the full width below them */
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
  .stats__item:nth-child(2)::after{display:none}
  .stats__item:nth-child(3){grid-column:1 / -1}
  .grid--2,.grid--3{grid-template-columns:1fr}
  /* Three tiles side by side get too narrow to read at this width */
  .stylist__features{grid-template-columns:1fr;gap:10px}
  .stylist__features li{padding:var(--sp-2)}
  .grid--4{grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}
  .grid--6{grid-template-columns:repeat(2,1fr)}
  .about__badge{right:8px}
  .timeline__item{grid-template-columns:56px 1fr;gap:var(--sp-2)}
  /* Floors: drop the icon and arrow, tuck the floor number beside the name */
  .storey{grid-template-columns:auto 1fr;gap:var(--sp-2);padding:var(--sp-3) var(--sp-2)}
  .storey__icon,.storey__go{display:none}
  .storey__tab{flex-direction:row;align-items:baseline;gap:8px}
  .storey__num{font-size:var(--step-3)}
  .storey__label{margin-top:0}
}