/* ==========================================================================
   SEREN by Kayeni — layout from the approved mockup (Seren_page_layout)
   Warm cream / tan / gold palette, sampled from the mockup itself.
   ========================================================================== */

.seren-page{
  --cream:      #fcf1e7;   /* intro band                    */
  --cream-2:    #faf1e4;   /* curated band                  */
  --tan:        #fcefd6;   /* pillars band                  */
  --tan-2:      #fdefd7;   /* signature band                */
  --tan-hdr:    #fcebcf;   /* header + closing              */
  --gold:       #c0873c;
  --gold-soft:  #e0bc8a;   /* hairlines                     */
  --gold-fill:  #e5c491;   /* pill buttons                  */
  --ink:        #1e2a4a;   /* navy text                     */

  background:var(--cream-2);
  color:var(--ink);
}

.sr-shell{
  width:100%;
  max-width:1448px;
  margin-inline:auto;
  padding-inline:48px;
}

/* ---------- header -------------------------------------------------------- */

.seren-page .site-header{ background:var(--tan-hdr); }
.seren-page .header-inner{ height:60px; gap:28px; }
.seren-page .brand-mark{ width:34px; }
.seren-page .brand-name{ font-size:19px; color:var(--ink); }
.seren-page .brand-inc{ font-size:14px; }
.seren-page .nav{ gap:38px; }
.seren-page .nav-link{ color:var(--ink); font-size:11.5px; letter-spacing:.12em; }
.seren-page .nav-link:hover{ color:var(--gold); }
.seren-page .nav-menu{ background:#25314f; border-color:rgba(192,135,60,.4); }
.seren-page .nav-menu a.is-active{ color:var(--gold-soft); }
.seren-page .burger span{ background:var(--ink); }

.sr-pill{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--gold-fill);
  color:#fff;
  font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:10px 22px;
  border-radius:999px;
  transition:background-color .18s ease, transform .18s ease;
}
.sr-pill:hover{ background:#d9b273; }
.sr-pill:active{ transform:translateY(1px); }
.sr-pill-lg{ padding:14px 40px; font-size:12px; letter-spacing:.16em; }
.seren-page .header-cta{ flex:0 0 auto; }

/* ---------- hero ---------------------------------------------------------- */

.sr-hero{ position:relative; background:var(--tan-hdr); }
.sr-hero-img{ width:100%; height:auto; display:block; }

.sr-hero-lockup{
  position:absolute;
  left:50.5%; top:8%;
  width:min(34%, 470px);
  text-align:center;
}
.sr-logo{ width:100%; height:auto; }
.sr-hero-sub{
  margin:22px 0 0;
  font-family:var(--display);
  font-size:clamp(12px,1.2vw,17px);
  letter-spacing:.16em;
  color:var(--ink);
}

/* ---------- shared band bits ---------------------------------------------- */

.sr-ornament{
  display:flex; align-items:center; justify-content:center;
  gap:14px;
  width:min(300px,80%);
  margin:7px auto 9px;
}
.sr-ornament i{ flex:1; height:1px; background:var(--gold-soft); }
.sr-ornament img{ width:17px; height:auto; flex:0 0 auto; }

.sr-band-title{
  display:flex; align-items:center; gap:26px;
  margin:0 0 9px;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(19px,1.75vw,24px);
  color:var(--ink);
  white-space:nowrap;
}
.sr-band-title::before,
.sr-band-title::after{ content:""; flex:1; height:1px; background:var(--gold-soft); }

/* ---------- intro --------------------------------------------------------- */

.sr-intro{ background:var(--cream); padding-block:6px 8px; text-align:center; }
.sr-intro h1{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(19px,1.85vw,25px);
  line-height:1.22;
  color:var(--ink);
}
.sr-intro p{
  margin:0;
  font-size:12px;
  line-height:1.42;
  color:var(--ink);
}
.sr-intro strong{ font-weight:700; }

/* ---------- four pillars -------------------------------------------------- */

.sr-pillars{ background:var(--tan); padding-block:11px 12px; }
.sr-pillars-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.sr-pillar{ position:relative; text-align:center; padding-inline:26px; }
.sr-pillar + .sr-pillar::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px;
  width:1px; background:var(--gold-soft);
}
.sr-pillar img{ height:32px; width:auto; margin:0 auto 7px; }
.sr-pillar h2{
  margin:0 0 5px;
  font-family:var(--display);
  font-weight:500;
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
}
.sr-pillar p{ margin:0; font-size:11px; line-height:1.42; color:var(--ink); }

/* ---------- curated cards ------------------------------------------------- */

.sr-curated{ background:var(--cream-2); padding-block:7px 9px; }
.sr-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.sr-card{ background:var(--tan-hdr); display:flex; flex-direction:column; }
.sr-card-img{ width:100%; height:126px; object-fit:cover; }
.sr-card-bar{ display:flex; align-items:flex-start; gap:10px; padding:5px 12px 6px; flex:1; }
.sr-card-ico{ width:22px; height:auto; flex:0 0 auto; margin-top:1px; }
.sr-card-bar h3{
  margin:0 0 3px;
  font-family:var(--display);
  font-weight:500;
  font-size:11.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink);
}
.sr-card-bar p{ margin:0; font-size:10.5px; line-height:1.3; color:var(--ink); }

/* ---------- signature experiences ---------------------------------------- */

.sr-signature{ background:var(--tan-2); padding-block:10px 14px; }
.sr-sig-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.sr-sig{ position:relative; display:flex; align-items:flex-start; gap:12px; padding-right:12px; }
.sr-sig + .sr-sig::before{
  content:""; position:absolute; left:-7px; top:4px; bottom:4px;
  width:1px; background:var(--gold-soft);
}
.sr-sig img{ width:34px; height:auto; flex:0 0 auto; margin-top:1px; }
.sr-sig h3{
  margin:0 0 3px;
  font-family:var(--display);
  font-weight:500;
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
}
.sr-sig p{ margin:0; font-size:10.5px; line-height:1.4; color:var(--ink); }

/* ---------- closing ------------------------------------------------------- */

.sr-closing{ background:var(--tan-hdr); padding-block:24px 30px; text-align:center; }
.sr-closing h2{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(20px,1.95vw,26px);
  line-height:1.25;
  color:var(--ink);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1180px){
  .seren-page .nav{ gap:22px; }
  .sr-sig-grid{ grid-template-columns:repeat(3,1fr); row-gap:26px; }
  .sr-sig:nth-child(4)::before{ display:none; }
}

@media (max-width:980px){
  .sr-shell{ padding-inline:28px; }
  .seren-page .nav, .seren-page .header-cta{ display:none; }
  .seren-page .burger{ display:block; margin-left:auto; }
  body.nav-open .nav{ top:60px; }

  .sr-hero{ padding-bottom:26px; }
  .sr-hero-img{ height:280px; object-fit:cover; object-position:22% center; }
  .sr-hero-lockup{
    position:static; width:min(400px,86%);
    margin:-46px auto 0; padding:18px 20px 14px;
    background:rgba(252,235,207,.92);
    border-radius:10px;
  }

  .sr-pillars-grid{ grid-template-columns:repeat(2,1fr); row-gap:26px; }
  .sr-pillar:nth-child(3)::before{ display:none; }
  .sr-cards{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .sr-sig-grid{ grid-template-columns:repeat(2,1fr); }
  .sr-sig:nth-child(3)::before{ display:none; }
  .sr-band-title{ font-size:20px; white-space:normal; }
}

@media (max-width:620px){
  .sr-pillars-grid{ grid-template-columns:1fr; }
  .sr-pillar + .sr-pillar::before{ display:none; }
  .sr-cards{ grid-template-columns:1fr; }
  .sr-sig-grid{ grid-template-columns:1fr; }
  .sr-sig + .sr-sig::before{ display:none; }
  .sr-band-title::before{ display:none; }
  .sr-intro p br, .sr-pillar p br, .sr-card-bar p br, .sr-sig p br{ display:none; }
  .sr-pill-lg{ padding:13px 24px; font-size:11px; letter-spacing:.12em; }
}