/* ============================================================
   RUGS DE INDISKA - Bespoke
   ============================================================ */

.bespoke-page{
  background:var(--cream);
}

.bespoke-hero{
  position:relative;
  min-height:clamp(420px, 54vw, 660px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:#fff;
  background:var(--sand);
}

.bespoke-hero__media{
  position:absolute;
  inset:-10% 0;
  will-change:transform;
}

.bespoke-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 48%;
  animation:bespokeHeroIn 2.2s var(--ease) both;
}

@keyframes bespokeHeroIn{
  from{ transform:scale(1.08); }
  to{ transform:none; }
}

.bespoke-hero__scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(16, 10, 6, .76), rgba(16, 10, 6, .42) 48%, rgba(16, 10, 6, .08)),
    linear-gradient(180deg, rgba(16, 10, 6, .34), rgba(16, 10, 6, .12) 45%, rgba(16, 10, 6, .48));
}

.bespoke-hero__inner{
  position:relative;
  z-index:2;
  padding-block:clamp(58px, 7vw, 96px);
}

.bespoke-hero__eyebrow,
.bespoke-hero__title,
.bespoke-hero__copy,
.bespoke-hero__action{
  opacity:0;
  transform:translateY(18px);
  animation:bespokeUp 1s var(--ease) forwards;
}

.bespoke-hero__eyebrow{ animation-delay:.15s; }
.bespoke-hero__title{ animation-delay:.28s; }
.bespoke-hero__copy{ animation-delay:.42s; }
.bespoke-hero__action{ animation-delay:.58s; }

@keyframes bespokeUp{
  to{ opacity:1; transform:none; }
}

.bespoke-hero__title{
  max-width:12ch;
  font-family:var(--ff-display);
  font-size:clamp(42px, 5.6vw, 78px);
  font-weight:300;
  line-height:1.04;
  margin-bottom:18px;
  text-shadow:0 2px 34px rgba(0,0,0,.34);
}

.bespoke-hero__copy{
  max-width:56ch;
  color:rgba(255,255,255,.84);
  font-size:14.5px;
  line-height:1.85;
  margin-bottom:30px;
}

.has-loader:not(.loaded) .bespoke-hero__media img,
.has-loader:not(.loaded) .bespoke-hero__eyebrow,
.has-loader:not(.loaded) .bespoke-hero__title,
.has-loader:not(.loaded) .bespoke-hero__copy,
.has-loader:not(.loaded) .bespoke-hero__action{
  animation-play-state:paused;
}

.bespoke-intro{
  background:#fffdf8;
}

.bespoke-intro__grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  align-items:center;
  gap:clamp(42px, 6vw, 92px);
}

.bespoke-intro__copy .h2{
  margin-bottom:28px;
}

.bespoke-copy{
  max-width:58ch;
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.85;
}

.bespoke-copy + .bespoke-copy{
  margin-top:22px;
}

.bespoke-intro__media{
  overflow:hidden;
  background:var(--sand);
}

.bespoke-intro__media img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
}

.bespoke-process{
  background:var(--cream);
}

.bespoke-process__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  padding-bottom:34px;
  margin-bottom:clamp(30px, 4vw, 54px);
  border-bottom:1px solid var(--hair);
}

.bespoke-process__head .eyebrow{
  margin-bottom:12px;
}

.bespoke-process__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(18px, 2.8vw, 34px);
}

.bespoke-step{
  background:#fffdf8;
  border:1px solid rgba(222, 211, 192, .9);
  padding:clamp(16px, 1.8vw, 22px);
}

.bespoke-step img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  margin-bottom:24px;
}

.bespoke-step h3{
  font-family:var(--ff-display);
  font-size:clamp(25px, 2.6vw, 36px);
  font-weight:400;
  line-height:1.16;
  margin-bottom:12px;
}

.bespoke-step p{
  color:var(--ink-soft);
  font-size:13.5px;
  line-height:1.78;
}

.bespoke-request{
  background:#fff;
}

.bespoke-request__shell{
  max-width:1040px;
}

.bespoke-request__head{
  text-align:center;
  margin-inline:auto;
  margin-bottom:clamp(34px, 5vw, 54px);
}

.bespoke-request__head .eyebrow{
  margin-bottom:14px;
}

.bespoke-request__head h2{
  font-family:var(--ff-display);
  font-size:clamp(30px, 3.7vw, 48px);
  font-weight:400;
  line-height:1.16;
}

.bespoke-request__head span{
  display:block;
  width:70px;
  height:4px;
  background:var(--ink);
  margin:16px auto 18px;
}

.bespoke-request__head p{
  max-width:78ch;
  margin-inline:auto;
  color:var(--ink-soft);
  font-size:13.5px;
  line-height:1.8;
}

.bespoke-form{
  width:100%;
}

.bespoke-form__grid,
.bespoke-dimensions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(28px, 4vw, 50px) clamp(30px, 4vw, 60px);
}

.bespoke-dimensions{
  grid-template-columns:1fr 1fr .75fr;
  border:0;
  padding:0;
  margin:clamp(34px, 4vw, 50px) 0 0;
}

.bespoke-dimensions legend{
  grid-column:1 / -1;
  margin-bottom:22px;
  color:var(--ink-soft);
  font-size:14px;
}

.bespoke-field{
  display:grid;
  gap:13px;
}

.bespoke-field--wide{
  margin-top:clamp(34px, 4vw, 50px);
}

.bespoke-field span,
.bespoke-upload span{
  color:var(--ink);
  font-size:13.5px;
  font-weight:400;
}

.bespoke-field input,
.bespoke-field textarea,
.bespoke-field select{
  width:100%;
  min-height:42px;
  border:0;
  border-bottom:1px solid var(--hair);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:14px;
  padding:4px 0 12px;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease);
}

.bespoke-field textarea{
  min-height:118px;
  resize:vertical;
  line-height:1.75;
}

.bespoke-field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 12px) 17px,
    calc(100% - 7px) 17px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:28px;
}

.bespoke-field input:focus,
.bespoke-field textarea:focus,
.bespoke-field select:focus{
  outline:none;
  border-bottom-color:var(--gold);
  box-shadow:0 1px 0 var(--gold);
}

.bespoke-field input.is-invalid,
.bespoke-field textarea.is-invalid,
.bespoke-field select.is-invalid{
  border-bottom-color:#a64d4d;
  box-shadow:0 1px 0 #a64d4d;
}

.bespoke-upload{
  display:grid;
  gap:16px;
  margin-top:clamp(34px, 4vw, 50px);
}

.bespoke-upload input{
  width:100%;
  border:1px dashed var(--hair);
  background:rgba(250, 247, 241, .72);
  padding:16px;
  color:var(--ink-soft);
  font-size:13px;
}

.bespoke-upload input:focus{
  outline:1px solid var(--gold);
  outline-offset:3px;
}

.bespoke-upload input.is-invalid{
  border-color:#a64d4d;
}

.bespoke-form__actions{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  margin-top:34px;
}

.bespoke-form__msg{
  min-height:18px;
  color:#9a3b33;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}

.bespoke-form__msg.is-on{
  opacity:1;
  transform:none;
}

.bespoke-form__msg.is-success{
  color:#516b46;
}

@media (max-width:960px){
  .bespoke-intro__grid,
  .bespoke-process__grid{
    grid-template-columns:1fr;
  }

  .bespoke-intro__media{
    order:-1;
  }

  .bespoke-process__head{
    display:grid;
    align-items:start;
  }
}

@media (max-width:720px){
  .bespoke-hero{
    min-height:clamp(440px, 72vh, 560px);
  }

  .bespoke-hero__title{
    max-width:10ch;
  }

  .bespoke-form__grid,
  .bespoke-dimensions{
    grid-template-columns:1fr;
  }

  .bespoke-dimensions legend{
    margin-bottom:0;
  }

  .bespoke-form__actions .btn{
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  .bespoke-hero__media img,
  .bespoke-hero__eyebrow,
  .bespoke-hero__title,
  .bespoke-hero__copy,
  .bespoke-hero__action{
    animation:none;
    opacity:1;
    transform:none;
  }
}