/* ==========================================================================
   Donis — service section layout
   Each service reads as its own page: big number, title, photos underneath,
   then pricing, then the form. Loaded last so it supersedes the old 2-column
   grid in site.css.
   ========================================================================== */

/* ---- section separation: you should always know which service you're in -- */
.svc{border-top:1px solid var(--line-2);padding-block:clamp(3.4rem,8vw,6rem)}
.svc:nth-of-type(even){background:var(--bg-2)}
.svc.alt{background:transparent}                 /* old alternating rule, retired */

/* numbered header */
.svc-head{display:flex;align-items:flex-start;gap:clamp(14px,3vw,28px);
  padding-bottom:clamp(1.4rem,3vw,2rem);margin-bottom:clamp(1.4rem,3vw,2rem);
  border-bottom:1px solid var(--line)}
.svc-num{font-family:'Archivo','Archivo Black',var(--disp),sans-serif;
  font-weight:800;font-stretch:125%;font-variation-settings:'wdth' 125,'wght' 800;
  font-size:clamp(2.4rem,7vw,4.6rem);line-height:.82;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--accent) 55%,transparent);
  flex:none;padding-top:.06em}
.svc-titles{min-width:0;flex:1}
/* on a phone the number sits above the title so the copy gets full width */
@media(max-width:620px){
  .svc-head{flex-direction:column;gap:2px}
  .svc-num{font-size:2.6rem}
}
.svc-titles h2{margin-top:.5rem;text-wrap:balance}
.svc-titles .lede{margin-top:.9rem;max-width:62ch}

/* ---- photos, directly under the title ---------------------------------- */
.svc-shots{display:grid;gap:clamp(9px,1.4vw,14px);margin-bottom:clamp(1.8rem,4vw,2.8rem);
  grid-template-columns:1fr}
.svc-shots figure{position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);margin:0}
.svc-shots img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/11;display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.svc-shots figure:hover img{transform:scale(1.05)}}
@media(min-width:560px){
  .svc-shots{grid-template-columns:repeat(2,1fr)}
  /* a 3-photo set leads with one wide shot */
  .svc-shots:has(figure:nth-child(3)) figure:first-child{grid-column:1 / -1}
  .svc-shots:has(figure:nth-child(3)) figure:first-child img{aspect-ratio:21/9}
}
@media(min-width:940px){
  .svc-shots:has(figure:nth-child(3)){grid-template-columns:repeat(3,1fr)}
  .svc-shots:has(figure:nth-child(3)) figure:first-child{grid-column:auto}
  .svc-shots:has(figure:nth-child(3)) figure:first-child img{aspect-ratio:16/11}
}
/* fallback for browsers without :has() — never leaves a broken grid */
@supports not (selector(:has(*))){
  @media(min-width:940px){.svc-shots{grid-template-columns:repeat(2,1fr)}}
}

/* ---- body: pricing, checklist, form — all full width ------------------- */
.svc-body{max-width:100%}
.svc-body .tbl-wrap{margin-top:0}
.svc-body .incl{margin-top:clamp(1.6rem,3vw,2.2rem)}
.svc-body .quote{margin-top:clamp(1.6rem,3vw,2.2rem)}

/* full width means the tables finally fit — no more mid-desktop clipping */
@media(min-width:760px){
  table.price{min-width:0}
  .tbl-wrap.is-scrollable::after{display:none}
  .tbl-wrap.is-scrollable .scroll-note{display:none}
}
@media(min-width:900px){
  table.price th,table.price td{padding:16px 20px}
  .incl.trio{grid-template-columns:repeat(3,1fr)}
  .incl.duo{grid-template-columns:repeat(2,1fr)}
}

/* the quote panel has room to sit beside the fields again */
@media(min-width:900px){
  .q-cols{grid-template-columns:minmax(0,1fr) 340px}
  .q-side{border-top:0;border-left:1px solid var(--line)}
}

/* ---- hero: title card only --------------------------------------------- */
.hero-in{gap:0}
.scroll-hint{gap:0;font-size:0}