/* ==========================================================================
   SERVICES - "Cleaning Services Designed for You"
   Measured against 1280 x 832 frames. The composition is absolutely positioned
   inside a stage of exactly the design's dimensions, scaled by the shared --u,
   so every value below is the design pixel number.
   ========================================================================== */

.services {

  --card-radius: calc(12 * var(--u));
  --card-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgb(43 28 18 / 0.18);
  /* Axis kept from the export; the ramp is now a warm one, deep orange through
     amber to the golden yellow, so it reads as the reference's layered paper
     rather than the orange-to-teal sweep it used to be. */
  --card-gradient: linear-gradient(
    249deg,
    #e36708 0%,
    #f26e09 21%,
    #f58512 37%,
    #f89618 54%,
    #fbac21 71%,
    #febf28 88%,
    #ffc42a 100%
  );
  position: relative;
  display: grid;
  place-items: center;
  /* height, not min-height. The frame's layout box is a fixed 832 * --u tall,
     so with the navbar's band reserved on top the section grew past the window
     - and it is pinned, which put the bottom card 100px below the fold with no
     way to scroll to it. Fixed to the window, the frame is scaled into what is
     left and the whole composition is always on screen. */
  height: 100svh;
  overflow: hidden;
  /* Margin rather than padding for the gap to the sections either side. The
     section clips its own overflow at exactly 100svh, which is what keeps the
     shots cropped the way the composition wants; padding there would grow that
     box and let more of them show. Margin adds the space without touching it. */
  margin-block: calc(150 * var(--u));
  /* The band the fixed navbar occupies. Reserved here rather than left to
     chance: the composition is centred, and its topmost card sits 5px from the
     frame's own top edge, so without this the bar covered 66px of it. The frame
     is fitted to the content box, so reserving the space shrinks it to suit. */
  padding-top: calc(96 * var(--u));
  background-color: var(--c-bg);
}

/* The design frame. Every card is laid out inside it, so nothing here should
   ever be cut - but --u is derived from 100vw, which counts the scrollbar, and
   below --u's 0.72 floor the frame stops shrinking while the window carries on.
   Either way the frame ends up wider than the section that clips it, and the
   grid start-aligns the overflow onto the right edge.

   JS narrows this box's own --u until the frame fits whatever the section can
   actually show, so the whole composition is always visible.

   Its own unit rather than a transform on the box. A transform needs a known
   origin, and there is none: an oversized grid item start-aligns instead of
   centring, on both axes and only while oversized, so the same origin was right
   in one window and 50px out in the next. Re-scaling the unit changes the
   layout instead, which leaves the box the right size, properly centred, and
   still measurable in frame coordinates for the orbit. */
/* The frame is wider than the 1280 the rest of the site designs against, and
   that is the point. fitStage scales this box down until it fits the section,
   and the binding constraint is always the height - which left roughly 120px
   of unused section either side. Widening the frame spends that slack on
   spreading the cards rather than on margin, and costs nothing: the height
   still decides the scale, so nothing shrinks. */
.services__stage {
  position: relative;
  width: calc(1440 * var(--u));
  height: calc(832 * var(--u));
}

/* --------------------------------------------------------------------------
   Centre heading
   -------------------------------------------------------------------------- */

.services__title {
  position: absolute;
  top: calc(364.5 * var(--u));
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 3;
}

.services__title em {
  display: block;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: calc(51.6 * var(--u));
  line-height: 1.02;
  /* Figma sets this italic line 6.7px left of where the browser centres it -
     the two engines treat the face's side bearings differently. The upright
     line below needs no such nudge; its ink centre already matches exactly. */
  transform: translateX(calc(-6 * var(--u)));
  color: var(--c-primary);
}

.services__title span {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: calc(43 * var(--u));
  line-height: 1.15;
  color: var(--c-text);
}

/* --------------------------------------------------------------------------
   Image stand-ins, sitting behind the cards
   -------------------------------------------------------------------------- */

.services__shot {
  position: absolute;
  z-index: 1;
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  border-radius: var(--card-radius);
  /* Shows while the photograph decodes, and if one ever fails to load. */
  background-color: var(--c-secondary);
  /* base.css sets `height: auto` on every image; the explicit height above
     outranks it, so this is what keeps the picture from stretching. */
  object-fit: cover;
}

/* Enlarged by about a third, and their centres pushed outward with the cards.
   Each still tucks behind a card - the cards are a layer above - which is what
   makes them read as glimpses rather than as a second row of tiles. */
.services__shot--1 { --x: 369;  --y: 14;  --w: 232; --h: 232; }
.services__shot--2 { --x: 1171; --y: 149; --w: 220; --h: 220; }
.services__shot--3 { --x: 341;  --y: 522; --w: 300; --h: 300; }

/* --------------------------------------------------------------------------
   Service cards
   -------------------------------------------------------------------------- */

.services__card {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* the export shows the copy optically centred */
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  padding-inline: calc(24 * var(--u));
  border-radius: var(--card-radius);
  background-image: var(--card-gradient);
  box-shadow: var(--card-shadow);
  will-change: transform, opacity;
}

/* Centres pushed 14% further out from the heading and each canvas grown 8%,
   both about the card's own centre so the ring stays balanced.

   Then clamped, because the frame is smaller than the 1280 the rest of this
   file assumes: --u comes from 100vw, which counts the scrollbar, and the grid
   start-aligns the oversized stage rather than centring it, so the whole
   overhang lands on the right. Below --u's 0.72 floor the stage stops shrinking
   with the viewport and the loss grows fast - a 900px window only shows design-x
   0..1229.

   Rather than chase that per width, every card's TEXT box (inset 24px) is held
   inside the original design's own extents, 41..1234. No window can then crop
   this worse than it cropped the design it came from. It is why cards 3 and 6
   grow but barely move: on the right there is simply no room left. */
/* Every card's centre pushed 18% further from the middle of the frame, which
   is what the extra 160px of width buys. Heights and widths are untouched -
   only the spread changed. */
.services__card--1 { --x: 53;   --y: 81;  --w: 349; --h: 163; }
.services__card--2 { --x: 709;  --y: 5;   --w: 349; --h: 197; }
.services__card--3 { --x: 1105; --y: 287; --w: 316; --h: 191; }
.services__card--4 { --x: 10;   --y: 372; --w: 278; --h: 224; }
.services__card--5 { --x: 566;  --y: 641; --w: 316; --h: 191; }
.services__card--6 { --x: 1075; --y: 609; --w: 343; --h: 191; }

.services__card-title {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: calc(25 * var(--u));
  line-height: 1.0;
  color: var(--c-bg);
  text-wrap: wrap;   /* base.css balances headings; the export wraps greedily */
}

.services__card-text {
  margin-top: calc(14 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1.12;
  color: var(--c-bg);
  /* base.css sets text-wrap: pretty on paragraphs, which rebalances the last
     line. Figma wraps greedily, so the design's line breaks need it off. */
  text-wrap: wrap;
}

/* Every other title fits on one line at the shared 24px padding, but this one
   breaks after its hyphen in the export, so its text box is narrower. Held at
   the original width even though the card around it grew: the type size did not
   change, so this is the measure that forces the break, not a fraction of the
   card. Scale it with the card and the title snaps back onto one line. */
.services__card--3 .services__card-title {
  max-width: calc(232 * var(--u));
}

/* --------------------------------------------------------------------------
   Phones
   The orbit cannot survive here: fitting a 1280-wide frame into 360px took the
   card text down to 5px. The frame is abandoned entirely and the cards become
   one column at their own size. The image stand-ins go with it - they are
   decorative, and there is no room to place them against anything.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .services {
    display: block;
    height: auto;
    overflow: visible;
    margin-block: calc(72 * var(--u));
    padding: calc(104 * var(--u)) calc(24 * var(--u)) calc(72 * var(--u));
  }

  .services__stage {
    width: auto;
    height: auto;
  }

  .services__title {
    position: static;
    width: auto;
    margin-bottom: calc(44 * var(--u));
  }

  .services__shot {
    display: none;
  }

  .services__card {
    position: static;
    width: auto;
    height: auto;
    margin-bottom: calc(20 * var(--u));
    padding: calc(26 * var(--u));
  }

  .services__card:last-of-type {
    margin-bottom: 0;
  }

  /* Type sized for the window rather than for a frame that is no longer here. */
  .services__card-title {
    font-size: calc(30 * var(--u));
  }

  .services__card-text {
    margin-top: calc(10 * var(--u));
    font-size: calc(22 * var(--u));
  }

  /* The forced break existed to match a 293-wide card in the export. */
  .services__card--3 .services__card-title {
    max-width: none;
  }
}