/* cms.css — additions for the section-based CMS (safe to edit) */

.page-wrap { min-height: 60vh; }

/* Default background for CMS sections (overridden by section style/image) */
.cms-section{
  /* Builder section background defaults to the Theme setting, but can be overridden per section */
  background-color: var(--section-bg, var(--builder-section-bg, transparent));
  position: relative;
}

/* Optional section overlay (set per section via --section-overlay-color) */
.cms-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--section-overlay-color, transparent);
  pointer-events: none;
  z-index: 0;
}
.cms-section > *{
  position: relative;
  z-index: 1;
}
/* Footer grid */
.footer-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 18px;
  padding: 34px 0 18px;
}
.footer-grid h4{ margin: 0 0 10px; font-size: 14px; letter-spacing:.04em; text-transform: uppercase; }
.footer-grid p{ margin:0; color: var(--muted); line-height: 1.6; }
.footer-grid .links{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.footer-grid .links a{ color: var(--text); opacity:.9; text-decoration:none; }
.footer-grid .links a:hover{ color: var(--orange); }
.footer-section-label{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.3); }

.newsletter{ display:flex; gap:10px; margin-top:10px; }
.newsletter input{
  flex:1;
  border:1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
}
.newsletter button{
  border:0;
  border-radius: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color:#fff;
  font-weight: 700;
  cursor:pointer;
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  padding: 14px 0 26px;
  border-top: 1px solid var(--border);
}
.footer-bottom small{ color: var(--muted); }
.backtop{
  width: 42px;
  height: 42px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  border:1px solid var(--border);
  text-decoration:none;
  color: var(--text);
  background: #fff;
}

/* Rich text */
.richtext{ max-width: 920px; }
.richtext h2{ margin-top: 0; }
.richtext a{ color: var(--orange); }

/* Responsive */
@media (max-width: 980px){
  .footer-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
  .newsletter{ flex-direction: column; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }
}


/* Smaller hero for inner pages */
.hero--small .hero-copy{ padding: 6vh 0; }
.hero--small .hero-inner{ padding: 28px 0; }

/* ── Premium Split Section ───────────────────────────────────────────────── */
.sp{
  display:grid;
  grid-template-columns:55% 1fr;
  min-height:70vh;
  position:relative;
  overflow:hidden;
}
.sp--reverse{
  grid-template-columns:1fr 55%;
}
.sp--reverse .sp__media{ order:2; }
.sp--reverse .sp__body{
  order:1;
  padding-left:clamp(28px,5vw,80px);
  padding-right:0;
}
.sp--reverse .sp__bleed{
  left:auto;
  right:-1px;
  clip-path:polygon(100% 0,100% 100%,0 0);
}

/* Image panel */
.sp__media{
  position:relative;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  overflow:hidden;
  min-height:420px;
}
.sp__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

/* Angled bleed strip — creates the overlap illusion */
.sp__bleed{
  position:absolute;
  top:0;
  right:-1px;
  bottom:0;
  width:20%;
  background:#001e1dfb;
  z-index:3;
  clip-path:polygon(100% 0,100% 100%,0 100%);
}
.sp--reverse .sp__bleed{
  right:auto;
  left:-1px;
  top: -1px;
  clip-path:polygon(0 0,100% 0,0 100%);
}

/* Badge on image */
.sp__badge{
  position:absolute;
  top:24px;
  left:24px;
  z-index:4;
  background:var(--accent);
  color:#fff;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
}
.sp--reverse .sp__badge{ left:auto; right:24px; }

/* Text panel */
.sp__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(40px,6vw,100px) clamp(28px,5vw,80px) clamp(40px,6vw,100px) clamp(16px,3vw,40px);
  position:relative;
  z-index:2;
  background:transparent;
}
.sp__eyebrow{
  display:inline-block;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
}
.sp__heading{
  margin:0 0 14px;
  font-size:clamp(1.6rem,3.2vw,2.8rem);
  line-height:1.12;
  font-weight:800;
}
.sp__sub{
  margin:0 0 18px;
  font-size:1.05rem;
  color:var(--muted);
  font-style:italic;
  line-height:1.6;
}
.sp__copy{
  color:var(--lead);
  font-size:.95rem;
  line-height:1.75;
}
.sp__copy p{ margin:0 0 12px; }
.sp__copy p:last-child{ margin-bottom:0; }
.sp__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}

/* Responsive — stack vertically on mobile */
@media (max-width:900px){
  .sp,
  .sp--reverse{
    grid-template-columns:1fr;
    min-height:unset;
  }
  .sp--reverse .sp__media{ order:1; }
  .sp--reverse .sp__body{ order:2; padding-left:clamp(20px,5vw,40px); }
  .sp__media{ min-height:280px; background-attachment:scroll; }
  .sp__bleed,
  .sp--reverse .sp__bleed{ display:none; }
  .sp__body{ padding:36px clamp(20px,5vw,40px); }
}


/* ── Split Alt Section (full-bleed image + floating card) ─────────────────── */
/* Inspired by the BM Solutions layout — image bleeds left, card floats right */
.spa{
  position:relative;
  min-height:75vh;
  display:flex;
  align-items:stretch;
}
.spa--reverse{ flex-direction:row-reverse; }

/* Full-bleed image — takes 55% width, sits behind */
.spa__img{
  position:absolute;
  top:0; left:0;
  width:58%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  z-index:0;
}
.spa--reverse .spa__img{
  left:auto; right:0;
}

/* Badge */
.spa__badge{
  position:absolute;
  top:20px; left:20px;
  background:var(--accent);
  color:#fff;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:999px;
  z-index:2;
}
.spa--reverse .spa__badge{ left:auto; right:20px; }

/* Floating card — starts at ~45% from left, overlaps image */
.spa__card{
  position:relative;
  z-index:2;
  margin-left:auto;
  width:58%;
  min-height:100%;
  padding:clamp(40px,6vw,90px) clamp(32px,5vw,80px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:-12px 0 40px rgba(0,0,0,.45), 12px 0 40px rgba(0,0,0,.2);
  color:#e0eaf5;
}
.spa--reverse .spa__card{
  margin-left:0;
  margin-right:auto;
  box-shadow:12px 0 40px rgba(0,0,0,.45), -12px 0 40px rgba(0,0,0,.2);
}

.spa__eyebrow{
  display:inline-block;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(180,210,255,.75);
  margin-bottom:12px;
}
.spa__heading{
  margin:0 0 12px;
  font-size:clamp(1.5rem,2.8vw,2.6rem);
  font-weight:800;
  line-height:1.1;
  color:#fff;
  text-shadow:.04em .04em .08em rgba(0,0,0,.6);
}
.spa__sub{
  margin:0 0 16px;
  font-size:1rem;
  font-style:italic;
  color:rgba(200,220,255,.85);
  line-height:1.65;
}
.spa__copy{
  font-size:.9rem;
  line-height:1.8;
  color:rgba(210,225,255,.88);
}
.spa__copy p{ margin:0 0 12px; }
.spa__copy p:last-child{ margin-bottom:0; }
.spa__copy strong{ color:#fff; font-weight:700; }
.spa__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

/* Mobile — stack fully */
@media (max-width:900px){
  .spa,
  .spa--reverse{
    flex-direction:column;
    min-height:unset;
  }
  .spa__img{
    position:relative;
    width:100%;
    height:280px;
    background-attachment:scroll;
  }
  .spa--reverse .spa__img{ right:auto; }
  .spa__card{
    width:100%;
    margin:0;
    box-shadow:none;
    padding:36px clamp(20px,5vw,40px);
  }
  .spa--reverse .spa__card{ margin:0; }
}