/* ==========================================================================
   Onesto Studio — Services page
   Builds on styles.css (tokens, header, menu, footer, reveal). Same rule:
   desktop sizes are design pixels on a 1366px artboard, via var(--u).
   ========================================================================== */

/* ---------- Hero ---------- */

.svc-hero {
  position: relative;
  height: calc(607 * var(--u));
  overflow: hidden;
  background: var(--black);
}
.svc-hero__bg {
  position: absolute;
  inset: calc(131 * var(--u)) 0 0;
  background: #2a0f14 url("../images/services-hero-leather.jpg") 100% 50% / 103.6% auto no-repeat;
}

.svc-hero__copy {
  position: absolute;
  left: calc(79 * var(--u));
  top: calc(269.5 * var(--u));
}
.svc-hero__eyebrow {
  font-size: max(11px, calc(15 * var(--u)));
  font-weight: 400;
  line-height: calc(15 * var(--u));
  letter-spacing: .28em;
  text-transform: uppercase;
}
.svc-hero__title {
  margin-top: calc(28 * var(--u));
  font-family: var(--serif);
  font-size: calc(64 * var(--u));
  font-weight: 400;
  line-height: calc(72 * var(--u));
}
.svc-hero__lead {
  margin-top: calc(28.4 * var(--u));
  font-size: max(13px, calc(16 * var(--u)));
  font-weight: 400;
  line-height: calc(22 * var(--u));
  letter-spacing: .065em;
}

/* ---------- Intro band ---------- */

.svc-intro {
  height: calc(166 * var(--u));
  padding-top: calc(60 * var(--u));
  border-bottom: calc(5 * var(--u)) solid var(--maroon);
  background: var(--black);
  text-align: center;
}
.svc-intro__title {
  font-family: var(--serif);
  font-size: calc(22 * var(--u));
  font-weight: 500;
  line-height: calc(22 * var(--u));
  text-transform: uppercase;
}
.svc-intro__lead {
  margin-top: calc(11 * var(--u));
  font-size: max(12px, calc(14 * var(--u)));
  line-height: calc(20 * var(--u));
  letter-spacing: .02em;
}

/* ---------- Service block ---------- */

.svc {
  position: relative;
  height: calc(563 * var(--u));
  background: var(--black);
}

.svc__media {
  position: absolute;
  top: calc(20 * var(--u));
  width: calc(421 * var(--u));
  height: calc(526 * var(--u));
  overflow: hidden;
}
.svc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.svc__media--top img { object-position: 0 0; }
.svc__media--low img { object-position: 50% 67%; }
.svc:hover .svc__media img { transform: scale(1.025); }

.svc__num {
  position: absolute;
  top: calc(12 * var(--u));
  font-family: var(--sans);
  font-size: calc(103 * var(--u));
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.065em;
  color: #7e7970;
}

.svc__copy { position: absolute; }
.svc__eyebrow {
  font-size: max(11px, calc(16 * var(--u)));
  font-weight: 400;
  line-height: calc(16 * var(--u));
  letter-spacing: .225em;
  text-transform: uppercase;
}
.svc__title { line-height: calc(53 * var(--u)); }
.svc__text {
  font-size: max(12px, calc(13 * var(--u)));
  line-height: calc(21 * var(--u));
  letter-spacing: .06em;
}

/* Capabilities — two rows of three, separated by dots */
.svc__caps {
  position: absolute;
  top: calc(449 * var(--u));
  display: flex;
  flex-direction: column;
  row-gap: calc(25 * var(--u));
  padding: calc(16 * var(--u)) 0 calc(19 * var(--u));
}
.caps-row {
  display: flex;
  align-items: center;
  font-size: calc(11.2 * var(--u));
  line-height: calc(14 * var(--u));
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.caps-row li + li::before {
  content: "";
  display: inline-block;
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  margin: 0 calc(19 * var(--u));
  border-radius: 50%;
  background: var(--cream);
  vertical-align: middle;
  transform: translateY(-1px);
}

/* Odd: image left, copy right-aligned */
.svc--odd .svc__media { left: calc(20 * var(--u)); }
.svc--odd .svc__num { left: calc(456 * var(--u)); }
.svc--odd .svc__copy {
  right: calc(79 * var(--u));
  top: calc(44.5 * var(--u));
  text-align: right;
}
.svc--odd .svc__title { margin-top: calc(17.7 * var(--u)); }
.svc--odd .svc__title + .svc__text { margin-top: calc(37.8 * var(--u)); }
.svc--odd .svc__text + .svc__text { margin-top: calc(32.5 * var(--u)); }
.svc--odd .svc__caps {
  left: calc(469 * var(--u));
  padding-left: calc(31 * var(--u));
  border-left: 1px solid var(--cream);
}

/* Even: image right, copy left-aligned */
.svc--even .svc__media { right: calc(20 * var(--u)); top: calc(21 * var(--u)); }
.svc--even .svc__num { right: calc(461 * var(--u)); }
.svc--even .svc__copy {
  left: calc(77 * var(--u));
  top: calc(63 * var(--u));
}
.svc--even .svc__title { margin-top: calc(37.2 * var(--u)); }
.svc--even .svc__title + .svc__text { margin-top: calc(30.3 * var(--u)); }
.svc--even .svc__text + .svc__text { margin-top: calc(28 * var(--u)); }
.svc--even .svc__caps {
  right: calc(464 * var(--u));
  align-items: flex-end;
  padding-right: calc(22 * var(--u));
  border-right: 1px solid var(--cream);
}

/* ---------- Interlude band ---------- */

.pause {
  position: relative;
  height: calc(205 * var(--u));
  background: var(--maroon);
}
.pause__meta {
  position: absolute;
  top: calc(26 * var(--u));
  left: calc(39 * var(--u));
  right: calc(50 * var(--u));
  display: flex;
  justify-content: space-between;
}
.pause__meta,
.pause__count {
  font-size: max(10px, calc(14 * var(--u)));
  font-weight: 400;
  line-height: calc(14 * var(--u));
  letter-spacing: .2em;
  text-transform: uppercase;
}
.pause__quote {
  position: absolute;
  left: calc(40 * var(--u));
  top: calc(84 * var(--u));
  font-family: var(--serif);
  font-size: calc(37.5 * var(--u));
  line-height: calc(40 * var(--u));
}
.pause__count {
  position: absolute;
  right: calc(49 * var(--u));
  top: calc(138 * var(--u));
  width: calc(442 * var(--u));
  padding-top: calc(16 * var(--u));
  border-top: 1px solid var(--cream);
  text-align: right;
}

/* ---------- One studio ---------- */

.svc-closing {
  position: relative;
  height: calc(314 * var(--u));
  padding: calc(61.5 * var(--u)) 0 0 calc(89 * var(--u));
  background: var(--black);
}
.svc-closing::before {
  content: "";
  position: absolute;
  left: calc(50 * var(--u));
  top: calc(55 * var(--u));
  width: calc(2 * var(--u));
  height: calc(205 * var(--u));
  background: var(--cream);
}
.svc-closing__title {
  font-family: var(--serif);
  font-size: calc(34 * var(--u));
  font-weight: 400;
  line-height: calc(34 * var(--u));
  letter-spacing: .01em;
  text-transform: uppercase;
}
.svc-closing__title em { font-style: italic; }
.svc-closing p {
  margin-top: calc(42.5 * var(--u));
  font-size: max(12px, calc(13 * var(--u)));
  line-height: calc(21 * var(--u));
  letter-spacing: .06em;
}

/* ==========================================================================
   Tablet & mobile
   ========================================================================== */

@media (max-width: 1023.98px) {
  .svc-hero { height: auto; padding-top: var(--header-h); }
  .svc-hero__bg { inset: 0; background-size: cover; background-position: 70% 50%; }
  .svc-hero__copy {
    position: relative;
    inset: auto;
    padding: 64px var(--gutter) 80px;
  }
  .svc-hero__eyebrow { font-size: 12px; }
  .svc-hero__title { margin-top: 20px; font-size: clamp(42px, 9vw, 64px); line-height: 1.08; }
  .svc-hero__lead { margin-top: 20px; max-width: 30em; font-size: 16px; line-height: 1.5; }

  .svc-intro { height: auto; padding: 48px var(--gutter); border-bottom-width: 4px; }
  .svc-intro__title { font-size: 19px; line-height: 1.3; }
  .svc-intro__lead { margin-top: 10px; font-size: 14px; line-height: 1.55; }

  .svc {
    display: flex;
    flex-direction: column;
    height: auto;
    padding-bottom: 56px;
  }
  .svc__media,
  .svc__num,
  .svc__copy,
  .svc__caps { position: static; }
  .svc--odd .svc__media,
  .svc--even .svc__media {
    width: auto;
    height: auto;
    aspect-ratio: 421 / 526;
    max-height: 80vh;
    margin: 0;
  }
  .svc__num { margin: 36px var(--gutter) 0; font-size: 72px; }
  .svc--odd .svc__copy,
  .svc--even .svc__copy { padding: 16px var(--gutter) 0; text-align: left; }
  .svc__eyebrow { font-size: 12px; line-height: 1.4; }
  .svc--odd .svc__title,
  .svc--even .svc__title { margin-top: 16px; line-height: 1.1; }
  .svc--odd .svc__title + .svc__text,
  .svc--even .svc__title + .svc__text { margin-top: 22px; }
  .svc--odd .svc__text + .svc__text,
  .svc--even .svc__text + .svc__text { margin-top: 16px; }
  .svc__text { max-width: 38em; font-size: 15px; line-height: 1.6; letter-spacing: .02em; }

  .svc--odd .svc__caps,
  .svc--even .svc__caps {
    align-items: stretch;
    row-gap: 12px;
    margin: 32px var(--gutter) 0;
    padding: 4px 0 4px 18px;
    border-left: 1px solid var(--cream);
    border-right: 0;
  }
  .caps-row {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 12px;
    font-size: 12px;
    line-height: 1.3;
    white-space: normal;
  }
  .caps-row li { display: flex; align-items: center; gap: 12px; }
  .caps-row li::before,
  .caps-row li + li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin: 0;
    border-radius: 50%;
    background: var(--cream);
    transform: none;
  }

  .pause { height: auto; padding: 28px var(--gutter) 32px; }
  .pause__meta,
  .pause__quote,
  .pause__count { position: static; width: auto; }
  .pause__meta,
  .pause__count { font-size: 11px; line-height: 1.4; }
  .pause__quote { margin-top: 32px; font-size: clamp(28px, 6vw, 38px); line-height: 1.15; }
  .pause__count { margin-top: 28px; padding-top: 14px; }

  .svc-closing { height: auto; padding: 64px var(--gutter) 64px calc(var(--gutter) + 22px); }
  .svc-closing::before { left: var(--gutter); top: 64px; bottom: 64px; height: auto; width: 2px; }
  .svc-closing__title { font-size: clamp(26px, 5.4vw, 34px); line-height: 1.15; }
  .svc-closing p { margin-top: 24px; max-width: 40em; font-size: 15px; line-height: 1.6; letter-spacing: .02em; }
}