/* ==========================================================================
   Solutions — Virtual Dimension
   The packaged layer: fixed-scope engagements with a duration, a deliverable
   set and a price band. Services answer "can you do this?"; these answer
   "what do I buy, and for how much?".

   No new visual language. This file only adds what the offer needs that the
   existing pages did not:
     - the scope panel, which is the contact page's title block (a dark
       hairline-divided spec sheet) lifted out of that page's local token
       aliases and rebuilt on the shared --vd-* tokens from theme.css
     - the deliverables list, which is about.css's sand check list, same
       translation
     - the TBC marker, which exists only until the client supplies figures

   Pages load projects.css alongside this file: .pj-wrap, .pj-hero, .pj-btn,
   .pj-row and the whole .pj-anim motion pattern come from there unchanged,
   including the safety inversion and the reduced-motion guard.
   ========================================================================== */

.sl {
  background-color: var(--vd-paper);
  color: var(--vd-ink);
  font-family: var(--vd-body);
}

.sl *,
.sl *::before,
.sl *::after {
  box-sizing: border-box;
}

/* --- shared type ------------------------------------------------------- */

.sl h2 {
  font-family: var(--vd-display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--vd-ink);
  margin: 0;
  max-width: 24ch;
  text-transform: none;
}

.sl p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--vd-muted);
}

/* the hero lede sits wider and slightly larger; .pj-lede centres itself, and
   the detail pages are left-aligned, so they get their own measure */
.sl-hero {
  padding: 84px 0 56px;
  text-align: left;
}

.sl-hero h1 {
  font-family: var(--vd-display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--vd-ink);
  margin: 0;
  max-width: 18ch;
  text-transform: none;
}

.sl-hero .sl-lede {
  margin: 22px 0 0;
  max-width: 58ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--vd-muted);
}

/* --- section rhythm ---------------------------------------------------- */

.sl-section {
  padding: 56px 0;
  border-top: 1px solid var(--vd-line);
}

.sl-section:last-of-type {
  padding-bottom: 88px;
}

.sl-section-body {
  margin-top: 22px;
  max-width: 62ch;
}

.sl-section-body p {
  margin: 0 0 16px;
}

.sl-section-body p:last-child {
  margin-bottom: 0;
}

/* --- who it's for ------------------------------------------------------ */

/* two plain columns: the buyer on the left, the problem on the right. No
   card, no fill — this is the one section that should read as prose. */
.sl-who {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: start;
  margin-top: 26px;
}

.sl-who-role {
  font-family: var(--vd-display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--vd-ink);
  margin: 0;
}

.sl-who-body p {
  margin: 0 0 16px;
}

.sl-who-body p:last-child {
  margin-bottom: 0;
}

/* --- scope panel ------------------------------------------------------- */

/* The contact page's title block: dark ground, mono label above a plain
   value, hairline between rows. It already reads as a spec sheet, which is
   exactly what Duration / Coverage / Price band is. */
.sl-scope {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  border: 1px solid var(--vd-line);
  border-radius: 22px;
  overflow: hidden;
  background: var(--vd-slate);
  box-shadow: 0 1px 2px rgba(28, 42, 46, .04), 0 24px 48px -32px rgba(28, 42, 46, .22);
}

.sl-scope-main {
  padding: 36px;
  color: #e8edee;
}

.sl-scope-head {
  font-family: var(--vd-display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 6px;
}

.sl-scope-note {
  font-size: .875rem;
  line-height: 1.55;
  color: #a8b7bb;
  margin: 0;
}

.sl-cells {
  border-top: 1px solid rgba(232, 237, 238, .16);
  margin: 26px 0 0;
}

.sl-cell {
  border-bottom: 1px solid rgba(232, 237, 238, .16);
  padding: 14px 0;
}

.sl-cell dt {
  font-family: var(--vd-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vd-sand);
  margin: 0 0 5px;
}

.sl-cell dd {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.4;
  color: #e8edee;
}

/* the right half carries the deliverables on the paper ground, so the panel
   reads as one object: what it costs beside what you get */
.sl-scope-aside {
  padding: 36px;
  background: var(--vd-raised);
}

.sl-scope-aside .sl-subhead {
  margin-top: 0;
}

/* --- deliverables ------------------------------------------------------ */

.sl-subhead {
  font-family: var(--vd-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vd-sand);
  margin: 0 0 4px;
}

.sl-checks {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.sl-checks li {
  position: relative;
  padding: 9px 0 9px 30px;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--vd-ink);
  border-bottom: 1px solid var(--vd-line);
}

.sl-checks li:last-child {
  border-bottom: 0;
}

.sl-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23b29e84' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

/* --- method ------------------------------------------------------------ */

/* The research copy, deliberately below the offer. It is credibility, not
   the pitch — so it reads as a quieter column than everything above it. */
/* Where a page has a video to show, the prose and the video sit side by side
   and .sl-method wraps both. Pages without a video use .sl-method-body on its
   own and are untouched by this.

   Both columns are proportional rather than the prose being pinned at its
   62ch measure. Pinning it was the first attempt and it failed at 1024: the
   fixed column would not yield, so the video absorbed the entire shrink and
   came out 349px wide — a video too small to read a road surface in. At 1.15fr
   the prose still lands on 62ch at the widest the page ever gets (.pj-wrap
   caps at 1200px, so it is capped by geometry rather than by a max-width) and
   both columns give ground together on the way down. */
.sl-method {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 22px;
}

/* inside the grid the column is the measure, so the inner cap comes off —
   two things fighting over one width is how columns end up with a gutter
   nobody asked for */
.sl-method > .sl-method-body {
  margin-top: 0;
  max-width: none;
}

.sl-method-body {
  margin-top: 22px;
  max-width: 62ch;
}

.sl-method-body p {
  margin: 0 0 16px;
  font-size: .9375rem;
  line-height: 1.7;
}

.sl-method-body p:last-child {
  margin-bottom: 0;
}

/* --- method video ------------------------------------------------------ */

.sl-media {
  margin: 0;
}

/* The frame carries the radius and the hairline so the player matches the
   scope panel above it rather than sitting on the page as a bare rectangle.
   overflow: hidden is what actually clips the iframe's own square corners. */
.sl-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--vd-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--vd-slate);
}

.sl-video iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* webflow.css has a bare `figcaption { text-align: center }`, which centred
   this against a page where nothing else is centred. */
.sl-media-cap {
  margin: 12px 0 0;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--vd-muted);
  text-align: left;
}

/* --- closing CTA ------------------------------------------------------- */

.sl-cta {
  margin-top: 30px;
  padding: 34px 36px;
  border: 1px solid var(--vd-line);
  border-radius: 22px;
  background: var(--vd-raised);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.sl-cta-copy {
  max-width: 46ch;
}

.sl-cta-copy h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  max-width: none;
}

.sl-cta-copy p {
  margin: 12px 0 0;
  font-size: .9375rem;
}

/* --- listing page ------------------------------------------------------ */

/* Reuses .pj-row wholesale. The only addition is the price line, which the
   projects rows had no equivalent for. */
.sl-row-price {
  margin: 0 0 18px;
  font-family: var(--vd-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vd-ink);
}

.sl-note {
  margin: 30px 0 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--vd-muted);
  max-width: 62ch;
}

/* --- responsive -------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .sl-scope {
    grid-template-columns: 1fr;
  }

  .sl-who {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Stacked, so the measure has to come back — a single 1fr column here is
     the full width of .pj-wrap, which is around 119 characters of Inter and
     unreadable. The video takes the same 62ch so the two blocks line up
     rather than the player running wider than the text it illustrates. */
  .sl-method {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sl-method > .sl-method-body,
  .sl-media {
    max-width: 62ch;
  }
}

@media screen and (max-width: 640px) {
  .sl-hero {
    padding: 56px 0 40px;
  }

  .sl-section {
    padding: 40px 0;
  }

  .sl-section:last-of-type {
    padding-bottom: 64px;
  }

  .sl-scope-main,
  .sl-scope-aside {
    padding: 26px 22px;
  }

  .sl-cta {
    padding: 26px 22px;
  }
}