/* Leegality: Giovanni-style frame flips, labels and placeholder */

/* Flip: every frame stacked in one cell, only .on is visible (hard cut, no fade) */
.lr-flip{display:grid;position:relative;overflow:hidden}
.lr-flip>.f{grid-area:1/1;visibility:hidden;min-width:0}
.lr-flip>.f.on{visibility:visible}

/* Field frames: a flat colour with one object centred */
.lr-field{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;position:relative;padding:7%}
.lr-field.tall{aspect-ratio:4/3}
.lr-field.square{aspect-ratio:1/1}
.lr-field img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lr-field .shot{box-shadow:0 14px 34px #1d16282e}
.lr-field .cover{height:100%;max-height:100%}
.lr-field .pg{height:100%}
.lr-field .post{max-height:88%;max-width:82%}

/* Colour frames: one big swatch with its name and hex, like a spec card */
.lr-swatch{aspect-ratio:16/10;padding:5% 5.5%;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.lr-swatch.light{color:#08023d}
.lr-swatch .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:clamp(12px,1.2vw,15px);letter-spacing:.08em;text-transform:uppercase}
.lr-swatch .big{font-size:clamp(40px,7vw,104px);font-weight:500;letter-spacing:-.05em;line-height:.95}
.lr-swatch .job{font-size:clamp(14px,1.5vw,20px);line-height:1.35;max-width:440px;letter-spacing:-.01em}
.lr-swatch img{width:clamp(44px,6vw,80px);height:auto}
.lr-swatch .mono{filter:brightness(0) invert(1)}
.lr-swatch.light .mono{filter:brightness(0)}

/* Type frames */
.lr-type{aspect-ratio:16/10;padding:5% 5.5%;display:flex;flex-direction:column;justify-content:space-between;background:#08023d;color:#fff}
.lr-type .row{display:flex;justify-content:space-between;font-size:clamp(12px,1.2vw,15px);letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.lr-type .big{font-size:clamp(44px,8vw,120px);line-height:.92;letter-spacing:-.05em}
.lr-type .jakarta{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:700}
.lr-type .roboto{font-family:Roboto,system-ui,sans-serif;font-weight:400}

/* Phone flip: one frame, the screens change */
.lr-phone-stage{background:#fff;display:flex;align-items:center;justify-content:center;gap:7%;padding:6% 6%;aspect-ratio:16/10}
.lr-phone-stage .lr-phone{max-width:min(230px,34%);margin:0}
.lr-phone-stage .lr-phone .lr-flip img{border-radius:25px}
.lr-phone-stage .side{max-width:280px}
.lr-phone-stage .side b{display:block;font-size:clamp(20px,2.2vw,30px);font-weight:500;letter-spacing:-.03em;line-height:1.1;margin-bottom:10px}
.lr-phone-stage .side span{font-size:13px;line-height:1.5;color:var(--muted)}
.lr-phone-stage .lender-name{grid-area:1/1}

/* Ripe-style application labels in place of captions */
.lr .lbl{display:flex;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding-top:12px;max-width:none}
.lr .lbl b{color:var(--ink);font-weight:600}
.lr-group>.lbl{display:flex}

/* Section labels: number + Giovanni-style word */
.lr .sticky-story-copy .num small{font-family:inherit;font-size:13px;letter-spacing:.09em;text-transform:uppercase;margin-left:10px;vertical-align:middle;color:var(--muted)}
.lr .sticky-story-copy .more{display:inline-block;margin-top:20px;font-size:13px;text-decoration:underline;text-underline-offset:4px}

/* Placeholder for photos still to come */
.lr-placeholder{aspect-ratio:16/10;border:1.5px dashed #b7aec4;background:repeating-linear-gradient(135deg,#f4f1f7 0 14px,#efebf3 14px 28px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8%;gap:8px;color:#4a4153}
.lr-placeholder b{font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.lr-placeholder span{font-size:14px;line-height:1.5;max-width:380px}

@media(max-width:760px){
  .lr-field{padding:8%}
  .lr-phone-stage{flex-direction:column;aspect-ratio:auto;gap:22px;padding:10% 8%}
  .lr-phone-stage .lr-phone{max-width:200px}
  .lr-phone-stage .side{text-align:center}
  .lr-swatch,.lr-type{aspect-ratio:4/3}
  .lr .lbl,.lr-group>.lbl{flex-direction:column;gap:4px}
}

/* ---- v2 additions ---- */

/* Plain colour frames: just the colour, name + hex in the bottom-right corner */
.lr-swatch.plain{justify-content:flex-end;align-items:flex-end}
.lr-swatch .tag{text-align:right;font-size:clamp(13px,1.35vw,18px);line-height:1.35;letter-spacing:.04em}
.lr-swatch .tag b{display:block;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.lr-swatch.role{justify-content:space-between}
.lr-swatch.role .bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}

/* Type specimen: Komba-style kinetic type, one idea per frame */
.lr-spec{aspect-ratio:16/10;background:#141218;color:#fff;position:relative;padding:5.5%;overflow:hidden;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.lr-spec .meta{position:absolute;left:5.5%;bottom:6%;font-family:Inter,system-ui,sans-serif;font-size:clamp(10px,1vw,13px);letter-spacing:.08em;text-transform:uppercase;opacity:.55}
.lr-spec .meta.r{left:auto;right:5.5%}
.lr-spec .giant{position:absolute;left:5%;bottom:-6%;font-size:clamp(150px,27vw,400px);font-weight:700;letter-spacing:-.06em;line-height:.8}
.lr-spec .abc{font-size:clamp(20px,3.3vw,48px);font-weight:500;line-height:1.12;letter-spacing:-.02em;margin-top:3%}
.lr-spec .abc span{display:block}
.lr-spec .weights{display:flex;flex-direction:column;gap:.1em;font-size:clamp(28px,5vw,72px);letter-spacing:-.03em;line-height:1.02;margin-top:1%}
.lr-spec .wide{position:absolute;left:4%;right:4%;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;font-size:clamp(90px,17vw,250px);font-weight:700;letter-spacing:-.05em;line-height:.8}
.lr-spec .wide .ghost{color:transparent;-webkit-text-stroke:1.5px #ffffff55}
.lr-spec .roboto{font-family:Roboto,system-ui,sans-serif}
.lr-spec .robo-big{font-size:clamp(70px,13vw,190px);font-weight:400;letter-spacing:-.04em;line-height:.9}
.lr-spec .robo-body{font-size:clamp(12px,1.35vw,17px);line-height:1.55;max-width:58%;margin-top:4%;opacity:.85}
.lr-spec.pair{background:#FCB149;color:#08023D;display:flex;flex-direction:column;justify-content:center}
.lr-spec.pair .a{font-size:clamp(46px,8.4vw,124px);font-weight:700;letter-spacing:-.05em;line-height:.95}
.lr-spec.pair .b{font-family:Roboto,system-ui,sans-serif;font-size:clamp(46px,8.4vw,124px);letter-spacing:-.03em;line-height:.95}
.lr-spec.pair .x{font-size:clamp(20px,3vw,40px);margin:.2em 0}
/* motion inside a frame restarts each time the frame comes on */
.lr-flip>.f.on .up{animation:lrUp .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 60ms)}
.lr-flip>.f.on .slide{animation:lrSlide 1.6s cubic-bezier(.65,0,.35,1) both}
.lr-flip>.f.on .grow{animation:lrGrow 1.8s cubic-bezier(.2,.8,.2,1) both}
@keyframes lrUp{from{transform:translateY(60%);opacity:0}to{transform:none;opacity:1}}
@keyframes lrSlide{from{transform:translateX(18%)}to{transform:none}}
@keyframes lrGrow{from{transform:scale(.6);transform-origin:left bottom}to{transform:none;transform-origin:left bottom}}

/* Logo usage: the wordmark cropped huge and drifting, a small line on top */
.lr-usage{aspect-ratio:16/10;position:relative;overflow:hidden;display:flex;align-items:center}
.lr-usage .mark{position:absolute;top:50%;left:0;height:62%;width:auto;max-width:none;transform:translate(-6%,-50%)}
.lr-flip>.f.on .lr-usage .mark,.lr-usage.f.on .mark{animation:lrDrift 4s linear both}
.lr-usage .line{position:relative;z-index:1;margin:0 auto;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:700;font-size:clamp(14px,1.9vw,26px);letter-spacing:-.01em;text-align:center;line-height:1.15}
@keyframes lrDrift{from{transform:translate(-4%,-50%)}to{transform:translate(-30%,-50%)}}

/* Hero: a camera moving across a wall of the system (FifthRow-style) */
.lr-wall{aspect-ratio:16/9;position:relative;overflow:hidden;background:#d9d5de;container-type:inline-size}
.lr-wall-grid{position:absolute;left:0;top:0;width:252cqw;display:grid;grid-template-columns:repeat(6,40cqw);grid-auto-rows:50cqw;gap:2.4cqw;transform-origin:0 0;animation:lrPan 14s infinite}
.lr-wall-grid>*{border-radius:1.2cqw;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;min-width:0}
.lr-wall-grid img{max-width:84%;max-height:86%;width:auto;height:auto;display:block;box-shadow:0 1cqw 3cqw #1d16282a}
.lr-wall-grid img.flat{box-shadow:none;max-width:76%}
.lr-wall-grid .w-sw{justify-content:flex-end;align-items:flex-end;padding:2.4cqw;color:#fff;font:600 1.6cqw/1.3 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:right}
.lr-wall-grid .w-sw.lt{color:#08023d}
.lr-wall-grid .w-aa{font:700 22cqw/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.05em;color:#fff}
.lr-wall-grid .w-word{font:700 6.4cqw/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.04em;color:#08023d;padding:3cqw;text-align:left;align-items:flex-start;justify-content:flex-end;flex-direction:column}
.lr-wall-grid .w-word small{font:500 1.5cqw/1.4 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6a6573;margin-bottom:1.5cqw}
.lr-wall-grid .w-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:1cqw;padding:3cqw;align-items:stretch}
.lr-wall-grid .w-bars i{border-radius:.8cqw;height:100%}
.lr-wall-grid .lr-flip{width:100%;height:100%}
.lr-wall-grid .lr-flip>.f{display:flex;align-items:center;justify-content:center}
@keyframes lrPan{
  0%,12%{transform:translate(-3cqw,-4cqw) scale(.42);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  24%,36%{transform:translate(-12.4cqw,3.1cqw) scale(1);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  48%,60%{transform:translate(-97.2cqw,-49.3cqw) scale(1);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  72%,84%{transform:translate(-187cqw,-134cqw) scale(1.25);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100%{transform:translate(-3cqw,-4cqw) scale(.42)}
}

/* Flipbook: an open magazine, pages turning */
.lr-book-stage{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;perspective:2400px;overflow:hidden}
.lr-book{position:relative;height:76%;aspect-ratio:1.414/1;transform:rotateX(16deg);transform-style:preserve-3d}
.lr-book .pg,.lr-book .face{position:absolute;top:0;height:100%;background:#fff;overflow:hidden}
.lr-book .pg{width:50%;box-shadow:0 22px 40px -12px #1d162855}
.lr-book .l{left:0}.lr-book .r{right:0}
.lr-book img{display:block;width:100%;height:100%;object-fit:cover}
.lr-book .l:after,.lr-book .r:after,.lr-book .front:after,.lr-book .back:after{content:"";position:absolute;inset:0;pointer-events:none}
.lr-book .l:after,.lr-book .back:after{background:linear-gradient(90deg,transparent 82%,#0000002e)}
.lr-book .r:after,.lr-book .front:after{background:linear-gradient(90deg,#00000033,transparent 16%)}
.lr-book .leaf{position:absolute;right:0;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.45,.05,.3,1);visibility:hidden}
.lr-book .leaf.show{visibility:visible}
.lr-book .leaf.go{transform:rotateY(-180deg)}
.lr-book .face{inset:0;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lr-book .back{transform:rotateY(180deg)}

@media(prefers-reduced-motion:reduce){.lr-wall-grid{animation:none;transform:translate(-3cqw,-4cqw) scale(.42)}}
@media(max-width:760px){
  .lr-spec{aspect-ratio:4/3}
  .lr-spec .robo-body{max-width:100%}
  .lr-usage{aspect-ratio:4/3}
  .lr-book-stage{aspect-ratio:4/3}
  .lr-book{height:auto;width:92%}
}

/* ---- v3: two-column rows, zoom tour, type columns ---- */
.lr-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lr-cols>.lr-group{min-width:0}

/* Screen library as a column */
.lr-lib{aspect-ratio:4/5;background:#fff;display:flex;align-items:center;justify-content:center}
.lr-lib .lr-phone{max-width:58%;margin:0}
.lr-lib .lr-phone .lr-flip img{border-radius:25px}

/* Zoom tour */
.lr-zoom{aspect-ratio:4/5;position:relative;overflow:hidden;background:#fff}
.lr-zoom img{position:absolute;left:0;top:0;width:auto;max-width:none;height:auto;transform-origin:0 0;transition:transform .75s cubic-bezier(.65,0,.35,1)}
.lr-zoom ol{display:none}
.lr-zoom .ring{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:2px solid #7E41F4;opacity:0;transition:opacity .3s}
.lr-zoom.zoomed .ring{opacity:1;animation:lrPulse 1.6s ease-out infinite .9s}
@keyframes lrPulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.5);opacity:0}}
.lr-zoom .call{position:absolute;left:5%;right:5%;bottom:5%;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;background:#08023D;color:#fff;padding:16px 18px;border-radius:14px;opacity:0;transform:translateY(16px);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.lr-zoom .call.on{opacity:1;transform:none}
.lr-zoom .call span{width:30px;height:30px;border-radius:50%;background:#FCB149;color:#08023D;font:600 14px/30px Inter,system-ui,sans-serif;text-align:center}
.lr-zoom .call p{margin:0;font-size:14px;line-height:1.45;color:#fff}
.lr-zoom .call b{font-weight:600;color:#fff}

/* Type columns: one font per column, weights cycling in step */
.lr-tcol{aspect-ratio:4/5;position:relative;padding:8%;display:block;overflow:hidden}
.lr-tcol .nm{font:500 clamp(11px,1vw,13px)/1.4 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.lr-tcol .nm b{display:block;font-weight:600;opacity:1;letter-spacing:.02em;text-transform:none;font-size:clamp(14px,1.3vw,17px)}
.lr-tcol .aa{position:absolute;right:7%;bottom:3%;font-size:clamp(110px,15vw,230px);line-height:1;letter-spacing:-.05em}
.lr-tcol.jk{background:#08023D;color:#fff;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.lr-tcol.rb{background:#F3EEFC;color:#08023D;font-family:Roboto,system-ui,sans-serif}
.lr-tcol.rule{background:#fff;color:#08023D;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.lr-tcol .hd{position:absolute;left:8%;right:8%;bottom:9%;font-size:clamp(26px,3.2vw,46px);font-weight:400;letter-spacing:-.03em;line-height:1.05}
.lr-tcol .hd b{font-weight:700;color:#7E41F4}
.lr-tcol .para{position:absolute;left:8%;right:8%;bottom:9%;font-size:clamp(13px,1.25vw,16px);line-height:1.55}
@media(max-width:760px){.lr-cols{grid-template-columns:1fr}.lr-zoom .call p{font-size:13px}}
.lr-zoom .call p,.lr-zoom .call b{color:#fff!important}
.lr-cols .lr-field.tall{aspect-ratio:4/5;padding:8%}

/* Logo in use: a grid of the logo on brand backgrounds */
.lr-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lr-logos>div{aspect-ratio:4/3;border-radius:14px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.lr-logos img{width:66%;height:auto;display:block}
.lr-logos img.icon{width:28%}
.lr-logos span{position:absolute;left:14px;bottom:12px;font:500 10px/1 Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;opacity:.6}
.lr-logos.in>div{animation:lrUp .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 50ms)}
@media(max-width:760px){.lr-logos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lr-logos img.mono{filter:brightness(0)}
.lr-logos.two{grid-template-columns:repeat(2,minmax(0,1fr))}.lr-logos.two img{width:74%}
.lr .lr-impact{grid-template-columns:repeat(4,minmax(0,1fr))}
.lr .lr-impact strong{font-size:clamp(24px,2.4vw,38px)}
@media(max-width:1100px){.lr .lr-impact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.lr .lr-impact{grid-template-columns:1fr}}
.lr-swatch.short{aspect-ratio:16/5;padding:3.5% 4.5%}.lr-swatch.short .big{font-size:clamp(28px,4.2vw,62px)}.lr-swatch.short .job{font-size:clamp(12px,1.2vw,16px)}@media(max-width:760px){.lr-swatch.short{aspect-ratio:16/8}}
.lr-cols .lr-book-stage{aspect-ratio:4/3}.lr-cols .lr-book{height:auto;width:90%}

/* ---- v4: three type columns, slide-in, Ink Free ---- */
.lr-cols.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.lr-cols.three .lr-tcol .aa{font-size:clamp(80px,10vw,160px)}
.lr-cols.three .lr-tcol .hd{font-size:clamp(20px,2.2vw,32px)}
.lr-cols.three .lr-tcol .para{font-size:clamp(11px,.95vw,14px)}
.lr-flip>.f.on .sl{animation:lrSlideIn .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--d,0) * 70ms)}
@keyframes lrSlideIn{from{transform:translateX(-36px);opacity:0}to{transform:none;opacity:1}}
.lr-tcol.ink{background:#fff;color:#08023D}
.lr-tcol .aa-img{position:absolute;right:8%;bottom:7%;width:56%;height:auto}
.lr-tcol .chip{position:absolute;left:8%;right:22%;top:58%;padding:10px 12px;border:1px solid #E4DFEC;border-radius:8px;font:500 clamp(10px,.9vw,12px)/1.3 Inter,system-ui,sans-serif;color:#3C3741;display:flex;justify-content:space-between;background:#fff}
.lr-tcol .chip span{color:#08023D;font-weight:600}
.lr-tcol .ink-arrow{position:absolute;left:10%;top:30%;width:40%;height:auto;transform:rotate(18deg)}
.lr-tcol .ink-note{position:absolute;left:50%;top:22%;width:44%;height:auto}
.lr-flip>.f.on .ink-arrow{animation:lrArrowIn .9s cubic-bezier(.22,1,.36,1) both .15s}
.lr-flip>.f.on .ink-note{animation:lrSlideIn .6s cubic-bezier(.22,1,.36,1) both .95s}
@keyframes lrArrowIn{from{transform:translateX(-140%) rotate(18deg);opacity:0}to{transform:rotate(18deg);opacity:1}}
@media(max-width:1100px){.lr-cols.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.lr-cols.three{grid-template-columns:1fr}}
.lr-tcol .ink-note{left:8%;top:22%;width:52%}
.lr-tcol .ink-arrow{left:30%;top:36%;width:40%}
.lr-tcol .ink-note{top:17%}
.lr-tcol .ink-arrow{top:39%;left:32%;width:36%}
.lr-tcol .chip{top:64%}
.lr-tcol .ink-note{top:22%;width:48%}.lr-tcol .ink-arrow{top:41%}
.lr-relay>.lr-group{transition:opacity .5s ease}


/* Rounded frames everywhere */
.lr{--r:16px}
.lr .lr-hero,.lr .scroll-story-images .slot-art,.lr .scroll-story-images .slot-art img,.lr .lr-flip,.lr .lr-book-stage,.lr .lr-zoom,.lr .lr-lib,.lr .lr-flow,.lr .lr-anatomy,.lr .lr-logos>div,.lr .stage,.lr .lr-nine,.lr .lr-roles,.lr .lr-thread,.lr lee-social-mockup{border-radius:var(--r);overflow:hidden}
.lr .lr-phone .lr-flip{border-radius:25px}
.lr .stage .slot-art,.lr .stage .slot-art img,.lr .lr-trio .slot-art img,.lr .lr-pair .slot-art img{border-radius:6px}

/* Illustration examples */
.lr-ill{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;padding:7%;border-radius:var(--r,16px);overflow:hidden;border:1px solid #ECE8F1}
.lr-ill img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.lr-ill.wide{aspect-ratio:auto;padding:4%}

.lr-swatch.centre{justify-content:center;align-items:center;text-align:center}
.lr-swatch.centre .big{font-size:clamp(34px,5vw,72px)}

/* Portfolio review, 20 October: readable specimens and original icon artwork. */
.lr-tcol .weight-sample{position:absolute;left:8%;right:8%;bottom:10%;font-size:clamp(24px,2.8vw,42px);line-height:1.2;letter-spacing:-.025em}
.lr-book-kfs{transform:none}.lr-book-kfs .leaf{transition-duration:.933s}
.lr-cover-slide>.f.on{animation:lrCoverSlide .45s cubic-bezier(.22,1,.36,1) both}
@keyframes lrCoverSlide{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.lr-illustration-board,.lr-reusable-board{background:#fff;border-radius:16px;overflow:hidden}
.lr-illustration-intro{padding:32px 32px 12px}.lr-illustration-intro h3{font-size:24px;margin:0 0 12px}.lr-illustration-intro p{max-width:660px;font-size:15px;line-height:1.65}
.lr-illustration-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px 32px}
.lr-illustration-grid figure{margin:0;min-width:0}.lr-illustration-grid img{display:block;width:100%;height:340px;object-fit:contain}.lr-illustration-grid .comic-wide{grid-column:1/-1}.lr-illustration-grid .comic-wide img{height:auto}.lr-illustration-grid figcaption{font-size:12px;padding-top:12px;color:#625d70}
.lr-bento-live{padding:24px;display:grid;grid-template-columns:1.1fr 1fr;gap:20px}
.lr-bento-live section{border:1px solid #e6e1ed;border-radius:16px;padding:24px;min-width:0;background:#fff}
.lr-bento-live h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 28px;color:#625d70}
.lr-exact-icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 12px}.lr-exact-icon-grid div{display:flex;flex-direction:column;align-items:center;gap:12px;background:#f5f5f5;border-radius:10px;padding:16px 4px}.lr-exact-icon-grid img{width:64px;height:64px;object-fit:contain}.lr-exact-icon-grid span{font-size:10px}
.lr-component-heading{font-size:clamp(24px,3vw,38px);line-height:1.15}.lr-component-heading strong{color:#7E41F4}.lr-requirement-label{background:#FCB149;padding:6px 10px;border-radius:4px;font-size:12px}.lr-clause{background:#f3eefc;padding:16px;border-radius:10px;font-size:14px}.lr-status-bad,.lr-status-good{padding:20px;border-radius:10px}.lr-status-bad{background:#fce8e7}.lr-status-good{background:#e3f6ea}
@media(max-width:760px){.lr-bento-live,.lr-illustration-grid{grid-template-columns:1fr;padding:16px}.lr-illustration-grid .comic-wide{grid-column:auto}.lr-illustration-intro{padding:24px 16px 0}.lr-exact-icon-grid img{width:50px;height:50px}.lr-illustration-grid img{height:auto}}
@media(prefers-reduced-motion:reduce){.lr-cover-slide>.f.on{animation:none}}
.lr-bento-live>section{min-height:0!important;height:auto!important;display:block;position:static;padding:24px;margin:0}
.lr-bento-live>section h3{font-size:13px;line-height:1.4}

/* A compact, simultaneous type hierarchy replaces the three cycling columns. */
.lr-type-hierarchy{--specimen-body:20px;--specimen-heading:32.36px;border-radius:16px;overflow:hidden;background:#fff}
.lr-type-row{display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:24px;padding:24px 30px;min-height:112px}
.lr-type-heading{background:#08023D;color:#fff}.lr-type-body{background:#F3EEFC;color:#08023D}.lr-type-accent{background:#fff;color:#08023D;border:1px solid #e6e1ed;border-top:0;border-radius:0 0 16px 16px}
.lr-type-meta{display:flex;flex-direction:column;gap:5px;font:12px/1.4 Roboto,system-ui,sans-serif}.lr-type-meta b{font-size:14px;font-weight:500}.lr-type-meta span{opacity:.7}
.lr-type-hierarchy .lr-type-example p{margin:0;max-width:none;line-height:1.45;letter-spacing:0}
.lr-type-heading .lr-type-example p{font:400 var(--specimen-heading)/1.2 'Plus Jakarta Sans',sans-serif;letter-spacing:-.025em}.lr-type-heading strong{font-weight:700;color:#fff}
.lr-type-body .lr-type-example p{font:300 var(--specimen-body)/1.45 Roboto,sans-serif}.lr-type-body strong{font-weight:500}
.lr-type-weights{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:12px;line-height:1.4;opacity:.75}.lr-type-heading .lr-type-weights{font-family:'Plus Jakarta Sans',sans-serif}.lr-type-body .lr-type-weights{font-family:Roboto,sans-serif}
.lr-type-accent .lr-type-example>img{display:block;width:220px;height:21.538px;max-width:100%;object-fit:contain;object-position:left center}
@media(max-width:760px){.lr-type-hierarchy{--specimen-body:16px;--specimen-heading:25.888px}.lr-type-row{grid-template-columns:1fr;gap:12px;padding:20px;min-height:0}.lr-type-meta{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px}.lr-type-meta b{font-size:12px}.lr-type-meta span{font-size:10px}.lr-type-accent .lr-type-example>img{width:176px;height:17.23px}.lr-type-weights{gap:12px;margin-top:10px}}
.lr-type-hierarchy .lr-type-heading .lr-type-example p{color:#fff!important}

.lr-book-kfs .kfs-spread{display:grid;grid-template-columns:1fr 1fr;width:100%;height:100%;perspective:1800px}.lr-book-kfs .kfs-spread img{width:100%;height:100%;object-fit:contain;background:#fff;backface-visibility:hidden;transform-origin:right center}.lr-book-kfs .kfs-spread img+img{transform-origin:left center}

/* Type hierarchy ladder: real playbook sizes, scaled together */
.lr-typeladder{background:#fff;border-radius:16px;overflow:hidden;--k:1.25}
.lr-typeladder .tl-row{display:grid;grid-template-columns:140px minmax(0,1fr);gap:24px;align-items:baseline;padding:18px 28px;border-top:1px solid #EEEAF3}
.lr-typeladder .tl-row:first-child{border-top:0;padding-top:26px}
.lr-typeladder .tl-row:last-child{padding-bottom:26px}
.lr-typeladder .tl-k{font:500 10px/1.3 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6A6573}
.lr-typeladder .tl-k i{display:block;font-style:normal;letter-spacing:.02em;text-transform:none;color:#9a95a3;margin-top:3px}
.lr-typeladder p{margin:0;max-width:none}
.lr-typeladder .tl-h{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:400;font-size:calc(var(--s) * var(--k) * 1px);line-height:1.15;letter-spacing:-.025em;color:#08023D}
.lr-typeladder .tl-h b{font-weight:700;color:#7E41F4}
.lr-typeladder .tl-b{font:300 calc(14px * var(--k))/1.55 Roboto,system-ui,sans-serif;color:#08023D;max-width:640px}
.lr-typeladder .tl-b b{font-weight:500}
.lr-typeladder .tl-c img{height:calc(22px * var(--k));width:auto;display:block}
@media(max-width:760px){.lr-typeladder{--k:.85}.lr-typeladder .tl-row{grid-template-columns:1fr;gap:6px;padding:14px 18px}}

/* Reusable elements: no white box around the board or behind the label */
.lr-reusable-board{background:transparent!important;border-radius:0!important;overflow:visible!important}
.lr-bento-live{padding:0!important}
/* Golden-ratio pair: body 20px, heading 20 × 1.618, Ink Free at body size */
.lr-typeladder.golden{--body:20px}
.lr-typeladder.golden .tl-h{font-size:calc(var(--body) * 1.618)}
.lr-typeladder.golden .tl-b{font-size:var(--body)}
.lr-typeladder.golden .tl-c img{height:calc(var(--body) * 2.2)}
@media(max-width:760px){.lr-typeladder.golden{--body:16px}}
.lr-zoom.wide{aspect-ratio:16/10;background:#fff}
.lr-zoom.wide .call{left:auto;right:4%;bottom:5%;max-width:46%}
@media(max-width:760px){.lr-zoom.wide{aspect-ratio:4/5}.lr-zoom.wide .call{left:5%;right:5%;max-width:none}}

/* What I started with: live bento */
.lr-start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:12px}
.lr-start .t{position:relative;border-radius:16px;overflow:hidden;background:#fff;padding:22px;min-height:230px;display:flex;flex-direction:column;justify-content:center;background-size:cover;background-position:center}
.lr-start .k{position:absolute;left:22px;top:18px;font:500 10px/1 Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#6A6573;z-index:1}
.lr-start .logo{grid-column:span 2;padding:0;aspect-ratio:16/9}
.lr-start .logo video{width:100%;height:100%;object-fit:cover;display:block}
.lr-start .aa{background:#7E41F4;color:#fff}
.lr-start .aa .k,.lr-start .icon .k{color:#ffffffb3}
.lr-start .aa b{font:700 clamp(80px,9vw,140px)/.9 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.05em;margin-top:16px}
.lr-start .aa .f{font:500 13px/1.3 Inter,system-ui,sans-serif;margin-top:14px}
.lr-start .colour{grid-column:span 2;padding-top:48px}
.lr-start .sws{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;height:100%;min-height:260px}
.lr-start .sw{border-radius:10px;overflow:hidden;position:relative;display:flex;flex-direction:column}
.lr-start .sw.split i{flex:1;position:relative}
.lr-start .sw em{position:absolute;right:8px;bottom:7px;font:500 10px/1.3 Inter,system-ui,sans-serif;font-style:normal;text-align:right;color:#fff;letter-spacing:.02em}
.lr-start .sw em.lt{color:#08023D}
.lr-start .icon{align-items:center}
.lr-start .icon img{width:34%;height:auto}
.lr-start .type{grid-column:span 2;padding-top:48px;gap:6px;justify-content:flex-start}
.lr-start .type p{margin:0;font-size:clamp(26px,2.8vw,40px);line-height:1.15;color:#08023D;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #EEEAF3;padding:8px 0}
.lr-start .type p:last-child{border-bottom:0}
.lr-start .type small{font:400 12px/1 Inter,system-ui,sans-serif;color:#6A6573}
.lr-start .pattern{min-height:230px}
@media(max-width:760px){.lr-start{grid-template-columns:1fr}.lr-start .logo,.lr-start .colour,.lr-start .type{grid-column:auto}.lr-start .sws{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Type pair at 20 : 12 (Jakarta Regular + Bold purple highlight), with a reveal */
.lr-typeladder.golden{--body:22px}
.lr-typeladder.golden .tl-h{font-size:calc(var(--body) * 20 / 12);font-weight:400!important;color:#08023D!important}
.lr-typeladder.golden .tl-h b{font-weight:700!important;color:#7E41F4!important}
.lr-typeladder.golden .tl-c img{height:calc(var(--body) * 2.17)}
@media(max-width:760px){.lr-typeladder.golden{--body:15px}}
.lr-typeladder.anim .tl-row>*{opacity:0;transform:translateX(-28px);transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.lr-typeladder.anim.in .tl-row>*{opacity:1;transform:none}
.lr-typeladder.anim.in .tl-row:nth-child(2)>*{transition-delay:.35s}
.lr-typeladder.anim.in .tl-row:nth-child(3)>*{transition-delay:.7s}
.lr-typeladder.anim .tl-h b,.lr-typeladder.anim .tl-b b{color:inherit!important;font-weight:inherit!important;transition:color .5s ease}
.lr-typeladder.anim.in .tl-h b{color:#7E41F4!important;font-weight:700!important;transition-delay:1.2s}
.lr-typeladder.anim.in .tl-b b{font-weight:500!important;transition-delay:1.5s}
@media(prefers-reduced-motion:reduce){.lr-typeladder.anim .tl-row>*{opacity:1;transform:none}.lr-typeladder.anim .tl-h b{color:#7E41F4!important;font-weight:700!important}}

/* Font columns: hover to play, with a slight lift */
.lr-relay.hover-play>.lr-group .lr-flip{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease;cursor:pointer;position:relative}
.lr-relay.hover-play>.lr-group:hover .lr-flip{transform:scale(1.04);box-shadow:0 18px 40px -18px #08023D59;z-index:2}
/* Alphabet / sample line under each weight */
.lr-tcol .abc-line{position:absolute;left:8%;right:8%;bottom:7%;font-size:clamp(10px,.85vw,13px);line-height:1.55;letter-spacing:.01em}
.lr-tcol:has(.abc-line) .aa{bottom:24%}
/* What I started with: stitched patterns fill their tiles */
.lr-start .icon,.lr-start .pattern{background-size:cover;background-position:center}

/* Reusable elements: uneven white bento */
.lr-reuse{background:#fff;border-radius:16px;padding:14px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.lr-reuse .t{position:relative;border-radius:14px;padding:46px 26px 26px;background:#F7F5FA;min-width:0}
.lr-reuse .k{position:absolute;left:26px;top:20px;font:500 10px/1 Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#6A6573}
.lr-reuse .icons{grid-column:span 5;grid-row:span 2}
.lr-reuse .icons .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;height:100%}
.lr-reuse .icons .grid>div{background:#fff;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px 8px}
.lr-reuse .icons img{width:52px;height:52px;object-fit:contain}
.lr-reuse .icons span{font:400 12px/1.3 Roboto,system-ui,sans-serif;color:#3C3741}
.lr-reuse .req{grid-column:span 7;background:#fff;box-shadow:inset 0 0 0 1px #ECE8F1}
.lr-reuse .tag{display:inline-block;background:#FCB149;color:#08023D;font:500 10px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;padding:7px 10px;border-radius:4px;margin-bottom:16px}
.lr-reuse .hd{margin:0;font:400 clamp(24px,2.6vw,36px)/1.12 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.025em;color:#08023D;max-width:none}
.lr-reuse .hd.sm{font-size:clamp(20px,1.9vw,26px)}
.lr-reuse .hd b{font-weight:700;color:#7E41F4}
.lr-reuse .clause{margin:18px 0 0;background:#F3EEFC;border-radius:10px;padding:14px 16px;font:300 15px/1.5 Roboto,system-ui,sans-serif;color:#08023D;max-width:none}
.lr-reuse .vendor{grid-column:span 4;background:#fff;box-shadow:inset 0 0 0 1px #ECE8F1}
.lr-reuse .vendor ol{margin:18px 0 0;padding:0;list-style:none;counter-reset:q;display:grid;gap:12px}
.lr-reuse .vendor li{counter-increment:q;display:grid;grid-template-columns:24px 1fr;gap:10px;font:300 14px/1.5 Roboto,system-ui,sans-serif;color:#08023D}
.lr-reuse .vendor li:before{content:counter(q);width:24px;height:24px;border-radius:50%;background:#08023D;color:#FCB149;font:600 10px/24px Inter,system-ui,sans-serif;text-align:center}
.lr-reuse .note{grid-column:span 3;background:#F3EEFC}
.lr-reuse .note .body{margin:14px 0 0;font:300 13px/1.55 Roboto,system-ui,sans-serif;color:#08023D}
.lr-reuse .page{grid-column:span 4;background:#08023D;padding:46px 22px 0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.lr-reuse .page .k{color:#ffffffb3}
.lr-reuse .page img{width:88%;height:auto;display:block;border-radius:6px 6px 0 0}
.lr-reuse .fix{grid-column:span 8;background:#fff;box-shadow:inset 0 0 0 1px #ECE8F1;display:grid;grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);align-items:center;gap:14px}
.lr-reuse .fix .row{border-radius:12px;padding:22px 18px;display:flex;align-items:center;gap:14px;height:100%}
.lr-reuse .fix .bad{background:#FDE7E5}.lr-reuse .fix .good{background:#E3F6EA}
.lr-reuse .fix .row img{width:30px;height:30px;object-fit:contain;flex:none}
.lr-reuse .fix .row p{margin:0;font:400 clamp(16px,1.5vw,20px)/1.3 'Plus Jakarta Sans',system-ui,sans-serif;color:#08023D}
.lr-reuse .fix .arrow{width:100%;height:auto;transform:rotate(-12deg)}
@media(max-width:900px){.lr-reuse{grid-template-columns:1fr}.lr-reuse .t{grid-column:auto!important;grid-row:auto!important}.lr-reuse .fix{grid-template-columns:1fr}.lr-reuse .fix .arrow{width:70px;margin:0 auto;transform:rotate(80deg)}}
.lr-reuse .page{height:300px}
.lr-reuse .page img{width:78%}
.lr-reuse .fix .row{height:auto;align-self:center}

/* Mistake · fix: system tints, coloured marks with no background */
.lr-reuse .fix .bad{background:#FCE8E6}.lr-reuse .fix .good{background:#E5F5E9}
.lr-reuse .fix .row img{width:28px;height:auto;background:none}
/* Icon family merges with the icons' own grey */
.lr-reuse .icons,.lr-reuse .icons .grid>div{background:#F5F5F5}

/* Helvetica numerals: large numbers only */
.lr-typeladder .tl-n{margin:0;font:700 calc(var(--body,20px) * 20 / 12)/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.02em;color:#7E41F4}
.lr-typeladder .tl-n span{color:#08023D;margin-left:.3em}

/* Colour guideline */
.lr-cguide{background:#fff;border-radius:16px;padding:26px 28px 28px}
.lr-cguide .cg-bar{display:flex;height:54px;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px #E6E1EE}
.lr-cguide .cg-bar i{display:block;min-width:4px}
.lr-cguide .cg-note{margin:10px 0 22px;font:400 10px/1.4 Inter,system-ui,sans-serif;color:#6A6573;max-width:none}
.lr-cguide .cg-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.lr-cguide h4{margin:0 0 10px;font:500 10px/1 Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#6A6573}
.lr-cguide ul{list-style:none;margin:0;padding:0}
.lr-cguide li{display:grid;grid-template-columns:34px 104px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid #F0EDF4}
.lr-cguide li>i{width:34px;height:34px;border-radius:8px;box-shadow:inset 0 0 0 1px #00000014}
.lr-cguide li b{display:block;font:500 13px/1.2 Inter,system-ui,sans-serif;color:#08023D}
.lr-cguide li code{font:400 10px/1.3 ui-monospace,Menlo,monospace;color:#6A6573}
.lr-cguide li span{font:300 13px/1.35 Roboto,system-ui,sans-serif;color:#3C3741}
.lr-cguide li em{font:500 10px/1 Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.05em;text-transform:uppercase;padding:5px 8px;border-radius:20px;white-space:nowrap;background:#F2F2F2;color:#3C3741}
.lr-cguide li em.t-always,.lr-cguide li em.t-every{background:#08023D;color:#fff}
.lr-cguide li em.t-often{background:#E9E0FC;color:#08023D}
.lr-cguide li em.t-support{background:#FFF5E6;color:#08023D}
@media(max-width:860px){.lr-cguide .cg-cols{grid-template-columns:1fr}.lr-cguide li{grid-template-columns:34px 1fr auto}.lr-cguide li span{grid-column:2/4}}

/* Illustration tour: travel left to right; hover a point to read at your own pace */
.lr-ilt{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:12px;background:#fff;border-radius:16px;padding:12px;height:440px}
.lr-ilt .ilt-stage{position:relative;overflow:hidden;border-radius:12px;background:#FFF5E6}
.lr-ilt .ilt-strip{position:absolute;left:0;top:0;height:100%;display:flex;gap:24px;padding:18px;transform-origin:0 0;transition:transform 1.1s cubic-bezier(.65,0,.35,1);will-change:transform}
.lr-ilt .ilt-strip img{height:100%;width:auto;display:block;border-radius:6px;background:#fff}
.lr-ilt .ilt-list{list-style:none;margin:0;padding:6px 10px;display:flex;flex-direction:column;justify-content:space-between;overflow:auto}
.lr-ilt li{display:grid;grid-template-columns:62px 1fr;gap:14px;align-items:center;padding:10px 12px;border-radius:12px;cursor:pointer;transition:background .35s ease}
.lr-ilt li .n{font:700 52px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.04em;color:#E2DCEA;transition:color .35s ease}
.lr-ilt li p{margin:0;font:300 13.5px/1.5 Roboto,system-ui,sans-serif;color:#6A6573;transition:color .35s ease;max-width:none}
.lr-ilt li p b{font:600 14px/1.4 'Plus Jakarta Sans',system-ui,sans-serif;color:inherit}
.lr-ilt li.on{background:#F3EEFC}
.lr-ilt li.on .n{color:#7E41F4}
.lr-ilt li.on p{color:#08023D}
@media(max-width:860px){.lr-ilt{grid-template-columns:1fr;height:auto}.lr-ilt .ilt-stage{height:300px}.lr-ilt li .n{font-size:38px}.lr-ilt li{grid-template-columns:46px 1fr}}
@media(prefers-reduced-motion:reduce){.lr-ilt .ilt-strip{transition:none}}

/* Colour usage palette: blocks sized by how often each colour is used */
.lr-palette{background:#fff;border-radius:16px;overflow:hidden}
.lr-palette .pl-head{display:grid;grid-template-columns:1fr minmax(0,320px);gap:24px;align-items:center;padding:26px 28px}
.lr-palette h3{margin:0;font:400 clamp(30px,3.6vw,48px)/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.035em;color:#08023D}
.lr-palette h3 b{font-weight:700;color:#7E41F4}
.lr-palette .pl-head p{margin:0;font:300 12px/1.55 Roboto,system-ui,sans-serif;color:#3C3741;max-width:none}
.lr-palette .pl-blocks{display:flex;height:360px}
.lr-palette .pb{position:relative;padding:16px 16px;min-width:0;display:flex;flex-direction:column}
.lr-palette .pb.bordered{box-shadow:inset 0 1px 0 #ECE8F1,inset -1px 0 0 #ECE8F1}
.lr-palette b{font:500 clamp(15px,1.4vw,20px)/1.15 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.01em}
.lr-palette code{font:400 10px/1.6 ui-monospace,Menlo,monospace;opacity:.75}
.lr-palette .pb span{margin-top:auto;font:300 12px/1.35 Roboto,system-ui,sans-serif;opacity:.85}
.lr-palette .pstack{flex:12;display:flex;flex-direction:column;min-width:0}
.lr-palette .ps{flex:1;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:8px;align-content:center;padding:0 12px}
.lr-palette .ps b{font-size:12px}
.lr-palette .ps code{font-size:10px;grid-row:2}
.lr-palette .ps span{grid-row:1/3;grid-column:2;align-self:center;font:300 10px/1.2 Roboto,system-ui,sans-serif;opacity:.8}
@media(max-width:860px){.lr-palette .pl-head{grid-template-columns:1fr}.lr-palette .pl-blocks{flex-wrap:wrap;height:auto}.lr-palette .pb{flex:1 1 45%!important;min-height:120px}.lr-palette .pstack{flex:1 1 100%}.lr-palette .ps{min-height:46px}}
.lr-palette .pstack{flex:16}.lr-palette .ps b{white-space:nowrap}
.lr-typeladder .tl-row{align-items:center}
/* Illustration tour v2: one cropped illustration at a time, sliding in from the left */
.lr-ilt.cuts .ilt-stage{display:flex;align-items:center;justify-content:center;background:#FFF5E6}
.lr-ilt.cuts .cut{position:absolute;max-width:78%;max-height:80%;width:auto;height:auto;border-radius:10px;box-shadow:0 18px 36px -20px #08023D55;opacity:0;transform:translateX(-60px);transition:opacity .55s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.lr-ilt.cuts .cut.on{opacity:1;transform:none}
.lr-ilt.cuts .cut.out{opacity:0;transform:translateX(60px)}

/* Reusable bento v3: playbook tall on the left with mistake/fix above it; smaller icons, bigger vendor questions */
.lr-reuse{grid-template-areas:
  "fix fix fix fix fix req req req req req req req"
  "page page page page page icons icons icons icons note note note"
  "page page page page page vendor vendor vendor vendor vendor vendor vendor"}
.lr-reuse .t{grid-column:auto!important;grid-row:auto!important}
.lr-reuse .fix{grid-area:fix;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:10px;padding:42px 18px 18px}
.lr-reuse .fix .row{padding:14px 12px;gap:10px}
.lr-reuse .fix .row img{width:22px}
.lr-reuse .fix .row p{font-size:clamp(13px,1.1vw,15px)}
.lr-reuse .fix .arrow{width:100%;height:auto;transform:none;display:block}
.lr-reuse .req{grid-area:req}
.lr-reuse .page{grid-area:page;height:auto;min-height:520px}
.lr-reuse .page img{width:84%}
.lr-reuse .icons{grid-area:icons;padding:42px 16px 16px}
.lr-reuse .icons .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;height:auto}
.lr-reuse .icons .grid>div{padding:10px 4px;gap:6px}
.lr-reuse .icons img{width:32px;height:32px}
.lr-reuse .icons span{font-size:10px}
.lr-reuse .note{grid-area:note}
.lr-reuse .vendor{grid-area:vendor;padding:48px 30px 30px}
.lr-reuse .vendor .hd.sm{font-size:clamp(24px,2.4vw,32px)}
.lr-reuse .vendor ol{margin-top:22px;gap:16px}
.lr-reuse .vendor li{font-size:16px;grid-template-columns:30px 1fr}
.lr-reuse .vendor li:before{width:30px;height:30px;line-height:30px;font-size:13px}
@media(max-width:900px){.lr-reuse{grid-template-areas:none}.lr-reuse .t{grid-area:auto!important}.lr-reuse .page{min-height:360px}.lr-reuse .fix{grid-template-columns:1fr}.lr-reuse .fix .arrow{width:60px;margin:0 auto;transform:rotate(90deg)}}
/* Icon family as a short strip along the bottom right */
.lr-reuse{grid-template-areas:
  "fix fix fix fix fix req req req req req req req"
  "page page page page page vendor vendor vendor vendor note note note"
  "page page page page page icons icons icons icons icons icons icons"}
.lr-reuse .icons{padding:38px 16px 14px}
.lr-reuse .icons .grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.lr-reuse .icons .grid>div{padding:8px 2px}
.lr-reuse .icons img{width:30px;height:30px}
@media(max-width:900px){.lr-reuse .icons .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lr-reuse .fix{grid-area:fix!important}.lr-reuse .req{grid-area:req!important}.lr-reuse .page{grid-area:page!important}.lr-reuse .vendor{grid-area:vendor!important}.lr-reuse .note{grid-area:note!important}.lr-reuse .icons{grid-area:icons!important}
@media(max-width:900px){.lr-reuse .t{grid-area:auto!important}}
/* Flipbooks: real page turn, flat (no tilt), 25% slower than the original */
.lr-book{transform:none!important}
.lr-book .leaf{transition-duration:.875s!important}

/* Template anatomy: zoom tour with a hover list (same pattern as the illustration tour) */
.lr-ilt.ztour .zstage{background:#fff}
.lr-ilt.ztour .zstage img{position:absolute;left:0;top:0;width:auto;max-width:none;height:auto;transform-origin:0 0;transition:transform .95s cubic-bezier(.65,0,.35,1);border-radius:0}
.lr-ilt.ztour .ring{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:2px solid #7E41F4;opacity:0;pointer-events:none}
.lr-ilt.ztour.zoomed .ring{opacity:1;animation:lrPulse 1.6s ease-out infinite .9s}
/* journeys on its own row: a wide frame */
.lr-ilt.ztour~.lr-group .lr-field.tall,.lr-group:has(.lr-ilt.ztour)+.lr-group .lr-field.tall{aspect-ratio:16/10}
/* Point 1: the two character illustrations side by side; hovering zooms into the characters */
.lr-ilt.cuts .cut.zoomable{max-width:92%;box-shadow:none;border-radius:0;transform-origin:50% 46%}
.lr-ilt.cuts .cut.zoomable.on.hz{transform:scale(1.38);transition:opacity .55s ease,transform 1.1s cubic-bezier(.22,1,.36,1)}
/* Same template, two journeys: static, side by side on white */
.lr-journeys{background:#fff;border-radius:16px;padding:5% 6%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5%}
.lr-journeys figure{margin:0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.lr-journeys img{width:100%;height:auto;display:block;box-shadow:0 14px 34px -14px #1d162840;border-radius:4px}
@media(max-width:760px){.lr-journeys{grid-template-columns:1fr;gap:28px}}
/* Point 1 magnifier: follows the cursor */
.lr-ilt.cuts .cut.zoomable{transition:opacity .55s ease,transform .5s cubic-bezier(.22,1,.36,1),transform-origin .25s ease-out;cursor:zoom-in}
.lr-ilt.cuts .cut.zoomable.on.hz{transform:scale(2);transition:opacity .55s ease,transform .5s cubic-bezier(.22,1,.36,1),transform-origin .25s ease-out}
/* Point 2: generated colour-scheme board with the measured derivative palettes */
.lr-ilt.cuts .cut.cscheme{max-width:94%;max-height:none;box-shadow:none;background:none;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.lr-ilt.cuts .cut.cscheme img{width:100%;height:auto;max-height:300px;object-fit:contain;border-radius:8px}
.lr-ilt.cuts .cs-rows{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lr-ilt.cuts .cs-rows>div{background:#fff;border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.lr-ilt.cuts .cs-rows b{font:500 10px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6A6573}
.lr-ilt.cuts .cs-rows span{display:flex;gap:4px}
.lr-ilt.cuts .cs-rows i{flex:1;height:30px;border-radius:5px;position:relative;box-shadow:inset 0 0 0 1px #0000000f}
.lr-ilt.cuts .cs-rows em{position:absolute;left:0;right:0;bottom:-15px;font:400 10px/1 ui-monospace,Menlo,monospace;font-style:normal;text-align:center;color:#6A6573}
.lr-ilt.cuts .cs-rows>div{padding-bottom:20px}
/* Cut-out illustrations sit directly on the stage, no card */
.lr-ilt.cuts .cut.free{box-shadow:none;border-radius:0;max-width:80%;max-height:84%;filter:drop-shadow(0 14px 22px #08023D26)}
/* Flipbook controls: arrows appear on hover */
.lr-book-stage{position:relative}
.lr-book-stage .bk-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:#ffffffe6;color:#08023D;font:400 24px/1 'Plus Jakarta Sans',system-ui,sans-serif;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .25s ease,transform .25s ease;box-shadow:0 6px 18px -6px #08023D55;z-index:3}
.lr-book-stage .bk-nav.prev{left:14px}.lr-book-stage .bk-nav.next{right:14px}
.lr-book-stage:hover .bk-nav{opacity:1}
.lr-book-stage .bk-nav:hover{transform:translateY(-50%) scale(1.08)}
@media(hover:none){.lr-book-stage .bk-nav{opacity:.9}}
/* Point 2: same magnifier, clipped to the illustration area so the palettes stay put */
.lr-ilt.cuts .cscheme .zwrap{overflow:hidden;border-radius:8px}
.lr-ilt.cuts .cscheme .zwrap img{display:block;width:100%;height:auto;max-height:300px;object-fit:contain;transform-origin:50% 50%;transition:transform .5s cubic-bezier(.22,1,.36,1),transform-origin .25s ease-out;cursor:zoom-in}
.lr-ilt.cuts .cscheme .zwrap img.hz{transform:scale(2)}
/* Point 3: phones a little smaller */
.lr-ilt.cuts .cut.free{max-width:66%;max-height:72%}
/* Oct 2026: icon grid in illustration point 4, post grid, impact pills, 24:12 */
.lr-ilt.cuts .cut.icongrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 26px;width:82%;max-width:82%;max-height:none;box-shadow:none;border-radius:0;background:none;align-items:center;justify-items:center}
.lr-ilt.cuts .cut.icongrid img{width:100%;max-width:84px;height:auto;aspect-ratio:1;object-fit:contain}
@media(max-width:860px){.lr-ilt.cuts .cut.icongrid{gap:12px 16px}.lr-ilt.cuts .cut.icongrid img{max-width:54px}}
.lr-posts{display:flex;flex-direction:column;gap:12px;background:#fff;border-radius:16px;padding:12px}
.lr-posts .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lr-posts .row.two{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.lr-posts img{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 0 0 1px #0000000d}
.lr-posts .row:not(.two):not(.tall) img{aspect-ratio:1134/1422;object-fit:cover}
.lr-posts .row.tall img{aspect-ratio:628/1200;object-fit:cover}
.lr-start .icon{background:#06003B!important;background-image:none!important}
.lr .lr-impact{background:none;border:0;gap:12px}
.lr .lr-impact>div{background:none;padding:0}
.lr .lr-impact strong{display:inline-flex;align-items:center;gap:.3em;background:#fff;border-radius:999px;padding:.38em .9em .42em;box-shadow:0 0 0 1px #E4DFEC}
.lr .lr-impact p{margin-top:12px;padding-left:.4em}
.lr-typeladder.golden .tl-h{font-size:calc(var(--body) * 24 / 12)}
.lr-posts{max-width:820px;margin:0 auto}
/* icons and scene sit on full white */
.lr-ilt.cuts .cut.icongrid,.lr-ilt.cuts .cut.scenepair{inset:0;width:100%;max-width:none;height:100%;max-height:none;background:#fff;border-radius:0;box-shadow:none;box-sizing:border-box}
.lr-ilt.cuts .cut.icongrid{padding:8% 9%;align-content:center}
.lr-ilt.cuts .cut.scenepair{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 10px}
.lr-ilt.cuts .cut.scenepair img{width:100%;height:auto;display:block;padding:0 10px;box-sizing:border-box}
.lr-ilt.cuts .cut.scenepair img+img{border-left:1px solid #E4DFEC}
@media(max-width:860px){.lr-ilt.cuts .cut.scenepair img{padding:0 4px}}
/* social and hiring: same box size, full column width like every other section */
.lr-posts{max-width:none;margin:0}
.lr-posts .row img,.lr-posts .row.two img{aspect-ratio:4/5;object-fit:cover}
/* points 3–5 zoom under the cursor too; the scene also zooms in by itself */
.lr-ilt.cuts .cut.free,.lr-ilt.cuts .cut.icongrid{transition:opacity .55s ease,transform .5s cubic-bezier(.22,1,.36,1),transform-origin .25s ease-out;cursor:zoom-in}
.lr-ilt.cuts .cut.free.on.hz,.lr-ilt.cuts .cut.icongrid.on.hz{transform:scale(2)}
.lr-ilt.cuts .cut.scenepair img+img{border-left:0}
.lr-ilt.cuts .scenepair .zwrap{overflow:hidden;padding:0}
.lr-ilt.cuts .scenepair .zwrap+.zwrap{border-left:1px solid #E4DFEC}
.lr-ilt.cuts .scenepair .zwrap img{padding:0 10px;transform-origin:var(--o,50% 50%);transition:transform 2.6s cubic-bezier(.33,0,.2,1),transform-origin .25s ease-out;cursor:zoom-in}
.lr-ilt.cuts .scenepair.auto .zwrap img{transform:scale(1.55)}
.lr-ilt.cuts .scenepair .zwrap img.hz{transform:scale(2);transition:transform .5s cubic-bezier(.22,1,.36,1),transform-origin .25s ease-out}
@media(prefers-reduced-motion:reduce){.lr-ilt.cuts .scenepair.auto .zwrap img{transform:none}}
.lr-ilt.cuts .ilt-stage{background:#fff!important}
/* highlight is there from the start: no delayed colour or weight swap */
.lr-typeladder.anim .tl-h b,.lr-typeladder.anim.in .tl-h b{color:#7E41F4!important;font-weight:700!important;transition:none!important}
.lr-typeladder.anim .tl-b b,.lr-typeladder.anim.in .tl-b b{font-weight:500!important;transition:none!important}
/* stories reel under the LinkedIn carousel */
.lr-reel{border-radius:16px;overflow:hidden;background:#070039;aspect-ratio:960/604}
.lr-reel video{display:block;width:100%;height:100%;object-fit:cover}
/* impact pills: first stat gets more room, pills never spill into the next column */
.lr .lr-impact{display:grid;grid-template-columns:minmax(0,1.45fr) repeat(3,minmax(0,1fr));gap:28px 20px}
.lr .lr-impact>div{min-width:0}
.lr .lr-impact strong{font-size:clamp(20px,2.05vw,34px);max-width:100%;box-sizing:border-box;white-space:nowrap}
.lr .lr-impact p{max-width:34ch}
@media(max-width:1100px){.lr .lr-impact{grid-template-columns:repeat(2,minmax(0,1fr))}.lr .lr-impact strong{font-size:clamp(22px,3.4vw,32px)}}
@media(max-width:560px){.lr .lr-impact{grid-template-columns:1fr;gap:22px}.lr .lr-impact strong{font-size:clamp(22px,7vw,30px)}}
/* phones: image column never wider than the screen */
.lr .scroll-story-images,.lr .scroll-story-images>*,.lr .lr-group,.lr .lr-cols>*{min-width:0;max-width:100%}
/* callout on one line, centred with its label */
.lr-typeladder .tl-row:has(.tl-c){align-items:center}
.lr-typeladder.golden .tl-c img{height:calc(var(--body) * 1.25);width:auto;max-width:100%;object-fit:contain}
/* icon family centred in its tile */
.lr-reuse .icons{display:flex;flex-direction:column;justify-content:center}
.lr-reuse .icons .grid{height:auto;align-content:center;justify-content:center;width:100%}
/* phones: no tile wider than the screen */
.lr-start{grid-template-columns:repeat(3,minmax(0,1fr))}
.lr-start .t,.lr-reuse .t,.lr-reuse .fix .row{min-width:0}
.lr-reuse .fix .row p{overflow-wrap:anywhere}
@media(max-width:760px){.lr-start{grid-template-columns:minmax(0,1fr)}.lr-start .logo{aspect-ratio:16/9;width:100%}}
@media(max-width:900px){.lr-reuse{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:none!important}.lr-reuse .t,.lr-reuse .fix{grid-area:auto!important;grid-column:auto!important}.lr-reuse .fix{grid-template-columns:minmax(0,1fr)!important}}
.lr-reuse .icons{padding-top:38px!important;padding-bottom:38px!important}
.lr .lr-group>.lr-field{border-radius:var(--r,16px);overflow:hidden}
/* hero: Leegality gradient loop with animated film grain */
.lr-grad{position:relative;aspect-ratio:16/9;overflow:hidden;background:#08023D;border-radius:var(--r,16px);isolation:isolate}
.lr-grad video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lr-grad::after{content:"";position:absolute;inset:-60%;background:url(/assets/leegality-case/grain.png) 0 0/128px 128px;opacity:.3;mix-blend-mode:overlay;pointer-events:none;animation:lrGrain .5s steps(4) infinite}
@keyframes lrGrain{0%{transform:translate(0,0)}25%{transform:translate(-7%,4%)}50%{transform:translate(5%,-6%)}75%{transform:translate(-3%,-9%)}100%{transform:translate(8%,3%)}}
@media(prefers-reduced-motion:reduce){.lr-grad::after{animation:none}}
/* hiring: both posts whole, inside matching 4:5 frames */
.lr-posts.hiring .row.two img{aspect-ratio:4/5;object-fit:contain;background:#F3F1F7;padding:6%;box-sizing:border-box;box-shadow:none}
/* closing impact block, same pattern as L77 */
.lr .lr-results .launch-metrics{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
.lr .lr-results .launch-metrics dd{white-space:nowrap;font-size:clamp(26px,3vw,48px)}
.lr .lr-results>p{margin-top:22px}
@media(max-width:1100px){.lr .lr-results .launch-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.lr .lr-results .launch-metrics{grid-template-columns:1fr}}
/* section labels: handwritten, sentence case, like the homepage and L77 */
.lr .sticky-story-copy .num{font-family:Caveat,'Bradley Hand',cursive;font-weight:600;font-size:30px}
.lr .sticky-story-copy .num small{font-family:inherit;font-weight:600;font-size:26px;letter-spacing:0;text-transform:none;margin-left:8px;vertical-align:baseline;color:var(--ink)}
/* type columns: no alphabet lines, so shorter square cards */
.lr-cols.three .lr-tcol{aspect-ratio:1/1}
.lr-cols.three .lr-tcol .aa{font-size:clamp(70px,8vw,130px)}
/* six roles: slim band */
.lr-roles-short .lr-swatch.short{aspect-ratio:16/2.6;padding:2.2% 4%}
.lr-roles-short .lr-swatch.short .big{font-size:clamp(22px,3vw,44px)}
@media(max-width:760px){.lr-roles-short .lr-swatch.short{aspect-ratio:16/5}}
/* colour usage: hex only, as the headline */
.lr-palette .pb code{font:500 clamp(15px,1.5vw,22px)/1.2 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.01em;opacity:1}
.lr-palette .ps code{grid-row:1;font:500 clamp(12px,1vw,15px)/1.2 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.01em;align-self:center}
/* colour usage v3: hex as headline (old name size), role beneath */
.lr-palette .pb b{font:500 clamp(18px,2vw,30px)/1.1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.01em}
.lr-palette .pb code.d{margin-top:6px;font:300 clamp(12px,1vw,14px)/1.35 Roboto,system-ui,sans-serif;opacity:.85;letter-spacing:0}
.lr-palette .ps{grid-template-columns:1fr;grid-template-rows:auto auto}
.lr-palette .ps b{grid-row:1;font:500 clamp(13px,1.1vw,16px)/1.2 'Plus Jakarta Sans',system-ui,sans-serif}
.lr-palette .ps code.d{grid-row:2;font:300 10px/1.3 Roboto,system-ui,sans-serif;opacity:.85;letter-spacing:0}
/* colour usage labels match the type columns: bold name, small caps role */
.lr-palette .pb b,.lr-palette .ps b{font:600 clamp(14px,1.3vw,17px)/1.4 Inter,system-ui,sans-serif;letter-spacing:.02em}
.lr-palette .pb code.d,.lr-palette .ps code.d{margin-top:0;font:500 clamp(11px,1vw,13px)/1.4 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.lr-palette .ps code.d{font-size:10px}
/* least-used status colours share one row */
.lr-palette .ps-pair{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:0}
.lr-palette .ps-pair .ps{padding:0 10px}
/* Ink Free callout: smaller arrow running from the note down to the value */
.lr-cols.three .lr-tcol.ink .ink-note{left:8%;top:27%;width:46%}
.lr-cols.three .lr-tcol.ink .ink-arrow{left:47%;top:40%;width:21%;transform:rotate(28deg);transform-origin:0 0}
.lr-cols.three .lr-tcol.ink .chip{top:62%;left:8%;right:12%}
.lr-cols.three .lr-flip>.f.on.ink .ink-arrow{animation:lrArrowIn2 .8s cubic-bezier(.22,1,.36,1) both .9s}
.lr-cols.three .lr-flip>.f.on.ink .ink-note{animation:lrSlideIn .6s cubic-bezier(.22,1,.36,1) both .2s}
@keyframes lrArrowIn2{from{transform:translate(-30%,-20%) rotate(28deg);opacity:0}to{transform:rotate(28deg);opacity:1}}
@media(prefers-reduced-motion:reduce){.lr-cols.three .lr-flip>.f.on.ink .ink-arrow,.lr-cols.three .lr-flip>.f.on.ink .ink-note{animation:none}}
.lr-palette .ps-pair .ps{padding:0 8px}
.lr-palette .ps-pair .ps b{font-size:clamp(11px,.95vw,14px)}
.lr-palette .ps-pair .ps code.d{font-size:10px;letter-spacing:.06em}
.lr-cols.three .lr-tcol.ink .ink-arrow{left:54%;top:42%;width:20%;transform:rotate(35deg)}
@keyframes lrArrowIn2{from{transform:translate(-30%,-20%) rotate(35deg);opacity:0}to{transform:rotate(35deg);opacity:1}}
/* colour usage descriptions: light, sentence case, one line at full width */
.lr-palette .pb code.d,.lr-palette .ps code.d{font:300 12px/1.35 Roboto,system-ui,sans-serif;letter-spacing:0;text-transform:none;opacity:.85;white-space:nowrap}
.lr-palette .ps code.d,.lr-palette .ps-pair .ps code.d{font-size:10px;letter-spacing:0}
@media(max-width:1100px){.lr-palette .pb code.d,.lr-palette .ps code.d{white-space:normal}}
@media(min-width:1101px){.lr-palette .pb code.d{font-size:10px}}
/* hiring: both posts fill identical 4:5 frames inside the one white card, no grey backing */
.lr-posts.hiring .row.two img{aspect-ratio:4/5;object-fit:cover;object-position:center;background:none;padding:0;border-radius:10px;box-shadow:none}
/* logo in use: four wordmark tiles */
.lr .lr-logos.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.lr .lr-logos.four>div{aspect-ratio:16/9}
.lr .lr-logos.four img{width:58%;height:auto;max-height:none}
.lr .lr-logos.four>.outlined{box-shadow:inset 0 0 0 1px #D9CFF0}
@media(max-width:760px){.lr .lr-logos.four{grid-template-columns:1fr}}
/* logo in use: 2 wide tiles on top, 3 below */
.lr .lr-logos.five{grid-template-columns:repeat(6,minmax(0,1fr))}
.lr .lr-logos.five>div{grid-column:span 2;aspect-ratio:4/3}
.lr .lr-logos.five>div.wide{grid-column:span 3;aspect-ratio:16/8}
.lr .lr-logos.five img{width:62%;height:auto;max-height:none}
.lr .lr-logos.five>.wide img{width:50%}
.lr .lr-logos.five>.outlined{box-shadow:inset 0 0 0 1px #DDD5EC}
@media(max-width:760px){.lr .lr-logos.five{grid-template-columns:1fr}.lr .lr-logos.five>div,.lr .lr-logos.five>div.wide{grid-column:auto;aspect-ratio:16/9}}
/* photo mockup in a book-stage slot */
.lr-book-stage.lr-photo{padding:0;background:#E9E6E1}
.lr-book-stage.lr-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* type: font cards ~35%, hierarchy ~65% of a screen */
.lr-cols.three .lr-tcol{aspect-ratio:auto;height:clamp(220px,27vh,300px)}
.lr-cols.three .lr-tcol .aa{font-size:clamp(64px,7vw,112px)}
.lr-typeladder.golden{display:flex;flex-direction:column;min-height:clamp(420px,52vh,580px)}
.lr-typeladder.golden .tl-row{flex:1;align-items:center}
@media(max-width:760px){.lr-cols.three .lr-tcol{height:auto;aspect-ratio:1/1}.lr-typeladder.golden{min-height:0}}
.lr-typeladder.golden{min-height:clamp(440px,60vh,620px)}
/* colour usage taller: with the six-roles band it fills about a screen */
@media(min-width:861px){.lr-palette .pl-blocks{height:clamp(420px,63vh,600px)}}
/* numbered lists in Template anatomy and Illustration style: light grey highlight */
.lr-ilt li.on{background:#F2F2F2}
/* type: hierarchy -15%, font cards -5% */
.lr-cols.three .lr-tcol{height:clamp(209px,25.65vh,285px)}
.lr-typeladder.golden{min-height:clamp(374px,51vh,527px)}
/* trims: slim journeys strip, 4-up culture row, three playbooks */
.lr-journeys.slim{padding:3% 4%;justify-content:center;grid-template-columns:repeat(2,auto);gap:4%}
.lr-journeys.slim img{width:auto;height:clamp(240px,34vh,360px)}
.lr-culture{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;background:#fff;border-radius:16px;padding:12px}
.lr-culture img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;display:block}
.lr-culture img.contain{object-fit:contain}
.lr-three-books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4%;background:#fff;border-radius:16px;padding:5% 7%}
.lr-three-books figure{margin:0;display:flex;flex-direction:column;gap:12px}
.lr-three-books img{width:100%;height:auto;display:block;box-shadow:0 14px 30px -14px #1d162855;border-radius:3px}
.lr-three-books figcaption{font:300 13px/1.4 Roboto,system-ui,sans-serif;color:#6A6573}
.lr-three-books figcaption b{display:block;font:600 15px/1.3 Inter,system-ui,sans-serif;color:#08023D}
@media(max-width:760px){.lr-culture{grid-template-columns:repeat(2,minmax(0,1fr))}.lr-journeys.slim{grid-template-columns:1fr 1fr}.lr-journeys.slim img{width:100%;height:auto}}
.lr-three-books{grid-template-columns:repeat(3,auto);justify-content:center;gap:5%;padding:3% 4%}
.lr-three-books img{width:auto;height:clamp(220px,31vh,320px)}
@media(max-width:760px){.lr-three-books{grid-template-columns:repeat(3,minmax(0,1fr))}.lr-three-books img{width:100%;height:auto}}