/* ==========================================================================
   LE BENIC — wholesale (wholesale.html, served as /wholesale)

   A stockist application, not a trade portal: one cinematic frame of the product
   at the water's edge, then a quiet two-column spread — how it works beside the
   application itself. Built from the site's own parts: the eyebrow and back link of
   page.css, the shared .cta capsule (in the product page's gold), the navigation
   type for labels, hairlines instead of boxes. No wholesale prices live here.
   Only opacity and transforms move.
   ========================================================================== */

.ws {
  --gold: #c59a5d;
  --ivory: #ece4d6;
  --ivory-soft: rgb(236 228 214 / 0.74);
  --ivory-quiet: rgb(236 228 214 / 0.5);
  --hair: rgb(236 228 214 / 0.14);
  --warn: #cf8a6a;            /* a restrained warm tone for what needs attention — never red */
  --deep: 12 11 8;            /* the photograph's own deepest tone, for the burns */
  position: relative;
  z-index: 1;
  background: var(--ink);
}

/* ---------------------------------------------------------------- hero */
.ws-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--header-edge) + clamp(40px, 8vh, 96px)) var(--gutter) clamp(64px, 11vh, 130px);
  overflow: hidden;
}
.ws-hero__media {
  position: absolute;
  inset: calc(var(--header-h) + var(--header-edge)) 0 0 0;
  z-index: -1;
  overflow: hidden;
  background: #0a0a08;
}
.ws-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 76% 50%;          /* the bottle keeps its place at the right of the frame */
  transform-origin: 74% 56%;
  animation: ws-settle 3.8s var(--ease-cine) both;
}
/* Tonal burns in the image's own deepest tone: a long, edgeless settle under the copy,
   and the frame dissolving into the page below (no boxes, no hard gradients). */
.ws-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(var(--deep) / 0.92) 0%, rgb(var(--deep) / 0.82) 24%, rgb(var(--deep) / 0.5) 44%, rgb(var(--deep) / 0.14) 62%, rgb(var(--deep) / 0) 76%),
    linear-gradient(0deg, var(--ink) 0%, rgb(11 10 9 / 0.78) 12%, rgb(11 10 9 / 0.26) 30%, rgb(11 10 9 / 0) 46%);
}
.ws-hero__copy { width: min(36rem, 46vw, 100%); }   /* never reaches the bottle on narrower landscape screens */
.ws-hero__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.9rem, 5.2vw, 5.1rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--ivory);
  text-wrap: balance;
}
.ws-rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: clamp(26px, 4vh, 38px) 0;
  background: linear-gradient(90deg, rgb(214 172 112 / 0.95), rgb(190 146 92 / 0));
}
.ws-hero__text {
  max-width: 32rem;
  font-size: clamp(16px, 1.12vw, 18px);
  font-weight: 300;
  line-height: 1.75;
  color: rgb(236 228 214 / 0.9);
}
.ws-hero__text + .ws-hero__text { margin-top: 1.1em; }
.ws-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: clamp(30px, 5vh, 46px);
}
.ws-hero__market {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-nav);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ivory-soft);
}
.ws-hero__market::before { content: ""; width: 26px; height: 1px; background: rgb(236 228 214 / 0.4); }

/* the page's one action, in the product page's gold */
.ws-cta {
  --ground: var(--gold);
  --edge: rgb(0 0 0 / 0);
  justify-content: center;
  font-weight: 500;
  color: #17140e;
}
.ws-cta:hover { --ground: #d0a86c; --edge: rgb(236 228 214 / 0.28); }
.ws-cta[disabled] { opacity: 0.6; cursor: default; }

/* ---------------------------------------------------------------- become a stockist */
.ws-apply {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 7vw, 124px);
  max-width: 1340px;
  margin: 0 auto;
  padding: clamp(72px, 12vh, 150px) var(--gutter) clamp(104px, 17vh, 200px);
  scroll-margin-top: calc(var(--header-h) + 4px);
}
.ws-apply__intro {
  position: sticky;
  top: calc(var(--header-h) + var(--header-edge) + clamp(28px, 6vh, 64px));
  align-self: start;
}
.ws-apply__title {
  margin: 0 0 1.5rem;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.3vw, 3.3rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ivory);
  text-wrap: balance;
}
.ws-apply__lede {
  max-width: 27rem;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.65vw, 1.6rem);
  line-height: 1.32;
  color: rgb(236 228 214 / 0.92);
}
.ws-steps {
  margin: clamp(2.4rem, 5vh, 3.4rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hair);
}
.ws-step {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  align-content: start;              /* side by side (tablets) the shorter steps keep their own rhythm */
  padding: 1.45rem 0 1.5rem;
  border-bottom: 1px solid var(--hair);
}
.ws-step__num {
  grid-row: 1 / span 2;
  padding-top: 1px;
  font-family: "Cormorant Garamond", var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.ws-step__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-nav);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ivory);
}
.ws-step__text { font-size: 15px; line-height: 1.65; color: var(--ivory-soft); }

/* ---------------------------------------------------------------- the application */
.ws-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px clamp(28px, 3.4vw, 60px);
}
.ws-field { min-width: 0; }
.ws-field--wide { grid-column: 1 / -1; }
.ws-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-nav);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ivory-quiet);
  transition: color 0.5s var(--ease-cine);
}
.ws-field:focus-within .ws-label { color: var(--ivory); }
.ws-req { margin-left: 5px; color: var(--gold); }

/* a field is a line to write on, not a box */
.ws-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px 0 12px;
  border: 0;
  border-bottom: 1px solid rgb(236 228 214 / 0.24);
  border-radius: 0;
  background: transparent;
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.45;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.5s var(--ease-cine);
}
.ws-input:hover { border-bottom-color: rgb(236 228 214 / 0.46); }
.ws-input:focus,
.ws-input:focus-visible { outline: 0; border-bottom-color: var(--gold); }
.ws-textarea { min-height: 3.3em; resize: vertical; }
.ws-input--fixed { color: var(--ivory-soft); border-bottom-color: var(--hair); cursor: default; }
.ws-input--fixed:hover,
.ws-input--fixed:focus,
.ws-input--fixed:focus-visible { border-bottom-color: rgb(236 228 214 / 0.3); }
.ws-select {
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ece4d6' stroke-opacity='.7' stroke-width='1'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  cursor: pointer;
}
.ws-select.is-empty { color: var(--ivory-quiet); }
.ws-select option { background: #141311; color: #ece4d6; }
/* the browser's autofill keeps the page's colours */
.ws-input:-webkit-autofill,
.ws-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ivory);
  box-shadow: 0 0 0 1000px #0b0a09 inset;
  caret-color: var(--ivory);
}
.ws-hint { margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: var(--ivory-quiet); }
.ws-error { margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: var(--warn); }
.ws-error:empty { display: none; }
.ws-field.is-invalid .ws-input { border-bottom-color: var(--warn); }
.ws-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.ws-form__legend {
  margin-top: 34px;
  font-family: var(--font-nav);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-quiet);
}
.ws-form__legend .ws-req { margin: 0 4px 0 0; }
.ws-form__summary { margin-top: 18px; font-size: 14px; color: var(--warn); }
.ws-form__actions { margin-top: 30px; }
.ws-form__privacy { max-width: 34rem; margin-top: 24px; font-size: 13px; line-height: 1.65; color: var(--ivory-quiet); }
.ws-form__privacy a {
  color: var(--ivory-soft);
  text-decoration: underline;
  text-decoration-color: rgb(197 154 93 / 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ws-form__privacy a:hover,
.ws-form__privacy a:focus-visible { color: var(--ivory); text-decoration-color: var(--gold); }

/* could not be sent: one quiet line above the form */
.ws-note {
  margin-bottom: 36px;
  padding: 1rem 1.2rem;
  border-left: 1px solid var(--warn);
  background: rgb(207 138 106 / 0.07);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ivory);
}
/* received: the form gives way to the thank-you */
.ws-sent { max-width: 34rem; padding: clamp(8px, 4vh, 48px) 0 0; }
.ws-sent:focus { outline: 0; }
.ws-sent .ws-rule { margin-top: 0; }
.ws-sent__title {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 2.7vw, 2.6rem);
  line-height: 1.14;
  color: var(--ivory);
  text-wrap: balance;
}
.ws-sent__text { margin-top: 1.1rem; font-size: 17px; line-height: 1.7; color: var(--ivory-soft); }
.ws-sent .page__back { margin-top: 3rem; }
.ws [hidden] { display: none !important; }

/* ---------------------------------------------------------------- movement (subtle, once) */
.ws-rise { animation: ws-rise 1.6s var(--ease-cine) both; }
.ws-hero__copy > :nth-child(1) { animation-delay: 0.25s; }
.ws-hero__copy > :nth-child(2) { animation-delay: 0.4s; }
.ws-hero__copy > :nth-child(3) { animation-delay: 0.58s; }
.ws-hero__copy > :nth-child(4) { animation-delay: 0.7s; }
.ws-hero__copy > :nth-child(5) { animation-delay: 0.82s; }
.ws-hero__copy > :nth-child(6) { animation-delay: 0.98s; }
@keyframes ws-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ws-settle { from { transform: scale(1.07); } to { transform: scale(1); } }
/* further down, parts arrive as they are reached (wholesale.js adds .ws-anim, then .is-in) */
.ws-anim [data-ws-reveal] { opacity: 0; translate: 0 20px; transition: opacity 1.3s var(--ease-cine), translate 1.5s var(--ease-cine); }
.ws-anim [data-ws-reveal].is-in { opacity: 1; translate: 0 0; }
.ws-anim .ws-step:nth-child(2) { transition-delay: 0.12s; }
.ws-anim .ws-step:nth-child(3) { transition-delay: 0.24s; }

/* ---------------------------------------------------------------- tablets and small laptops */
@media (max-width: 1080px) {
  .ws-apply { grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 9vh, 88px); max-width: 52rem; }
  .ws-apply__intro { position: static; }
  .ws-apply__lede { max-width: 34rem; }
  .ws-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 36px); border-top: 0; }
  .ws-step { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--hair); border-bottom: 0; padding-bottom: 0; }
  .ws-step__num { grid-row: auto; margin-bottom: 0.9rem; }
}

/* ---------------------------------------------------------------- phones and portrait screens
   (the same rule as the film and Our Story): the frame first, the words beneath it — beside
   each other, the copy would run across the bottle */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .ws-hero { display: block; min-height: 0; padding: calc(var(--header-h) + var(--header-edge)) 0 clamp(52px, 9vh, 80px); }
  .ws-hero__media { position: relative; inset: auto; height: min(56vh, 34rem); height: min(56svh, 34rem); }
  .ws-hero__img { object-position: 80% 50%; }
  .ws-hero__media::after {
    background: linear-gradient(0deg, var(--ink) 0%, rgb(11 10 9 / 0.84) 16%, rgb(11 10 9 / 0.3) 40%, rgb(11 10 9 / 0) 60%);
  }
  .ws-hero__copy { position: relative; width: auto; max-width: calc(40rem + 2 * var(--gutter)); margin-top: -3.4rem; padding: 0 var(--gutter); }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 760px) {
  .ws-hero__title { font-size: min(2.9rem, 11.4vw); overflow-wrap: anywhere; }
  .ws-hero__actions { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ws-apply { padding-top: clamp(40px, 7vh, 72px); }
  .ws-apply__title { font-size: min(2.2rem, 9.6vw); overflow-wrap: anywhere; }
  .ws-steps { display: block; border-top: 1px solid var(--hair); }
  .ws-step { grid-template-columns: 3rem minmax(0, 1fr); border-top: 0; border-bottom: 1px solid var(--hair); padding-bottom: 1.5rem; }
  .ws-step__num { grid-row: 1 / span 2; margin-bottom: 0; }
  .ws-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .ws-input { font-size: 16px; }              /* no zoom-on-focus on iOS */
  .ws-form__actions .ws-cta { display: flex; width: 100%; }
  .ws-label { letter-spacing: 0.2em; }
}

@media print {
  .ws-hero__media, .ws-cta { display: none !important; }
}