/* ============================================================================
   L&T FINANCE — INTEGRATED DIGITAL CAMPAIGN
   Five sections: a full-bleed Bumrah hero, a four-stage communication rail, a
   composed campaign grid, the Fraud Awareness film on its own ground, and the
   closing figures.

   Written mobile-first for real: every rule outside a media query targets a
   ~390px canvas, and larger screens only ever ADD to it through min-width
   blocks. Nothing here is a desktop layout folded back down.

   Layered on top of style.css, which already supplies the design tokens, the
   topbar/footer chrome, the reveal system, the .count count-up hook and the
   .btn set.

   The chrome section repeats the equivalents in casestudy-vsi.css and the
   other live studies at IDENTICAL values so the case studies read as one
   system. They are duplicated rather than shared for the reason those files
   already give: each also carries its own layout, which has no business
   loading here, and lifting the common ~200 lines into a shared casestudy.css
   would let adding this page regress six live ones.

   ---------------------------------------------------------------------------
   COLOUR — one PORTFOLIO ACCENT and one CAMPAIGN ACCENT, and they are not
   interchangeable.

   #b162fe (--primary-red, aliased --cs-red) is the PORTFOLIO's mark. It
   carries the shared chrome and nothing else: the topbar arrow, the eyebrow
   rules, .btn--primary, the next-project arrow. It does not change per client,
   on this page or any other.

   The yellow (#ffca08), sky (#46abd7), blue (#1673c1) and navy (#062c51) are
   the CAMPAIGN's, and every one of them was SAMPLED off the masters rather
   than picked from a brand guideline PDF — the yellow off the Just Zoom
   benefit bars, the sky off the same post's ground, the blue off the Personal
   Loan emailer, the navy off the Business Loan emailer. They carry state that
   belongs to this work: the flow rail's fill, the active step, the media hover
   border, the film section's ground. Yellow never sets a heading and never
   becomes the page ground. At page scale the campaign palette is a few per
   cent of the pixels, which is what keeps a financial-services case study from
   turning into a bank's own website.

   TEXT COLOUR runs cool here (#f4f6f8 / #a3adb6) rather than the warm off-white
   the Delhivery and VS studies use, because this campaign's own palette is
   cool and warm grey over navy reads dirty.
   ---------------------------------------------------------------------------

     1  Page tokens & gutter
     2  Chrome adjustments
     3  Primitives — media card, sr-only, cursor label
     4  Editorial furniture — headings, section rhythm, breaks
     5  Hero
     6  Communication ecosystem
     7  Campaign system — chapters & blocks
     8  Campaign system — frames (browser, mail, phone, scroll)
     9  Fraud Awareness film
    10  Closing
    11  CTA & next
    12  Media viewer
    13  TABLET         min-width: 768px
    14  DESKTOP        min-width: 900px  (hero art direction switches here)
    15  DESKTOP        min-width: 1025px
    16  LARGE DESKTOP  min-width: 1440px
    17  Reduced motion
   ========================================================================= */

/* --------------------------------------------------------- 1 tokens & gutter */
:root {
  /* Carried straight from the other studies so every case study shares one
     hairline weight and one type hierarchy. --cs-red IS --primary-red. */
  --cs-red:    #b162fe;
  --cs-white:  #f4f6f8;
  --cs-grey:   #a3adb6;   /* 8.6:1 on --ltf-ink */
  --cs-dim:    #838e97;   /* 5.9:1 — AA for the small uppercase metadata this
                             page leans on: captions, counters, frame labels */
  --cs-line:   rgba(244, 246, 248, .1);
  --cs-line-2: rgba(244, 246, 248, .2);
  --cs-panel:  #0e1116;

  /* Campaign palette. Sampled from the masters, not invented. */
  --ltf-ink:      #07090c;
  --ltf-yellow:   #ffca08;
  --ltf-sky:      #46abd7;
  --ltf-blue:     #1673c1;
  --ltf-navy:     #062c51;
  --ltf-yellow-lo: rgba(255, 202, 8, .16);
  --ltf-sky-lo:    rgba(70, 171, 215, .16);

  --cs-space: 5rem;       /* 80px — mobile section rhythm */
  --ltf-h1:   2.15rem;
  --ltf-h2:   1.85rem;

  /* 22px of horizontal breathing room on mobile — style.css drops the global
     gutter to 18.4px under 640px, which is tighter than this page wants. */
  --gutter: 1.375rem;
}

/* ------------------------------------------------------- 2 chrome adjustments */
/* style.css makes the topbar transparent under 640px because the homepage hero
   sits behind it. Here it is a plain bar over a plain canvas, so it needs its
   background back. */
@media (max-width: 640px) {
  .topbar { background: var(--ltf-ink); }
}

.ltf-body { background: var(--ltf-ink); color: var(--cs-white); }

.cs-brand { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.cs-brand__arrow {
  width: 1.3rem; height: .6rem; color: var(--cs-grey);
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.cs-brand:hover .cs-brand__arrow,
.cs-brand:focus-visible .cs-brand__arrow { transform: translateX(-5px); color: var(--cs-red); }

/* the shared nav, in this study's lighter weight */
.topnav { font-weight: 300; letter-spacing: .2em; }
.topnav__menu { background: #10161f; }

/* ============================================================= 3 primitives */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
  white-space: nowrap;
}

/* The media card. One button, one image, optionally one silently looping
   clip stacked on top of the poster. Everything clickable on this page that
   opens the viewer is one of these, so the hover state, the focus ring and
   the hit area are defined once. */
.ltf-media {
  position: relative; display: block;
  width: 100%; margin: 0; padding: 0;
  background: var(--cs-panel);
  border: 1px solid var(--cs-line);
  border-radius: .3rem;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .35s var(--ease), transform .5s var(--ease-out);
}
.ltf-media:hover, .ltf-media:focus-visible { border-color: var(--ltf-yellow); }
.ltf-media:focus-visible { outline: 2px solid var(--ltf-yellow); outline-offset: 3px; }

.ltf-media__img {
  display: block; width: 100%; height: auto;
  transition: transform .7s var(--ease-out), opacity .5s var(--ease);
}
.ltf-media:hover .ltf-media__img { transform: scale(1.025); }

/* the muted preview, built by the JS on first use and laid over the poster */
.ltf-media__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.ltf-media.is-playing .ltf-media__video { opacity: 1; }
.ltf-media.is-playing .ltf-media__img { opacity: 0; }

.ltf-media__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 3.1rem; height: 3.1rem;
  border-radius: 50%;
  background: rgba(7, 9, 12, .6);
  border: 1px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(3px);
  transition: opacity .35s var(--ease), background-color .35s var(--ease);
}
.ltf-media__play svg { width: 1.15rem; height: 1.15rem; fill: #fff; }
.ltf-media.is-playing .ltf-media__play { opacity: 0; }
.ltf-media:hover .ltf-media__play { background: var(--ltf-yellow); }
.ltf-media:hover .ltf-media__play svg { fill: #07090c; }

.ltf-media__time {
  position: absolute; right: .5rem; bottom: .5rem;
  padding: .16rem .42rem;
  font-family: var(--font-cond); font-weight: 400;
  font-size: .6rem; letter-spacing: .1em;
  color: #fff; background: rgba(7, 9, 12, .72);
  border-radius: .15rem;
}

/* the "View" label that follows a fine pointer. display:none until the JS
   decides it is allowed, so a touch visitor never carries it in the DOM. */
.ltf-cursor {
  display: none;
  position: fixed; left: 0; top: 0; z-index: 120;
  transform: translate3d(var(--cx, 0), var(--cy, 0), 0);
  pointer-events: none;
}
.ltf-cursor.is-on { display: block; }
.ltf-cursor span {
  display: grid; place-items: center;
  width: 4.6rem; height: 4.6rem;
  margin: -2.3rem 0 0 -2.3rem;
  border-radius: 50%;
  background: var(--ltf-yellow); color: #07090c;
  font-family: var(--font-cond); font-weight: 500;
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; transform: scale(.4);
  transition: opacity .3s var(--ease), transform .4s var(--ease-out);
}
.ltf-cursor.is-live span { opacity: 1; transform: scale(1); }

/* ================================================== 4 editorial furniture */
.cs-eyebrow {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--font-cond); font-weight: 400;
  font-size: .66rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--cs-grey);
}
.cs-eyebrow__rule { width: 1.6rem; height: 1px; background: var(--cs-red); flex: none; }
.ltf-hero .cs-eyebrow { color: var(--cs-white); }

.ltf-h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--ltf-h2);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--cs-white);
  margin-top: .85rem;
  max-width: 22ch;
}

.ltf-lede {
  margin-top: 1.1rem;
  max-width: 56ch;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--cs-grey);
}

.ltf-sechead { margin-bottom: clamp(2.4rem, 8vw, 3.6rem); }

/* one-line editorial break between two grid blocks */
.ltf-break {
  margin-block: clamp(2.2rem, 8vw, 3.4rem);
  padding-block: clamp(1.2rem, 4vw, 1.8rem);
  border-block: 1px solid var(--cs-line);
}
.ltf-break__line {
  font-family: var(--font-cond); font-weight: 300;
  font-size: clamp(.95rem, 3.4vw, 1.35rem);
  letter-spacing: .06em;
  color: var(--cs-grey);
  text-align: center;
}

/* ==================================================================== 5 hero
   The height is driven by the WIDTH, never by the viewport — see the note in
   casestudy-ltfs.html. Phones get the 4:5 crop in a 4:5 box, so the plate is
   shown whole; the copy sits in a band beneath it rather than over his face. */
.ltf-hero { position: relative; background: var(--ltf-ink); }

/* Phones get a box NARROWER in ratio than the 4:5 crop (0.66 against 0.8), not
   wider. That direction matters: a narrower box makes object-fit: cover crop
   horizontally — ~8.75% a side, which the crop's margins absorb — and shows
   him head to feet. A box WIDER than 0.8 would crop vertically instead, and
   his hair is at the very top of the plate. The number is also what lifts the
   image from 58% to ~70% of a phone viewport, which is what makes it read as
   a campaign hero rather than a banner. */
.ltf-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 0.66;
  overflow: hidden;
}
/* From 600px up the viewport is tall enough that the crop can be shown whole
   at its true 4:5 — no crop at all, in either axis. */
@media (min-width: 600px) {
  .ltf-hero__media { aspect-ratio: 4 / 5; }
}
.ltf-hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* a slow settle rather than a zoom: 1.5% is enough to read as motion and
     small enough that the 4:5 crop's margins absorb it without eating him */
  transform: scale(calc(1.015 - var(--hero-drift, 0) * .015));
  transform-origin: 50% 22%;
  will-change: transform;
}
.ltf-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(7, 9, 12, .96) 0%,
              rgba(7, 9, 12, .55) 16%,
              rgba(7, 9, 12, 0) 42%);
}

.ltf-hero__inner {
  position: relative;
  margin-top: -3.5rem;   /* the copy rides up into the scrim's dark foot */
  padding-bottom: clamp(2.5rem, 9vw, 4rem);
}

.ltf-hero__title {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--ltf-h1);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--cs-white);
  max-width: 17ch;
  text-wrap: balance;
}

.ltf-hero__desc {
  margin-top: 1.1rem;
  max-width: 46ch;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--cs-grey);
}

.ltf-hero__scale {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .3rem .55rem;
  margin-top: 1.6rem;
  font-family: var(--font-cond); font-weight: 400;
  font-size: .7rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--cs-white);
}
.ltf-hero__stat { white-space: nowrap; }
.ltf-hero__dot { color: var(--ltf-yellow); }

.ltf-hero__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.4rem;
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--cs-line);
}
.ltf-hero__metaitem dt {
  font-family: var(--font-cond); font-weight: 300;
  font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cs-dim);
}
.ltf-hero__metaitem dd {
  margin: .3rem 0 0;
  font-size: .84rem; line-height: 1.4;
  color: var(--cs-white);
}

.ltf-hero__cue {
  display: none;
  align-items: center; gap: .8rem;
  margin-top: 2rem;
  min-height: 44px;
  font-family: var(--font-cond); font-weight: 300;
  font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--cs-dim);
  transition: color .3s var(--ease);
}
.ltf-hero__cue:hover { color: var(--cs-white); }
.ltf-hero__cue-line {
  width: 3rem; height: 1px; background: var(--cs-line-2);
  position: relative; overflow: hidden;
}
.ltf-hero__cue-line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ltf-yellow);
  transform: translateX(-100%);
  animation: ltf-cue 2.6s var(--ease) infinite;
}
@keyframes ltf-cue {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ================================================ 6 communication ecosystem
   One markup, two axes. The rail is a single element and its fill is a
   pseudo-element scaled by --p, which the JS writes as a 0–1 number; whether
   that scale runs down (mobile) or across (desktop) is decided here. */
.ltf-flow {
  padding-block: var(--cs-space);
  border-top: 1px solid var(--cs-line);
}

.ltf-flow__track {
  position: relative;
  display: grid;
  gap: 2.6rem;
  padding-left: 3.1rem;
}

.ltf-flow__rail {
  position: absolute;
  left: 1.05rem; top: .5rem; bottom: .5rem;
  width: 1px;
  background: var(--cs-line);
}
.ltf-flow__fill {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--ltf-yellow), var(--ltf-sky));
  transform: scaleY(var(--p, 0));
  transform-origin: top;
  transition: transform .5s var(--ease-out);
}

.ltf-flow__step { position: relative; }

.ltf-flow__num {
  display: block;
  font-family: var(--font-cond); font-weight: 500;
  font-size: .66rem; letter-spacing: .22em;
  color: var(--cs-dim);
  transition: color .4s var(--ease);
}
.ltf-flow__step.is-live .ltf-flow__num { color: var(--ltf-yellow); }

.ltf-flow__dot {
  position: absolute;
  left: -2.05rem; top: .18rem;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--ltf-ink);
  box-shadow: 0 0 0 1px var(--cs-line-2);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.ltf-flow__step.is-live .ltf-flow__dot {
  background: var(--ltf-yellow);
  box-shadow: 0 0 0 4px var(--ltf-yellow-lo);
}

.ltf-flow__icon {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  margin-top: .9rem;
  border: 1px solid var(--cs-line-2);
  border-radius: 50%;
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.ltf-flow__icon svg {
  width: 1.1rem; height: 1.1rem;
  fill: none; stroke: var(--cs-grey); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .4s var(--ease);
}
.ltf-flow__step.is-live .ltf-flow__icon {
  border-color: var(--ltf-yellow); background: var(--ltf-yellow-lo);
}
.ltf-flow__step.is-live .ltf-flow__icon svg { stroke: var(--ltf-yellow); }

.ltf-flow__title {
  margin-top: 1rem;
  font-family: var(--font-body); font-weight: 600;
  font-size: 1.12rem; letter-spacing: -.01em;
  color: var(--cs-white);
}
.ltf-flow__kind {
  margin-top: .3rem;
  font-family: var(--font-cond); font-weight: 300;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ltf-sky);
}
.ltf-flow__note {
  margin-top: .7rem;
  font-size: .86rem; line-height: 1.65;
  color: var(--cs-grey);
  max-width: 34ch;
}

/* ======================================== 7 campaign system — chapters/blocks */
.ltf-system {
  padding-block: var(--cs-space);
  border-top: 1px solid var(--cs-line);
}

.ltf-chapter {
  margin-top: clamp(3rem, 11vw, 5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--cs-line);
}
.ltf-system > .ltf-sechead + .ltf-chapter,
.ltf-system .shell.ltf-sechead + .ltf-chapter { margin-top: 0; }

.ltf-chapter__num {
  font-family: var(--font-cond); font-weight: 500;
  font-size: .68rem; letter-spacing: .3em;
  color: var(--ltf-yellow);
}
.ltf-chapter__title {
  margin-top: .5rem;
  font-family: var(--font-body); font-weight: 600;
  font-size: 1.35rem; letter-spacing: -.015em;
  color: var(--cs-white);
}
.ltf-chapter__note {
  margin-top: .7rem;
  max-width: 62ch;
  font-size: .88rem; line-height: 1.7;
  color: var(--cs-grey);
}

/* Every block is an explicit grid with a declared column count. Mobile is one
   column throughout — the tablet and desktop blocks below are what introduce
   the pairs, trios and triptychs. */
.ltf-block {
  display: grid;
  gap: 1.6rem;
  margin-top: clamp(1.8rem, 6vw, 2.6rem);
}

.ltf-cell { margin: 0; }
.ltf-cell__cap {
  margin-top: .7rem;
  font-family: var(--font-cond); font-weight: 300;
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cs-dim);
}

/* the reel cells are 9:16 and would otherwise tower over a square beside
   them; capping the media height keeps a mixed row on one baseline */
.ltf-cell--reel .ltf-media { max-width: 300px; margin-inline: auto; }

.ltf-feature__side { display: grid; gap: 1.6rem; }

.ltf-note {
  align-self: start;
  padding: 1.3rem 1.4rem;
  background: var(--cs-panel);
  border: 1px solid var(--cs-line);
  border-left: 2px solid var(--ltf-yellow);
  border-radius: .3rem;
}
.ltf-note__k {
  font-family: var(--font-cond); font-weight: 400;
  font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ltf-yellow);
}
.ltf-note__t {
  margin-top: .35rem;
  font-family: var(--font-body); font-weight: 600;
  font-size: 1.05rem; letter-spacing: -.01em;
  color: var(--cs-white);
}
.ltf-note__b {
  margin-top: .7rem;
  font-size: .85rem; line-height: 1.7;
  color: var(--cs-grey);
}

/* ============================================ 8 frames: browser, mail, phone
   Three chromes, one scrolling body. The chrome's "Open" button is what
   reaches the media viewer — the scrolling body deliberately is NOT a button,
   so a drag inside a capture can never be mistaken for a click. */
.ltf-frame {
  margin: 0;
  background: var(--cs-panel);
  border: 1px solid var(--cs-line);
  border-radius: .5rem;
  overflow: hidden;
  box-shadow: 0 34px 64px -34px rgba(0, 0, 0, .9);
}

.ltf-frame__bar {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .7rem;
  background: linear-gradient(180deg, #171b21, #11141a);
  border-bottom: 1px solid var(--cs-line);
}

.ltf-frame__dots { display: flex; gap: .3rem; flex: none; }
.ltf-frame__dots i {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: rgba(244, 246, 248, .22);
}

.ltf-frame__mailk { display: grid; place-items: center; flex: none; }
.ltf-frame__mailk svg {
  width: .9rem; height: .9rem;
  fill: none; stroke: var(--ltf-sky); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}

.ltf-frame__url {
  flex: 1 1 auto; min-width: 0;
  padding: .22rem .6rem;
  background: rgba(7, 9, 12, .6);
  border-radius: 1rem;
  font-family: var(--font-cond); font-weight: 300;
  font-size: .62rem; letter-spacing: .12em;
  color: var(--cs-grey);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ltf-frame__open {
  display: inline-flex; align-items: center; gap: .4rem;
  flex: none;
  min-height: 34px; padding: 0 .55rem;
  background: none; border: 1px solid var(--cs-line-2);
  border-radius: .25rem;
  font-family: var(--font-cond); font-weight: 400;
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cs-grey);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease),
              background-color .3s var(--ease);
}
.ltf-frame__open svg {
  width: .82rem; height: .82rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.ltf-frame__open:hover, .ltf-frame__open:focus-visible {
  color: #07090c; background: var(--ltf-yellow); border-color: var(--ltf-yellow);
}
.ltf-frame__open:focus-visible { outline: 2px solid var(--ltf-yellow); outline-offset: 2px; }
/* the label is the button's whole point on desktop; on a narrow bar the icon
   carries it and the text is kept for assistive tech only */
@media (max-width: 599px) {
  .ltf-frame__open span {
    position: absolute; width: 1px; height: 1px;
    clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
  }
  .ltf-frame__open { padding-inline: .5rem; }
}

/* The scrolling body. A tall capture at a readable width, clipped to a fixed
   viewport height and scrolled — never scaled down until it is unreadable.
   overscroll-behavior stops a flick inside the capture from carrying on into
   the page once it hits the end. */
.ltf-scroll {
  position: relative;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--cs-line-2) transparent;
  background: #fff;
}
.ltf-scroll img { display: block; width: 100%; height: auto; }

/* A 2880px-wide desktop landing page inside a 344px phone frame is a grey
   smear, and "avoid tiny unreadable screenshots" is the one rule this section
   cannot break. The capture is therefore held at a floor width and the frame
   pans in both axes on a phone. min-width does nothing once the frame is
   wider than the floor, so from 768px up (frame ≈722px) there is no pan at
   all — this costs desktop and tablet nothing. The emailers are deliberately
   NOT given a floor: they are 600px phone-width artwork to begin with. */
.ltf-scroll--page img { min-width: 700px; }
.ltf-scroll:focus-visible { outline: 2px solid var(--ltf-yellow); outline-offset: -2px; }
.ltf-scroll::-webkit-scrollbar { width: 6px; }
.ltf-scroll::-webkit-scrollbar-thumb {
  background: var(--cs-line-2); border-radius: 3px;
}
.ltf-scroll--page  { height: 60vh; max-height: 460px; }
.ltf-scroll--mail  { height: 62vh; max-height: 520px; }
.ltf-scroll--phone { height: 100%; }

/* phone frame — reused for both mobile landing-page captures */
.ltf-phone { margin: 0; }
.ltf-phone__shell {
  position: relative;
  width: min(240px, 62vw);
  margin-inline: auto;
  aspect-ratio: 9 / 19.5;
  padding: .4rem;
  background: linear-gradient(158deg, #262a31, #06080b);
  border-radius: 1.85rem;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .85),
              inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.ltf-phone__notch {
  position: absolute; z-index: 3;
  top: .46rem; left: 50%; transform: translateX(-50%);
  width: 30%; height: .32rem; border-radius: 1rem; background: #06080b;
}
.ltf-phone__shell .ltf-scroll {
  height: 100%;
  border-radius: 1.5rem;
}

.ltf-cap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: .5rem 1rem;
  margin-top: .8rem;
}
.ltf-cap__k {
  font-family: var(--font-cond); font-weight: 300;
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cs-dim);
}
.ltf-cap__open {
  min-height: 34px; padding: 0;
  background: none; border: 0;
  border-bottom: 1px solid var(--cs-line-2);
  font-family: var(--font-cond); font-weight: 400;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cs-grey);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.ltf-cap__open:hover, .ltf-cap__open:focus-visible {
  color: var(--ltf-yellow); border-bottom-color: var(--ltf-yellow);
}

/* ============================================== 9 fraud awareness film
   Its own ground: navy sampled off the Business Loan emailer, washed over the
   page's near-black so the section reads as a different kind of communication
   before a word of it is read. */
.ltf-film {
  position: relative;
  padding-block: calc(var(--cs-space) * 1.1);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(6, 44, 81, .85), transparent 62%),
    linear-gradient(180deg, #04070b, #061421 55%, #04070b);
  border-top: 1px solid var(--cs-line);
}
.ltf-film .cs-eyebrow { color: var(--ltf-sky); }
.ltf-sechead--film .ltf-h2 { max-width: 20ch; }

.ltf-stage {
  margin: 0;
  border: 1px solid var(--cs-line-2);
  border-radius: .5rem;
  overflow: hidden;
  background: #04070b;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95);
}
.ltf-stage__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 0; border-radius: 0;
  cursor: default;
}
.ltf-stage__screen .ltf-media__img {
  width: 100%; height: 100%; object-fit: cover;
}
.ltf-stage__screen:hover .ltf-media__img { transform: none; }

.ltf-stage__bar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .7rem 1rem;
  padding: .75rem .9rem;
  border-top: 1px solid var(--cs-line);
  background: rgba(4, 7, 11, .8);
}
.ltf-stage__meta {
  font-family: var(--font-cond); font-weight: 300;
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cs-dim);
}
.ltf-stage__sound {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: 0 1rem;
  background: var(--ltf-yellow); border: 1px solid var(--ltf-yellow);
  border-radius: .25rem;
  font-family: var(--font-cond); font-weight: 500;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: #07090c;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.ltf-stage__sound svg {
  width: 1rem; height: 1rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.ltf-stage__sound:hover { background: #fff; border-color: #fff; }
.ltf-stage__sound:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ltf-film__cols { margin-top: clamp(2rem, 7vw, 3rem); display: grid; gap: 1.1rem; }
.ltf-film__lead {
  font-family: var(--font-body); font-weight: 500;
  font-size: 1.02rem; line-height: 1.6; letter-spacing: -.008em;
  color: var(--cs-white);
}
.ltf-film__body {
  font-size: .9rem; line-height: 1.75;
  color: var(--cs-grey);
}

.ltf-scenes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem .9rem;
  margin-top: clamp(2rem, 7vw, 3rem);
}
.ltf-scenes__item { min-width: 0; }
.ltf-media--scene { border-color: var(--cs-line-2); }
.ltf-media--scene .ltf-media__img { aspect-ratio: 16 / 9; object-fit: cover; }
.ltf-scenes__cap {
  margin-top: .55rem;
  font-family: var(--font-cond); font-weight: 300;
  font-size: .62rem; letter-spacing: .1em;
  color: var(--cs-dim);
  line-height: 1.5;
}
.ltf-scenes__cap span {
  color: var(--ltf-sky); font-weight: 400;
  margin-right: .4rem;
}

/* ================================================================ 10 closing */
.ltf-close {
  padding-block: var(--cs-space);
  border-top: 1px solid var(--cs-line);
}

.ltf-close__figs {
  display: grid;
  gap: 1.8rem;
  padding-bottom: clamp(2rem, 7vw, 3rem);
  border-bottom: 1px solid var(--cs-line);
}
.ltf-close__fig { display: grid; gap: .3rem; }
.ltf-close__num {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 17vw, 5.5rem);
  line-height: .86;
  letter-spacing: -.01em;
  color: var(--cs-white);
}
.ltf-close__lab {
  font-family: var(--font-cond); font-weight: 300;
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cs-grey);
}

.ltf-close__statement {
  margin-top: clamp(2rem, 7vw, 3rem);
  max-width: 46ch;
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1.05rem, 3.6vw, 1.35rem);
  line-height: 1.5; letter-spacing: -.012em;
  color: var(--cs-white);
}
.ltf-close__meta {
  margin-top: 1.1rem;
  font-family: var(--font-cond); font-weight: 300;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cs-dim);
}

/* ============================================================ 11 CTA & next */
.cs-cta { margin-top: clamp(2.5rem, 8vw, 4rem); }
.cs-cta__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
}
.cs-cta__actions .btn { min-height: 44px; }

.cs-next {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.4rem;
  margin-top: clamp(2.5rem, 8vw, 4rem);
  padding-top: clamp(1.4rem, 4vw, 2rem);
  border-top: 1px solid var(--cs-line);
}
.cs-next__label {
  font-family: var(--font-cond); font-weight: 300;
  font-size: .64rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--cs-dim);
}
.cs-next__link {
  display: inline-flex; align-items: center; gap: 1rem;
  min-height: 44px;
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(1.2rem, 5vw, 1.7rem);
  letter-spacing: -.02em;
  color: var(--cs-white);
  transition: color .35s var(--ease);
}
.cs-next__link .arrow { width: 2.1rem; color: var(--cs-red); }
.cs-next__link:hover, .cs-next__link:focus-visible { color: var(--cs-red); }
.cs-next__link:hover .arrow { transform: translateX(6px); }

/* =========================================================== 12 media viewer
   Three kinds share one dialog. "tall" is the one this page adds: the stage
   itself scrolls and the capture sits at a readable width inside it, because
   a 1080×15471 landing page fitted to the viewport is a grey smear. */
.ltf-lb {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
}
.ltf-lb[hidden] { display: none; }

.ltf-lb__backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 6, 9, .96);
  backdrop-filter: blur(6px);
}

.ltf-lb__dialog {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: .9rem;
  width: min(100%, 1200px);
  max-height: 100svh;
  padding: 3.2rem 1rem 1rem;
}

.ltf-lb__stage {
  display: grid; place-items: center;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
}
.ltf-lb__stage img {
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  max-height: calc(100svh - 12rem);
  object-fit: contain;
}
.ltf-lb__stage video {
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  max-height: calc(100svh - 12rem);
  object-fit: contain;
  background: #04070b;
}

/* The scrolling stage for tall captures.

   --lbw is the capture's own pixel width, written by the JS. The image is
   rendered at
       min(--lbw, max(100%, 720px))
   which reads as three rules at once and all three matter:
     · never wider than the capture really is  — no upscaled 600px emailer
     · never narrower than 720px               — a desktop landing page stays
                                                 legible on a phone, which
                                                 pans instead of squinting
     · otherwise exactly the width available   — no pan when there is room
   That is why the box scrolls in BOTH axes. */
.ltf-lb__scroll {
  width: 100%;
  max-width: min(100%, var(--lbw, 900px));
  max-height: calc(100svh - 12rem);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: .25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, .3) transparent;
}
.ltf-lb__scroll img {
  display: block;
  width: min(var(--lbw, 900px), max(100%, 720px));
  height: auto;
  max-width: none; max-height: none;
}
.ltf-lb__scroll:focus-visible { outline: 2px solid var(--ltf-yellow); outline-offset: 2px; }

.ltf-lb__caption {
  font-family: var(--font-cond); font-weight: 300;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cs-grey);
  text-align: center;
  max-width: 60ch;
}

.ltf-lb__bar { display: flex; align-items: center; gap: 1.2rem; }

.ltf-lb__nav, .ltf-lb__close {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--cs-line-2);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.ltf-lb__nav svg, .ltf-lb__close svg {
  width: 1.05rem; height: 1.05rem;
  fill: none; stroke: var(--cs-white); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.ltf-lb__nav:hover, .ltf-lb__close:hover {
  border-color: var(--ltf-yellow); background: var(--ltf-yellow-lo);
}
.ltf-lb__nav:focus-visible, .ltf-lb__close:focus-visible {
  outline: 2px solid var(--ltf-yellow); outline-offset: 2px;
}
.ltf-lb__nav:disabled { opacity: .28; cursor: default; }
.ltf-lb__nav:disabled:hover { border-color: var(--cs-line-2); background: none; }

.ltf-lb__count {
  font-family: var(--font-cond); font-weight: 300;
  font-size: .68rem; letter-spacing: .18em;
  color: var(--cs-dim);
  min-width: 5ch; text-align: center;
}

.ltf-lb__close { position: absolute; top: .9rem; right: .9rem; z-index: 2; }

/* ================================================== 13 TABLET  min-width 768 */
@media (min-width: 768px) {
  :root {
    --cs-space: 6.5rem;
    --ltf-h1: 3rem;
    --ltf-h2: 2.4rem;
  }

  .ltf-hero__meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .ltf-block--pair,
  .ltf-block--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ltf-block--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* a 3-item trio in 2 columns leaves an orphan; it takes the full row and
     centres, which reads as intended rather than as a gap */
  .ltf-block--trio > :last-child:nth-child(3) {
    grid-column: 1 / -1;
    max-width: calc(50% - .8rem);
    justify-self: center;
  }

  .ltf-block--triptych { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ltf-block--triptych > :last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - .8rem);
    justify-self: center;
  }

  /* The feature block stays ONE column here on purpose. Splitting it at 768
     leaves the desktop landing-page capture 423px wide inside its frame — a
     2880px-wide page at 423px is a capture you cannot read, which is the one
     thing this section is not allowed to do. The phone and the note take the
     row beneath it instead, side by side. */
  .ltf-feature__side {
    align-content: start;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
  }

  .ltf-scroll--page { height: 66vh; max-height: 620px; }
  .ltf-scroll--mail { height: 66vh; max-height: 620px; }

  .ltf-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .ltf-close__figs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
}

/* ============ 14 the hero's art direction switches at 900px, with the source
   media query in the markup. Above it the wide plate is used and the media
   box's HEIGHT IS DERIVED FROM ITS WIDTH — 100vw ÷ 1.85 — so the box is always
   very slightly taller in ratio than the 1.905:1 plate and object-fit: cover
   therefore only ever crops horizontally, by a fixed ~1.5% a side. That is
   what protects both the painted wall type and the L&T lockup at every window
   size, and it is why there is no `height: 100vh` anywhere in this hero.

   The 2000px cap stops the hero growing past a viewport on an ultra-wide
   monitor; above that the plate is centred on the page ground. ================ */
@media (min-width: 900px) {
  .ltf-hero__media {
    aspect-ratio: auto;
    width: min(100%, 2000px);
    margin-inline: auto;
    height: calc(min(100vw, 2000px) / 1.85);
  }
  .ltf-hero__scrim {
    background:
      linear-gradient(to top, rgba(7, 9, 12, .92) 0%, rgba(7, 9, 12, .3) 26%, rgba(7, 9, 12, 0) 52%),
      linear-gradient(to right, rgba(7, 9, 12, .72) 0%, rgba(7, 9, 12, .2) 34%, rgba(7, 9, 12, 0) 58%);
  }
  .ltf-hero__inner {
    position: absolute; inset: auto 0 0 0;
    margin-top: 0;
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
  }
  .ltf-hero__copy { max-width: 40rem; }
  .ltf-hero__title { max-width: 15ch; }
  .ltf-hero__meta {
    max-width: 46rem;
    margin-top: 2rem; padding-top: 1.4rem;
    border-top-color: var(--cs-line-2);
  }
  .ltf-hero__cue { display: inline-flex; position: absolute; right: var(--gutter); bottom: 2.6rem; margin: 0; }
}

/* ================================================= 15 DESKTOP  min-width 1025 */
@media (min-width: 1025px) {
  :root {
    --cs-space: 8rem;
    --ltf-h1: 3.5rem;
    --ltf-h2: 2.85rem;
  }

  .ltf-lede { font-size: 1rem; }

  /* ---- the flow rail turns horizontal ---- */
  .ltf-flow__track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.4rem;
    padding-left: 0;
    padding-top: 3.4rem;
  }
  .ltf-flow__rail {
    left: 0; right: 0; top: .95rem; bottom: auto;
    width: auto; height: 1px;
  }
  .ltf-flow__fill {
    background: linear-gradient(to right, var(--ltf-yellow), var(--ltf-sky));
    transform: scaleX(var(--p, 0));
    transform-origin: left;
  }
  .ltf-flow__step { padding-top: 0; }
  .ltf-flow__dot {
    left: 0; top: -2.7rem;
  }
  .ltf-flow__num { order: -1; }
  .ltf-flow__note { max-width: 30ch; }

  /* ---- the campaign grid opens to its full column counts ---- */
  .ltf-block { gap: 1.9rem; }
  .ltf-block--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ltf-block--trio > :last-child:nth-child(3) {
    grid-column: auto; max-width: none; justify-self: stretch;
  }
  .ltf-block--triptych {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
  }
  /* all three of the tablet overrides have to come off together — leaving
     max-width behind squeezes the post to half its column */
  .ltf-block--triptych > :last-child {
    grid-column: auto; max-width: none; justify-self: stretch;
  }
  .ltf-block--duo {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: end;
  }
  /* only now is there room for the capture and its phone side by side */
  .ltf-block--feature { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); }
  .ltf-feature__side { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 1.9rem; }

  .ltf-scroll--page { height: 72vh; max-height: 700px; }
  .ltf-scroll--mail { height: 72vh; max-height: 700px; }

  .ltf-cell--reel .ltf-media { max-width: none; }
  /* ...except in the duo, where the reel's column is wide enough that an
     uncapped 9:16 stands 932px against an 806px square and takes the row
     over. Capped, the two land within 60px of each other and `align-items:
     end` closes the gap rather than opening one. */
  .ltf-block--duo .ltf-cell--reel .ltf-media { max-width: 430px; margin-inline: auto; }

  .ltf-phone__shell { width: min(260px, 100%); }

  /* ---- film ---- */
  .ltf-film__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.6rem;
  }
  .ltf-film__lead { font-size: 1.2rem; }
  .ltf-scenes { gap: 1.4rem 1.2rem; }

  /* ---- closing ---- */
  .ltf-close__figs { gap: 2.5rem; }
  .ltf-close__num { font-size: clamp(4.5rem, 7vw, 6.5rem); }
  .ltf-close__statement { font-size: 1.5rem; max-width: 52ch; }
}

/* =========================================== 16 LARGE DESKTOP  min-width 1440 */
@media (min-width: 1440px) {
  :root { --ltf-h1: 4rem; --ltf-h2: 3.1rem; }
  .ltf-hero__copy { max-width: 46rem; }
  .ltf-scroll--page { max-height: 760px; }
  .ltf-scroll--mail { max-height: 760px; }
}

/* ========================================================= 17 reduced motion
   Everything that moves on this page is an enhancement over a layout that is
   already complete, so switching all of it off costs nothing but the movement.
   The flow rail is the one thing that must be handled rather than disabled:
   it is drawn full immediately, because a rail stuck at scaleX(0) would read
   as a broken diagram. */
@media (prefers-reduced-motion: reduce) {
  .ltf-hero__img { transform: none; }
  .ltf-media__img,
  .ltf-media:hover .ltf-media__img { transform: none; }
  .ltf-hero__cue-line::after { animation: none; transform: translateX(0); }
  .ltf-flow__fill { transform: none; transition: none; }
  .ltf-flow__step .ltf-flow__dot,
  .ltf-flow__step .ltf-flow__icon,
  .ltf-flow__step .ltf-flow__num { transition: none; }
  .ltf-cursor { display: none !important; }
  .ltf-media, .ltf-media__video, .ltf-frame__open,
  .ltf-stage__sound, .cs-next__link, .cs-next__link .arrow {
    transition: none;
  }
  html { scroll-behavior: auto; }
}