/* ==========================================================
   The Serenity Collections — Sub-page styles
   Shared between trade-partners.html and media.html
   (loaded after base.css). Uses the media.html page-hero
   treatment as the default; trade-partners.html adds a small
   override file on top for its brighter photo.
   ========================================================== */

/* -------------------- NAV -------------------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:1.4rem 6vw; color:#fff;
    background:rgba(32,30,28,0.92);
    backdrop-filter:blur(6px);
  }
  .nav-cta{
    font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase;
    border:1px solid rgba(255,255,255,0.55); padding:0.65rem 1.4rem;
    transition:all .3s ease; white-space:nowrap;
  }
  .nav-cta:hover{ background:#fff; color:var(--charcoal); }

/* -------------------- PAGE HERO (static) -------------------- */
  .page-hero{
    position:relative;
    min-height:52vh;
    display:flex; align-items:center; justify-content:center;
    text-align:center; overflow:hidden;
    background:#0f0e0d;
  }
  .page-hero img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; filter:saturate(0.82) contrast(1.03) brightness(0.92);
  }
  .page-hero::before{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(8,7,6,0.8) 0%, rgba(8,7,6,0.64) 38%, rgba(8,7,6,0.64) 62%, rgba(8,7,6,0.85) 100%),
      radial-gradient(65% 75% at 50% 48%, rgba(8,7,6,0.32), transparent 72%);
  }
  .page-hero-content{
    position:relative; z-index:2; color:#fff; padding:8rem 6vw 3rem; max-width:760px;
  }
  .page-hero .eyebrow{ color:var(--gold-light); margin-bottom:1rem; text-shadow:0 1px 3px rgba(0,0,0,0.9), 0 2px 16px rgba(0,0,0,0.7); }
  .page-hero h1{
    font-family:'Cormorant Garamond', serif;
    font-weight:400;
    font-size:clamp(2.2rem, 5vw, 3.4rem);
    line-height:1.1;
    text-shadow:0 4px 24px rgba(0,0,0,0.55);
  }
  .page-hero p.tagline{
    margin-top:1rem;
    font-size:1rem;
    color:rgba(255,255,255,0.85);
    font-weight:300;
    line-height:1.6;
    text-shadow:0 2px 14px rgba(0,0,0,0.6);
  }

/* -------------------- INTRO -------------------- */
  .intro{ background:var(--cream); padding:5rem 0 4rem; text-align:center; }
  .intro-rule{ width:56px; height:1px; background:var(--gold); margin:1.4rem auto 2.1rem; }
  .intro p.lede{
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(1.05rem, 1.6vw, 1.28rem);
    line-height:1.65;
    color:var(--ink-soft);
    max-width:680px;
    margin:0 auto;
  }
  .perks{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2.5rem;
    max-width:900px;
    margin:3.2rem auto 0;
    text-align:left;
  }
  .perks li{
    list-style:none;
    font-size:0.9rem;
    line-height:1.6;
    color:var(--ink-soft);
    padding-left:1.3rem;
    position:relative;
  }
  .perks li::before{
    content:"—";
    position:absolute; left:0; top:0;
    color:var(--gold);
  }
  @media (max-width:760px){
    .perks{ grid-template-columns:1fr; max-width:420px; }
  }

/* -------------------- FORM SECTION -------------------- */
  .form-section{
    position:relative;
    background:var(--charcoal);
    color:#fff;
    padding:6rem 0 6rem;
  }
  .form-head{ text-align:center; max-width:600px; margin:0 auto 3.2rem; }
  .form-head p.eyebrow{ color:var(--gold-light); margin-bottom:0.9rem; font-size:0.95rem; letter-spacing:0.26em; }
  .intro p.eyebrow{ font-size:0.95rem; letter-spacing:0.26em; }
  .form-head h2{
    font-family:'Cormorant Garamond', serif;
    font-weight:400;
    font-size:clamp(1.9rem, 4vw, 2.5rem);
  }
  .form-head p{
    margin-top:1rem; font-size:0.95rem; line-height:1.7;
    color:rgba(255,255,255,0.68); font-weight:300;
  }

  form.data-form{ position:relative; max-width:720px; margin:0 auto; }
  .hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
  .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 1.4rem; }
  .field{ display:flex; flex-direction:column; gap:0.55rem; position:relative; }
  .field.full{ grid-column:1 / -1; }
  .field label{
    font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase;
    color:rgba(255,255,255,0.55);
  }
  .field input, .field textarea{
    font-family:'Jost', sans-serif; font-size:0.95rem; font-weight:300;
    background:transparent; border:none; border-radius:0;
    border-bottom:1px solid rgba(255,255,255,0.3); color:#fff;
    padding:0.55rem 0.1rem; outline:none;
    transition:border-color .3s ease;
    line-height:1.4; height:2.5rem; box-sizing:border-box;
  }
  .field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,0.32); }
  .field input:focus, .field textarea:focus{ border-color:var(--gold); }
  .field textarea{ resize:vertical; min-height:80px; height:auto; }

  /* Custom select (Type) */
  .custom-select{ position:relative; }
  .cs-trigger{
    width:100%; height:2.5rem; box-sizing:border-box;
    display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
    font-family:'Jost', sans-serif; font-size:0.95rem; font-weight:300; text-align:left;
    background:transparent; border:none; border-radius:0;
    border-bottom:1px solid rgba(255,255,255,0.3); color:#fff;
    padding:0.55rem 0.1rem; cursor:pointer; transition:border-color .3s ease;
  }
  .cs-trigger:hover{ border-color:rgba(255,255,255,0.55); }
  .custom-select.open .cs-trigger{ border-color:var(--gold); }
  .cs-trigger.placeholder-active span{ color:rgba(255,255,255,0.32); }
  .cs-chevron{ width:13px; height:13px; flex-shrink:0; transition:transform .25s ease; }
  .cs-chevron path{ fill:none; stroke:rgba(255,255,255,0.55); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
  .custom-select.open .cs-chevron{ transform:rotate(180deg); }
  .custom-select.open .cs-chevron path{ stroke:var(--gold-light); }
  .cs-options{
    position:absolute; left:0; right:0; top:calc(100% + 6px);
    background:var(--charcoal-2); border:1px solid rgba(255,255,255,0.14); border-radius:0;
    list-style:none; margin:0; padding:0.3rem 0; z-index:30;
    box-shadow:0 20px 44px rgba(0,0,0,0.5);
    opacity:0; transform:translateY(-6px); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .custom-select.open .cs-options{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .cs-options li{
    padding:0.6rem 0.9rem; font-family:'Jost', sans-serif; font-size:0.9rem; font-weight:300;
    color:rgba(255,255,255,0.72); cursor:pointer; transition:background .15s ease, color .15s ease;
    border-left:2px solid transparent;
  }
  .cs-options li:hover, .cs-options li.focused{ background:rgba(182,147,95,0.12); color:#fff; border-left-color:var(--gold-dim); }
  .cs-options li.selected{ color:var(--gold-light); border-left-color:var(--gold); }

  /* Validation tooltip */
  .field-tooltip{
    position:absolute; left:0; top:calc(100% + 10px);
    background:var(--charcoal-2); color:var(--gold-light);
    font-family:'Jost', sans-serif; font-size:0.72rem; font-weight:400; letter-spacing:0.02em; line-height:1.4;
    padding:0.55rem 0.8rem; border-top:2px solid var(--gold); border-radius:0;
    box-shadow:0 16px 36px rgba(0,0,0,0.45); z-index:25; white-space:nowrap;
    opacity:0; transform:translateY(-4px); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .field-tooltip::before{
    content:""; position:absolute; left:14px; top:-7px; width:0; height:0;
    border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid var(--gold);
  }
  .field.invalid .field-tooltip{ opacity:1; transform:translateY(0); }
  .field.invalid input,
  .field.invalid .cs-trigger{ border-color:var(--gold); }
  @media (max-width:640px){ .field-tooltip{ white-space:normal; max-width:90vw; } }

  .btn{
    font-family:'Jost', sans-serif; font-size:0.74rem; letter-spacing:0.24em; text-transform:uppercase;
    padding:0.95rem 2.1rem; border:1px solid rgba(255,255,255,0.7); color:#fff; background:transparent;
    cursor:pointer; transition:all .35s ease; display:inline-block;
  }
  .btn:hover{ background:#fff; color:var(--charcoal); }
  .btn-solid{ background:var(--gold); border-color:var(--gold); color:#221d15; }
  .btn-solid:hover{ background:var(--gold-light); border-color:var(--gold-light); color:#221d15; }
  #submitBtn:disabled{ opacity:0.55; cursor:default; }
  #submitBtn:disabled:hover{ background:var(--gold); color:#221d15; }

  .data-form .actions{ margin-top:2.6rem; display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; justify-content:center; }
  .form-note{ font-size:0.75rem; color:rgba(255,255,255,0.45); font-weight:300; text-align:center; margin-top:1.4rem; }


/* ==========================================================
   Perks grid (6-icon layout) + form enrichments
   ========================================================== */
.intro-sub{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.2rem, 2.4vw, 1.55rem);
  color:var(--gold);
  margin:1.6rem auto 1.4rem;
  max-width:640px;
}
.stanza{
  margin:0 auto 1.6rem;
  max-width:560px;
}
.stanza p{
  font-family:'Jost', sans-serif;
  font-size:0.95rem;
  line-height:1.85;
  color:var(--ink-soft);
  font-weight:300;
}
.stanza p.stanza-lede{
  margin-top:1.2rem;
}

.perks-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2.8rem 1.5rem;
  max-width:820px;
  margin:3rem auto 0;
}
.perk-item{
  text-align:center;
  padding:0 0.8rem;
  position:relative;
}
.perk-item:not(:nth-child(3n+1))::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:6px;
  width:1px;
  background:var(--line-dark);
}
.perk-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid var(--gold-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1rem;
}
.perk-icon svg{
  width:21px;
  height:21px;
}
.perk-icon svg path,
.perk-icon svg circle,
.perk-icon svg rect{
  fill:none;
  stroke:var(--gold);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.perk-item h4{
  font-family:'Jost', sans-serif;
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:0.6rem;
}
.perk-item p{
  font-size:0.85rem;
  line-height:1.6;
  color:var(--ink-soft);
}
@media (max-width:760px){
  .perks-grid{
    grid-template-columns:1fr;
    max-width:340px;
    gap:2.4rem;
  }
  .perk-item:not(:nth-child(3n+1))::before{ display:none; }
}

.mini-cta{
  text-align:center;
  max-width:600px;
  margin:4rem auto 0;
  padding-top:3rem;
  border-top:1px solid var(--line-dark);
}
.mini-cta h3{
  font-family:'Jost', sans-serif;
  font-size:0.85rem;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:0.9rem;
}
.mini-cta p{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.15rem;
  color:var(--ink-soft);
  margin-bottom:1.8rem;
}
.mini-cta .btn{
  border-color:var(--ink);
  color:var(--ink);
}
.mini-cta .btn:hover{ background:var(--ink); color:#fff; }

.closing-tagline{
  text-align:center;
  margin-top:3.5rem;
  font-size:0.68rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--gold-dim);
}

/* Multi-select checkbox groups (reuses .consent-checkbox-wrap / .consent-box) */
.checkbox-field .field-hint{
  font-size:0.72rem;
  color:rgba(255,255,255,0.4);
  font-weight:300;
  margin-top:-0.2rem;
}
.checkbox-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.9rem 2rem;
  margin-top:0.6rem;
}
.checkbox-item{
  display:flex;
  align-items:flex-start;
  gap:0.7rem;
  cursor:pointer;
}
.checkbox-item span:last-child{
  font-size:0.85rem;
  line-height:1.5;
  color:rgba(255,255,255,0.72);
  font-weight:300;
  text-transform:none;
  letter-spacing:normal;
}
@media (max-width:640px){
  .checkbox-grid{ grid-template-columns:1fr; }
}

/* Optional field with a small decorative trailing icon (e.g. Proposed timing) */
.input-with-icon{
  position:relative;
}
.input-with-icon input{
  padding-right:1.8rem;
}
.input-with-icon svg{
  position:absolute;
  right:0.15rem;
  top:0.6rem;
  width:15px;
  height:15px;
  pointer-events:none;
}
.input-with-icon svg path,
.input-with-icon svg rect{
  fill:none;
  stroke:rgba(255,255,255,0.4);
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.req{ color:var(--gold); }
/* -------------------- DATE FIELD + CALENDAR -------------------- */
  .date-field{
    position:relative;
    display:flex;
    align-items:center;
  }
  .date-field input{
    width:100%;
    padding-right:2.6rem;
    cursor:pointer;
  }
  .date-icon-btn,
  .date-clear-btn{
    position:absolute;
    right:0.1rem;
    top:50%;
    transform:translateY(-60%);
    background:transparent;
    border:none;
    padding:0.3rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .date-icon-btn svg,
  .date-clear-btn svg{
    width:16px;
    height:16px;
  }
  .date-icon-btn svg rect,
  .date-icon-btn svg path{
    fill:none;
    stroke:rgba(255,255,255,0.55);
    stroke-width:1.3;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .date-icon-btn:hover svg rect,
  .date-icon-btn:hover svg path{ stroke:var(--gold-light); }
  .date-clear-btn svg path{
    stroke:rgba(255,255,255,0.55);
    stroke-width:1.5;
    stroke-linecap:round;
  }
  .date-clear-btn:hover svg path{ stroke:var(--gold-light); }
  .date-field.has-value .date-icon-btn{ display:none; }
  .date-field:not(.has-value) .date-clear-btn{ display:none; }

  .calendar-popover{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    width:280px;
    background:var(--charcoal-2);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:0;
    padding:1rem 1rem 0.6rem;
    z-index:40;
    box-shadow:0 20px 44px rgba(0,0,0,0.5);
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .date-field.open .calendar-popover{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .cal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:0.8rem;
  }
  .cal-title{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:1.05rem;
    color:#fff;
  }
  .cal-nav{
    background:transparent;
    border:none;
    padding:0.3rem;
    cursor:pointer;
    display:flex;
  }
  .cal-nav svg{ width:14px; height:14px; }
  .cal-nav svg path{
    fill:none;
    stroke:rgba(255,255,255,0.55);
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .cal-nav:hover svg path{ stroke:var(--gold-light); }
  .cal-weekdays{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    margin-bottom:0.3rem;
  }
  .cal-weekdays span{
    text-align:center;
    font-family:'Jost', sans-serif;
    font-size:0.62rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.4);
    padding-bottom:0.4rem;
  }
  .cal-grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    grid-auto-rows:32px;
  }
  .cal-day{
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    border-radius:0;
    font-family:'Jost', sans-serif;
    font-size:0.82rem;
    font-weight:300;
    color:rgba(255,255,255,0.78);
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .cal-day:hover:not(:disabled){
    background:rgba(182,147,95,0.14);
    color:#fff;
  }
  .cal-day.today{
    color:var(--gold-light);
  }
  .cal-day.selected{
    background:var(--gold);
    color:#221d15;
    font-weight:500;
  }
  .cal-day:disabled{
    color:rgba(255,255,255,0.18);
    cursor:default;
  }
  .cal-day.empty{
    cursor:default;
  }
  @media (max-width:640px){
    .calendar-popover{ width:100%; left:0; right:0; }
  }


/* Country select uses the same custom-select component, but with a
   scrollable list (196 countries) and type-ahead jump support. */
.cs-options-scroll{
  max-height:252px;
  overflow-y:auto;
}
.cs-options-scroll::-webkit-scrollbar{ width:6px; }
.cs-options-scroll::-webkit-scrollbar-track{ background:transparent; }
.cs-options-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.15); }