/* Panghat Designer - site styles
   Palette taken from the logo: ink figure, antique gold thread, ivory ground,
   plus rani pink from Surat's own festive textiles for actions. */
@font-face { font-family: "Gilda Display"; src: url(../fonts/gilda-display-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mukta"; src: url(../fonts/mukta-latin-300-normal.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Mukta"; src: url(../fonts/mukta-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mukta"; src: url(../fonts/mukta-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Mukta"; src: url(../fonts/mukta-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Tiro Devanagari Hindi"; src: url(../fonts/tiro-devanagari-hindi-devanagari-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ivory: #FFFCF5;
  --stone: #EFE7D8;      /* well stone, section grounds */
  --ink: #1C1814;
  --ink-soft: #4A4239;
  --gold: #A47B37;
  --gold-soft: #D9BE86;
  --rani: #8E1B47;
  --rani-dark: #6E1236;
  --line: rgba(28, 24, 20, .14);

  --display: "Gilda Display", "Times New Roman", serif;
  --body: "Mukta", system-ui, sans-serif;
  --dev: "Tiro Devanagari Hindi", serif;

  --wrap: min(1240px, 100% - 2.5rem);
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --sec: clamp(5rem, 11vw, 9.5rem);
  --r-arch: 999px 999px 18px 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
html.lenis, html.lenis body { height: auto; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(2.2rem, 5vw, 3.9rem); }
h3 { font-size: 1.55rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--rani); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--ivory); padding: .6rem 1rem; z-index: 99; }
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.1rem; padding: .7rem 1.6rem;
  border-radius: 999px; border: 1.5px solid transparent;
  font: 500 1rem/1 var(--body); text-decoration: none; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.btn:active { transform: translateY(1px); }
.btn-rani { background: var(--rani); color: #fff; }
.btn-rani:hover { background: var(--rani-dark); }
.btn-ink { background: var(--ink); color: var(--ivory); }
.btn-ink:hover { background: #000; }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--ivory); }
.btn-wide { width: 100%; }
.link {
  font-weight: 500; text-decoration: none;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1.5px no-repeat;
  padding-bottom: 2px; transition: background-size .3s, color .2s;
}
.link:hover { color: var(--rani); background-size: 0 1.5px; background-position: 100% 100%; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: .7rem max(1.25rem, (100% - 1240px) / 2);
  transition: background .3s, box-shadow .3s, padding .3s;
}
.nav.solid { background: rgba(255, 252, 245, .92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.nav-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.nav-brand img { height: 46px; width: auto; }

.nav-links { display: flex; gap: 1.6rem; }
.nav-links a { text-decoration: none; font-weight: 500; color: var(--ink-soft); transition: color .2s; }
.nav-links a:hover { color: var(--rani); }
.nav-cta { min-height: 2.6rem; padding: .5rem 1.2rem; }
.nav-toggle { display: none; background: none; border: 0; padding: .6rem; cursor: pointer; }
.nav-toggle span:not(.sr) { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .3s; }

/* ---------- The thread ---------- */
main { position: relative; }
.thread {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: visible;
}
.thread path {
  fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
main > section { position: relative; z-index: 1; }

/* ---------- Hero ---------- */
.hero {
  width: var(--wrap); margin: 0 auto;
  min-height: 100svh;
  display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: var(--gap);
  padding: 7.5rem 0 4rem;
}
.hero-place { color: var(--gold); font-weight: 500; margin-bottom: 2.2rem; position: relative; z-index: 1; }
.hero-title { position: relative; font-size: clamp(5rem, 15.5vw, 13.5rem); line-height: .86; margin: 0 0 clamp(2.4rem, 5vw, 3.6rem) -.04em; letter-spacing: -.035em; }
.hero-word { position: relative; display: inline-block; white-space: nowrap; }
.hero-word .ch { display: inline-block; }
.hero-dev {
  position: absolute; right: -.1em; top: -.2em; z-index: -1;
  font: .95em/1 var(--dev); color: var(--stone); letter-spacing: 0; white-space: nowrap; opacity: .9;
  -webkit-user-select: none; user-select: none;
}
.hero-line { font: clamp(1.5rem, 2.6vw, 2.1rem)/1.2 var(--display); margin-bottom: 1rem; }
.hero-text { max-width: 33rem; color: var(--ink-soft); font-size: 1.15rem; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero-arch { margin: 0; justify-self: end; width: min(100%, 420px); }
.arch {
  position: relative; aspect-ratio: 4 / 5.6; border-radius: var(--r-arch); overflow: hidden;
  background: var(--rani); box-shadow: 0 0 0 10px var(--ivory), 0 0 0 11px var(--gold);
}
.arch .swatch, .arch-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arch-figure {
  position: absolute; left: 50%; bottom: 0; width: 64%; transform: translateX(-50%);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.4));
}
.hero-arch figcaption { margin-top: 1.6rem; text-align: center; color: var(--ink-soft); font-size: .95rem; }
.spool { position: absolute; right: 2%; top: 92px; width: 34px; opacity: .9; }
.spool rect { fill: var(--ink); }
.spool line { stroke: var(--gold); stroke-width: 2; }

/* ---------- Section head ---------- */
.sec-head { width: var(--wrap); margin: 0 auto clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: end; }
.sec-head p { color: var(--ink-soft); max-width: 34rem; margin: 0; font-size: 1.1rem; }

/* ---------- Tiers ---------- */
.tiers { padding: var(--sec) 0; }
.tier-row { width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1.5px solid var(--ink); }
.tier { padding: 2rem clamp(1rem, 2.5vw, 2.5rem) 2.2rem; border-right: 1px solid var(--line); background: var(--ivory); }
.tier:first-child { padding-left: 0; }
.tier:last-child { border-right: 0; padding-right: 0; }
.tier h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: .3rem; }
.tier-for { color: var(--gold); font-weight: 500; margin-bottom: 1.4rem; }
.tier ul { list-style: none; padding: 0; margin: 0 0 1.8rem; }
.tier li { padding: .55rem 0 .55rem 1.5rem; border-bottom: 1px dashed var(--line); position: relative; }
.tier li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: .7rem; height: 1.5px; background: var(--gold); }

/* ---------- Collections rail ---------- */
.collections { padding: var(--sec) 0; background: var(--stone); z-index: 2; }
.rail {
  display: flex; gap: clamp(1rem, 2.4vw, 2rem);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 0 max(1.25rem, (100% - 1240px) / 2) 2rem;
  scrollbar-width: thin; scrollbar-color: var(--gold) transparent;
  scroll-padding-inline: max(1.25rem, (100% - 1240px) / 2);
  cursor: grab;
}
.rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.dragging * { pointer-events: none; }
.col-card { flex: 0 0 clamp(250px, 27vw, 340px); scroll-snap-align: start; }
.col-art {
  position: relative; aspect-ratio: 4 / 5.2; border-radius: var(--r-arch); overflow: hidden; margin-bottom: 1.3rem;
  box-shadow: 0 0 0 6px var(--stone), 0 0 0 7px var(--gold-soft);
}
.col-art .swatch, .col-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.col-card:hover .col-art .swatch, .col-card:hover .col-art img { transform: scale(1.05); }
.col-card h3 { margin-bottom: .4rem; }
.col-card p { color: var(--ink-soft); font-size: 1rem; min-height: 3.3em; }

/* ---------- Story ---------- */
.story { width: var(--wrap); margin: 0 auto; padding: var(--sec) 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 7rem); }
.story-copy h2 { margin-bottom: 1.8rem; }
.story-copy p { font-size: 1.15rem; line-height: 1.75; color: var(--ink-soft); max-width: 36rem; }
.story-copy blockquote {
  margin: 2.4rem 0 0; padding: 1.6rem 0 0; border-top: 1.5px solid var(--gold);
  font: clamp(1.5rem, 2.5vw, 2rem)/1.3 var(--display); max-width: 30rem;
}
.timeline { list-style: none; margin: 0; padding: .4rem 0 0 2.2rem; border-left: 1.5px solid var(--gold); align-self: start; }
.timeline li { position: relative; padding-bottom: 2.6rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: calc(-2.2rem - 7px); top: .35rem;
  width: 12px; height: 12px; border-radius: 50%; background: var(--ivory); border: 2px solid var(--gold);
}
.tl-when { display: block; color: var(--gold); font-weight: 600; margin-bottom: .3rem; }
.timeline h3 { margin-bottom: .45rem; }
.timeline p { color: var(--ink-soft); margin: 0; max-width: 30rem; }

/* ---------- Numbers ---------- */
.numbers {
  background: var(--ink); color: var(--ivory);
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: clamp(3rem, 6vw, 5rem) max(1.25rem, (100% - 1240px) / 2);
  gap: var(--gap);
}
.num strong { display: block; font: clamp(2.6rem, 5vw, 4.2rem)/1 var(--display); color: var(--gold-soft); margin-bottom: .6rem; }
.num span { color: rgba(255,252,245,.75); }

/* ---------- Factory ---------- */
.factory { width: var(--wrap); margin: 0 auto; padding: var(--sec) 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); }
.factory-intro { position: sticky; top: 7rem; align-self: start; }
.factory-intro h2 { margin-bottom: 1.4rem; }
.factory-intro p { color: var(--ink-soft); font-size: 1.15rem; max-width: 30rem; }
.factory-photo { margin-top: 2rem; border-radius: var(--r-arch); aspect-ratio: 4/5; object-fit: cover; width: 100%; max-width: 360px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.5rem, 3vw, 3rem); }
.steps li { padding: 1.8rem 0 2rem; border-top: 1px solid var(--line); background: var(--ivory); }
.step-n { display: block; font: 3.2rem/1 var(--display); color: var(--gold); margin-bottom: .9rem; }
.steps h3 { margin-bottom: .5rem; }
.steps p { color: var(--ink-soft); margin: 0; }

/* ---------- Visit ---------- */
.visit { width: var(--wrap); margin: 0 auto; padding: 0 0 var(--sec); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.visit-sub { color: var(--ink-soft); font-size: 1.15rem; max-width: 30rem; margin: 1.2rem 0 2rem; }
.visit dl { display: grid; grid-template-columns: 5.5rem 1fr; gap: .8rem 1rem; margin: 0 0 2.2rem; }
.visit dt { color: var(--gold); font-weight: 600; }
.visit dd { margin: 0; }
.visit dd a { text-decoration: none; }
.visit-media { position: relative; }
.visit-media iframe { width: 100%; aspect-ratio: 1 / 1; border: 0; border-radius: var(--r-arch); filter: grayscale(.85) sepia(.15) contrast(1.05); box-shadow: 0 0 0 8px var(--ivory), 0 0 0 9px var(--gold); background: var(--stone); }
.store-photo { width: 46%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-arch); position: absolute; left: -12%; bottom: -8%; box-shadow: 0 0 0 8px var(--ivory); z-index: 2; }

/* ---------- Inquiry ---------- */
.inquiry {
  background: var(--stone); padding: var(--sec) max(1.25rem, (100% - 1240px) / 2);
  display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.inq-copy { position: sticky; top: 7rem; }
.inq-copy h2 { margin-bottom: 1.4rem; }
.inq-copy p { color: var(--ink-soft); font-size: 1.15rem; max-width: 30rem; }
.inq-alt a { font-weight: 500; }
.inq-form, .inq-done { background: var(--ivory); border-radius: 22px; padding: clamp(1.5rem, 4vw, 2.8rem); box-shadow: 0 30px 60px -40px rgba(28,24,20,.45); }
.inq-form fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.inq-form legend { font-weight: 600; margin-bottom: .6rem; padding: 0; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span { display: inline-block; padding: .5rem 1.05rem; border-radius: 999px; border: 1.5px solid var(--line); transition: all .2s; font-weight: 500; }
.pill input:checked + span { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.pill input:focus-visible + span { outline: 2px solid var(--rani); outline-offset: 2px; }
.pill:hover span { border-color: var(--ink); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.field { display: block; margin-bottom: 1.2rem; }
.field > span { display: block; font-weight: 500; font-size: .95rem; margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--line);
  padding: .55rem 0; border-radius: 0; transition: border-color .2s;
}
.field select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A47B37' stroke-width='1.6'/%3E%3C/svg%3E") right .2rem center no-repeat; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--rani); }
.field.bad input { border-bottom-color: #b3261e; }
[data-trade] { transition: opacity .3s; }
.is-retail [data-trade] { opacity: .45; }
.hp { position: absolute; left: -5000px; }
.form-note { margin: .9rem 0 0; min-height: 1.4em; font-size: .95rem; color: #b3261e; }
.btn[disabled] { opacity: .65; pointer-events: none; }
.inq-done { text-align: center; }
.inq-done img { margin: 0 auto 1rem; }
.inq-done h3 { font-size: 2.2rem; margin-bottom: .8rem; }
.inq-done p { color: var(--ink-soft); max-width: 26rem; margin: 0 auto 1.6rem; }

/* ---------- Footer ---------- */
.foot { background: var(--ivory); padding: clamp(3.5rem, 7vw, 5.5rem) max(1.25rem, (100% - 1240px) / 2) 2rem; display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 6vw, 6rem); }
.foot-logo { width: 150px; height: auto; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.foot h4 { font-size: 1.2rem; margin-bottom: .8rem; }
.foot p { color: var(--ink-soft); font-size: .98rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--rani); }
.foot-legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.4rem; margin: 0; font-size: .9rem; color: var(--ink-soft); }

.wa-float {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; background: #1f8f4e; display: grid; place-items: center;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.5); transition: transform .25s;
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 28px; fill: #fff; }

/* ---------- Motion (JS adds .js) ---------- */
.js .hero-word .ch { transform: translateY(105%); opacity: 0; }
.js .hero-place, .js .hero-line, .js .hero-text, .js .hero-actions, .js .hero-arch, .js .hero-dev { opacity: 0; }
.js .thread path { stroke-dashoffset: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .nav-links { position: fixed; inset: 0 0 auto; top: 0; flex-direction: column; gap: 0; padding: 5.5rem 1.5rem 2rem; background: var(--ivory); box-shadow: 0 20px 40px -30px rgba(0,0,0,.4); transform: translateY(-105%); transition: transform .45s cubic-bezier(.2,.7,.2,1); z-index: -1; }
  .nav-links a { font: 1.8rem/1 var(--display); color: var(--ink); padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .nav.open .nav-links { transform: none; }
  .nav.open { background: var(--ivory); }
  .nav-toggle { display: block; }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
  .hero { grid-template-columns: 1fr; padding-top: 6.5rem; min-height: auto; }
  .hero-arch { justify-self: start; width: min(100%, 360px); }
  .spool { display: none; }
  .sec-head, .story, .factory, .visit, .inquiry { grid-template-columns: 1fr; }
  .factory-intro, .inq-copy { position: static; }
  .steps { grid-template-columns: 1fr 1fr; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .foot { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .store-photo { left: auto; right: 4%; width: 38%; }
}
@media (max-width: 700px) {
  .nav-cta { display: none; }
  .tier-row { grid-template-columns: 1fr; }
  .tier, .tier:first-child, .tier:last-child { padding: 1.8rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .visit dl { grid-template-columns: 1fr; gap: .1rem; }
  .visit dt { margin-top: .6rem; }
  .thread { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .hero-word .ch, .js .hero-place, .js .hero-line, .js .hero-text, .js .hero-actions, .js .hero-arch, .js .hero-dev { opacity: 1; transform: none; }
  .js .thread path { stroke-dashoffset: 0; }
}

/* ---------- Shared extras ---------- */
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-line-light { border-color: rgba(255,252,245,.6); color: var(--ivory); }
.btn-line-light:hover { background: var(--ivory); color: var(--ink); }
main > section.band { z-index: 1; }

/* ---------- Retail: occasions ---------- */
.occasions { padding: var(--sec) 0 calc(var(--sec) * .8); }
.occ-grid { width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.4vw, 2rem); }
.occ { text-decoration: none; display: grid; gap: .35rem; background: var(--ivory); }
.occ-art { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 999px 999px 14px 14px; overflow: hidden; margin-bottom: .9rem; }
.occ-art .swatch { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.occ:hover .occ-art .swatch { transform: scale(1.06); }
.occ-name { font: clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--display); }
.occ:hover .occ-name { color: var(--rani); }
.occ-text { color: var(--ink-soft); font-size: 1rem; }

/* ---------- Retail: promise ---------- */
.promise { padding: var(--sec) 0; }
.promise-row { width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 4rem); }
.promise-item { border-top: 1.5px solid var(--gold); padding-top: 1.4rem; background: var(--ivory); }
.promise-item h3 { margin-bottom: .6rem; }
.promise-item p { color: var(--ink-soft); margin: 0; }
.occasion-pick { border: 0; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Retail: trade band ---------- */
.trade-band {
  background: var(--ink); color: var(--ivory);
  padding: clamp(3rem, 6vw, 4.5rem) max(1.25rem, (100% - 1240px) / 2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem;
}
.trade-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: .6rem; }
.trade-band p { color: rgba(255,252,245,.75); margin: 0; max-width: 38rem; }

/* ---------- Manufacturing ---------- */
.site-manufacturing .nav:not(.solid):not(.open) .nav-links a { color: var(--ivory); }
.site-manufacturing .nav:not(.solid):not(.open) .nav-toggle span:not(.sr) { background: var(--ivory); }

.mhero {
  position: relative; overflow: hidden; background: var(--ink); color: var(--ivory);
  padding: clamp(8rem, 14vw, 10.5rem) max(1.25rem, (100% - 1240px) / 2) clamp(3rem, 6vw, 4.5rem);
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
}
/* Warp threads of a loom: fine vertical gold lines, fading toward the bottom */
.loom {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(164,123,55,.22) 0 1px, transparent 1px 22px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
}
.weft { position: relative; display: block; height: 2px; margin-bottom: calc(-1 * clamp(2.5rem, 5vw, 4rem) + 1.8rem); background: linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold-soft) 50%, var(--gold) 88%, transparent); transform-origin: left center; }
.mhero-inner { position: relative; max-width: 60rem; }
.mhero-kicker { color: var(--gold-soft); font-weight: 500; margin-bottom: 1.6rem; }
.mhero-title { font-size: clamp(2.6rem, 6.6vw, 5.6rem); line-height: 1.02; letter-spacing: -.02em; margin-bottom: 1.8rem; text-wrap: balance; }
.mhero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.mhero-title .w > span { display: inline-block; }
.mhero-text { color: rgba(255,252,245,.78); font-size: 1.18rem; max-width: 40rem; margin-bottom: 2.2rem; }
.mstats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin: 0; }
.mstats dt { font: clamp(2.2rem, 4.2vw, 3.4rem)/1 var(--display); color: var(--gold-soft); margin-bottom: .5rem; }
.mstats dd { margin: 0; color: rgba(255,252,245,.7); }
.site-manufacturing .spool { display: none; }

.tier-row.two { grid-template-columns: 1fr 1fr; }

.range { padding: var(--sec) 0; background: var(--stone); }
.range-grid { width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1rem; }
.range-item { display: grid; grid-template-columns: 96px 1fr; gap: 1.2rem; align-items: center; padding: 1rem; border-radius: 14px; background: var(--ivory); text-decoration: none; transition: transform .3s, box-shadow .3s; }
.range-item:hover { transform: translateY(-3px); box-shadow: 0 20px 30px -24px rgba(28,24,20,.5); }
.range-art { position: relative; display: block; width: 96px; aspect-ratio: 4/5; border-radius: 999px 999px 8px 8px; overflow: hidden; }
.range-art .swatch, .range-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.range-body b { display: block; font: 400 1.45rem/1.15 var(--display); margin-bottom: .3rem; }
.range-body span { color: var(--ink-soft); font-size: .98rem; }
.range-item:hover b { color: var(--rani); }

.terms { padding: var(--sec) 0 calc(var(--sec) * .6); }
.terms-list { width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 5rem); }
.terms-list > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--line); background: var(--ivory); }
.terms-list dt { font: 1.2rem/1.3 var(--display); color: var(--gold); }
.terms-list dd { margin: 0; }

.faq { padding: var(--sec) max(1.25rem, (100% - 1240px) / 2); background: var(--stone); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); }
.faq-list details { border-top: 1px solid var(--line); padding: 1.1rem 0; }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; font: 1.3rem/1.3 var(--display); display: flex; justify-content: space-between; gap: 1rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--gold); font-family: var(--body); font-size: 1.5rem; line-height: 1; transition: transform .3s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list p { color: var(--ink-soft); margin: .8rem 0 0; max-width: 40rem; }
.site-manufacturing .inquiry { background: var(--ivory); }
.site-manufacturing .inq-form, .site-manufacturing .inq-done { background: var(--stone); box-shadow: none; }
.site-manufacturing .inq-form .field input, .site-manufacturing .inq-form .field select, .site-manufacturing .inq-form .field textarea { border-bottom-color: rgba(28,24,20,.22); }

.js .mhero-kicker, .js .mhero-title, .js .mhero-text, .js .mhero .hero-actions { opacity: 0; }

@media (max-width: 1020px) {
  .occ-grid { grid-template-columns: 1fr 1fr; }
  .promise-row { grid-template-columns: 1fr; }
  .mstats { grid-template-columns: 1fr 1fr; }
  .terms-list { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .tier-row.two { grid-template-columns: 1fr; }
  .terms-list > div { grid-template-columns: 1fr; gap: .3rem; }
  .occ-art { aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mhero-kicker, .js .mhero-title, .js .mhero-text, .js .mhero .hero-actions { opacity: 1; }
}

/* ---------- Brand lockups ---------- */
.lockup { display: inline-grid; line-height: 1; }
.lockup b { font: 400 1.45rem/1 var(--display); letter-spacing: -.005em; }
.lockup small { font: 600 .62rem/1 var(--body); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin-top: .3rem; padding-left: .1em; }
.lockup.big b { font-size: 2.4rem; }
.lockup.big small { font-size: .78rem; margin-top: .45rem; }
.nav-brand .mark-thread { height: auto; width: 84px; }
.nav-brand .mark-thread.on-dark { display: none; }
.site-manufacturing .nav:not(.solid):not(.open) .mark-thread.on-light { display: none; }
.site-manufacturing .nav:not(.solid):not(.open) .mark-thread.on-dark { display: block; }
.site-manufacturing .nav:not(.solid):not(.open) .lockup b { color: var(--ivory); }
.mhero-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.mhero-kicker img { width: 150px; height: auto; }
.foot-mfg { display: grid; gap: 1rem; align-content: start; }
.foot-mfg img { width: 190px; height: auto; }
@media (max-width: 700px) { .nav-brand .mark-thread { width: 64px; } .lockup b { font-size: 1.25rem; } }

/* ---------- Retail shop (v3) ---------- */
.announce { background: var(--rani); color: #fff; text-align: center; font-size: .92rem; padding: .45rem 1rem; position: relative; z-index: 51; }
.announce p { margin: 0; }
.announce a { color: #fff; font-weight: 600; }
.site-retail .nav { top: 0; }
.site-retail .nav:not(.solid) { position: absolute; top: 2.1rem; }

.shero {
  width: var(--wrap); margin: 0 auto; position: relative;
  display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding: clamp(7.5rem, 11vw, 9rem) 0 clamp(3rem, 6vw, 5rem);
}
.shero .hero-title { font-size: clamp(4.6rem, 11.5vw, 10.5rem); }
.shero .hero-text { margin-bottom: 1.8rem; }
.trust { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; color: var(--ink-soft); font-size: .95rem; }
.trust li { display: flex; align-items: center; gap: .5rem; }
.trust li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

.collage { position: relative; height: clamp(440px, 46vw, 640px); }
.cl { position: absolute; margin: 0; overflow: hidden; border-radius: var(--r-arch); box-shadow: 0 30px 60px -36px rgba(28,24,20,.6); background: var(--stone); }
.cl img, .cl .swatch { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.cl-1 { left: 22%; top: 0; width: 52%; height: 92%; z-index: 2; box-shadow: 0 0 0 8px var(--ivory), 0 0 0 9px var(--gold), 0 40px 70px -40px rgba(28,24,20,.7); }
.cl-2 { left: 0; bottom: 0; width: 34%; height: 58%; z-index: 1; }
.cl-3 { right: 0; top: 14%; width: 34%; height: 60%; z-index: 1; }

.cats { padding: 0 0 clamp(3rem, 6vw, 4.5rem); }
.cat-row { width: var(--wrap); margin: 0 auto; display: flex; gap: clamp(1rem, 3vw, 2.4rem); overflow-x: auto; scrollbar-width: none; padding: .6rem .2rem 1rem; justify-content: space-between; }
.cat-row::-webkit-scrollbar { display: none; }
.cat { flex: 0 0 auto; display: grid; justify-items: center; gap: .7rem; text-decoration: none; width: clamp(96px, 12vw, 150px); }
.cat-img { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--ivory), 0 0 0 4.5px var(--gold-soft); transition: box-shadow .3s; }
.cat-img img, .cat-img .swatch { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform .6s; }
.cat:hover .cat-img { box-shadow: 0 0 0 3px var(--ivory), 0 0 0 5px var(--rani); }
.cat:hover .cat-img img { transform: scale(1.08); }
.cat-name { font: 1.1rem/1.2 var(--display); text-align: center; }

.shop { padding: var(--sec) 0; background: var(--stone); }
.shop-head { width: var(--wrap); margin: 0 auto 2.2rem; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.2rem 2rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { font: 500 .95rem/1 var(--body); padding: .6rem 1rem; border-radius: 999px; border: 1.5px solid rgba(28,24,20,.2); background: transparent; color: var(--ink); cursor: pointer; transition: all .2s; }
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.grid { width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.prod { background: var(--ivory); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .35s, box-shadow .35s; }
.prod:hover { transform: translateY(-4px); box-shadow: 0 28px 40px -30px rgba(28,24,20,.55); }
.prod[hidden] { display: none; }
.prod-img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.prod-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.prod:hover .prod-img img { transform: scale(1.06); }
.tag { position: absolute; left: .8rem; top: .8rem; background: var(--ivory); color: var(--rani); font-weight: 600; font-size: .8rem; padding: .25rem .65rem; border-radius: 999px; }
.prod-quick { position: absolute; left: .8rem; right: .8rem; bottom: .8rem; text-align: center; background: rgba(28,24,20,.86); color: var(--ivory); font-weight: 500; font-size: .92rem; padding: .7rem; border-radius: 999px; transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.prod:hover .prod-quick, .prod-img:focus-visible .prod-quick { transform: none; }
.prod-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.prod-cat { color: var(--gold); font-weight: 600; font-size: .85rem; margin: 0 0 .25rem; }
.prod h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.prod-det { color: var(--ink-soft); font-size: .93rem; line-height: 1.5; margin: 0 0 1rem; }
.prod-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .8rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.price { font-weight: 600; }
.shop-more { width: var(--wrap); margin: 2.2rem auto 0; color: var(--ink-soft); }
.shop-more a { color: var(--rani); font-weight: 500; }

.vcall { width: var(--wrap); margin: 0 auto; padding: var(--sec) 0; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.vcall-media { position: relative; height: clamp(420px, 44vw, 600px); }
.vcall-media img { position: absolute; width: 44%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 50px -34px rgba(28,24,20,.7); border: 6px solid var(--ivory); }
.vc-1 { left: 0; top: 8%; z-index: 1; transform: rotate(-4deg); }
.vc-2 { left: 28%; top: 0; z-index: 3; }
.vc-3 { left: 56%; top: 10%; z-index: 2; transform: rotate(4deg); }
.vsteps { list-style: none; counter-reset: vs; padding: 0; margin: 0 0 2rem; display: grid; gap: 1.1rem; }
.vsteps li { counter-increment: vs; display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 1rem; background: var(--ivory); }
.vsteps li::before { content: counter(vs); grid-row: span 2; font: 2.2rem/1 var(--display); color: var(--gold); }
.vsteps h3 { font-size: 1.3rem; margin-bottom: .2rem; }
.vsteps p { margin: 0; color: var(--ink-soft); }

.site-retail .visit-media iframe { aspect-ratio: 4 / 3.4; }
.site-retail .store-photo { width: 40%; aspect-ratio: 9 / 16; left: -10%; bottom: -10%; }

@media (max-width: 1020px) {
  .shero { grid-template-columns: 1fr; }
  .collage { height: 520px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .vcall { grid-template-columns: 1fr; }
  .cat-row { justify-content: flex-start; }
  .site-retail .nav:not(.solid) { top: 2.6rem; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .prod-body { padding: .8rem .8rem 1rem; }
  .prod h3 { font-size: 1.08rem; }
  .prod-det { display: none; }
  .prod-foot { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .collage { height: 430px; }
  .vcall-media { height: 380px; }
  .announce { font-size: .82rem; }
}
.js .collage .cl { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js .collage .cl { opacity: 1; } }

/* ---------- Reels ---------- */
.reels { padding: var(--sec) 0 calc(var(--sec) * .5); }
.reels-head { width: var(--wrap); margin: 0 auto 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem; }
.reels-head p { color: var(--ink-soft); max-width: 30rem; margin: 0; }
.reels-head a { color: var(--rani); font-weight: 500; }
.reel-row { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .4rem max(1.25rem, (100% - 1240px) / 2) 1.5rem; scroll-padding-inline: max(1.25rem, (100% - 1240px) / 2); scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
.reel { position: relative; flex: 0 0 clamp(170px, 19vw, 230px); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; scroll-snap-align: start; background: var(--ink); box-shadow: 0 24px 40px -30px rgba(28,24,20,.7); }
.reel img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.reel:hover img { transform: scale(1.05); }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(28,24,20,.55)); }
.reel-blank { display: grid; place-items: center; height: 100%; background: var(--rani); }
.reel-blank img { width: 40%; height: auto; }
.reel-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(255,252,245,.9); display: grid; place-items: center; z-index: 1; transition: transform .3s; }
.reel:hover .reel-play { transform: scale(1.1); }
.reel-play svg { width: 24px; fill: var(--rani); margin-left: 3px; }
.reel-modal { position: fixed; inset: 0; z-index: 90; background: rgba(28,24,20,.82); display: grid; place-items: center; padding: 1rem; }
.reel-modal[hidden] { display: none; }
.reel-modal-box { position: relative; width: min(420px, 100%); background: var(--ivory); border-radius: 18px; padding: 2.6rem .8rem 1rem; text-align: center; }
.reel-frame { width: 100%; height: min(78vh, 720px); border-radius: 10px; overflow: hidden; background: var(--stone); }
.reel-frame iframe { width: 100%; height: 100%; border: 0; }
.reel-close { position: absolute; right: .6rem; top: .4rem; background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--ink); }
.reel-open { display: inline-block; margin-top: .8rem; }
.more-wrap { width: var(--wrap); margin: 2.4rem auto 0; text-align: center; position: relative; z-index: 2; }
.more-wrap[hidden] { display: none; }

/* ---------- Retail stylist form ---------- */
.stylist { background: var(--stone); padding: var(--sec) max(1.25rem, (100% - 1240px) / 2); }
.sty-card { display: grid; grid-template-columns: .82fr 1.18fr; background: var(--ivory); border-radius: 28px; overflow: hidden; box-shadow: 0 50px 80px -60px rgba(28,24,20,.55); }

.sty-side { position: relative; min-height: 100%; color: var(--ivory); display: flex; align-items: flex-end; isolation: isolate; }
.sty-side > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; z-index: -2; }
.sty-side::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28,24,20,.05) 0%, rgba(28,24,20,.35) 40%, rgba(43,14,28,.92) 100%); }
.sty-side-copy { padding: clamp(1.6rem, 3.5vw, 2.8rem); }
.sty-kicker { color: var(--gold-soft); font-weight: 600; margin: 0 0 .6rem; }
.sty-side h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 1rem; text-wrap: balance; }
.sty-side-copy > p { color: rgba(255,252,245,.82); max-width: 26rem; margin-bottom: 1.6rem; }
.sty-promise { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; border-top: 1px solid rgba(255,252,245,.22); padding-top: 1.4rem; }
.sty-promise li { display: grid; grid-template-columns: 1.6rem 1fr; column-gap: .6rem; }
.sty-promise li::before { content: ""; grid-row: span 2; width: 1.1rem; height: 1.1rem; margin-top: .25rem; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%231C1814' stroke-width='2'/%3E%3C/svg%3E") center / 80% no-repeat; }
.sty-promise b { font-weight: 600; }
.sty-promise span { color: rgba(255,252,245,.7); font-size: .93rem; }

.sty-main { padding: clamp(1.6rem, 4vw, 3.2rem); }
.sty-form { display: grid; gap: 2rem; }
.sty-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.sty-step legend { display: flex; align-items: center; gap: .8rem; font: 1.45rem/1.2 var(--display); margin-bottom: 1rem; padding: 0; }
.sty-n { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); display: grid; place-items: center; font: 600 .95rem/1 var(--body); transition: background .3s, color .3s; }
.sty-step.done .sty-n { background: var(--gold); color: var(--ivory); }
.sty-sub { font-weight: 600; font-size: .95rem; margin: 1.3rem 0 .6rem; }

.occ-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.occ-tile { position: relative; cursor: pointer; }
.occ-tile input { position: absolute; opacity: 0; }
.occ-tile span { display: grid; gap: .2rem; height: 100%; padding: .85rem .8rem; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; transition: border-color .2s, background .2s, transform .2s; }
.occ-tile b { font: 1.15rem/1.15 var(--display); font-weight: 400; }
.occ-tile small { color: var(--ink-soft); font-size: .8rem; line-height: 1.3; }
.occ-tile:hover span { border-color: var(--gold); transform: translateY(-2px); }
.occ-tile input:checked + span { border-color: var(--rani); background: #fbeef3; box-shadow: inset 0 0 0 1px var(--rani); }
.occ-tile input:checked + span b { color: var(--rani); }
.occ-tile input:focus-visible + span, .sty-chip input:focus-visible + span, .sty-seg input:focus-visible + span { outline: 2px solid var(--rani); outline-offset: 2px; }

.sty-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.sty-chip { position: relative; cursor: pointer; }
.sty-chip input { position: absolute; opacity: 0; }
.sty-chip span { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 500; font-size: .95rem; transition: all .2s; }
.sty-chip:hover span { border-color: var(--ink); }
.sty-chip input:checked + span { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.sty-chip input[type=checkbox]:checked + span::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold-soft); }

.sty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: .9rem; }
.sty-field { position: relative; display: block; }
.sty-field input, .sty-field textarea {
  width: 100%; font: 400 1rem/1.3 var(--body); color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 1.45rem 1rem .55rem; transition: border-color .2s, box-shadow .2s;
}
.sty-field textarea { resize: vertical; min-height: 6.5rem; }
.sty-field > span { position: absolute; left: 1rem; top: 1.05rem; color: var(--ink-soft); pointer-events: none; transition: transform .2s, color .2s, font-size .2s; transform-origin: left top; }
.sty-field input:focus, .sty-field textarea:focus { outline: 0; border-color: var(--rani); box-shadow: 0 0 0 4px rgba(142,27,71,.1); }
.sty-field input:focus + span, .sty-field input:not(:placeholder-shown) + span,
.sty-field textarea:focus + span, .sty-field textarea:not(:placeholder-shown) + span,
.sty-field > span.is-up { transform: translateY(-.62rem); font-size: .78rem; color: var(--gold); font-weight: 600; }
.sty-field.bad input { border-color: #b3261e; }
.sty-area { margin-top: .9rem; }

.sty-seg { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: .3rem; gap: .3rem; }
.sty-seg label { position: relative; cursor: pointer; }
.sty-seg input { position: absolute; opacity: 0; }
.sty-seg span { display: block; text-align: center; padding: .65rem .4rem; border-radius: 10px; font-weight: 500; font-size: .95rem; transition: background .2s, color .2s; }
.sty-seg input:checked + span { background: var(--ink); color: var(--ivory); }

.sty-submit { display: grid; gap: .6rem; }
.sty-btn { min-height: 3.6rem; font-size: 1.05rem; }
.sty-btn svg { width: 22px; fill: currentColor; }
.sty-fine { color: var(--ink-soft); font-size: .88rem; text-align: center; margin: 0; }
.sty-main .form-note { text-align: center; margin: 0; }
.sty-main .inq-done { box-shadow: none; padding: clamp(2rem, 6vw, 4rem) 1rem; }

@media (max-width: 1020px) {
  .sty-card { grid-template-columns: 1fr; }
  .sty-side { min-height: 420px; }
  .occ-tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .stylist { padding-left: .75rem; padding-right: .75rem; }
  .sty-card { border-radius: 22px; }
  .sty-side { min-height: 460px; }
  .occ-tiles { grid-template-columns: 1fr 1fr; }
  .sty-grid { grid-template-columns: 1fr; }
  .sty-seg span { font-size: .85rem; padding: .6rem .2rem; }
}
.sty-form[hidden] { display: none; }
.sty-main { display: flex; flex-direction: column; justify-content: center; }
.sty-card { min-height: 760px; }
@media (max-width: 1020px) {
  .sty-card { min-height: 0; }
  .sty-side { display: block; min-height: 0; background: #2b0e1c; }
  .sty-side > img { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3.3; object-position: center 18%; z-index: 0; display: block; }
  .sty-side::before { inset: 0 0 auto; height: calc(100% - 100% + 0px); display: none; }
  .sty-side-copy { position: relative; margin-top: -5rem; padding-top: 5rem; background: linear-gradient(180deg, rgba(43,14,28,0) 0, #2b0e1c 5rem); }
}
@media (max-width: 560px) {
  .sty-side { min-height: 0; }
  .sty-side > img { aspect-ratio: 4 / 4.2; }
}

/* ---------- Same logo on both sites ---------- */
.mark-badge { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; transition: background .3s; }
.mark-badge img { height: 44px; width: auto; }
.site-manufacturing .nav:not(.solid):not(.open) .mark-badge { background: var(--ivory); box-shadow: 0 0 0 2px var(--gold); }
.site-manufacturing .nav:not(.solid):not(.open) .mark-badge img { height: 38px; }
.foot-brand { display: grid; justify-items: start; gap: .6rem; align-content: start; }
.foot-unit { font: 600 .72rem/1 var(--body); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); padding-left: .2rem; }

/* ---------- Reviews ---------- */
.reviews { padding: calc(var(--sec) * .7) 0 var(--sec); }
.rev-head { width: var(--wrap); margin: 0 auto 2.2rem; display: grid; grid-template-columns: auto 1fr; gap: 1.5rem clamp(2rem, 5vw, 4.5rem); align-items: center; }
.rev-head p { color: var(--ink-soft); margin: .6rem 0 0; }
.rev-score { display: grid; justify-items: center; gap: .35rem; padding: 1.4rem 2rem; border-radius: 22px; background: var(--ink); color: var(--ivory); }
.rev-score strong { font: 3.4rem/1 var(--display); color: var(--gold-soft); }
.rev-count { font-size: .88rem; color: rgba(255,252,245,.75); }
.stars { display: inline-flex; gap: 3px; }
.stars i { width: 16px; height: 16px; background: rgba(164,123,55,.3); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars i.on { background: #E8B04B; }
.stars.sm i { width: 14px; height: 14px; }
.rev-row { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .4rem max(1.25rem, (100% - 1240px) / 2) 1.5rem; scroll-padding-inline: max(1.25rem, (100% - 1240px) / 2); scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
.rev { flex: 0 0 clamp(270px, 30vw, 360px); scroll-snap-align: start; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.rev blockquote { margin: 0; font: 1.15rem/1.5 var(--display); flex: 1; }
.rev figcaption { display: flex; align-items: center; gap: .7rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.rev-av { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--rani); color: #fff; display: grid; place-items: center; font-weight: 600; }
.rev figcaption small { display: block; color: var(--ink-soft); font-size: .82rem; }
.rev-actions { width: var(--wrap); margin: 1rem auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }

/* ---------- Trade band v2 ---------- */
.trade-band { align-items: center; }
.tb-copy { max-width: 46rem; }
.tb-list { list-style: none; padding: 0; margin: 1.3rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tb-list li { border: 1px solid rgba(255,252,245,.25); border-radius: 999px; padding: .35rem .9rem; font-size: .92rem; color: rgba(255,252,245,.88); }
.tb-cta { display: grid; gap: .8rem; justify-items: start; }
.tb-sub { color: var(--gold-soft); font-size: .95rem; }

@media (max-width: 700px) {
  .rev-head { grid-template-columns: 1fr; }
  .rev-score { justify-self: start; grid-template-columns: auto auto; column-gap: 1rem; padding: 1rem 1.3rem; }
  .rev-score strong { grid-row: span 2; font-size: 2.6rem; }
}

/* ---------- Manufacturing inquiry: steps + contact cards ---------- */
.inq-steps { list-style: none; counter-reset: is; padding: 0; margin: 1.8rem 0 2.2rem; display: grid; gap: 1rem; }
.inq-steps li { counter-increment: is; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .9rem; }
.inq-steps li::before { content: counter(is); grid-row: span 2; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); display: grid; place-items: center; font-weight: 600; }
.inq-steps b { font-weight: 600; }
.inq-steps span { color: var(--ink-soft); font-size: .95rem; }
.talk-label { font-weight: 600; margin: 0 0 .7rem; }
.talk { display: grid; gap: .7rem; max-width: 26rem; }
.talk-card { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; border-radius: 16px; text-decoration: none; border: 1.5px solid var(--line); background: #fff; transition: transform .25s, box-shadow .25s, border-color .25s; }
.talk-card:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -24px rgba(28,24,20,.6); border-color: var(--gold); }
.talk-card b { display: block; font-weight: 600; }
.talk-card small { color: var(--ink-soft); font-size: .88rem; }
.talk-ic { flex: 0 0 auto; width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; }
.talk-ic svg { width: 1.4rem; fill: #fff; }
.talk-card.wa .talk-ic { background: #1f8f4e; }
.talk-card.call .talk-ic { background: var(--ink); }
.talk-card.call .talk-ic svg { fill: var(--gold-soft); }

/* ---------- Bigger header logo ---------- */
.nav-brand { gap: .85rem; }
.mark-badge { width: 66px; height: 66px; }
.mark-badge img { height: 60px; }
.site-manufacturing .nav:not(.solid):not(.open) .mark-badge img { height: 52px; }
.lockup b { font-size: 1.95rem; }
.lockup small { font-size: .74rem; margin-top: .4rem; letter-spacing: .34em; }
.nav.solid .mark-badge { width: 56px; height: 56px; }
.nav.solid .mark-badge img { height: 50px; }
.nav.solid .lockup b { font-size: 1.7rem; }
.mark-badge, .mark-badge img, .lockup b { transition: all .3s ease; }
@media (max-width: 700px) {
  .mark-badge, .nav.solid .mark-badge { width: 52px; height: 52px; }
  .mark-badge img, .nav.solid .mark-badge img { height: 46px; }
  .site-manufacturing .nav:not(.solid):not(.open) .mark-badge img { height: 40px; }
  .lockup b, .nav.solid .lockup b { font-size: 1.5rem; }
  .lockup small { font-size: .66rem; }
}
@media (max-width: 560px) { .ann-long { display: none; } .site-retail .nav:not(.solid) { top: 2.1rem; } }