/* ============================================================
   services.html — page head + expanded service blocks
   ============================================================ */

/* ---- Page head: the same photographic opening as the home hero,
   at a third of the height. A second page that opened on flat colour
   would read as a different site. ---- */

.page-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--nav-h) + clamp(4rem, 9vw, 8rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  background: var(--blue);
  color: var(--paper);
}

.page-head__media { position: absolute; inset: 0; z-index: -2; }
.page-head__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: saturate(0.7) contrast(1.06) brightness(0.82);
  will-change: transform;
}

.page-head__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgb(10 22 40 / 0.86) 0%, rgb(10 22 40 / 0.62) 45%, rgb(10 22 40 / 0.9) 100%),
    linear-gradient(100deg, rgb(10 22 40 / 0.6) 0%, rgb(10 22 40 / 0) 68%);
}

.page-head__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, #000 5%, transparent 76%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, #000 5%, transparent 76%);
}
.page-head .draft-field { z-index: -1; }

.page-head__body { position: relative; z-index: 1; }

.crumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
}
.crumb a { transition: color 0.4s var(--ease); }
@media (hover: hover) { .crumb a:hover { color: var(--paper); } }

.page-head h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  max-width: 18ch;
}
.page-head .lead {
  margin-top: 1.75rem;
  color: rgb(255 255 255 / 0.74);
}

/* ============================================================
   Service blocks — alternating paper, each one a room
   ============================================================ */

.svc-detail {
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.svc-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.svc-detail--flip .svc-detail__plate { order: 2; }

.svc-detail__plate .media { aspect-ratio: 4 / 3; }

/* The `/01` tag is gone: each service now opens with the same
   masthead the home page uses — rule, name in Title Case, position
   in the set — so the four detail blocks and the six home sections
   are announced identically. The heading itself comes down with it;
   at 48px it was competing with the page title above it. */
.svc-detail h2 {
  margin-top: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);   /* 24 -> 36 */
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 24ch;
}

.svc-detail .section-head { max-width: none; }

.svc-detail__text {
  margin-top: 1.5rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 52ch;
  text-wrap: pretty;
}

.svc-detail__sub {
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.deliverables { display: grid; gap: 0.75rem; }
.deliverables li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--muted);
}
.deliverables svg { width: 14px; height: 14px; color: var(--accent); margin-top: 5px; }

.svc-detail__scope {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  font-style: italic;
  color: var(--muted);
}

/* ---- Closing CTA — the blue band this page ends on ---- */

.svc-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(4rem, 8vw, 7rem);
  text-align: center;
}
.svc-cta__media { position: absolute; inset: 0; z-index: -2; }
.svc-cta__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.4) contrast(1.1) brightness(0.62);
}
/* Left thinner than the props band's: this one is a single short
   paragraph over the image rather than a grid of cards, so the room
   can stay legible underneath without costing anything in contrast.
   At 0.92 flat it was a plain blue rectangle and the photograph was
   being downloaded for nothing. */
.svc-cta__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgb(10 22 40 / 0.92) 0%, rgb(10 22 40 / 0.8) 50%, rgb(10 22 40 / 0.94) 100%),
    radial-gradient(ellipse 70% 80% at 50% 50%, rgb(10 22 40 / 0.45) 0%, rgb(10 22 40 / 0) 75%);
}
.svc-cta h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-h2-big);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
.svc-cta p {
  margin-top: 1.5rem;
  color: var(--muted);
  max-width: 46ch;
  margin-inline: auto;
  line-height: 1.7;
}
.svc-cta .btn { margin-top: 2.5rem; }

@media (max-width: 899px) {
  .svc-detail__layout { grid-template-columns: minmax(0, 1fr); }
  .svc-detail--flip .svc-detail__plate { order: 0; }
  .svc-detail__plate .media { aspect-ratio: 16 / 10; }
}