/* v3 case templates: full-height covers with a flush lower edge + content-sized copy, radius32/smoothing1. */
.v3-cases { width:min(1200px,calc(100% - 96px));margin:var(--v3-case-teaser-gap,164px) auto 0;padding:0 0 100px; }
.v3-cases__title { width:calc((100% - 24px)/2);margin:0 0 0 -2px;font-size:74px;line-height:96px;font-weight:400;letter-spacing:-.03em; }
.v3-case-columns { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;margin-top:-23px; }
.v3-case-column { display:flex;flex-direction:column;gap:80px;min-width:0;will-change:transform; }
.v3-case-column:first-child { padding-top:114px; }
.v3-case-card { --v3-case-gap:16px;--v3-cover-height:456.2;--v3-image-rise:18;--v3-art-headroom:64;--v3-field-scale:0.934239368698;position:relative;isolation:isolate;display:flex;flex-direction:column;gap:var(--v3-case-gap);min-width:0; }
/* Keep the artwork above the copy's lower edge even when native sticky
   scrolling advances before the desktop pin clip has been updated. */
@media (prefers-reduced-motion:no-preference) {
 .v3-case-card { clip-path:inset(-256px -256px calc(0px - var(--v3-stack-lift,0px)) -256px); }
}
/* One cover height drives the pin, the cover and every mobile range/boundary. */
/* The sticky layout box and its visual cover have separate transforms:
   stacking never interferes with hover tilt or gradient-field parallax. */
.v3-case-cover-pin { position:sticky;top:calc(24px - var(--v3-column-offset,0px));z-index:0;flex:none;width:100%;aspect-ratio:588/var(--v3-cover-height); }
/* The stable pin owns layout; its visual child owns the shrinking artwork. */
.v3-case-cover-reveal { width:100%;height:100%; }
.v3-case-cover-visual { position:relative;width:100%;height:100%;transform:translate3d(0,var(--v3-cover-release-shift,0px),0) scale(var(--v3-stack-scale,1));transform-origin:center top;opacity:var(--v3-stack-opacity,1);will-change:transform,opacity; }
.v3-case-cover-visual > .v3-case-cover,.v3-case-cover-art,.v3-case-cover-mesh > .v3-case-cover { width:100%;height:100%; }
/* The mesh starts 30px below the slot top: about halfway down the artwork's slanted upper edge. The full image fits above the shared lower squircle. */
.v3-case-cover-visual > .v3-case-cover { position:absolute;left:0;bottom:0;height:calc(100% * var(--v3-field-scale)); }
/* Keep vertical clipping at the authored window, with a transparent 2px
   gutter on each side. Safari can retain a stale raster edge when the
   unscaled image touches a fractional clip boundary inside a 3D cover. */
.v3-case-cover-art { translate:0 var(--v3-image-shift,0px);scale:1 var(--v3-image-scale,1);position:absolute;left:0;bottom:0;height:calc(100% * (var(--v3-cover-height) + var(--v3-art-headroom)) / var(--v3-cover-height));transform-origin:50% calc(100% * (var(--v3-art-headroom) + var(--v3-cover-height) / 2) / (var(--v3-cover-height) + var(--v3-art-headroom))); }
/* Both layers retain the same silhouette at rest. Moving the screenshot
   with its own clip lets it extend below the mesh and behind the copy. */
.v3-case-cover-mesh,.v3-case-cover-screenshot { position:absolute;inset:0;clip-path:var(--v3-cover-art-clip,none);pointer-events:none; }
.v3-case-cover-screenshot { z-index:1;translate:0 var(--v3-screenshot-shift,0px);scale:var(--v3-image-scale,1) 1; }
.v3-case-cover-mesh > .v3-case-cover { position:absolute;left:0;bottom:0;height:calc(100% * var(--v3-cover-height) * var(--v3-field-scale) / (var(--v3-cover-height) + var(--v3-art-headroom)));border-bottom-left-radius:0;border-bottom-right-radius:0; }
.v3-case-cover-window { position:absolute;z-index:1;left:calc(2.9762% - 2px);bottom:0;width:calc(94.13265% + 4px);height:calc(100% * (var(--v3-cover-height) + var(--v3-image-window-headroom,36)) / (var(--v3-cover-height) + var(--v3-art-headroom)));overflow:hidden;pointer-events:none; }
.v3-case-cover-image { position:absolute;left:2px;top:var(--v3-image-top,3.657049980%);display:block;width:calc(100% - 4px);height:auto;user-select:none;-webkit-user-select:none; }
/* Keep desktop screenshots flush in both the two-column layout and narrow windows.
   One pixel of bleed prevents a fractional raster seam after scale/tilt. */
@media (min-width:801px), (hover:hover) and (pointer:fine) {
 .v3-case-cover-image{top:auto;bottom:-1px}
}
@media(min-width:801px){
 /* Clip only beyond the flowing white panel's bottom. The negative top
    and side insets retain the existing entrance, parallax and hover. */
 .v3-case-cover-pin{clip-path:inset(-256px -256px var(--v3-cover-bottom-cut,-256px) -256px)}
}
/* The slot ends at the untransformed image baseline. No lower mesh
   padding is reserved for the overlapping fade; image geometry is unchanged. */
.v3-case-card[data-project="brokerage"] { --v3-cover-height:436.2;--v3-image-rise:38;--v3-image-window-headroom:60;--v3-image-top:4.433696090%;--v3-field-scale:0.977074736359; }
.v3-case-card[data-project="brokerage"] .v3-case-cover { background:
 radial-gradient(ellipse 100% 90% at 95% 35%,#0649d9 0%,#073ab866 48%,transparent 80%),
 radial-gradient(ellipse 90% 75% at 10% 100%,#8e78c8 0%,#725ab67a 45%,transparent 85%),
 linear-gradient(145deg,#02030a 8%,#080b28 40%,#293fa4 78%,#7566bb); }
/* Stagger the screenshot reveal without changing its scroll position. */
.v3-case-cover-window { opacity:1;transition:opacity 800ms ease 220ms; }
.v3-case-card[data-reveal="pending"] .v3-case-cover-window { opacity:0; }
/* A static colour field covers first paint and reduced motion. Soft CSS
   colour layers animate above it without GPU API or secure-context gates. */
/* Keep this local clip: it contains the gradient's 22% desktop overscan.
   The gradient clips its own blobs; viewport/sticky ancestors must stay unclipped. */
.v3-case-cover { position:relative;isolation:isolate;aspect-ratio:588/var(--v3-cover-height);overflow:hidden;border-radius:32px;background:
 radial-gradient(ellipse 90% 80% at 90% 0%,#ffda70 8%,#ffce6555 48%,transparent 76%),
 radial-gradient(ellipse 65% 65% at 0% 3%,#ff696c 6%,#ea687d99 40%,transparent 80%),
 radial-gradient(ellipse 55% 62% at 0% 47%,#a25caa 0%,#9878ac66 52%,transparent 90%),
 radial-gradient(ellipse 90% 60% at 15% 100%,#0db7a0 0%,#00a6a7aa 54%,transparent 95%),
 linear-gradient(155deg,#ffb775 15%,#c7bd7b 46%,#0098a6 78%,#2084a4); }
.v3-case-copy { position:relative;z-index:1;box-sizing:border-box;padding:50px 42px;border-radius:32px;background:var(--v3-card-solid);box-shadow:inset 0 1px 0 var(--v3-card-rim);transform:translateY(var(--v3-stack-lift,0px)); }
.v3-case-copy h3 { margin:0;font-size:34px;line-height:1.4;font-weight:400;letter-spacing:0; }
.v3-case-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding-inline:clamp(16px,3vw,28px);
  margin-top:clamp(18px,2.2vw,26px);
  border-radius:100px;
  background:var(--v3-glass-highlight),var(--v3-glass-sheen),var(--v3-glass-surface);
  box-shadow:0 4px 18px #00000012,0 1px 3px #0000000d,var(--v3-glass-edge);
  color:var(--v3-ink);
  font-size:clamp(17px,1.7vw,22px);
  font-weight:500;
  line-height:1.3;
  text-decoration:none;
}
.v3-case-link__arrow { flex:none;transform:translate3d(0,0,0); }
.v3-case-link__arrow svg { display:block; }
.v3-case-link:focus-visible { outline:2px solid var(--v3-focus);outline-offset:4px; }
@media (hover:hover) {
  .v3-case-link:hover { box-shadow:0 5px 20px #00000018,0 1px 3px #0000000d,var(--v3-glass-edge); }
}
.v3-case-brand-lead { white-space:nowrap; }
.v3-case-company { font-style:italic; }
.v3-case-logo { position:relative;display:inline-block;vertical-align:-13px;width:54px;height:54px;margin:0 8px 0 6px; }
/* Size the layout box itself: transform-only SVG scaling can leave a large
   scrollable overflow area in iOS Safari even when the artwork looks small. */
.v3-case-logo img { position:absolute;display:block;inset:0;width:100%;height:100%;object-fit:contain; }
.v3-case-logo--larixon img { mask:url('../assets/case-logos/larixon-mask.svg') center/100% 100% no-repeat; }
@media(any-hover:hover) and (any-pointer:fine) and (prefers-reduced-motion:no-preference){
 .v3-case-logo img { pointer-events:none;transform:var(--v3-logo-motion,none);transition:transform 260ms ease-out; }
}
@media(max-width:1100px){
 .v3-cases{width:calc(100% - 80px)}
 .v3-cases__title{font-size:60px;line-height:80px}
 .v3-case-columns{margin-top:-7px}
 .v3-case-copy{padding:36px 30px}
 .v3-case-copy h3{font-size:28px}
 .v3-case-logo{width:44px;height:44px;vertical-align:-11px;margin-inline:4px 6px}
}
@media(max-width:800px){
 .v3-cases{margin-top:var(--v3-case-teaser-gap,108px);padding-bottom:40px}
 .v3-cases__title{width:auto;font-size:48px;line-height:62px}
 .v3-case-columns{display:flex;flex-direction:column;margin-top:80px;gap:84px}
 .v3-case-column{display:contents;will-change:auto}
 /* Keep the image's upper protrusion inside the physical viewport when
    pinned. The terminal has a larger rise than the other covers. */
 .v3-case-card{--v3-pin-top:max(16px,calc(100cqi * var(--v3-image-rise) / 588 + 4px));order:var(--v3-card-order);width:100%}
 .v3-case-cover-pin{top:var(--v3-pin-top)}
 /* Match the physical-phone width/height control. No forced 3D backing or
    transform scaling on the resizing child; its outer slot never changes. */
 .v3-case-cover-visual{margin-inline:auto;border-radius:32px;transform:none;will-change:auto}
 .v3-case-cover{aspect-ratio:588/var(--v3-cover-height);border-radius:inherit}
 .v3-case-copy{min-height:0;padding:36px 32px}
 .v3-case-copy h3{font-size:30px}
 .v3-case-link{padding-inline-start:24px}
}
@media(max-width:480px){
 .v3-cases{width:calc(100% - 48px);margin-top:var(--v3-case-teaser-gap,clamp(48px,calc(100svh - 560px),120px))}
 .v3-cases__title{font-size:40px;line-height:52px}
 .v3-case-columns{margin-top:48px;gap:60px}
 .v3-case-card{--v3-case-gap:12px}
 .v3-case-copy{padding:27px 25px}
 .v3-case-copy h3{font-size:25px;line-height:1.4}
 .v3-case-logo{width:36px;height:36px;vertical-align:-8px;margin-inline:3px 5px}
}
@media(prefers-reduced-motion:reduce){.v3-case-column,.v3-case-gradient{transform:none!important;will-change:auto}}

/* Cover-only tilt keeps the case text still and readable. No touch hover loop. */
.v3-case-cover::before { content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(ellipse 340px 240px at var(--v3-card-pointer-x,50%) var(--v3-card-pointer-y,50%),#ffffff26,transparent 72%);transition:opacity 240ms ease; }
@media(min-width:801px) and (hover:hover) and (pointer:fine){
 .v3-case-cover,.v3-case-cover-art{transform:perspective(1100px) rotateX(var(--v3-card-rx,0deg)) rotateY(var(--v3-card-ry,0deg));transition:transform 340ms cubic-bezier(.22,1,.36,1)}
 /* The art wrapper tilts gradient and image together; its gradient stays flat inside. */
 .v3-case-cover-mesh > .v3-case-cover{transform:none;transition:none}
 .v3-case-cover[data-hovering]::before,.v3-case-cover-art[data-hovering] .v3-case-cover::before{opacity:1}
}
@media(prefers-reduced-motion:reduce){.v3-case-cover,.v3-case-cover-art{translate:none;scale:none;transform:none!important;transition:none}.v3-case-cover::before{display:none;transition:none}}

/* Never transform the article containing the sticky box: Safari can change
   its sticky reference when an entrance transform finishes. Reveal artwork
   and text inside their stable layout boxes instead. */
.v3-case-card[data-reveal],.v3-cases__title[data-reveal] { transition:opacity 900ms ease; }
.v3-cases__title[data-reveal],.v3-case-card[data-reveal] .v3-case-cover-reveal,.v3-case-card[data-reveal] .v3-case-copy h3 {
  transition:opacity 900ms ease,transform 900ms cubic-bezier(.22,1,.36,1);
}
.v3-case-card[data-reveal="pending"]:not(:focus-within),.v3-cases__title[data-reveal="pending"] { opacity:0;pointer-events:none; }
.v3-cases__title[data-reveal="pending"],.v3-case-card[data-reveal="pending"] .v3-case-cover-reveal,.v3-case-card[data-reveal="pending"] .v3-case-copy h3 { transform:translateY(32px); }
@media(prefers-reduced-motion:reduce) {
  .v3-case-cover-screenshot {translate:none}
  .v3-case-cover-window,.v3-case-cover-image {opacity:1;translate:none;transform:none;transition:none}
  .v3-case-card[data-reveal],.v3-cases__title[data-reveal],.v3-case-cover-reveal,.v3-case-copy h3 {opacity:1;transform:none!important;transition:none!important}
  .v3-case-cover-pin {position:relative;top:auto}
  .v3-case-cover-visual {transform:none;opacity:1;will-change:auto}
  .v3-case-copy {transform:none}
}