/* Layout helpers for the four dedicated service pages. Tokens come from redesign.css. */

/* services: copy on the left, project photos on the right */
.svc{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,4.5vw,4.2rem);align-items:start}
.svc > *{min-width:0}
.svc__item{padding-block:clamp(1.3rem,2.2vw,1.8rem);border-top:1px solid var(--line)}
.svc__item:last-child{border-bottom:1px solid var(--line)}
.svc__item h3{margin-bottom:.6rem}
.svc__item p{font-size:.99rem;color:var(--char-2);line-height:1.74}
.svc__item a,.split__body a,.svc-band a:not(.btn),#projects .lede a,.hero__copy > p a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.svc__art{display:grid;gap:clamp(.8rem,1.4vw,1.1rem);position:sticky;top:110px}
.svc__art--4{grid-template-columns:1fr 1fr}
.svc__img{overflow:hidden;border-radius:3px;box-shadow:var(--sh-2)}
.svc__img img{width:100%;height:clamp(250px,25vw,350px);object-fit:cover}
.svc__art--1 .svc__img img{height:clamp(380px,44vw,600px)}

/* long-form sections: heading left, copy right */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.6rem,4.5vw,4.2rem);align-items:start}
.split > *{min-width:0}
.split__body p{font-size:1.02rem;color:var(--char-2);line-height:1.78}
.split__body p + p{margin-top:1.05rem}
.split__body b{color:var(--ink);font-weight:600}

/* dark variants */
.svc-dark .feat p:not(.eyebrow),.svc-dark .split__body p{color:rgba(255,255,255,.82)}
.svc-dark .feat p:not(.eyebrow){margin-top:1.1rem}
.svc-dark .split__body b{color:#fff}
.svc-band{padding-block:clamp(64px,7.5vw,104px)}
.svc-band a:not(.btn){color:var(--gold-soft)}
.svc-band__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:1.9rem}

/* project mosaics sized to their photo count */
#projects .mo__cap{line-height:1.4}
@media (min-width:768px){
  .mosaic--n3,.mosaic--n6{grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(240px,26vw,350px)}
  .mosaic--n4{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(280px,30vw,420px)}
  .mosaic--n3 .mo:nth-child(1),.mosaic--n4 .mo:nth-child(1),.mosaic--n6 .mo:nth-child(1){grid-row:auto}
}

/* process: 3 across for 5 or 6 steps */
@media (min-width:768px){
  .steps--n5,.steps--n6{grid-template-columns:repeat(3,1fr);row-gap:clamp(2rem,3.4vw,3rem)}
}

@media (max-width:1023px){
  .svc,.split{grid-template-columns:1fr}
  .svc__art{position:static;grid-template-columns:repeat(2,1fr)}
  .svc__art--1{grid-template-columns:1fr}
  .svc__art--1 .svc__img img{height:clamp(280px,60vw,460px)}
}

/* Hero photo: the <picture> wrapper has no height, so the base img height:112% never resolves and the
   photo always shows from its top edge, hiding the floor tile. Give the wrapper a height so
   object-position (set per page on the img) can bring the tile into view. */
.hero__bg picture{display:block;height:100%}
.hero__bg img{height:100%}

/* Long headline held to three lines beside a photo */
.h-3line{font-size:clamp(1.9rem,3.5vw,2.75rem);text-wrap:balance}