/* Stella's Ballroom — Services and the dark band after it, from Leighton's
   mockup. Warm palette (tokens.css). */

/* ---- Services: five columns side by side on desktop, each with a pale
   number, a line icon, a heading and its list. ---- */
.services{position:relative;overflow:hidden;background:var(--paper);padding-block:var(--s-8) var(--s-6)}
.services .container{position:relative;z-index:1}
.services .sprig--right{right:calc((100vw - var(--maxw)) / 2 - 220px);top:-40px}

.services__head{
  display:grid;gap:var(--s-4);
  padding-bottom:var(--s-5);margin-bottom:var(--s-5);border-bottom:1px solid var(--line);
}
.services__head p:not(.eyebrow){margin:0;font-size:var(--t-body-s);color:var(--ink-soft)}
@media (min-width:900px){
  .services__head{grid-template-columns:1.25fr .75fr;gap:var(--s-7);align-items:end}
  .services__head p:not(.eyebrow){border-left:1px solid var(--crimson);padding-left:var(--s-4)}
}

.service-cols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr}
.service-col{padding-block:var(--s-4)}
.service-col + .service-col{border-top:1px solid var(--line)}
.service-col__top{display:flex;align-items:center;gap:var(--s-3)}
/* Decoration — the order is already carried by the <ol>, so the number
   is hidden from screen readers in the HTML. */
.service-col__num{font-family:var(--font-display);font-size:2.5rem;line-height:1;color:var(--leaf)}
.service-col__icon{
  width:52px;height:52px;border-radius:50%;flex:none;
  background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--crimson);
}
.service-col__icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.service-col h3{margin:var(--s-4) 0 var(--s-3);font-size:1.25rem;line-height:1.2;color:var(--ink)}
.service-col ul{list-style:none;margin:0;padding:0}
.service-col li{
  position:relative;padding-left:var(--s-4);margin-bottom:var(--s-2);
  font-size:var(--t-body-s);line-height:1.45;color:var(--ink-soft);
}
.service-col li::before{content:"";position:absolute;left:4px;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--ink-soft)}

/* Tablet: two columns */
@media (min-width:640px){
  .service-cols{grid-template-columns:1fr 1fr;column-gap:var(--s-5)}
  .service-col + .service-col{border-top:0}
  .service-col{border-top:1px solid var(--line)}
  .service-col:nth-child(-n+2){border-top:0}
}
/* Desktop: all five in a row, with a hairline between each */
@media (min-width:1100px){
  .service-cols{grid-template-columns:repeat(5,1fr);column-gap:0}
  .service-col{border-top:0;padding:0 var(--s-4)}
  .service-col:first-child{padding-left:0}
  .service-col:last-child{padding-right:0}
  .service-col + .service-col{border-left:1px solid var(--line)}
}


/* ---- The dark band: "Have something else in mind?" ----
   The white florals sit in the right-hand 58% and fade out before the
   words. On a phone the words take the full width, so the photograph
   sits quietly behind them. */
.band{position:relative;overflow:hidden;background:var(--night);color:var(--on-dark);padding-block:var(--s-7)}
.band__img{
  position:absolute;top:0;right:0;width:100%;height:100%;object-fit:cover;opacity:.3;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.4) 100%);
          mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.4) 100%);
}
@media (min-width:800px){
  .band__img{
    width:58%;opacity:.5;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 35%,#000 70%);
            mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 35%,#000 70%);
  }
}
.band__inner{position:relative;z-index:1;display:grid;gap:var(--s-5)}
.band h2{font-size:clamp(1.8rem,3vw,2.4rem);color:var(--on-dark);margin:0 0 var(--s-3)}
.band p:not(.eyebrow){margin:0;color:rgba(247,245,242,.86);max-width:48ch}
.band .eyebrow{margin:0}
/* Keeps its own width — stretched across a phone it left the words
   stranded on the left. */
.band__btn{
  justify-self:start;
  display:inline-flex;align-items:center;gap:var(--s-3);
  min-height:48px;padding:0 var(--s-5);
  background:var(--crimson);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);
  font-size:var(--t-label-nav);font-weight:var(--weight-label);letter-spacing:var(--track-nav);text-transform:uppercase;
  transition:background var(--dur) var(--ease);
}
.band__btn:hover{background:var(--crimson-deep)}
.band__btn span[aria-hidden]{font-size:1.1em;letter-spacing:0}
@media (min-width:800px){
  .band__inner{grid-template-columns:1fr auto;align-items:center;gap:var(--s-7)}
}