. The gradient box is the element's own box, so on a full-width block the falloff is measured across the whole column and the phrase shows only a narrow slice of it — shrink-wrapping the box to the text is what makes 0% and 100% mean "Shape" and "Build". And it cannot be the

, because that is a flex item in the lockup: flex blockifies its children, so `display: inline-block` there is simply discarded and the box goes full width again with no warning. The

stays the flex item and centres; the span inside it carries the gradient. ========================================================================== */ #dvl-agency .dvl-agency__headline--gradient { display: inline-block; color: var(--dvl-color-font-dark); background: linear-gradient(135deg, var(--dvl-color-font-light) 0%, var(--dvl-color-font-dark) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* On desktop the three words and the two separators are all plain inline text inside one gradient box, so the phrase is a single run and the falloff crosses all of it. Mobile takes them apart - see the mobile block at the end of this file. */ #dvl-agency .dvl-agency__w, #dvl-agency .dvl-agency__sep { display: inline; } /* Forced-colours mode throws the background away and keeps the fill, which would leave the phrase invisible. Hand it its colour back. */ @media (forced-colors: active) { #dvl-agency .dvl-agency__headline--gradient { background: none; -webkit-text-fill-color: currentColor; } } /* ---- the grey card ------------------------------------------------------ Full viewport, parked below the fold. Stage 2 brings it up to a band across the bottom; stage 3 seats it, holds it long enough to read, then recedes it into the page. transform-origin is 50% 20%, copied from .dvl-services__plane on the homepage. Tipping about a line near the top sends the far edge away and brings the near edge down toward the reader, which is what makes the card read as an object lying back; about the centre it merely leans, and about the top edge it hinges like a lid. THERE IS NO preserve-3d HERE, and the comment that used to sit in this spot claiming it was required was simply wrong. It said the text would stop foreshortening without it. Flattening the children into the card's own plane is EXACTLY what is wanted: the card renders flat, and then the whole rendered result is tipped, so the type foreshortens with it. `transform-style: preserve-3d` only matters when children carry 3D transforms of their own, which none of these do. It was also actively harmful. preserve-3d puts every child into a 3D rendering context where each composited layer is rasterised separately, every frame, while the card tips — and a line would drop out for a frame or two mid-scroll and come back. The computed clip-path, opacity and box of that line were all correct the whole time, which is how you can tell a paint bug from a timeline bug: the state is right and the pixels are missing. backface-visibility went with it, for the same reason — it is another layer-promotion hint buying nothing on a card that never turns away from the viewer. The corner radius arrives with the lift: a full-bleed rectangle has no corners to round, and the moment it has margins it should look like a card. */ #dvl-agency .dvl-agency__card { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; /* The comp leaves a long, deliberate silence between the heading and the line under it — about a fifth of the screen — and that gap is doing the work a paragraph break cannot at this size. */ gap: clamp(40px, 12vh, 165px); padding: calc(var(--dvl-agency-header-clear) + 4vh) var(--dvl-agency-pad) 6vh; background: var(--dvl-agency-card); transform: translate3d(0, 100%, 0); transform-origin: 50% 20%; border-radius: 0; box-shadow: none; will-change: transform; } /* No-JS: the card must not sit over the hero as an opaque slab. Without `.dvl-agency--ready` it is returned to flow-like visibility at the bottom of the act, which is where a reader who never got the timeline should find it. */ #dvl-agency:not(.dvl-agency--ready) .dvl-agency__card { position: relative; inset: auto; transform: none; min-height: 100svh; } #dvl-agency .dvl-agency__lede, #dvl-agency .dvl-agency__sub { margin: 0; text-align: center; } /* "DivLab Begins With The

" - 80 / lh 100 / -2%. Figma reports the family as "Mixed" because the

run is mono and the rest is Inter; that split is the

 element in the markup, not a second style here.
   lh 100 on 80 is 1.25. */
#dvl-agency .dvl-agency__lede {
  font-size: var(--dvl-agency-lede);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--dvl-agency-ink);
}
/* "A Simple, Empty Element…" - Inter LIGHT 300 / 80 / lh 100 / -2%. Same
   size as the headline above it; the weight is the only thing separating
   them, which is why 300 here is not a detail to round off. */
#dvl-agency .dvl-agency__sub {
  font-size: var(--dvl-agency-sub);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--dvl-agency-ink);
}

/* ---- the  token ----------------------------------------------------
   Monospaced, as the comp sets it: it is a literal element name quoted in a
   sentence, and the mono face is what says so. Sized in em so it tracks the
   headline's clamp, and nudged down slightly because a mono face at the same
   px reads larger than the grotesk beside it.

   The browser default for  is a monospace family AND, in some themes,
   a background and a border. Both are cleared here — Hello theme is quiet
   about it but a plugin stylesheet may not be. */
#dvl-agency .dvl-agency__code {
  font-family: var(--dvl-agency-font-mono);
  font-size: 0.94em;
  letter-spacing: -0.02em;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

/* ---- the line mask ------------------------------------------------------
   THE REVEAL IS FROM EACH LINE'S OWN VERTICAL CENTRE, not from below. The
   line is clipped to a zero-height band across its middle and the band opens
   outward, so the type appears to be developing in place rather than sliding
   up into view — which is what the comp shows and what the rest of this
   site's sections deliberately do NOT do.

   `display: block` on the span matters: clip-path on an inline box clips to
   the line box, which for a wrapped line is not the rectangle you think it
   is. Each line is its own block, and the line breaks are authored in the
   markup rather than left to wrapping, so the three lines in the comp are
   three lines at every width above the mobile breakpoint.

   The start state is under --ready only. Without the module every line is
   simply visible. */
/* NO `will-change` HERE. It was `clip-path, opacity`, and it is the other
   half of the dropped-line bug above: will-change promotes each line to its
   own composited layer, and a handful of separately-rasterised layers inside
   a card that is being tipped every frame is exactly the situation a
   compositor drops one of. The reveal is three short clip-path tweens on
   three elements - there is nothing here that needs the hint, and the cost
   of being wrong about it is a line of the headline blinking out. */
#dvl-agency .dvl-agency__ln {
  display: block;
}
#dvl-agency.dvl-agency--ready .dvl-agency__ln {
  clip-path: inset(50% 0 50% 0);
  opacity: 0;
}

/* THE WRAPPER maskLines() BUILDS, and above the breakpoint it does nothing
   but sit there. It is block so that the mobile rules below have a box with
   a height to translate by; here that box is exactly the line's own box, it
   carries no styles of its own, and the clip above still applies to the
   line around it. Desktop line rectangles measure identical with and
   without it. */
#dvl-agency .dvl-agency__lni {
  display: block;
}


/* ==========================================================================
   STAGE 4 — SERVICES & COLLABORATION
   --------------------------------------------------------------------------
   Two columns: the heading is vertically centred against the list, which is
   why it is its own grid cell with `align-self: center` rather than sitting
   at the top of the column. At the comp's proportions the heading lands
   beside the third item, and that only stays true if the column centres.
   ========================================================================== */
/* ==========================================================================
   SERVICES, AND THE HANDOVER OUT OF THE STICKY STAGE
   --------------------------------------------------------------------------
   THE NEGATIVE TOP MARGIN IS THE FIX FOR THE EMPTY SCREEN, and it is worth
   understanding what it is undoing.

   A sticky element always leaves ITS OWN HEIGHT of scroll behind it: the act
   unsticks at the stage's bottom edge and then has a full viewport left to
   scroll past. For the whole of that viewport the timeline is already over
   and the act has nothing in it, so the visitor scrolls a screen of blank
   paper. Putting Services immediately after the stage does NOT reach this
   - measured, the seam between them was exactly 0px and the blank screen was
   still there, because the blank was INSIDE the act, not between the two.

   Pulling Services up by one act height puts it on exactly the same run of
   scroll as that scroll-out, where it paints over it (z-index 2 against the
   stage's 1). So the last stretch of the sequence is Services climbing the
   screen at normal scroll speed, with the receded card still visible above
   it, instead of a screen of nothing. It also takes a viewport of dead
   length out of the document.

   IT MUST EQUAL THE ACT'S HEIGHT EXACTLY. Both are 100svh. If the act ever
   stops being a full viewport, this has to follow it or Services either
   uncovers a strip of blank act or starts climbing over the card too early.

   THE CUE SHEET DEPENDS ON THIS. dvl-agency.js finishes the card's whole
   gesture by cue 8.0 precisely so that it is over before Services begins to
   rise; move this margin and that number has to move with it.
   ========================================================================== */
#dvl-agency .dvl-agency__services {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--dvl-agency-services-pull, 58vh));
  background: var(--dvl-agency-paper);
  /* The bottom pad is deliberately much larger than the top one: above it
     there is a section arriving, below it the page changes colour entirely.
     A dark band starting a short distance under the last line reads as a
     crop rather than as a new chapter. */
  padding: clamp(80px, 14vh, 190px) var(--dvl-agency-pad)
           clamp(150px, 27vh, 360px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
}

#dvl-agency .dvl-agency__services-head {
  align-self: center;
}
/* "Services & Collaboration" - Inter 400 / 67 / auto / -10%. `normal`, not
   a number: Figma says Auto, which is the font's own default line box. */
#dvl-agency .dvl-agency__services-head .dvl-agency__word {
  font-size: var(--dvl-agency-title);
  line-height: normal;
  letter-spacing: -0.1em;
}

#dvl-agency .dvl-agency__list {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.4vh, 52px);
  margin: 0;
  padding: 0;
  list-style: none;
}

#dvl-agency .dvl-agency__item {
  will-change: transform, opacity;
}
#dvl-agency.dvl-agency--ready .dvl-agency__item {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}

/* The tag is a  inside the item rather than a /
 pair: it is a
   label for the sentence below it and nothing else consumes it as data. It
   reuses .dvl-agency__box's look at a slightly tighter track. */
/*  etc - IBM Plex Mono MEDIUM 500 / 18 / auto / -2% / font light.
   Note the tracking is NEGATIVE. These were tracked out at +0.1em when they
   were 13px labels; at 18px the comp sets them tight, and keeping the old
   positive tracking at the new size makes them read as a different element
   entirely. */
#dvl-agency .dvl-agency__tag {
  display: block;
  margin-bottom: 0.7em;
  font-family: var(--dvl-agency-font-mono);
  font-size: var(--dvl-agency-tag);
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.02em;
  color: var(--dvl-agency-mute);
  text-transform: uppercase;
}

/* Service paragraphs - Inter 400 / 36 / lh 50 / -6%. 50 on 36 is 1.3889. */
#dvl-agency .dvl-agency__copy {
  margin: 0;
  font-size: var(--dvl-agency-body);
  font-weight: 400;
  line-height: 1.3889;
  letter-spacing: -0.06em;
  color: var(--dvl-agency-ink);
  max-width: 46ch;
}


/* ==========================================================================
   STAGE 5 — THE OUTRO
   --------------------------------------------------------------------------
   Dark ground, the vector grid, one headline. It is a full viewport so the
   inversion has something to be true of: a short dark strip would flip the
   header twice in a thumb's worth of scroll.

   The grid is drawn in CSS, not as an SVG file — it is four repeating
   linear-gradients (two orthogonal, two diagonal) and therefore resolution
   independent, uploadable-free, and one variable (--dvl-agency-grid-step)
   away from a different density. The diagonals are what make it read as the
   comp's drafting grid rather than as graph paper.

   ID selector + !important again: same Elementor lazy-load rule as the wash.
   ========================================================================== */
#dvl-agency .dvl-agency__outro {
  position: relative;
  z-index: 2;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  box-sizing: border-box !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--dvl-agency-header-clear, 92px) + 2vh)
           var(--dvl-agency-pad)
           calc(var(--dvl-agency-footer-h, 96px) + clamp(20px, 4vh, 60px)) !important;
  background: var(--dvl-agency-dark);
  color: var(--dvl-agency-dark-ink);
}

#dvl-agency .dvl-agency__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,
      var(--dvl-agency-grid) 0 1px,
      transparent 1px var(--dvl-agency-grid-step)),
    repeating-linear-gradient(90deg,
      var(--dvl-agency-grid) 0 1px,
      transparent 1px var(--dvl-agency-grid-step)),
    repeating-linear-gradient(45deg,
      var(--dvl-agency-grid) 0 1px,
      transparent 1px calc(var(--dvl-agency-grid-step) * 1.414)),
    repeating-linear-gradient(-45deg,
      var(--dvl-agency-grid) 0 1px,
      transparent 1px calc(var(--dvl-agency-grid-step) * 1.414)) !important;
}

/* "Turning scattered ideas into clear digital systems"
   Inter LIGHT 300 / 120 / lh 110 / -6% / solid #FFFFFF. 110 on 120 is
   0.9167 - a line height BELOW 1, which is what gives the two lines their
   tight stack in the comp.

   max-width in em, not ch: the comp breaks it "…ideas into / clear digital
   systems" and its text box measures ~1375px at 120px type, which is 11.5em.
   Expressed that way the break survives every viewport instead of only the
   one it was measured at. */
#dvl-agency .dvl-agency__outro-head {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 11.5em;
  text-align: center;
  font-size: var(--dvl-agency-outro);
  font-weight: 300;
  line-height: 0.9167;
  letter-spacing: -0.06em;
  color: var(--dvl-agency-outro-ink, #FFFFFF);
}


/* ==========================================================================
   TABLET — 1024 and below (Elementor's own breakpoint, as everywhere else)
   ========================================================================== */
@media (max-width: 1024px) {
  #dvl-agency .dvl-agency__lockup {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(18px, 4vh, 40px);
  }
  #dvl-agency .dvl-agency__tagline {
    text-align: left;
    white-space: normal;
  }
  #dvl-agency .dvl-agency__services {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(34px, 6vh, 64px);
    align-items: start;
  }
  #dvl-agency .dvl-agency__services-head { align-self: start; }
}


/* ==========================================================================
   MOBILE — 767 and below
   --------------------------------------------------------------------------
   THE PIN GOES AWAY, and that is a decision rather than a fallback. The act
   is roughly three-and-a-half viewports of scroll during which the page
   advances nothing but one animation; with a wheel that is a set piece,
   under a thumb it reads as stuck — the same call dvl-services.js makes for
   its own pinned column. dvl-agency.js reads this breakpoint from
   CONFIG.breakpoint and lets the three panels stack, each revealing on its
   own trigger.

   The authored line breaks in the headline are unwrapped here: three lines
   set for a 1440 canvas become six ragged ones at 390px.
   ========================================================================== */
/* ==========================================================================
   TABLET (768px - 1366px)
   -------------------------------------------------------------------------- */
@media (max-width: 1366px) and (min-width: 768px) {
  #dvl-agency {
    --dvl-agency-stage-h: 380vh;
    --dvl-agency-services-pull: 50vh;
  }
}

@media (max-width: 767px) {

  /* ======================================================================
     MOBILE - and it is the SAME MACHINERY as desktop, not a stacked
     fallback any more.
     ----------------------------------------------------------------------
     This block used to switch the whole sequence off: no sticky, no scroll
     length, no WebGL, three panels simply stacked. The storyboard asks for
     the opposite - the hero pins on a phone too, the prism turns with the
     scroll, and three words take turns at the bottom right - so the stage,
     the sticky act, the card and the whole scrubbed timeline are all kept.
     What changes here is TYPE, PLACEMENT and DURATION, not structure.

     THE MOBILE FRAME IS 402px WIDE with 24px gutters, derived the same way
     the desktop frame was: the service-paragraph box reads 354px, and
     402 - 24 - 24 = 354 exactly. Sizes below are
     clamp(floor, figma-px / 4.02 vw, figma-px), so a 402px-wide phone
     matches the comp exactly and narrower ones scale down.
     ====================================================================== */

  #dvl-agency {
    --dvl-agency-pad: 24px;                              /* mobile gutter   */

    --dvl-agency-display: clamp(28px, 8.955vw, 36px);    /* "Agency"     36 */
    --dvl-agency-tagline: clamp(36px, 11.94vw, 48px);    /* Shape/Test   48 */
    --dvl-agency-lede: clamp(28px, 8.955vw, 36px);       /* DivLab…      36 */
    --dvl-agency-sub: clamp(28px, 8.955vw, 36px);        /* A Simple…    36 */
    --dvl-agency-title: clamp(28px, 8.955vw, 36px);      /* "Services &" 36 */
    --dvl-agency-body: clamp(19px, 5.97vw, 24px);        /* service copy 24 */
    --dvl-agency-tag: clamp(12px, 3.483vw, 14px);        /*      14 */
    --dvl-agency-box: clamp(12px, 3.483vw, 14px);        /*  14 */
    --dvl-agency-outro: clamp(38px, 11.94vw, 48px);      /* closing head 48 */

    /* TALLER than desktop's 680svh, which is the opposite of what it was.
       560svh looked generous on paper - 4.6 viewports - but the three word
       beats only occupied a quarter of it, which came to 389px each on a
       875px phone. A single iOS flick carries 1000-2000px, so one gesture
       consumed the entire sequence and it read as the page lurching rather
       than as three beats.

       820svh with the re-weighted cue sheet gives each beat about 1200px -
       roughly one unhurried swipe - while leaving the card section the same
       absolute runway it already had. A phone needs MORE scroll per beat
       than a wheel, not less, because momentum means the finger is not
       metering the distance. */
    /* THE TRACK FOR THE SCRUBBED MOBILE MODES ONLY. In the shipped 'flow'
       mode the block at the bottom of this file overrides the stage to
       height:auto and none of this applies.

       It is short because the words are not on it: 820svh when three word
       beats each had to own about a swipe, 500svh once the track only had
       to carry the card sequence. Kept accurate rather than deleted,
       because CONFIG.mobileMode can still select those modes. */
    --dvl-agency-stage-h: 220vh;
    --dvl-agency-services-pull: 24vh;
  }

  /* ---- type ----------------------------------------------------------
     Figma gives line height in px against a px size, so these are ratios:
     50/36 = 1.3889, 50/24 = 2.0833, 50/48 = 1.0417. The 24px paragraph at
     50px leading is deliberately airy - that is what the comp shows. */
  #dvl-agency .dvl-agency__word { line-height: 1.12; letter-spacing: -0.04em; }
  #dvl-agency .dvl-agency__tagline { line-height: 1.12; letter-spacing: -0.04em; }
  #dvl-agency .dvl-agency__lede { line-height: 1.3889; letter-spacing: -0.04em; }
  #dvl-agency .dvl-agency__sub { line-height: 1.3889; letter-spacing: -0.04em; }
  #dvl-agency .dvl-agency__services-head .dvl-agency__word {
    line-height: 1.12;
    letter-spacing: -0.04em;
  }
  #dvl-agency .dvl-agency__box,
  #dvl-agency .dvl-agency__tag {
    font-weight: 400;            /* Regular on mobile, Medium on desktop */
    line-height: 1.12;
    letter-spacing: -0.06em;
  }
  #dvl-agency .dvl-agency__copy {
    line-height: 2.0833;
    letter-spacing: -0.04em;
    max-width: none;
  }
  #dvl-agency .dvl-agency__outro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  #dvl-agency .dvl-agency__outro-head {
    line-height: 1.0417;
    letter-spacing: -0.06em;
    text-align: center;
    max-width: min(14em, 100%);
    margin: 0 auto;
  }

  /* ---- the hero: "Agency" left, one word at the bottom right ----------
     The lockup stops being a flex row and becomes a positioning frame; the
     two halves are placed independently because the comp puts them on
     opposite corners rather than on one baseline. */
  #dvl-agency .dvl-agency__lockup {
    display: block;
    top: 0;
    left: var(--dvl-agency-pad);
    right: var(--dvl-agency-pad);
    bottom: 0;
    transform: none;
    gap: 0;
  }
  #dvl-agency .dvl-agency__title {
    position: absolute;
    top: 34%;
    left: 0;
  }

  /* ---- the three words ------------------------------------------------
     THIS IS WHERE THE ONE PIECE OF MARKUP BECOMES SOMETHING ELSE. The
     separators go, and the three words are stacked in the same place so the
     timeline can cross-fade between them: each is absolute, right-aligned,
     sharing one origin. The parent keeps a line box of its own height so it
     occupies space even though every child is out of flow.

     Each word carries its OWN gradient here. On desktop the falloff runs
     across the whole phrase; on mobile only one word is ever visible, so a
     shared box would show each of them a third of the ramp and they would
     not match. */
  #dvl-agency .dvl-agency__tagline {
    position: absolute;
    top: 70%;
    left: 0;
    right: 0;
    text-align: right;
    white-space: nowrap;
  }
  #dvl-agency .dvl-agency__sep { display: none; }

  #dvl-agency .dvl-agency__headline--gradient {
    display: block;
    position: relative;
    height: 1.12em;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
  #dvl-agency .dvl-agency__w {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    white-space: nowrap;
    color: var(--dvl-color-font-dark);
    background: linear-gradient(135deg,
                var(--dvl-color-font-light) 0%,
                var(--dvl-color-font-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  @media (forced-colors: active) {
    #dvl-agency .dvl-agency__w {
      background: none;
      -webkit-text-fill-color: currentColor;
    }
  }

  /* The whole tagline is no longer hidden as one - the timeline hides and
     shows the individual words - so the desktop start state is released
     and re-expressed on .dvl-agency__w below. */
  #dvl-agency.dvl-agency--ready .dvl-agency__tagline {
    opacity: 1;
    visibility: visible;
  }
  #dvl-agency.dvl-agency--ready .dvl-agency__w {
    opacity: 0;
    visibility: hidden;
  }

  /* ---- the card -------------------------------------------------------
     Still the full-viewport overlay it is on desktop - the storyboard shows
     the pale slate rising over the hero exactly as it does there - so the
     only changes are the ones a small screen needs: left-aligned copy, real
     line breaks released, and no 3D tip (a 402px-wide card tipping 52
     degrees is mostly edge). */
  /* ---- THE STATIC PRISM ----------------------------------------------
     No WebGL on the phone (CONFIG.tile.mobile3D = false). This is a flat
     render of the SAME prism - same geometry, same studio, same glass -
     with the page's own wash behind it as the refraction backdrop, so the
     pink in it is real transmitted colour rather than a tint. That is why
     the wash is switched off here: it is already IN the image, and
     doubling it would darken the left edge.

     The URL is relative to THIS STYLESHEET, so the one path is correct on
     the test page and in the theme (both have assets/ beside the css).

     background-size: cover with a top-left origin, because the prism is
     composed into the upper-left of the frame and the bottom is empty
     wash - cropping from the bottom loses nothing.

     It still fades out on meshLift like the canvas did: the timeline
     tweens this element's opacity, not the renderer's. Nothing else moves,
     which is the point - the words carry the motion. */
  #dvl-agency .dvl-agency__mesh {
    filter: none;
    background-image: none !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    height: 100lvh;
    z-index: 1;
  }
  #dvl-agency .dvl-agency__wash {
    display: block !important;
    z-index: 0;
  }
  #dvl-agency .dvl-agency__lockup {
    z-index: 2;
  }

  /* ---- the card is an overlay here too --------------------------------
     Full viewport, parked below the fold, brought up by the scrubbed
     timeline exactly as on desktop. Only its internals change for a narrow
     column: left-aligned, tighter padding, and no shadow or rounding -
     both of those belong to the 3D recede. */
  #dvl-agency .dvl-agency__card {
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: clamp(28px, 7vh, 64px);
    padding: calc(var(--dvl-agency-header-clear) + 3vh)
             var(--dvl-agency-pad) 8vh;
    box-shadow: none;
    border-radius: 0;
    will-change: transform;
  }

  #dvl-agency .dvl-agency__lede,
  #dvl-agency .dvl-agency__sub {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  #dvl-agency .dvl-agency__ln,
  #dvl-agency .dvl-agency__lni {
    text-align: center;
  }

  /* ---- THE LINE IS A MASK HERE, NOT A CLIP ---------------------------
     The authored desktop line cuts are wrong at 402px, so the copy wraps
     to the device. The spans stay block-level, but for a different reason
     than they do on desktop: up there the block box is what clip-path
     clips, here it is the window the wrapper slides up into.

     WHY THE SWITCH. clip-path on a text box is re-rasterised against the
     glyph bounds on the CPU every time the value changes, and under a
     scrub that is every scroll tick. On iOS Safari it was the last
     CPU-side paint left in the mobile sequence and it landed on the
     busiest stretch of it. A mask plus a translate is two compositor
     properties and no repaint at all. See CONFIG.revealMobile.

     THE HEADROOM IS FOR DESCENDERS. overflow:hidden clips to the padding
     box, and a tight line box cuts the tails off g, p and y - both lines
     of this copy have them. The padding gives the clip somewhere to spill
     and the matching negative margin takes the space back, so the rhythm
     between the lines is unchanged. CONFIG.revealMobile.lift is the other
     half: the start state translates 100% PLUS a few px, so the top of the
     line does not peek into that strip before the reveal begins. */
  #dvl-agency .dvl-agency__ln {
    display: block;
    overflow: hidden;
    padding-bottom: 0.18em;
    margin-bottom: -0.18em;
  }

  /* will-change IS CORRECT HERE, and it is the opposite of the call made
     for the desktop lines a few hundred lines up - so the difference is
     worth stating. Up there the hint was `clip-path, opacity`, it promoted
     three separately-rasterised layers inside a card being tipped in 3D
     every frame, and the compositor dropped one of them: a line of the
     headline blinking out mid-scroll.

     Here there is no 3D on the act at all (perspective: none), the
     promoted properties are transform and opacity rather than clip-path,
     and a layer that only translates never needs re-rasterising. That is
     precisely the case will-change is for. */
  #dvl-agency .dvl-agency__lni {
    will-change: transform, opacity;
  }
  #dvl-agency.dvl-agency--ready .dvl-agency__lni {
    opacity: 0;
  }
  /* The line itself is never clipped or faded here - the wrapper inside it
     carries the whole reveal, and the line only has to stay a window. */
  #dvl-agency.dvl-agency--ready .dvl-agency__ln {
    clip-path: none;
    opacity: 1;
  }

  /* ---- services -------------------------------------------------------
     One column, and the tag sits UNDER its paragraph on mobile, which is
     what the comp shows - so the order is flipped rather than restyled. */
  #dvl-agency .dvl-agency__services {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 7vh, 72px);
    /* Clear of the floating header, measured rather than guessed. This only
       saves the FIRST line though - everything after it still scrolls
       behind. The bar below is what actually fixes the collision. */
    padding: calc(var(--dvl-agency-header-clear) + clamp(32px, 6vh, 72px))
             var(--dvl-agency-pad)
             clamp(96px, 18vh, 200px);
  }
  #dvl-agency .dvl-agency__list {
    gap: clamp(34px, 5vh, 56px);
  }
  #dvl-agency .dvl-agency__item {
    display: flex;
    flex-direction: column;
  }
  #dvl-agency .dvl-agency__tag {
    order: 2;
    margin-top: 0.2em;
    margin-bottom: 0;
  }
  #dvl-agency .dvl-agency__copy { order: 1; }
}





/* ==========================================================================
   MOBILE, CONFIG.mobileMode === 'flow'   -   THE SHIPPED MOBILE LAYOUT
   --------------------------------------------------------------------------
   No sticky, no scroll track, no scrub. The hero is one ordinary screen,
   the card is the next section under it, and the page scrolls past both
   natively. dvl-agency.js adds .dvl-agency--flow only in this mode, so the
   sticky mobile build in the block above stays intact and reachable behind
   CONFIG.mobileMode.

   IT LIVES OUTSIDE THAT BLOCK, AND AFTER IT, ON PURPOSE. Several of these
   rules tie with one up there on specificity - both are an id plus a class
   plus a class - so source order is what decides them, and a later block is
   the only thing that reliably wins without an !important arms race.

   THE ::before IS THE STRUCTURAL TRICK, and it is worth understanding
   before editing anything here. The card is a CHILD of the act, because on
   desktop it is an overlay that rises over the pinned hero. Put that same
   tree in normal flow with a fixed-height act and the act traps the card
   inside itself and clips it - measured, in an early attempt, the card
   landed at document y=24, inside the hero, behind the prism.

   CSS cannot reparent. So the act goes height:auto and a pseudo-element
   contributes exactly one screen of flow: the prism and the lockup are
   positioned absolutely over that band, and the card simply follows it as
   the next thing in the document. Same markup, same desktop behaviour,
   and the phone gets hero-then-card without a wrapper div.
   ========================================================================== */
@media (max-width: 767px) {

  /* No track. The stage collapses onto its content and the document is
     exactly as long as the sections in it. */
  #dvl-agency.dvl-agency--flow .dvl-agency__stage {
    height: auto;
  }

  /* The act stops being a viewport-sized window and becomes an ordinary
     block that grows. overflow returns to visible because there is no
     fixed height left to clip against, and `top` is released because a
     non-sticky element with top:0 and position:relative would shift. */
  #dvl-agency.dvl-agency--flow .dvl-agency__act {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    perspective: none;
  }
  #dvl-agency.dvl-agency--flow .dvl-agency__act::before {
    content: "";
    display: block;
    height: 100vh;
    height: 100svh;
  }

  /* Both hero layers are pinned to that band rather than to the act, which
     is now several screens tall. The mesh already sets top/height for its
     own reasons in the block above; the lockup is stretched top-to-bottom
     up there and has to be cut back to one screen here or it would run the
     whole length of the card. */
  #dvl-agency.dvl-agency--flow .dvl-agency__lockup {
    position: absolute;
    top: 0;
    bottom: auto;
    height: 100vh;
    height: 100svh;
  }

  /* ---- and the card returns to the flow ------------------------------
     It is a full-viewport overlay everywhere else because it rises over a
     pinned hero. With nothing pinned there is nothing to rise over, so it
     is simply the next section, arriving when you reach it. The opacity is
     the start state for buildFlow()'s one-shot entrance; the transform
     that parked it a screen below is released, because here it has a
     position of its own in the document. */
  #dvl-agency.dvl-agency--flow .dvl-agency__card,
  #dvl-agency.dvl-agency--ready.dvl-agency--flow .dvl-agency__card {
    position: relative;
    inset: auto;
    transform: none;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  #dvl-agency.dvl-agency--ready.dvl-agency--flow .dvl-agency__card {
    opacity: 0;
  }

  /* The pull-up exists to cancel the sticky act's scroll-out. There is no
     scroll-out to cancel here, so leaving it would eat a screen of the
     card - see the long note on .dvl-agency__services. */
  #dvl-agency.dvl-agency--flow .dvl-agency__services {
    margin-top: 0;
  }
}

/* ==========================================================================
   LANDSCAPE MOBILE (iPhone 15/16 Pro landscape, height <= 550px)
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 550px),
       (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
  #dvl-agency {
    --dvl-agency-stage-h: 260vh !important;
    --dvl-agency-services-pull: 29vh !important;
  }

  /* Hero Lockup & Tagline - Ensure words ('Shape', 'Test', 'Build') are 100% visible */
  #dvl-agency .dvl-agency__lockup {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: max(var(--dvl-agency-pad), env(safe-area-inset-left)) !important;
    right: max(var(--dvl-agency-pad), env(safe-area-inset-right)) !important;
    height: 100vh !important;
    height: 100svh !important;
    transform: none !important;
    display: block !important;
    z-index: 2 !important;
  }

  #dvl-agency .dvl-agency__title {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 0 !important;
  }

  #dvl-agency .dvl-agency__word {
    font-size: clamp(26px, 7.5vh, 40px) !important;
    line-height: 1.12 !important;
  }

  #dvl-agency .dvl-agency__box {
    font-size: clamp(9px, 2.5vh, 12px) !important;
    margin-top: 0.3em !important;
  }

  #dvl-agency .dvl-agency__tagline {
    position: absolute !important;
    top: auto !important;
    bottom: max(22px, calc(env(safe-area-inset-bottom, 14px) + 10px)) !important;
    right: 0 !important;
    left: auto !important;
    text-align: right !important;
    font-size: clamp(20px, 6.5vh, 28px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #dvl-agency .dvl-agency__sep {
    display: none !important;
  }

  #dvl-agency .dvl-agency__headline--gradient {
    display: block !important;
    position: relative !important;
    height: 1.15em !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
  }

  #dvl-agency .dvl-agency__w {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    white-space: nowrap !important;
    color: var(--dvl-color-font-dark) !important;
    background: linear-gradient(135deg,
                var(--dvl-color-font-light) 0%,
                var(--dvl-color-font-dark) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  #dvl-agency.dvl-agency--ready .dvl-agency__tagline {
    opacity: 1 !important;
    visibility: visible !important;
  }

  #dvl-agency.dvl-agency--ready .dvl-agency__w {
    opacity: 0;
    visibility: hidden;
  }

  /* Section 2 Card in landscape mobile */
  #dvl-agency .dvl-agency__card,
  #dvl-agency.dvl-agency--flow .dvl-agency__card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: clamp(6px, 2vh, 12px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: max(var(--dvl-agency-pad), env(safe-area-inset-left)) !important;
    padding-right: max(var(--dvl-agency-pad), env(safe-area-inset-right)) !important;
    z-index: 6 !important;
  }

  #dvl-agency .dvl-agency__lede,
  #dvl-agency .dvl-agency__sub {
    width: 100% !important;
    max-width: 92% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(16px, 4.2vh, 22px) !important;
    line-height: 1.25 !important;
  }

  #dvl-agency .dvl-agency__ln,
  #dvl-agency .dvl-agency__lni {
    text-align: center !important;
  }

  #dvl-agency.dvl-agency--ready .dvl-agency__ln {
    clip-path: none !important;
    opacity: 1 !important;
  }

  #dvl-agency.dvl-agency--ready .dvl-agency__lni {
    will-change: transform, opacity !important;
  }

  #dvl-agency .dvl-agency__outro {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding-top: calc(var(--dvl-agency-header-clear, 48px) + 1vh) !important;
    padding-bottom: calc(var(--dvl-agency-footer-h, 60px) + 1vh) !important;
    padding-left: max(var(--dvl-agency-pad), env(safe-area-inset-left)) !important;
    padding-right: max(var(--dvl-agency-pad), env(safe-area-inset-right)) !important;
  }

  #dvl-agency .dvl-agency__outro-head {
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 18em !important;
    font-size: clamp(24px, 7vh, 40px) !important;
  }
}


/* ==========================================================================
   REDUCED MOTION
   --------------------------------------------------------------------------
   The module checks the same query and skips the sequence entirely, so this
   block only has to guarantee that nothing is left hidden by a start state
   that now has no timeline to undo it.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #dvl-agency.dvl-agency--ready .dvl-agency__ln {
    clip-path: none;
    opacity: 1;
  }
  /* The mobile reveal's start state lives on the wrapper, so releasing the
     line alone would leave the copy sitting 100% below its own mask - i.e.
     invisible, on the one setting where nothing is going to move it. */
  #dvl-agency.dvl-agency--ready .dvl-agency__lni {
    opacity: 1;
    transform: none;
  }
  /* Same reasoning for the flow card: its start state is an opacity in the
     stylesheet, and with the module skipped nothing would ever raise it. */
  #dvl-agency.dvl-agency--ready.dvl-agency--flow .dvl-agency__card {
    opacity: 1;
  }
  #dvl-agency.dvl-agency--ready .dvl-agency__item {
    opacity: 1;
    transform: none;
  }
  #dvl-agency.dvl-agency--ready .dvl-agency__tagline {
    opacity: 1;
    visibility: visible;
  }
  #dvl-agency .dvl-agency__card {
    transform: none;
    box-shadow: none;
  }
}