/** * Ledlenser x LION Digital — bespoke case-study styles. * Extracted from the supplied standalone HTML and scoped under `.ll-case` * so its dark palette and global element rules (html/body/a/p/h1-h4/img/ * footer) cannot leak into the site header, footer or any other page. * The `.js` progressive-enhancement class is set on the wrapper, not . */ /* ============================================================ LEDLENSER × LION DIGITAL — case study showcase Palette validated via dataviz validate_palette.js: #ec1c24,#3987e5,#199e70 — dark, surface #121215, --pairs all ALL CHECKS PASS ============================================================ */ .ll-case{ /* surfaces */ --void:#050506; --page:#08080a; --surface-1:#121215; --surface-2:#17171b; --raise:#1d1d22; /* ink */ --ink:#ffffff; --ink-2:#c8c7bf; --ink-3:#8d8c85; --ink-4:#5c5b56; /* series (validated) */ --s1:#ec1c24; /* Ledlenser brand red (from official logo SVG) */ --s2:#3987e5; /* blue */ --s3:#199e70; /* aqua */ --good:#0ca30c; /* chrome */ --grid:#26262a; --axis:#35353a; --hair:rgba(255,255,255,.10); --hair-2:rgba(255,255,255,.06); --glow:rgba(236,28,36,.55); --maxw:1220px; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --disp:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",sans-serif; color-scheme:dark; } .ll-case *{box-sizing:border-box} .ll-case{scroll-behavior:smooth;-webkit-text-size-adjust:100%} .ll-case{ margin:0;background:var(--page);color:var(--ink); font-family:var(--sans);font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden; } .ll-case img{max-width:100%;display:block} .ll-case a{color:inherit} .ll-case .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px} .ll-case .narrow{max-width:820px} /* ---------- film grain + vignette over everything ---------- */ .ll-case .grain{ position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.32; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } .ll-case .vig{position:fixed;inset:0;pointer-events:none;z-index:9998; background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.55) 100%)} /* ---------- micro type ---------- */ .ll-case .eyebrow{ font-family:var(--sans);font-size:11px;font-weight:600; letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3); display:flex;align-items:center;gap:12px; } .ll-case .eyebrow::before{content:"";width:26px;height:1px;background:var(--s1);flex:none} .ll-case .eyebrow.plain::before{display:none} .ll-case h1, .ll-case h2, .ll-case h3, .ll-case h4, .ll-case h5, .ll-case h6{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0;/* Standalone doc inherited its heading colour from body; the theme sets a dark `h1..h6 {color}` which beats inheritance, so state it explicitly. */ color:inherit} .ll-case h2{font-size:clamp(34px,5vw,62px)} .ll-case h3{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.02em} .ll-case p{margin:0 0 20px} .ll-case .lead{font-size:clamp(19px,2.1vw,23px);line-height:1.6;color:var(--ink-2)} .ll-case .dim{color:var(--ink-3)} .ll-case .tiny{font-size:13px;line-height:1.55;color:var(--ink-3)} .ll-case .hl{color:var(--s1)} /* ============================================================ HERO ============================================================ */ .ll-case .hero{ position:relative;min-height:100svh;display:flex;align-items:flex-end; overflow:hidden;background:var(--void);padding-top:104px; } /* base layer: pure CSS atmosphere (works with zero network) */ .ll-case .hero__css{position:absolute;inset:0; background: radial-gradient(80% 55% at 50% 78%, rgba(236,28,36,.13), transparent 70%), radial-gradient(50% 40% at 62% 30%, rgba(120,160,220,.10), transparent 70%), linear-gradient(180deg,#05050a 0%,#0a0b12 45%,#050506 100%); } .ll-case .hero__stars{position:absolute;inset:0;opacity:.85} /* photographic layer: Higgsfield render, sits on top when it loads */ .ll-case .hero__photo{ position:absolute;inset:0;background-size:cover;background-position:center 40%; opacity:0;transition:opacity 1.6s ease;filter:saturate(.85) contrast(1.08); } .ll-case .hero__photo.on{opacity:.72} .ll-case .hero__scrim{position:absolute;inset:0; background: linear-gradient(180deg,rgba(5,5,6,.55) 0%,rgba(5,5,6,.12) 32%,rgba(5,5,6,.72) 72%,var(--page) 100%), linear-gradient(90deg,rgba(5,5,6,.72) 0%,transparent 55%); } /* the beam */ .ll-case .beam{position:absolute;top:-10%;left:50%;width:2px;height:78%; background:linear-gradient(180deg,transparent,var(--s1) 60%,transparent); filter:blur(1px);opacity:.5;transform-origin:top center;transform:rotate(11deg)} .ll-case .beam::after{content:"";position:absolute;top:0;left:-90px;width:180px;height:100%; background:linear-gradient(180deg,transparent,rgba(236,28,36,.16),transparent); filter:blur(30px)} .ll-case .hero__inner{position:relative;z-index:3;width:100%;padding:0 0 78px} .ll-case .brandrow{display:flex;align-items:center;gap:20px;margin-bottom:auto} .ll-case .brandrow img{height:24px;width:auto;opacity:1} .ll-case .brandx{color:var(--ink-4);font-size:19px;font-weight:300} .ll-case .lionmark{font-family:var(--disp);font-weight:900;font-size:21px;letter-spacing:.16em} .ll-case .lionmark span{color:var(--s1)} .ll-case .hero__top{position:absolute;top:0;left:0;right:0;z-index:4;padding:34px 0} .ll-case .hero h1{ font-size:clamp(50px,10.5vw,152px);letter-spacing:-.045em;font-weight:900; text-transform:uppercase;line-height:.9;margin:0 0 26px; } .ll-case .hero h1 em{font-style:normal;display:block;color:var(--s1)} .ll-case .hero__sub{max-width:620px;font-size:clamp(17px,1.9vw,21px);color:var(--ink-2);line-height:1.55;margin-bottom:38px} .ll-case .hero__meta{display:flex;flex-wrap:wrap;gap:34px;padding-top:26px;border-top:1px solid var(--hair)} .ll-case .hero__meta div{min-width:120px} .ll-case .hero__meta .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);margin-bottom:7px;font-weight:600} .ll-case .hero__meta .v{font-family:var(--disp);font-size:16px;font-weight:600;color:var(--ink)} .ll-case .scrollcue{position:absolute;bottom:26px;right:32px;z-index:5;display:flex;align-items:center;gap:11px; font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);font-weight:600} .ll-case .scrollcue i{display:block;width:1px;height:44px;background:linear-gradient(180deg,var(--s1),transparent);animation:cue 2.4s ease-in-out infinite} @keyframes cue{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}} /* ============================================================ SECTIONS ============================================================ */ .ll-case section{position:relative} .ll-case .band{padding:clamp(72px,9vw,118px) 0} .ll-case .band--edge{border-top:1px solid var(--hair-2)} .ll-case .sectionhead{margin-bottom:56px} @media (min-width:1001px){ .ll-case .sectionhead{display:grid;grid-template-columns:1.1fr .9fr;gap:0 60px;align-items:end} .ll-case .sectionhead .eyebrow{grid-column:1/-1} .ll-case .sectionhead h2{grid-column:1;max-width:none} .ll-case .sectionhead>p{grid-column:2;margin:0 0 7px;max-width:none} .ll-case .sectionhead.narrow{display:block} } .ll-case .sectionhead .eyebrow{margin-bottom:22px} .ll-case .sectionhead h2{max-width:900px} .ll-case .sectionhead p{max-width:700px;margin-top:22px} /* pull quote */ .ll-case .pull{ position:relative;margin:0;padding:44px 0 44px 42px; border-left:2px solid var(--s1); } .ll-case .pull q{font-family:var(--disp);font-size:clamp(24px,3.4vw,40px);font-weight:700; letter-spacing:-.025em;line-height:1.22;quotes:none;display:block;color:var(--ink)} .ll-case .pull cite{display:block;margin-top:20px;font-style:normal;font-size:12px; letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600} /* ---------- market cards ---------- */ .ll-case .markets{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-2); border:1px solid var(--hair-2);border-radius:3px;overflow:hidden} .ll-case .mk{background:var(--surface-1);padding:32px 28px 30px;position:relative;overflow:hidden} .ll-case .mk::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--c,var(--s1));opacity:.9} .ll-case .mk__flag{font-family:var(--disp);font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--c,var(--s1));margin-bottom:20px} .ll-case .mk__site{font-family:var(--disp);font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px} .ll-case .mk__since{font-size:12.5px;color:var(--ink-3);margin-bottom:22px} .ll-case .mk__row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--hair-2);font-size:13px} .ll-case .mk__row span:first-child{color:var(--ink-4)} .ll-case .mk__row span:last-child{color:var(--ink-2);text-align:right;font-weight:500} /* ============================================================ STAT WALL ============================================================ */ .ll-case .statwall{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-2); border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2)} .ll-case .stat{background:var(--page);padding:40px 26px 34px;position:relative;transition:background .4s} .ll-case .stat:hover{background:var(--surface-1)} .ll-case .stat--hero{grid-column:span 2;background:var(--surface-1)} .ll-case .stat__v{font-family:var(--disp);font-weight:900;letter-spacing:-.045em;line-height:.9; font-size:clamp(46px,6vw,84px);color:var(--ink);display:flex;align-items:baseline;gap:2px} .ll-case .stat--hero .stat__v{font-size:clamp(62px,9vw,124px);color:var(--s1)} .ll-case .stat__v sup{font-size:.42em;font-weight:800;letter-spacing:-.02em;top:-.5em;position:relative} .ll-case .stat__l{margin-top:18px;font-family:var(--disp);font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.3} .ll-case .stat__m{margin-top:9px;font-size:12px;color:var(--ink-4);line-height:1.5} /* ============================================================ TIMELINE ============================================================ */ .ll-case .tl{position:relative;padding-left:0} .ll-case .tl__spine{position:absolute;left:7px;top:8px;bottom:0;width:1px;background:var(--grid)} .ll-case .tl__spine i{position:absolute;left:0;top:0;width:1px;height:0; background:linear-gradient(180deg,var(--s1),rgba(236,28,36,.15));box-shadow:0 0 14px 2px var(--glow); transition:height .18s linear} .ll-case .ev{position:relative;padding:0 0 46px 46px} @media (min-width:1001px){ .ll-case .ev{display:grid;grid-template-columns:158px minmax(0,1fr);gap:0 38px;align-items:start} .ll-case .ev__dot{grid-column:auto} .ll-case .ev__date{grid-column:1;grid-row:1;margin:6px 0 0;line-height:1.5} .ll-case .ev__t{grid-column:2;grid-row:1;margin-bottom:12px} .ll-case .ev__b{grid-column:2;grid-row:2} .ll-case .ev__chips{grid-column:2;grid-row:3} } .ll-case .ev__dot{position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:50%; background:var(--page);border:1.5px solid var(--axis);transition:all .5s} .ll-case .ev.lit .ev__dot{border-color:var(--s1);box-shadow:0 0 0 4px rgba(236,28,36,.16),0 0 16px var(--glow)} .ll-case .ev.lit .ev__dot::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--s1)} .ll-case .ev__date{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--s1);font-weight:700;margin-bottom:10px} .ll-case .ev__t{font-family:var(--disp);font-size:clamp(20px,2.3vw,27px);font-weight:700;letter-spacing:-.02em;margin-bottom:12px;line-height:1.18} .ll-case .ev__b{color:var(--ink-2);font-size:16px;max-width:72ch;margin:0} .ll-case .ev__b strong{color:var(--ink);font-weight:600} .ll-case .ev__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .ll-case .chip{font-size:11px;letter-spacing:.06em;padding:5px 11px;border:1px solid var(--hair); border-radius:2px;color:var(--ink-2);background:var(--surface-1);font-weight:500} .ll-case .chip--win{border-color:rgba(12,163,12,.4);color:#4cd44c;background:rgba(12,163,12,.08)} .ll-case .chip--risk{border-color:rgba(236,28,36,.35);color:#ff8a80;background:rgba(236,28,36,.07)} /* era divider */ .ll-case .era{display:flex;align-items:baseline;gap:26px;margin:20px 0 40px;padding-left:46px} .ll-case .era__y{font-family:var(--disp);font-size:clamp(56px,9vw,110px);font-weight:900;letter-spacing:-.05em; color:transparent;-webkit-text-stroke:1px #5f5e66;line-height:.85} .ll-case .era__l{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600;max-width:none;white-space:nowrap;padding-bottom:6px} /* ============================================================ FIGURES / CHARTS ============================================================ */ .ll-case .fig{background:var(--surface-1);border:1px solid var(--hair-2);border-radius:4px; padding:30px 30px 24px;margin:0} .ll-case .fig__h{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:6px} .ll-case .fig__t{font-family:var(--disp);font-size:19px;font-weight:700;letter-spacing:-.015em} .ll-case .fig__s{font-size:13px;color:var(--ink-3);margin-top:5px;max-width:560px} .ll-case .fig figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair-2); font-size:12px;color:var(--ink-4);line-height:1.55} .ll-case .legend{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0 4px} .ll-case .lg{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)} .ll-case .lg i{width:11px;height:11px;border-radius:2px;flex:none} .ll-case .lg--line i{height:3px;border-radius:2px;width:16px} .ll-case .lg--dash i{height:0;border-top:2px dashed var(--ink-3);width:16px;background:none!important} .ll-case .chartbox{position:relative;width:100%} .ll-case .chartbox svg{display:block;width:100%;height:auto;overflow:visible} .ll-case .tt{position:absolute;pointer-events:none;opacity:0;transition:opacity .12s; background:var(--raise);border:1px solid var(--hair);border-radius:3px;padding:10px 12px; font-size:12.5px;line-height:1.5;min-width:150px;z-index:20; box-shadow:0 12px 32px rgba(0,0,0,.6)} .ll-case .tt.on{opacity:1} .ll-case .tt__t{font-family:var(--disp);font-weight:700;font-size:13px;margin-bottom:7px;letter-spacing:-.01em} .ll-case .tt__r{display:flex;justify-content:space-between;gap:14px;align-items:center} .ll-case .tt__r i{width:9px;height:9px;border-radius:2px;flex:none;margin-right:7px} .ll-case .tt__r span:last-child{font-variant-numeric:tabular-nums;font-weight:600} .ll-case .tt__k{display:flex;align-items:center;color:var(--ink-3)} .ll-case .tblbtn{background:none;border:1px solid var(--hair);color:var(--ink-3);font:inherit;font-size:11.5px; letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;border-radius:2px;cursor:pointer; font-weight:600;transition:.2s;flex:none} .ll-case .tblbtn:hover{border-color:var(--ink-3);color:var(--ink)} .ll-case .dtable{display:none;margin-top:20px;width:100%;border-collapse:collapse;font-size:13px} .ll-case .dtable.on{display:table} .ll-case .dtable th, .ll-case .dtable td{text-align:right;padding:8px 12px;border-bottom:1px solid var(--hair-2);font-variant-numeric:tabular-nums} .ll-case .dtable th:first-child, .ll-case .dtable td:first-child{text-align:left;font-variant-numeric:normal} .ll-case .dtable thead th{color:var(--ink-3);font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase} .ll-case .dtable td{color:var(--ink-2)} .ll-case .figgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .ll-case .bfcmstat{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;padding:22px 4px 6px} .ll-case .bfcmstat__v{font-family:var(--disp);font-weight:900;letter-spacing:-.04em;color:var(--s1); font-size:clamp(48px,7vw,88px);line-height:.9} .ll-case .bfcmstat__l{font-size:14px;color:var(--ink-2);max-width:180px;line-height:1.4} .ll-case .bfcmstat__roas{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--ink); border-left:1px solid var(--hair);padding-left:24px} .ll-case .bfcmstat__roas span{color:var(--s1)} /* ---------- interstitial photo bands ---------- */ .ll-case .plate{position:relative;height:clamp(280px,38vw,440px);overflow:hidden;background:var(--void)} .ll-case .plate__css{position:absolute;inset:0} .ll-case .plate__photo{position:absolute;inset:0;background-size:cover;background-position:center; opacity:0;transition:opacity 1.4s ease;filter:saturate(.8) contrast(1.05)} .ll-case .plate__photo.on{opacity:.66} .ll-case .plate__scrim{position:absolute;inset:0;background: linear-gradient(180deg,var(--page),rgba(8,8,10,.35) 22%,rgba(8,8,10,.45) 78%,var(--page))} .ll-case .plate__cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 0 44px} .ll-case .plate__cap q{display:block;font-family:var(--disp);font-size:clamp(24px,3.6vw,46px);font-weight:800; letter-spacing:-.03em;line-height:1.12;max-width:900px;quotes:none} /* ---------- services ---------- */ .ll-case .svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-2);border:1px solid var(--hair-2)} .ll-case .sv{background:var(--surface-1);padding:30px 26px;transition:background .35s} .ll-case .sv:hover{background:var(--surface-2)} .ll-case .sv__n{font-family:var(--disp);font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--s1);margin-bottom:16px} .ll-case .sv__t{font-family:var(--disp);font-size:18px;font-weight:700;letter-spacing:-.015em;margin-bottom:12px} .ll-case .sv__l{margin:0;padding:0;list-style:none} .ll-case .sv__l li{position:relative;padding-left:15px;font-size:14px;color:var(--ink-2);margin-bottom:8px;line-height:1.5} .ll-case .sv__l li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:1px;background:var(--s1)} /* ---------- close ---------- */ .ll-case .close{position:relative;padding:clamp(84px,11vw,140px) 0;text-align:center;overflow:hidden} .ll-case .close__glow{position:absolute;left:50%;top:0;transform:translateX(-50%);width:900px;height:100%; background:radial-gradient(60% 55% at 50% 0%,rgba(236,28,36,.16),transparent 70%);pointer-events:none} .ll-case .close h2{font-size:clamp(36px,6.4vw,84px);letter-spacing:-.04em;margin-bottom:26px;position:relative} .ll-case .close p{max-width:560px;margin:0 auto 40px;position:relative} .ll-case .cta{position:relative;display:inline-flex;align-items:center;gap:12px;background:var(--s1);color:#fff; text-decoration:none;font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.01em; padding:17px 34px;border-radius:3px;transition:.25s;box-shadow:0 0 0 rgba(236,28,36,0)} .ll-case .cta:hover{background:#ff3d43;box-shadow:0 10px 40px rgba(236,28,36,.35);transform:translateY(-1px)} .ll-case footer{border-top:1px solid var(--hair-2);padding:44px 0 60px;background:var(--void)} .ll-case .foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start} .ll-case .foot__b img{height:20px;opacity:.6;margin-bottom:14px} .ll-case .flink{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;transition:.2s} .ll-case .flink:hover{color:var(--ink);border-bottom-color:var(--s1)} /* ---------- notes / provenance ---------- */ .ll-case details.notes{border:1px solid var(--hair-2);border-radius:4px;background:var(--surface-1);padding:0;margin-top:40px} .ll-case details.notes summary{cursor:pointer;padding:20px 24px;font-family:var(--disp);font-weight:600;font-size:15px; list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px} .ll-case details.notes summary::-webkit-details-marker{display:none} .ll-case details.notes summary::after{content:"+";color:var(--s1);font-size:20px;font-weight:400;flex:none} .ll-case details.notes[open] summary::after{content:"–"} .ll-case details.notes .body{padding:0 24px 24px;border-top:1px solid var(--hair-2);padding-top:20px} .ll-case details.notes ul{margin:0;padding-left:18px} .ll-case details.notes li{font-size:13.5px;color:var(--ink-3);margin-bottom:10px;line-height:1.6} .ll-case details.notes li strong{color:var(--ink-2)} /* ---------- reveal ---------- */ .ll-case.js .rv{opacity:0;transform:translateY(22px);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)} .ll-case.js .rv.in{opacity:1;transform:none} /* ---------- progress ---------- */ .ll-case .prog{position:fixed;top:0;left:0;height:2px;background:var(--s1);z-index:10000;width:0; box-shadow:0 0 12px var(--glow)} /* laptop: tighten the frame a touch, no structural changes needed — grids already fluid */ @media (max-width:1366px){ .ll-case .wrap{padding:0 28px} } /* tablet / small laptop: step grids down to two columns before collapsing to one */ @media (max-width:1000px){ .ll-case .wrap{padding:0 24px} .ll-case .statwall{grid-template-columns:repeat(2,1fr)} .ll-case .stat--hero{grid-column:span 2} .ll-case .markets{grid-template-columns:repeat(2,1fr)} .ll-case .svc{grid-template-columns:repeat(2,1fr)} .ll-case .figgrid{grid-template-columns:1fr} .ll-case .sectionhead{display:block} .ll-case .ev{display:block;padding:0 0 40px 40px} .ll-case .ev__date{margin-bottom:8px} .ll-case .hero__meta{gap:24px} } @media (max-width:760px){ .ll-case .markets{grid-template-columns:1fr} .ll-case .svc{grid-template-columns:1fr} .ll-case .bfcmstat{gap:8px 20px} } @media (max-width:640px){ .ll-case{font-size:16px} .ll-case .wrap{padding:0 20px} .ll-case .statwall{grid-template-columns:1fr} .ll-case .stat--hero{grid-column:span 1} .ll-case .era{padding-left:46px;gap:14px;align-items:flex-end} .ll-case .era__l{white-space:normal;max-width:150px;letter-spacing:.12em} .ll-case .fig{padding:22px 18px 18px} .ll-case .hero__meta{gap:22px} .ll-case .ev{padding:0 0 36px 34px} .ll-case .tl__spine{left:6px} .ll-case .ev__dot{width:13px;height:13px} .ll-case .bfcmstat__roas{border-left:none;padding-left:0;border-top:1px solid var(--hair);padding-top:10px} .ll-case .close h2{font-size:clamp(30px,9vw,48px)} .ll-case .cta{width:100%;justify-content:center} .ll-case .foot{flex-direction:column;gap:24px} .ll-case .foot .tiny[style*="text-align:right"]{text-align:left!important} } @media (max-width:400px){ .ll-case .hero__meta{flex-direction:column;gap:16px} .ll-case .stat--hero{grid-column:1/-1} } @media (prefers-reduced-motion:reduce){ .ll-case *{animation:none!important;transition-duration:.01ms!important} .ll-case .rv{opacity:1;transform:none} .ll-case{scroll-behavior:auto} } @media print{ .ll-case .grain, .ll-case .vig, .ll-case .prog, .ll-case .scrollcue{display:none} .ll-case{background:#fff;color:#000} }