/* ===== Services page =====
   Stacked full-bleed video bands. Each band holds a muted looping video,
   a scrim to keep the type legible, and a panel that opens on click.
   Additive only: tokens and .btn / .sec come from the existing sheets. */

/* Off screen, still read aloud and still indexed. */
.svc-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ----- The stack ----- */

.svc {
  background: var(--black);
}

.svc__band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid rgba(246, 242, 228, 0.22);
}

.svc__band:last-child { border-bottom: 1px solid rgba(246, 242, 228, 0.22); }

/* The video and the scrim are pinned behind the content. object-fit keeps
   the frame filled at any band height, including while the panel animates. */
.svc__video,
.svc__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.svc__video {
  object-fit: cover;
  /* A hair of scale hides the sub-pixel edge some browsers leave on a
     scaled video, and stops the poster from shimmering on load. */
  transform: scale(1.02);
  transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.svc__scrim {
  background:
    linear-gradient(to bottom,
      rgba(18, 46, 51, 0.42) 0%,
      rgba(18, 46, 51, 0.66) 55%,
      rgba(18, 46, 51, 0.80) 100%);
  transition: background 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.svc__band:hover .svc__video { transform: scale(1.055); }

.svc__band.is-open .svc__video { transform: scale(1.06); }

.svc__band.is-open .svc__scrim {
  background:
    linear-gradient(to bottom,
      rgba(18, 46, 51, 0.72) 0%,
      rgba(18, 46, 51, 0.86) 45%,
      rgba(18, 46, 51, 0.92) 100%);
}

.svc__content {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: calc(var(--gap) * 4);
}

/* ----- The clickable head -----
   Padding, not flex centring, does the vertical positioning: padding is
   animatable, so the title glides up as the panel opens instead of jumping. */

.svc__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 16vh 0;
  border: 0;
  background: none;
  color: var(--cream);
  text-align: center;
  cursor: pointer;
  font: inherit;
  transition: padding 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

/* The page now opens straight into the first band, and the nav is fixed
   over it, so the top band gets the nav's height back as padding. The
   video still bleeds up behind the bar. */
.svc__band:first-child .svc__head { padding-top: calc(16vh + 80px); }
.svc__band:first-child.is-open .svc__head { padding-top: calc(12vh + 80px); }

.svc__band.is-open .svc__head { padding: 12vh 0 4vh; }

.svc__index {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  opacity: 0.7;
  margin-bottom: 2.2em;
}

.svc__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 7vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

@supports (text-box: trim-both cap alphabetic) {
  .svc__title { text-box: trim-both cap alphabetic; }
}

.svc__sub {
  margin-top: 1.5em;
  font-family: var(--font-body);
  font-size: clamp(0.76rem, 0.95vw, 0.9rem);
  letter-spacing: 0.08em;
  color: rgba(246, 242, 228, 0.78);
}

/* ----- Open / close cue ----- */

.svc__cue {
  display: flex;
  align-items: center;
  gap: 1.1em;
  margin-top: 2.8em;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(246, 242, 228, 0.8);
  white-space: nowrap;
}

.svc__plus {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(246, 242, 228, 0.55);
  border-radius: 50%;
  flex: none;
  transition:
    background-color 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    border-color 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Two bars; the vertical one collapses to turn the plus into a minus. */
.svc__plus::before,
.svc__plus::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1px;
  background: var(--cream);
  transform: translate(-50%, -50%);
  transition:
    transform 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.svc__plus::after { transform: translate(-50%, -50%) rotate(90deg); }

.svc__head:hover .svc__plus,
.svc__head:focus-visible .svc__plus {
  background: var(--cream);
  border-color: var(--cream);
}

.svc__head:hover .svc__plus::before,
.svc__head:hover .svc__plus::after,
.svc__head:focus-visible .svc__plus::before,
.svc__head:focus-visible .svc__plus::after { background: var(--brown-text); }

.svc__band.is-open .svc__plus { transform: rotate(180deg); }
.svc__band.is-open .svc__plus::after { transform: translate(-50%, -50%) rotate(180deg); }

/* ----- The panel -----
   0fr to 1fr is the only way to transition to a height nobody has measured.
   The inner element carries the overflow so the content is clipped rather
   than squashed on the way. */

.svc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.85s cubic-bezier(0.65, 0, 0.35, 1);
}

.svc__band.is-open .svc__panel { grid-template-rows: 1fr; }

.svc__panel-inner {
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s ease 0.1s,
    transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
}

.svc__band.is-open .svc__panel-inner {
  opacity: 1;
  transform: none;
}

.svc__panel-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 3.4vw;
  padding-bottom: 9vh;
  border-top: 1px solid rgba(246, 242, 228, 0.28);
  padding-top: 3.4vh;
  color: var(--cream);
}

.svc__lede {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.15vw, 1.08rem);
  line-height: 1.6;
}

.svc__note {
  margin-top: 1.3em;
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 0.95vw, 0.92rem);
  line-height: 1.65;
  color: rgba(246, 242, 228, 0.72);
}

.svc__colhead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(246, 242, 228, 0.7);
  margin-bottom: 1.4em;
}

.svc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: clamp(0.82rem, 0.98vw, 0.95rem);
  line-height: 1.5;
}

.svc__list li {
  padding: 0.75em 0;
  border-top: 1px solid rgba(246, 242, 228, 0.16);
}

.svc__list li:first-child { border-top: 0; padding-top: 0; }

.svc__btn { margin-top: 2.4em; }

/* ----- Add-ons ----- */

.svc-extra__layout {
  display: grid;
  grid-template-columns: 0.95fr 1.35fr;
  gap: 6vw;
  align-items: start;
}

/* The heading holds while the rows move past it. */
.svc-extra__intro {
  position: sticky;
  top: 18vh;
}

/* One size for both headings on this page. It is set by the narrower of
   the two columns: big enough to read as a display heading, small enough
   that "ASK FOR THESE" holds its line beside the list. */
.svc-extra__intro .sec__title,
.svc-cta .sec__title {
  font-size: clamp(1.75rem, 3.3vw, 3rem);
  margin-bottom: 0;
}

.svc-extra__note {
  margin-top: 2em;
  max-width: 34ch;
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 0.95vw, 0.92rem);
  line-height: 1.7;
  color: var(--brown-text);
  opacity: 0.8;
}

.svc-extra__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(31, 91, 101, 0.28);
}

/* One hairline per row, a hanging index, and the name sitting on the
   baseline grid rather than inside a box. */
.addon {
  display: grid;
  grid-template-columns: 3.4em 1fr;
  align-items: baseline;
  column-gap: 1em;
  padding: 2em 1.2em 2em 0;
  border-bottom: 1px solid rgba(31, 91, 101, 0.28);
  transition: padding-left 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.addon:hover { padding-left: 1.1em; }

.addon__num {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  color: var(--brown-dark);
  opacity: 0.55;
}

.addon__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.3vw, 2.05rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--brown-dark);
}

.addon__copy {
  grid-column: 2;
  margin-top: 0.85em;
  max-width: 44ch;
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 0.95vw, 0.92rem);
  line-height: 1.65;
  color: var(--brown-text);
  opacity: 0.82;
}

/* ----- Closing CTA ----- */

.svc-cta { padding-top: 0; padding-bottom: 12vh; }

/* Same two-column measure as the add-ons above it, so the two sections
   read as one spread rather than two unrelated blocks. */
.svc-cta__inner {
  display: grid;
  grid-template-columns: 0.95fr 1.35fr;
  gap: 6vw;
  align-items: start;
  padding-top: 11vh;
  border-top: 1px solid rgba(31, 91, 101, 0.28);
}

/* Flush to the right edge of the measure, so it lines up with the end of
   the hairline above it. Nudged down to sit on the heading's baseline. */
.svc-cta__actions {
  padding-top: 0.5em;
  align-items: flex-end;
  text-align: right;
}

.svc-cta__reach {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1em;
}

.svc-cta__hours {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brown-text);
  opacity: 0.6;
}

.svc-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 1.6em;
}

.svc-cta__tel {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(18, 46, 51, 0.35);
  padding-bottom: 0.3em;
}

.svc-cta__tel:hover { color: var(--brown-dark); border-color: var(--brown-dark); }

/* ----- Narrower screens ----- */

@media (max-width: 1000px) {
  .svc__panel-grid { grid-template-columns: 1fr 1fr; }
  .svc__panel-grid .svc__col:first-child { grid-column: 1 / -1; }
  .svc-extra__layout { grid-template-columns: 1fr; gap: 6vh; }
  .svc-extra__intro { position: static; }
  .svc-cta__inner { grid-template-columns: 1fr; gap: 5vh; }
  .svc-cta__actions { padding-top: 0; align-items: flex-start; text-align: left; }
  .svc-cta__reach { align-items: flex-start; }
}

@media (max-width: 680px) {
  .svc__head { padding: 13vh 0; }

  .svc__band:first-child .svc__head { padding-top: calc(13vh + 70px); }
  .svc__band:first-child.is-open .svc__head { padding-top: calc(11vh + 70px); }

  .svc__band.is-open .svc__head { padding: 11vh 0 3vh; }

  .svc__index { margin-bottom: 1.6em; }
  .svc__cue { margin-top: 2.4em; }
  .svc__panel-grid { grid-template-columns: 1fr; row-gap: 2.6em; }
  .addon { grid-template-columns: 1fr; row-gap: 0.5em; padding: 1.7em 0; }
  .addon__num { display: block; }
  .addon__copy { grid-column: 1; margin-top: 0.7em; }
}

/* Someone who has asked for less motion still gets the open and close,
   just without the scale drift on the video. */
@media (prefers-reduced-motion: reduce) {
  .svc__video,
  .svc__band:hover .svc__video,
  .svc__band.is-open .svc__video { transform: none; transition: none; }
}