/* Selected Work: editorial rows. Each project gets a cover on the left or
   right (alternating) and its title, line and a View case study cue beside. */
#work .wl-rows a { color: inherit; text-decoration: none; }
.wl-tags { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .4px; text-transform: uppercase; color: var(--color-body); }
/* A. Rows */
.wl-rows { display: grid; gap: 6rem; }
.wl-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-7); align-items: center; }
.wl-row--flip { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.wl-row--flip .bc { order: 2; }
.wl-row__text { display: grid; gap: var(--space-4); justify-items: start; }
.wl-row__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.3vw, 1.875rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--color-ink); text-wrap: balance; }
.wl-row__line { color: var(--color-body); max-width: 34ch; }
/* Made for: a quiet label above the client's own logo, a hairline to the left */
.wl-credit { display: grid; justify-items: start; gap: 4px; margin-top: var(--space-2); padding-left: 8px; border-left: 1px solid var(--color-border); }
.wl-credit__k { font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); }
.wl-credit__logo { height: 16px; width: auto; max-width: none; }
.wl-credit__logo[src*="hktdc"] { height: 34px; } /* stacked mark + wordmark: 16px would make the letters unreadable */
.wl-credit__v { font-weight: 600; color: var(--color-ink); }
/* Hover: no underline. The cover settles into a deeper shadow, the device and
   cards lift, and a quiet "View case study" cue slides its arrow forward. */
.wl-more { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--space-2); font-size: .8125rem; font-weight: 500; letter-spacing: .02em; color: var(--color-muted); transition: color .5s ease; }
.wl-more i { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal; box-shadow: inset 0 0 0 1px var(--color-border);
  transition: background-color .5s ease, color .5s ease, box-shadow .5s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.bc { transition: box-shadow .7s cubic-bezier(.22,1,.36,1); }
a:hover .wl-more, a:focus-visible .wl-more { color: var(--color-ink); }
a:hover .wl-more i, a:focus-visible .wl-more i { background: var(--color-ink); color: #fff; box-shadow: none; transform: translateX(4px); }
a:hover .bc, a:focus-visible .bc { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .04), 0 30px 60px -30px rgb(40 25 10 / .22); }

/* ===== Bespoke covers =====
   Light ground, the client's own brand motif large and pale behind the
   device, one crisp floating card that states the idea, a small logo. Everything inside is
   sized in cqw so a cover reads the same in the grid and in a wide row. */
.bc { position: relative; display: block; overflow: hidden; container-type: inline-size; aspect-ratio: 5 / 4; border-radius: 28px;
  background: var(--bc-ground); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .04); }
.wl-row .bc { aspect-ratio: 16 / 11; }
.bc__motif { position: absolute; z-index: 0; pointer-events: none; }
.bc__motif svg { display: block; width: 100%; height: 100%; }
/* max-width: none, or the global img rule squeezes a wide wordmark */
.bc__mark { position: absolute; z-index: 0; width: auto; max-width: none; pointer-events: none; }
.bc__phone { position: absolute; z-index: 1; width: 31cqw; aspect-ratio: 1119 / 2295; filter: drop-shadow(0 3cqw 5cqw rgb(30 20 10 / .16)); }
.bc__clip { position: absolute; inset: 1.85% 4.4%; border-radius: 10% / 4.9%; overflow: hidden; background: #fff; }
.bc__clip video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.bc__frame { position: relative; display: block; width: 100%; height: auto; }
.bc__float { position: absolute; z-index: 2; display: grid; background: rgb(255 255 255 / .92); border-radius: 2.4cqw;
  box-shadow: 0 .2cqw .5cqw rgb(0 0 0 / .04), 0 2.4cqw 5cqw -1cqw rgb(30 20 10 / .14); font-size: 1.85cqw; line-height: 1.3; color: #1d1d1d; }


/* Claim Tracker: FWD cream with its layered chevrons cut by both edges, no logo.
   The loop plays the real flow; the notification and the card beside it
   tell the claim's journey. */
.bc--ct { --bc-ground: linear-gradient(180deg, #fdf9f5, #faf3ec); }
.bc__edge { top: 50%; transform: translateY(-50%); }
.bc__edge--r { right: 0; height: 76cqw; aspect-ratio: 320 / 760; }
.bc__edge--l { left: 0; height: 56cqw; aspect-ratio: 160 / 560; }
.bc--ct .bc__phone { left: 9cqw; top: 9cqw; }
.bc-toast { left: 51cqw; top: 12cqw; width: 40cqw; grid-template-columns: 3.2cqw 1fr; gap: 1.4cqw; align-items: start; padding: 1.6cqw 1.8cqw; border-radius: 2cqw; font-size: 1.55cqw; color: #333; }
.bc-toast__icon { width: 3.2cqw; height: 3.2cqw; border-radius: .9cqw; background: #e87722 center / 55% no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a4 4 0 0 0-4 4v2.6L3 10.5h10l-1-1.9V6a4 4 0 0 0-4-4zm-1.6 9.6a1.6 1.6 0 0 0 3.2 0' fill='%23fff'/%3E%3C/svg%3E"); }
.bc-track { left: 51cqw; top: 27cqw; width: 40cqw; padding: 2.2cqw 2.4cqw .6cqw; gap: 0; }
.bc-track__top { display: flex; justify-content: space-between; align-items: start; gap: 1.6cqw; padding-bottom: 1.8cqw; margin-bottom: 1.8cqw; border-bottom: 1px solid #f0ebe4; }
.bc-track__claim em { display: block; font-style: normal; color: #e87722; font-size: 1.5cqw; }
.bc-track__claim b { font-weight: 600; font-size: 2.1cqw; }
.bc-track__chip { display: grid; padding: .5cqw 1.2cqw; border-radius: .8cqw; font-size: 1.45cqw; font-weight: 600; white-space: nowrap; }
.bc-track__chip > span { grid-area: 1 / 1; text-align: center; opacity: 0; }
.bc-track__chip { background: #fdf0e6; color: #e87722; }
.bc-track__chip > span:nth-child(2) { opacity: 1; }  /* static: mid-journey */
.bc-track__step { position: relative; display: grid; grid-template-columns: 2.4cqw 1fr; gap: 1.6cqw; padding-bottom: 2cqw; }
.bc-track__step:not(:last-child)::before,
.bc-track__step:not(:last-child)::after { content: ""; position: absolute; left: 1.1cqw; top: 2.6cqw; bottom: .2cqw; width: .2cqw; background: #e6e2dc; }
.bc-track__step:not(:last-child)::after { background: #e87722; transform-origin: top; transform: scaleY(0); }
.bc-track__step--1::after { transform: scaleY(1); }
.bc-track__step i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; box-shadow: inset 0 0 0 .25cqw #cfc9c1; background: #fff; }
.bc-track__step--1 i { background: #e87722; box-shadow: none; }
.bc-track__step--2 i { box-shadow: inset 0 0 0 .25cqw #e87722; }
.bc-track__step b { display: block; font-weight: 600; }
.bc-track__step em { font-style: normal; color: #8a8a8a; font-size: 1.6cqw; }
.bc-track__step--3 > span { opacity: .45; }

/* Motion: the fill rows tick in order, the current step breathes, the device
   lifts on hover. Static and complete for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .bc__phone, .bc__float { transition: transform .7s cubic-bezier(.22,1,.36,1); }
  a:hover .bc__phone { transform: translateY(-2.5%); }
  a:hover .bc__float { transform: translateY(-4%); }
  /* One claim's journey on a 9s loop: Submitted, then In progress (line fills,
     ring pulses), then Completed (last line fills, last dot fills). */
  .bc-track__chip > span, .bc-track__chip, .bc-track__step i, .bc-track__step::after, .bc-track__step--3 > span { animation: 9s cubic-bezier(.22,1,.36,1) infinite; }
  .bc-track__chip > span:nth-child(1) { animation-name: bcChip1; }
  .bc-track__chip > span:nth-child(2) { animation-name: bcChip2; }
  .bc-track__chip > span:nth-child(3) { animation-name: bcChip3; }
  @keyframes bcChip1 { 0%, 28% { opacity: 1; } 32%, 100% { opacity: 0; } }
  @keyframes bcChip2 { 0%, 28% { opacity: 0; } 32%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
  @keyframes bcChip3 { 0%, 62% { opacity: 0; } 66%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
  .bc-track__chip { animation-name: bcChipBg; }
  @keyframes bcChipBg { 0%, 62% { background: #fdf0e6; color: #e87722; } 66%, 94% { background: #e7f3ec; color: #1f7a4a; } 98%, 100% { background: #fdf0e6; color: #e87722; } }
  .bc-track__step--1::after { animation-name: bcLine1; }
  .bc-track__step--2::after { animation-name: bcLine2; }
  @keyframes bcLine1 { 0%, 8% { transform: scaleY(0); } 30%, 96% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
  @keyframes bcLine2 { 0%, 40% { transform: scaleY(0); } 62%, 96% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
  .bc-track__step--2 i { animation-name: bcDot2; }
  .bc-track__step--3 i { animation-name: bcDot3; }
  @keyframes bcDot2 {
    0%, 28% { background: #fff; box-shadow: inset 0 0 0 .25cqw #cfc9c1, 0 0 0 0 rgb(232 119 34 / 0); }
    32% { background: #fff; box-shadow: inset 0 0 0 .25cqw #e87722, 0 0 0 0 rgb(232 119 34 / .35); }
    44% { box-shadow: inset 0 0 0 .25cqw #e87722, 0 0 0 1.2cqw rgb(232 119 34 / 0); }
    48% { box-shadow: inset 0 0 0 .25cqw #e87722, 0 0 0 0 rgb(232 119 34 / .35); }
    58% { background: #fff; box-shadow: inset 0 0 0 .25cqw #e87722, 0 0 0 1.2cqw rgb(232 119 34 / 0); }
    64%, 96% { background: #e87722; box-shadow: inset 0 0 0 .25cqw #e87722, 0 0 0 0 rgb(232 119 34 / 0); }
    100% { background: #fff; box-shadow: inset 0 0 0 .25cqw #cfc9c1; } }
  @keyframes bcDot3 { 0%, 62% { background: #fff; box-shadow: inset 0 0 0 .25cqw #cfc9c1; } 66%, 96% { background: #1f7a4a; box-shadow: inset 0 0 0 .25cqw #1f7a4a; } 100% { background: #fff; box-shadow: inset 0 0 0 .25cqw #cfc9c1; } }
  .bc-track__step--3 > span { animation-name: bcText3; }
  .bc-toast { animation: bcToast 9s cubic-bezier(.22,1,.36,1) infinite; }
  @keyframes bcToast { 0% { opacity: 0; transform: translateY(-2cqw); } 6%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(-2cqw); } }
  @keyframes bcText3 { 0%, 62% { opacity: .45; } 66%, 96% { opacity: 1; } 100% { opacity: .45; } }
}

@media (max-width: 860px) {
  .wl-row, .wl-row--flip { grid-template-columns: 1fr; gap: var(--space-5); }
  .wl-row--flip .bc { order: 0; }
  .wl-rows { gap: var(--space-8); }
}

/* Plain covers, for projects whose bespoke cover is still to come: the same
   paper ground and pale client mark, the loop on the right when there is one,
   otherwise the client's logo or name centred. */
.bc--plain { --bc-ground: linear-gradient(180deg, #fcfaf6, #f6f0e8); }
.bc--plain .bc__mark { height: 13cqw; left: -3cqw; bottom: -2.5cqw; opacity: .07; }
.bc--plain span.bc__mark { font-family: var(--font-display); font-weight: 600; font-size: 13cqw; line-height: 1; height: auto; white-space: nowrap; color: var(--bc-tint); opacity: .1; }
.bc--plain .bc__phone { right: 12cqw; top: 9cqw; }
.bc__centre { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
.bc__centre img { height: 7cqw; width: auto; max-width: none; }
.bc__centre span { font-family: var(--font-display); font-weight: 600; font-size: 6cqw; color: var(--bc-tint); }

/* Web covers: one real screen in a plain browser window, set in from the top
   left and cut by the cover's edge, so it reads as a site rather than a poster. */
.bc__web { position: absolute; z-index: 1; left: 11cqw; top: 12cqw; width: 96cqw; border-radius: 1.6cqw 0 0 0; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 3cqw 6cqw -2cqw rgb(30 20 10 / .18); }
.bc__webbar { display: flex; gap: .9cqw; padding: 1.3cqw 1.6cqw; background: #f3f1ee; border-bottom: 1px solid #e6e6e6; }
.bc__webbar i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #d9d5cf; }
.bc__web img { display: block; width: 100%; height: auto; max-width: none; }
.bc--web .bc__mark { display: none; } /* the window fills the cover; a cut-off wordmark behind it reads as a fragment */

/* A cover with its own ground (IPP: the red of the case header). The window
   takes a deeper shadow so it lifts off a saturated field the way it does off cream. */
.bc--ground { box-shadow: none; }
.bc--ground .bc__web { left: 9cqw; right: 9cqw; width: auto; top: 10cqw; border-radius: 1.6cqw 1.6cqw 0 0; box-shadow: 0 0 0 1px rgb(60 0 8 / .06), 0 1cqw 2cqw -1cqw rgb(60 0 8 / .14), 0 6cqw 12cqw -4cqw rgb(60 0 8 / .38); }
.bc__chev { top: 0; height: 100%; width: 19cqw; }
.bc__chev--l { left: 0; }
.bc__chev--r { right: 0; }

/* Policy Value Withdrawal: Claim Tracker's ground and chevrons, phone on the
   left, the flow's two ideas as cards: values add up to one total, which splits
   by purpose. Same card material as the tracker card (bc__float). */
/* Solid FWD-adjacent deep teal (Tom 2026-11-03); the ring artwork was retired. */
.bc--pv { --bc-ground: #24484c; }
.bc--pv .bc__edge { display: none; }
.bc--pv .bc__phone { left: 32cqw; top: 8cqw; width: 36cqw; } /* alone and centred (Tom: cards off, phone larger) */
.bc-sum { left: 4cqw; top: 24cqw; width: 31.5cqw; padding: 2.2cqw 2.4cqw; gap: 1.1cqw; font-size: 1.6cqw; color: #333; }
.bc-sum__head { font-size: 1.45cqw; color: #8a8a8a; margin-bottom: .3cqw; }
.bc-sum__row, .bc-sum__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1.6cqw; }
.bc-sum__row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bc-sum__total { margin-top: .6cqw; padding-top: 1.4cqw; border-top: 1px solid #f0ebe4; font-weight: 600; }
.bc-sum__total b { font-size: 2.6cqw; color: #e87722; font-variant-numeric: tabular-nums; }
.bc-sum__total i { font-style: normal; font-size: 1.4cqw; }
.bc-split { left: 64.5cqw; top: 46cqw; width: 31.5cqw; padding: 1.4cqw 2.4cqw; gap: 0; font-size: 1.5cqw; color: #333; }
.bc-split__row { display: grid; grid-template-columns: 3.2cqw 1fr auto; gap: 1.4cqw; align-items: center; padding: 1.2cqw 0; }
.bc-split__row + .bc-split__row { border-top: 1px solid #f0ebe4; }
.bc-split__row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bc-split__row em { display: block; font-style: normal; font-size: 1.35cqw; color: #8a8a8a; }
.bc-split__icon { width: 3.2cqw; height: 3.2cqw; border-radius: .9cqw; background: #fdf0e6; position: relative; }
.bc-split__icon::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: #e87722; }
.bc-split__icon--out::after { inset: 34% 22%; border-radius: .3cqw; }
.bc--pv .bc__clip img { display: block; width: 100%; height: auto; }

.bc--pv .bc__float { background: #fff; } /* opaque on the saturated ground */

/* Policy Value Withdrawal motion (Tom 2026-11-03, after Oportun on madhurima.me): one
   8s loop. On a #f8f8f8 ground a thin FWD-orange line draws, drops a touch as it opens
   into the eWallet's Withdraw button, a tap dot presses it, the ground dims and the
   button grows; the grey lifts to the green and the phone rises. Four key screens play,
   1.4s each: a tall screen scrolls to its button, and a tap dot shows the click.
   Reduced motion: the amount step, still. */
.bc-intro { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.bc-intro__ground { position: absolute; inset: 0; background: #f8f8f8; }
.bc-intro__dim { position: absolute; inset: 0; background: rgb(20 20 20 / .5); opacity: 0; }
.bc-intro__btn { position: relative; padding: 2.4cqw 8cqw; border-radius: 2.2cqw; background: #e87722; color: #fff; font-family: var(--font-body); font-size: 3.4cqw; font-weight: 600; letter-spacing: .01em; box-shadow: 0 2cqw 5cqw -2cqw rgb(120 50 0 / .35); transform: scale(0, .04); }
.bc-intro__label { opacity: 0; }
.bc-intro__touch, .bc-reel__tap { position: absolute; border-radius: 50%; background: rgb(150 160 160 / .7); box-shadow: inset 0 0 0 .3cqw rgb(255 255 255 / .9), 0 .6cqw 1.4cqw rgb(0 0 0 / .22); opacity: 0; }
.bc-intro__touch { right: -2.2cqw; bottom: -2.4cqw; width: 5cqw; height: 5cqw; }
.bc-reel { container-type: inline-size; }
/* What the cover shows of the screen, in app px: ~670 in the 16:11 rows, ~590 in the 16:10
   case header. A tall screen scrolls until its end meets that line and stops (Tom: it used to
   scroll past its end and show white under the home bar). */
.bc--pv { --view: 660; }
.case-cover--bespoke .bc--pv { --view: 585; }
.bc-reel__slide { position: absolute; inset: 0; opacity: 0; --lift: 0; --scroll: calc(var(--lift) * 100cqw / 375); }
.bc-reel__slide--scroll { --lift: min(0, var(--view) - var(--h)); }
.bc-reel__slide img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; }
.bc-reel__tap { left: calc(var(--tx) * 100cqw / 375); top: calc((var(--ty) + var(--lift)) * 100cqw / 375); width: 13cqw; height: 13cqw; margin: -6.5cqw 0 0 -6.5cqw; }
/* 9s (Tom: 8s was too fast). Three screens on the loop's own clock: method (tapped on
   One-off), amount (glides in, scrolls slowly to its end, rests, Next is tapped), purpose
   (rests to the end of the loop). Every move eases in and out. */
@media (prefers-reduced-motion: no-preference) {
  .bc-intro__btn { animation: bcPvBtn 9s cubic-bezier(.65,0,.35,1) infinite; }
  .bc-intro__label { animation: bcPvLabel 9s ease-in-out infinite; }
  .bc-intro__ground { animation: bcPvGround 9s ease-in-out infinite; }
  .bc-intro__dim { animation: bcPvDim 9s ease-in-out infinite; }
  .bc-intro__touch { animation: bcPvTouch 9s cubic-bezier(.65,0,.35,1) infinite; }
  .bc--pv .bc__phone { animation: bcPvStage 9s cubic-bezier(.65,0,.35,1) infinite; }
  .bc-reel__slide--method { animation: bcPvMethod 9s cubic-bezier(.65,0,.35,1) infinite; }
  .bc-reel__slide--amount { animation: bcPvAmount 9s cubic-bezier(.65,0,.35,1) infinite; }
  .bc-reel__slide--purpose { animation: bcPvPurpose 9s cubic-bezier(.65,0,.35,1) infinite; }
  .bc-reel__slide--scroll img { animation: bcPvScroll 9s cubic-bezier(.65,0,.35,1) infinite; }
  .bc-reel__slide--method .bc-reel__tap { animation: bcPvTapMethod 9s cubic-bezier(.65,0,.35,1) infinite; }
  .bc-reel__slide--amount .bc-reel__tap { animation: bcPvTapAmount 9s cubic-bezier(.65,0,.35,1) infinite; }
}
@keyframes bcPvBtn { 0% { opacity: 1; transform: translateY(-3cqw) scale(0, .04); } 5.5% { transform: translateY(-3cqw) scale(1, .04); } 9.7% { transform: translateY(0) scale(1, 1); } 17.9% { transform: translateY(0) scale(1, 1); } 19.3% { transform: scale(.96); } 22% { opacity: 1; transform: scale(1.18); } 26.2%, 100% { opacity: 0; transform: scale(1.24); } }
@keyframes bcPvLabel { 0%, 8% { opacity: 0; } 11%, 100% { opacity: 1; } }
@keyframes bcPvGround { 0%, 24% { opacity: 1; } 30%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bcPvDim { 0%, 19% { opacity: 0; } 22% { opacity: 1; } 27.6%, 100% { opacity: 0; } }
@keyframes bcPvTouch { 0%, 9.7% { opacity: 0; transform: translate(16cqw, 11cqw); } 11.7% { opacity: 1; } 17.2% { transform: none; } 19.3% { transform: scale(.82); } 21% { opacity: 1; transform: none; } 24%, 100% { opacity: 0; } }
@keyframes bcPvStage { 0%, 25% { opacity: 0; transform: translateY(6%); } 31% { opacity: 1; transform: none; } 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
/* method 28-46% (tap 36-44), amount 46-81% (scroll 54-63, tap Next 68-76), purpose 76-100% */
@keyframes bcPvMethod { 0%, 46% { opacity: 1; transform: none; } 51%, 100% { opacity: 0; transform: translateX(-8%); } }
@keyframes bcPvAmount { 0%, 46% { opacity: 0; transform: translateX(12%); } 51%, 76% { opacity: 1; transform: none; } 81%, 100% { opacity: 0; transform: translateX(-8%); } }
@keyframes bcPvPurpose { 0%, 76% { opacity: 0; transform: translateX(12%); } 81%, 100% { opacity: 1; transform: none; } }
@keyframes bcPvScroll { 0%, 54% { transform: none; } 63%, 100% { transform: translateY(var(--scroll)); } }
@keyframes bcPvTapMethod { 0%, 36% { opacity: 0; transform: scale(1.25); } 38% { opacity: 1; transform: none; } 40% { transform: scale(.8); } 42% { opacity: 1; transform: none; } 44%, 100% { opacity: 0; transform: none; } }
@keyframes bcPvTapAmount { 0%, 68% { opacity: 0; transform: scale(1.25); } 70% { opacity: 1; transform: none; } 72% { transform: scale(.8); } 74% { opacity: 1; transform: none; } 76%, 100% { opacity: 0; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bc-reel__slide { opacity: 0; } .bc-reel__slide.is-still { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bc-intro { display: none; } }

/* Claim Tracker cover, take 4 (Tom 2026-11-03): one 9s loop (was 11s; Tom: it felt slow, so
   the holds were trimmed, the moves kept their speed) that tells one claim.
   My claims; a tap on the first card; Claim detail slides in (Submitted pill); the
   detail scrolls down to "Track your claim progress" under its fixed nav bar (Tom: the
   tracker and its progress must be seen); the tracker moves to In progress; then
   Pending: the Action required banner is inserted above the tracker, which slides down
   93 app px to make room and now shows Action required; the phone leans in and holds;
   back slides the detail away to the list. Every move eases in and out.
   Inside .bc-ctp (a container) 1 app px = 100cqw / 375. The Pending screen is cut at
   409 and 502 app px (measured on the 2x export: below 502 it matches In progress below
   409 exactly). The scroll brings ~900 app px of the Pending screen to the bottom of
   what the cover shows: 281 app px in the 16:11 rows, 345 in the 16:10 case header.
   Base styles = the final frame, which is also the reduced-motion still. */
.bc--ct { --ct-scroll: 74.93cqw; }
.case-cover--bespoke .bc--ct { --ct-scroll: 92cqw; }
.bc--ct .bc__phone { left: 30cqw; top: 7cqw; width: 40cqw; transform-origin: 50% 45%; filter: drop-shadow(0 3cqw 5cqw rgb(30 20 10 / .14)); }
.bc-ctp { container-type: inline-size; background: #f8f9f9; }
.ctp-list, .ctp-detail { position: absolute; inset: 0; overflow: hidden; }
.ctp-list { background: #f5f5f5; }
.ctp-detail { background: #f8f9f9; box-shadow: -2cqw 0 6cqw rgb(0 0 0 / .12); }
.ctp-scroll { position: absolute; inset: 0; transform: translateY(calc(-1 * var(--ct-scroll))); }
.ctp-head { position: absolute; left: 0; right: 0; top: 0; height: 24.53cqw; overflow: hidden; z-index: 2; }
.ctp-list img, .ctp-state, .ctp-pend img, .ctp-head img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto; max-width: none; }
.ctp-tap { position: absolute; left: 53.3cqw; top: 77cqw; width: 13cqw; height: 13cqw; margin: -6.5cqw 0 0 -6.5cqw; border-radius: 50%; background: rgb(150 160 160 / .7); box-shadow: inset 0 0 0 .3cqw rgb(255 255 255 / .9), 0 .6cqw 1.4cqw rgb(0 0 0 / .22); opacity: 0; }
.ctp-pend { position: absolute; left: 0; right: 0; overflow: hidden; }
.ctp-pend--top { top: 0; height: 109.07cqw; }
.ctp-pend--banner { top: 109.07cqw; height: 24.8cqw; }
.ctp-pend--banner img { top: -109.07cqw; }
.ctp-pend--rest { top: 133.87cqw; height: 600cqw; }
.ctp-pend--rest img { top: -133.87cqw; }
@media (prefers-reduced-motion: no-preference) {
  .ctp-list { animation: bcCtList 9s cubic-bezier(.65,0,.35,1) infinite; }
  .ctp-tap { animation: bcCtTap 9s cubic-bezier(.65,0,.35,1) infinite; }
  .ctp-detail { animation: bcCtDetail 9s cubic-bezier(.65,0,.35,1) infinite; }
  .ctp-scroll { animation: bcCtScroll 9s cubic-bezier(.65,0,.35,1) infinite; }
  .ctp-state--2 { animation: bcCtProgress 9s cubic-bezier(.65,0,.35,1) infinite; }
  .ctp-pend--top { animation: bcCtPend 9s cubic-bezier(.65,0,.35,1) infinite; }
  .ctp-pend--rest { animation: bcCtRest 9s cubic-bezier(.65,0,.35,1) infinite; }
  .ctp-pend--banner { animation: bcCtBanner 9s cubic-bezier(.65,0,.35,1) infinite; }
  .bc--ct .bc__phone { animation: bcCtLean 9s cubic-bezier(.65,0,.35,1) infinite; }
}
@keyframes bcCtList { 0%, 11.1% { transform: none; filter: none; } 17.8%, 88.9% { transform: translateX(-28%); filter: brightness(.9); } 95.6%, 100% { transform: none; filter: none; } }
@keyframes bcCtTap { 0%, 4.4% { opacity: 0; transform: scale(1.25); } 6.7% { opacity: 1; transform: none; } 8.9% { transform: scale(.8); } 11.1% { opacity: 1; transform: none; } 13.3%, 100% { opacity: 0; transform: none; } }
@keyframes bcCtDetail { 0%, 11.1% { transform: translateX(100%); } 17.8%, 88.9% { transform: none; } 95.6%, 100% { transform: translateX(100%); } }
@keyframes bcCtScroll { 0%, 22.2% { transform: none; } 31.1%, 95.6% { transform: translateY(calc(-1 * var(--ct-scroll))); } 100% { transform: none; } }
@keyframes bcCtProgress { 0%, 35.6% { opacity: 0; } 40%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bcCtPend { 0%, 46.7% { opacity: 0; } 50%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bcCtRest { 0%, 46.7% { opacity: 0; transform: translateY(-24.8cqw); } 50%, 51.1% { opacity: 1; transform: translateY(-24.8cqw); } 58.9%, 99% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-24.8cqw); } }
@keyframes bcCtBanner { 0%, 51.1% { opacity: 0; transform: translateY(-4cqw) scale(.96); } 58.9%, 99% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4cqw) scale(.96); } }
@keyframes bcCtLean { 0%, 58.9% { transform: none; } 65.6%, 84.4% { transform: scale(1.06); } 90%, 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ctp-list, .ctp-tap, .ctp-detail, .ctp-scroll, .ctp-state, .ctp-pend, .bc--ct .bc__phone { animation: none; } }

/* Auto-Fill cover, rebuilt (Tom 2026-11-03; impeccable animate). One focus: the phone,
   centred on Tom's orange ring artwork (the ground PVW no longer uses). One 9s loop,
   every move eased in and out. Inside the real Add shipment screen (Figma 4888:23347):
   a link is pasted (tap), Submit turns orange, the screen rises so Submit shows and is
   tapped; Smart fill reads the link: the Smart fill sparkle pulses by the field and the
   screen takes a soft AI glow (Tom: no colourful border round the field); Details of item (4888:23386) rises in and its
   three cards fill one by one, each wiped from an AI-tinted skeleton while an AI border
   glows round it; it holds, fades to white, and the empty screen fades back. No review page.
   Inside .afc (a container) 1 app px = 100cqw / 390. What the cover shows of the screen:
   ~690 app px in the 16:11 rows, ~615 in the 16:10 case header; the rise is what it takes
   for Submit (742-790) to show. Base styles = the final frame (reduced-motion still). */
@property --afc-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.bc--af { --bc-ground: #ff8f42 url("/assets/img/auto-fill-parcel-details/af-ground.svg") center / cover no-repeat; --view: 690; --ai: #f29d00, #f56a00, #337079; }
.case-cover--bespoke .bc--af { --view: 615; }
.bc--af .bc__phone { left: 32cqw; top: 8cqw; width: 36cqw; filter: drop-shadow(0 3cqw 5cqw rgb(120 40 0 / .22)); }
.afc { container-type: inline-size; background: #fff; --lift: min(0, var(--view) - 844); }
.afc-add, .afc-details { position: absolute; inset: 0; }
.afc-add { transform: translateY(calc(var(--lift) * 100cqw / 390)); }
.afc img { position: absolute; left: 0; top: 0; display: block; width: 100cqw; height: auto; max-width: none; }
.afc-url, .afc-submit, .afc-card { position: absolute; }
.afc-url { left: 7.18cqw; top: 127.95cqw; width: 80cqw; height: 17.44cqw; overflow: hidden; }
.afc-url img { left: -7.18cqw; top: -81.03cqw; }
.afc-submit { left: 0; right: 0; top: 187.18cqw; height: 29.23cqw; overflow: hidden; }
.afc-submit img { top: -187.18cqw; }
.afc-spark { position: absolute; left: 85cqw; top: 116.5cqw; width: 11cqw; height: 11cqw; opacity: 0; }
.afc-wash { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(90% 45% at 50% 105%, rgb(242 157 0 / .28), transparent 70%), radial-gradient(70% 40% at 100% 0%, rgb(51 112 121 / .16), transparent 70%); }
.afc-tap { position: absolute; width: 13cqw; height: 13cqw; margin: -6.5cqw 0 0 -6.5cqw; border-radius: 50%; background: rgb(150 160 160 / .7); box-shadow: inset 0 0 0 .3cqw rgb(255 255 255 / .9), 0 .6cqw 1.4cqw rgb(0 0 0 / .22); opacity: 0; }
.afc-tap--paste { left: 50cqw; top: 136.15cqw; }
.afc-tap--submit { left: 50cqw; top: 196.4cqw; }
/* the three item cards of Details of item: 16-374 x 125/309/493, 358 x 170 app px */
.afc-card { left: 4.1cqw; width: 91.8cqw; height: 43.59cqw; border-radius: 2.05cqw; }
.afc-card--1 { top: 32.05cqw; --d: 0s; }
.afc-card--2 { top: 79.23cqw; --d: .45s; }
.afc-card--3 { top: 126.41cqw; --d: .9s; }
.afc-glow { position: absolute; inset: -.5cqw; border-radius: 2.5cqw; padding: .55cqw; opacity: 0;
  background: conic-gradient(from var(--afc-a), var(--ai), #f29d00);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.afc-skel { position: absolute; inset: .3cqw; border-radius: 1.8cqw; background: #fff; overflow: hidden; clip-path: inset(0 0 0 100%); }
.afc-skel i { position: absolute; border-radius: 99px; background: linear-gradient(90deg, #fde3c8, #fdd4b8 40%, #d3e7e9 70%, #fde3c8) 0 0 / 300% 100%; }
.afc-skel i:nth-child(1) { left: 4.5%; top: 9.5%; width: 16.8%; height: 35%; border-radius: 1.4cqw; }
.afc-skel i:nth-child(2) { left: 23.5%; top: 14%; width: 58%; height: 7%; }
.afc-skel i:nth-child(3) { left: 23.5%; top: 28%; width: 44%; height: 7%; }
.afc-skel i:nth-child(4) { left: 23.5%; top: 42%; width: 18%; height: 5%; }
.afc-skel i:nth-child(5) { left: 4.5%; top: 59%; width: 80%; height: 6%; }
.afc-skel i:nth-child(6) { left: 4.5%; top: 81%; width: 17%; height: 7%; }
@media (prefers-reduced-motion: no-preference) {
  .afc-add { animation: afcScroll 9s cubic-bezier(.65,0,.35,1) infinite; }
  .afc-url, .afc-submit { animation: afcUrl 9s cubic-bezier(.65,0,.35,1) infinite; }
  .afc-submit { animation-name: afcSubmit; }
  .afc-tap--paste { animation: afcTapPaste 9s cubic-bezier(.65,0,.35,1) infinite; }
  .afc-tap--submit { animation: afcTapSubmit 9s cubic-bezier(.65,0,.35,1) infinite; }
  .afc-wash { animation: afcThink 9s cubic-bezier(.65,0,.35,1) infinite, afcSpin 9s linear infinite; }
  .afc-spark { animation: afcThink 9s cubic-bezier(.65,0,.35,1) infinite, afcSpark 1.8s ease-in-out infinite alternate; }
  .afc-details { animation: afcDetails 9s cubic-bezier(.65,0,.35,1) infinite; }
  .afc-skel { animation: afcSkel 9s cubic-bezier(.65,0,.35,1) infinite; animation-delay: var(--d); }
  .afc-skel i { animation: afcShimmer 1.6s linear infinite; }
  .afc-glow { animation: afcGlow 9s cubic-bezier(.65,0,.35,1) infinite, afcSpin 9s linear infinite; animation-delay: var(--d), 0s; }
}
@keyframes afcScroll { 0%, 17% { opacity: 1; transform: none; } 24%, 46% { opacity: 1; transform: translateY(calc(var(--lift) * 100cqw / 390)); } 51%, 88% { opacity: 0; transform: translateY(calc(var(--lift) * 100cqw / 390)); } 92%, 96% { opacity: 0; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes afcUrl { 0%, 11% { opacity: 0; transform: translateY(.8cqw); } 15%, 88% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes afcSubmit { 0%, 15% { opacity: 0; } 18%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes afcTapPaste { 0%, 6% { opacity: 0; transform: scale(1.25); } 8% { opacity: 1; transform: none; } 10% { transform: scale(.8); } 12% { opacity: 1; transform: none; } 14%, 100% { opacity: 0; transform: none; } }
@keyframes afcTapSubmit { 0%, 24% { opacity: 0; transform: scale(1.25); } 26% { opacity: 1; transform: none; } 28% { transform: scale(.8); } 30% { opacity: 1; transform: none; } 32%, 100% { opacity: 0; transform: none; } }
@keyframes afcThink { 0%, 29% { opacity: 0; } 33%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes afcSpin { to { --afc-a: 1080deg; } }
@keyframes afcSpark { from { transform: scale(.85) rotate(-8deg); } to { transform: scale(1.1) rotate(8deg); } }
@keyframes afcDetails { 0%, 45% { opacity: 0; transform: translateY(5%); } 51%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes afcSkel { 0%, 51% { clip-path: inset(0 0 0 0); } 59%, 99% { clip-path: inset(0 0 0 100%); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes afcShimmer { to { background-position: -300% 0; } }
@keyframes afcGlow { 0%, 48% { opacity: 0; } 52%, 59% { opacity: 1; } 66%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .afc-add, .afc-url, .afc-submit, .afc-tap, .afc-spark, .afc-wash, .afc-details, .afc-skel, .afc-skel i, .afc-glow { animation: none; } }